grobes layout
This commit is contained in:
parent
4f64933555
commit
09f72a2893
|
@ -1,7 +1,15 @@
|
||||||
{
|
{
|
||||||
"vetur.validation.template": false,
|
"editor.formatOnPaste": true,
|
||||||
"vetur.format.enable": false,
|
"editor.formatOnSave": true,
|
||||||
"eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
|
"editor.codeActionsOnSave": {
|
||||||
"typescript.tsdk": "node_modules/typescript/lib",
|
"source.fixAll": true
|
||||||
"vetur.experimental.templateInterpolationService": true
|
},
|
||||||
}
|
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
|
||||||
|
"javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
|
||||||
|
"javascript.format.placeOpenBraceOnNewLineForFunctions": false,
|
||||||
|
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
|
||||||
|
"typescript.format.placeOpenBraceOnNewLineForControlBlocks": false,
|
||||||
|
"typescript.format.placeOpenBraceOnNewLineForFunctions": false,
|
||||||
|
"vetur.format.defaultFormatter.html": "js-beautify-html",
|
||||||
|
"vetur.format.defaultFormatter.js": "vscode-typescript"
|
||||||
|
}
|
File diff suppressed because it is too large
Load Diff
|
@ -37,7 +37,7 @@ module.exports = configure(function (ctx) {
|
||||||
// https://github.com/quasarframework/quasar/tree/dev/extras
|
// https://github.com/quasarframework/quasar/tree/dev/extras
|
||||||
extras: [
|
extras: [
|
||||||
// 'ionicons-v4',
|
// 'ionicons-v4',
|
||||||
// 'mdi-v5',
|
'mdi-v5',
|
||||||
// 'fontawesome-v5',
|
// 'fontawesome-v5',
|
||||||
// 'eva-icons',
|
// 'eva-icons',
|
||||||
// 'themify',
|
// 'themify',
|
||||||
|
@ -50,7 +50,7 @@ module.exports = configure(function (ctx) {
|
||||||
|
|
||||||
// Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
|
// Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
|
||||||
build: {
|
build: {
|
||||||
vueRouterMode: 'hash', // available values: 'hash', 'history'
|
vueRouterMode: 'history', // available values: 'hash', 'history'
|
||||||
|
|
||||||
// transpile: false,
|
// transpile: false,
|
||||||
|
|
||||||
|
@ -70,14 +70,14 @@ module.exports = configure(function (ctx) {
|
||||||
|
|
||||||
// https://quasar.dev/quasar-cli/handling-webpack
|
// https://quasar.dev/quasar-cli/handling-webpack
|
||||||
extendWebpack (cfg) {
|
extendWebpack (cfg) {
|
||||||
// linting is slow in TS projects, we execute it only for production builds
|
// linting is slow in TS projects, we execute it only for production builds
|
||||||
if (ctx.prod) {
|
if (ctx.prod) {
|
||||||
cfg.module.rules.push({
|
cfg.module.rules.push({
|
||||||
enforce: 'pre',
|
enforce: 'pre',
|
||||||
test: /\.(js|vue)$/,
|
test: /\.(js|vue)$/,
|
||||||
loader: 'eslint-loader',
|
loader: 'eslint-loader',
|
||||||
exclude: /node_modules/
|
exclude: /node_modules/
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -2,8 +2,8 @@
|
||||||
<q-item
|
<q-item
|
||||||
clickable
|
clickable
|
||||||
tag="a"
|
tag="a"
|
||||||
target="_blank"
|
target="self"
|
||||||
:href="link"
|
:to="{name:link}"
|
||||||
>
|
>
|
||||||
<q-item-section
|
<q-item-section
|
||||||
v-if="icon"
|
v-if="icon"
|
||||||
|
@ -29,23 +29,23 @@ export default defineComponent({
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true,
|
||||||
},
|
},
|
||||||
|
|
||||||
caption: {
|
caption: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: '',
|
||||||
},
|
},
|
||||||
|
|
||||||
link: {
|
link: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '#'
|
default: 'home',
|
||||||
},
|
},
|
||||||
|
|
||||||
icon: {
|
icon: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: '',
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,109 +1,73 @@
|
||||||
<template>
|
<template>
|
||||||
<q-layout view="lHh Lpr lFf">
|
<q-layout view="hHh lpr lFf">
|
||||||
<q-header elevated>
|
|
||||||
|
<q-header
|
||||||
|
elevated
|
||||||
|
class="bg-primary text-white"
|
||||||
|
>
|
||||||
<q-toolbar>
|
<q-toolbar>
|
||||||
<q-btn
|
<q-btn
|
||||||
flat
|
|
||||||
dense
|
dense
|
||||||
|
flat
|
||||||
round
|
round
|
||||||
icon="menu"
|
icon="menu"
|
||||||
aria-label="Menu"
|
|
||||||
@click="leftDrawerOpen = !leftDrawerOpen"
|
@click="leftDrawerOpen = !leftDrawerOpen"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-toolbar-title>
|
<q-toolbar-title>
|
||||||
Quasar App
|
<q-avatar>
|
||||||
|
<img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
|
||||||
|
</q-avatar>
|
||||||
|
<span class="gt-xs">
|
||||||
|
Flaschengeist
|
||||||
|
</span>
|
||||||
</q-toolbar-title>
|
</q-toolbar-title>
|
||||||
|
|
||||||
<div>Quasar v{{ $q.version }}</div>
|
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
</q-header>
|
</q-header>
|
||||||
|
|
||||||
<q-drawer
|
<q-drawer
|
||||||
v-model="leftDrawerOpen"
|
|
||||||
show-if-above
|
show-if-above
|
||||||
|
v-model="leftDrawerOpen"
|
||||||
|
side="left"
|
||||||
bordered
|
bordered
|
||||||
content-class="bg-grey-1"
|
|
||||||
>
|
>
|
||||||
<q-list>
|
<essential-link
|
||||||
<q-item-label
|
v-for="(link, index) in links"
|
||||||
header
|
:key="index"
|
||||||
class="text-grey-8"
|
:title="link.title"
|
||||||
>
|
:link="link.link"
|
||||||
Essential Links
|
:icon="link.icon"
|
||||||
</q-item-label>
|
>
|
||||||
<EssentialLink
|
|
||||||
v-for="link in essentialLinks"
|
</essential-link>
|
||||||
:key="link.title"
|
|
||||||
v-bind="link"
|
<!-- drawer content -->
|
||||||
/>
|
|
||||||
</q-list>
|
|
||||||
</q-drawer>
|
</q-drawer>
|
||||||
|
|
||||||
<q-page-container>
|
<q-page-container>
|
||||||
<router-view />
|
<router-view />
|
||||||
</q-page-container>
|
</q-page-container>
|
||||||
|
|
||||||
</q-layout>
|
</q-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import EssentialLink from 'components/EssentialLink.vue'
|
import EssentialLink from 'components/EssentialLink.vue';
|
||||||
|
|
||||||
const linksData = [
|
|
||||||
{
|
|
||||||
title: 'Docs',
|
|
||||||
caption: 'quasar.dev',
|
|
||||||
icon: 'school',
|
|
||||||
link: 'https://quasar.dev'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Github',
|
|
||||||
caption: 'github.com/quasarframework',
|
|
||||||
icon: 'code',
|
|
||||||
link: 'https://github.com/quasarframework'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Discord Chat Channel',
|
|
||||||
caption: 'chat.quasar.dev',
|
|
||||||
icon: 'chat',
|
|
||||||
link: 'https://chat.quasar.dev'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Forum',
|
|
||||||
caption: 'forum.quasar.dev',
|
|
||||||
icon: 'record_voice_over',
|
|
||||||
link: 'https://forum.quasar.dev'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Twitter',
|
|
||||||
caption: '@quasarframework',
|
|
||||||
icon: 'rss_feed',
|
|
||||||
link: 'https://twitter.quasar.dev'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Facebook',
|
|
||||||
caption: '@QuasarFramework',
|
|
||||||
icon: 'public',
|
|
||||||
link: 'https://facebook.quasar.dev'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Quasar Awesome',
|
|
||||||
caption: 'Community Quasar projects',
|
|
||||||
icon: 'favorite',
|
|
||||||
link: 'https://awesome.quasar.dev'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
import { defineComponent, ref } from '@vue/composition-api';
|
import { defineComponent, ref } from '@vue/composition-api';
|
||||||
|
|
||||||
|
const links = [
|
||||||
|
{ title: 'home', icon: 'mdi-home' },
|
||||||
|
{ title: 'about', link: 'about', icon: 'mdi-information' },
|
||||||
|
];
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'MainLayout',
|
name: 'MainLayout',
|
||||||
components: { EssentialLink },
|
components: { EssentialLink },
|
||||||
setup() {
|
setup() {
|
||||||
const leftDrawerOpen = ref(false);
|
const leftDrawerOpen = ref(true);
|
||||||
const essentialLinks = ref(linksData);
|
|
||||||
|
|
||||||
return {leftDrawerOpen, essentialLinks}
|
return { leftDrawerOpen, links };
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<h1>Hello Bla blab blablelmewafjanfökawfd</h1>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from '@vue/composition-api';
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'about',
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
|
@ -5,7 +5,9 @@ const routes: RouteConfig[] = [
|
||||||
path: '/',
|
path: '/',
|
||||||
component: () => import('layouts/MainLayout.vue'),
|
component: () => import('layouts/MainLayout.vue'),
|
||||||
children: [
|
children: [
|
||||||
{ path: '', component: () => import('pages/Index.vue') }
|
{ name: 'home', path: '', component: () => import('pages/Index.vue') },
|
||||||
|
{ name: 'about', path: 'about', component: () => import('pages/About.vue') }
|
||||||
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue