Grobes Layout fertig

wurde Gefüllt mit Dummies für die Navigation.
Zeigt Loginpage und leitet einen weiter.
Design ist responsive.
This commit is contained in:
Tim Gröger 2020-10-10 23:02:32 +02:00
parent 09f72a2893
commit 2ee3cb0dbc
15 changed files with 470 additions and 31 deletions

58
public/logo-dark.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 26 KiB

59
public/logo.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 27 KiB

View File

@ -0,0 +1,28 @@
<template>
<div>
<essential-link
v-for="(link, index) in links"
:key="index"
:title="link.title"
:link="link.link"
:icon="link.icon"
/>
</div>
</template>
<script lang="ts">
const links = [
{ title: 'Neues About', link: 'newAbout', icon: 'mdi-information-outline' },
{ title: 'Altes About', link: 'oldAbout', icon: 'mdi-information-variant' }
];
import { defineComponent } from '@vue/composition-api';
import EssentialLink from 'components/navigation/EssentialLink.vue';
export default defineComponent({
// name: 'ComponentName'
components: { EssentialLink },
setup() {
return { links };
}
});
</script>

View File

@ -0,0 +1,27 @@
<template>
<div>
<essential-link
v-for="(link, index) in links"
:key="index"
:title="link.title"
:link="link.link"
:icon="link.icon"
/>
</div>
</template>
<script lang="ts">
const links = [
{ title: 'Neues Home', link: 'newHome', icon: 'mdi-google-home' },
{ title: 'Altes Home', link: 'oldHome', icon: 'mdi-home-modern' }
];
import { defineComponent } from '@vue/composition-api';
import EssentialLink from 'components/navigation/EssentialLink.vue';
export default defineComponent({
// name: 'ComponentName'
components: { EssentialLink },
setup() {
return { links };
}
});
</script>

View File

@ -1,27 +1,38 @@
<template> <template>
<q-layout view="hHh lpr lFf"> <q-layout view="hHh lpr lFf">
<q-header elevated class="bg-primary text-white">
<q-header
elevated
class="bg-primary text-white"
>
<q-toolbar> <q-toolbar>
<!-- Button um Navigationsleiset ein und auszublenden. Nötig bei Desktop? -->
<q-btn <q-btn
dense dense
flat flat
round round
icon="menu" icon="menu"
@click="leftDrawerOpen = !leftDrawerOpen" @click="leftDrawerOpen = !leftDrawerOpen"
v-if="!leftDrawerOpen"
/> />
<q-toolbar-title> <q-toolbar-title>
<q-avatar> <q-avatar>
<img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg"> <img src="logo.svg" />
</q-avatar> </q-avatar>
<span class="gt-xs"> <span class="gt-xs">
Flaschengeist Flaschengeist
</span> </span>
</q-toolbar-title> </q-toolbar-title>
<!-- Hier kommen die Shortlinks hin -->
<div>
<q-btn flat round dense icon="sim_card" />
<q-btn flat round dense icon="gamepad" />
</div>
<q-btn
flat
round
dense
icon="mdi-exit-to-app"
@click="$router.push({ name: 'login' })"
/>
</q-toolbar> </q-toolbar>
</q-header> </q-header>
@ -30,44 +41,73 @@
v-model="leftDrawerOpen" v-model="leftDrawerOpen"
side="left" side="left"
bordered bordered
:mini="leftDrawerMini"
@click.capture="leftDrawerClicker"
> >
<!-- Plugins -->
<q-list>
<essential-link <essential-link
v-for="(link, index) in links" v-for="(link, index) in links"
:key="index" :key="index"
:title="link.title" :title="link.title"
:link="link.link" :link="link.link"
:icon="link.icon" :icon="link.icon"
> />
</q-list>
<q-separator />
</essential-link> <!-- Plugin functions -->
<router-view name="plugin-nav" />
<!-- drawer content --> <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -11px">
<q-btn
size="sm"
dense
round
unelevated
color="secondary"
icon="chevron_left"
@click="leftDrawerMini = true"
/>
</div>
</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/navigation/EssentialLink.vue';
import { event, Screen } from 'quasar';
import { defineComponent, ref } from '@vue/composition-api'; import { defineComponent, ref, reactive, computed } from '@vue/composition-api';
const links = [ const links = [
{ title: 'home', icon: 'mdi-home' }, { title: 'home', icon: 'mdi-home' },
{ title: 'about', link: 'about', icon: 'mdi-information' }, { 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(true); const leftDrawer = ref(false);
return { leftDrawerOpen, links }; const leftDrawerOpen = ref(
}, computed({
get: () => (leftDrawer.value || Screen.gt.sm ? true : false),
set: (val: boolean) => (leftDrawer.value = val)
})
);
const leftDrawerMini = ref(false);
function leftDrawerClicker() {
if (leftDrawerMini.value) {
leftDrawerMini.value = false;
}
}
return { leftDrawerOpen, leftDrawerMini, leftDrawerClicker, links };
}
}); });
</script> </script>

