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

18
.vscode/settings.json vendored
View File

@ -1,7 +1,15 @@
{
"vetur.validation.template": false,
"vetur.format.enable": false,
"eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
"typescript.tsdk": "node_modules/typescript/lib",
"vetur.experimental.templateInterpolationService": true
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": 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
extras: [
// 'ionicons-v4',
// 'mdi-v5',
'mdi-v5',
// 'fontawesome-v5',
// 'eva-icons',
// '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
build: {
vueRouterMode: 'hash', // available values: 'hash', 'history'
vueRouterMode: 'history', // available values: 'hash', 'history'
// transpile: false,

View File

@ -2,8 +2,8 @@
<q-item
clickable
tag="a"
target="_blank"
:href="link"
target="self"
:to="{name:link}"
>
<q-item-section
v-if="icon"
@ -29,23 +29,23 @@ export default defineComponent({
props: {
title: {
type: String,
required: true
required: true,
},
caption: {
type: String,
default: ''
default: '',
},
link: {
type: String,
default: '#'
default: 'home',
},
icon: {
type: String,
default: ''
}
}
default: '',
},
},
});
</script>

View File

@ -1,109 +1,73 @@
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated>
<q-layout view="hHh lpr lFf">
<q-header
elevated
class="bg-primary text-white"
>
<q-toolbar>
<q-btn
flat
dense
flat
round
icon="menu"
aria-label="Menu"
@click="leftDrawerOpen = !leftDrawerOpen"
/>
<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>
<div>Quasar v{{ $q.version }}</div>
</q-toolbar>
</q-header>
<q-drawer
v-model="leftDrawerOpen"
show-if-above
v-model="leftDrawerOpen"
side="left"
bordered
content-class="bg-grey-1"
>
<q-list>
<q-item-label
header
class="text-grey-8"
<essential-link
v-for="(link, index) in links"
:key="index"
:title="link.title"
:link="link.link"
:icon="link.icon"
>
Essential Links
</q-item-label>
<EssentialLink
v-for="link in essentialLinks"
:key="link.title"
v-bind="link"
/>
</q-list>
</essential-link>
<!-- drawer content -->
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
<script lang="ts">
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 EssentialLink from 'components/EssentialLink.vue';
import { defineComponent, ref } from '@vue/composition-api';
const links = [
{ title: 'home', icon: 'mdi-home' },
{ title: 'about', link: 'about', icon: 'mdi-information' },
];
export default defineComponent({
name: 'MainLayout',
components: { EssentialLink },
setup() {
const leftDrawerOpen = ref(false);
const essentialLinks = ref(linksData);
const leftDrawerOpen = ref(true);
return {leftDrawerOpen, essentialLinks}
}
return { leftDrawerOpen, links };
},
});
</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: '/',
component: () => import('layouts/MainLayout.vue'),
children: [
{ path: '', component: () => import('pages/Index.vue') }
{ name: 'home', path: '', component: () => import('pages/Index.vue') },
{ name: 'about', path: 'about', component: () => import('pages/About.vue') }
]
},