grobes layout

This commit is contained in:
Dominik 2020-10-09 18:04:32 +02:00
parent 4f64933555
commit 09f72a2893
7 changed files with 2808 additions and 2811 deletions

20
.vscode/settings.json vendored
View File

@ -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"
}

5440
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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/
}) })
} }
}, },
}, },

View File

@ -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>

View File

@ -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>

13
src/pages/About.vue Normal file
View File

@ -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>

View File

@ -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') }
] ]
}, },