41
src/layouts/OutLayout.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<q-layout view="hHh lpr lFf"> <!-- Be sure to play with the Layout demo on docs -->
<!-- (Optional) The Header -->
<q-header elevated>
<q-toolbar>
<q-toolbar-title>
<q-avatar>
<img src="logo.svg">
</q-avatar>
<span class="gt-xs">
Flaschengeist
</span>
</q-toolbar-title>
</q-toolbar>
</q-header>
<!-- (Optional) The Footer -->
<!-- (Optional) A Drawer; you can add one more with side="right" or change this one's side -->
<q-page-container>
<!-- This is where pages get injected -->
<router-view />
</q-page-container>
</q-layout>
</template>
<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'OutLayout',
setup() {
return { }
}
})
</script>

56
src/pages/Login.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<q-page padding class="fit row justify-center items-center content-center">
<q-card
class="col-xs-11 col-sm-8 col-md-6 col-lg-4 justify-center items-center content-center"
>
<q-toolbar class="bg-primary text-white">
<q-toolbar-title>
Login
</q-toolbar-title>
</q-toolbar>
<q-card-section>
<q-form ref="LoginForm" @submit="doLogin" class="q-gutter-md">
<q-input
filled
v-model="username"
label="Benutzername oder E-Mail"
:rules="rules"
/>
<q-input
filled
v-model="password"
type="password"
label="Password"
:rules="rules"
/>
<div class="row justify-end">
<q-btn label="Login" type="submit" color="primary" />
</div>
</q-form>
</q-card-section>
</q-card>
</q-page>
</template>
<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
export default defineComponent({
// name: 'PageName'
setup() {
const username = ref('');
const password = ref('');
const rules = [
(val: string) => (val && val.length > 0) || 'Feld darf nicht leer sein!'
];
function doLogin() {
console.log(username.value, password.value);
this.$router.push({ name: 'home' });
}
return { username, password, doLogin, rules };
}
});
</script>

17
src/pages/about/About.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<q-page padding class="fit row justify-center content-center items-center">
<q-card class="col-4" height="" v-if="$route.name == 'about'">
<q-card-section>
About
</q-card-section>
</q-card>
<router-view />
</q-page>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
// name: 'PageName'
});
</script>

View File

@ -1,13 +1,14 @@
<template> <template>
<h1>Hello Bla blab blablelmewafjanfökawfd</h1> <q-card class="col-4" height="">
<q-card-section>
Neues About
</q-card-section>
</q-card>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from '@vue/composition-api'; import { defineComponent } from '@vue/composition-api';
export default defineComponent({ export default defineComponent({
name: 'about', // name: 'PageName'
}); });
</script> </script>
<style>
</style>

View File

@ -0,0 +1,14 @@
<template>
<q-card class="col-4" height="">
<q-card-section>
Altes About
</q-card-section>
</q-card>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
// name: 'PageName'
});
</script>

18
src/pages/home/Home.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<q-page padding class="fit row justify-center content-center items-center">
<q-card class="col-4" height="" v-if="$route.name == 'home'">
<q-card-section>
Home
</q-card-section>
</q-card>
<router-view />
</q-page>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from '@vue/composition-api';
import {} from '';
export default defineComponent({
// name: 'PageName'
});
</script>

View File

@ -0,0 +1,14 @@
<template>
<q-card class="col-4" height="">
<q-card-section>
Neues Zuhause
</q-card-section>
</q-card>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
// name: 'PageName'
});
</script>

View File

@ -0,0 +1,14 @@
<template>
<q-card class="col-4" height="">
<q-card-section>
Altes Zuhause
</q-card-section>
</q-card>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
// name: 'PageName'
});
</script>

View File

@ -3,11 +3,62 @@ import { RouteConfig } from 'vue-router';
const routes: RouteConfig[] = [ const routes: RouteConfig[] = [
{ {
path: '/', path: '/',
redirect: 'login',
component: () => import('layouts/OutLayout.vue'),
children: [
{
name: 'login',
path: 'login',
component: () => import('pages/Login.vue')
}
]
},
{
path: '/main',
component: () => import('layouts/MainLayout.vue'), component: () => import('layouts/MainLayout.vue'),
children: [ children: [
{ name: 'home', path: '', component: () => import('pages/Index.vue') }, {
{ name: 'about', path: 'about', component: () => import('pages/About.vue') } name: 'home',
path: 'home',
components: {
default: () => import('pages/home/Home.vue'),
'plugin-nav': () =>
import('components/navigation/PluginLinksHome.vue')
},
children: [
{
name: 'newHome',
path: 'newHome',
component: () => import('pages/home/NewHome.vue')
},
{
name: 'oldHome',
path: 'oldHome',
component: () => import('pages/home/OldHome.vue')
}
]
},
{
name: 'about',
path: 'about',
components: {
default: () => import('pages/about/About.vue'),
'plugin-nav': () =>
import('components/navigation/PluginLinksAbout.vue')
},
children: [
{
name: 'newAbout',
path: 'newAbout',
component: () => import('pages/about/NewAbout.vue')
},
{
name: 'oldAbout',
path: 'oldAbout',
component: () => import('pages/about/OldAbout.vue')
}
]
}
] ]
}, },
@ -15,6 +66,7 @@ const routes: RouteConfig[] = [
// but you can also remove it // but you can also remove it
{ {
path: '*', path: '*',
redirect: 'login',
component: () => import('pages/Error404.vue') component: () => import('pages/Error404.vue')
} }
]; ];