Create Neat layout and Print view.
This commit is contained in:
parent
cfc985ffb0
commit
86de4e5827
5 changed files with 114 additions and 69 deletions
80
src/App.vue
80
src/App.vue
|
|
@ -1,78 +1,20 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { RouterView } from 'vue-router'
|
||||
import { computed } from 'vue'
|
||||
import { RouterView, useRoute } from 'vue-router'
|
||||
|
||||
import Footer from "@/components/Footer.vue";
|
||||
import Sidebar from "@/components/Sidebar.vue";
|
||||
import TopBar from "@/components/TopBar.vue";
|
||||
import { useSessionStore } from "@/stores/sessionStore";
|
||||
import Default from '@/layouts/Default.vue'
|
||||
|
||||
const sessionStore = useSessionStore();
|
||||
const route = useRoute();
|
||||
|
||||
const sidebarSize = computed(() => {
|
||||
return sessionStore.isAnonymous ? '0' : '90px';
|
||||
const layout = computed(() => {
|
||||
const layoutComponent = route.meta.layout || Default;
|
||||
return layoutComponent;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="act-layout">
|
||||
<TopBar class="act-header"></TopBar>
|
||||
<div class="act-sidebar" v-if="!sessionStore.isAnonymous">
|
||||
<Sidebar></Sidebar>
|
||||
</div>
|
||||
<div class="act-content">
|
||||
<main class="">
|
||||
<RouterView />
|
||||
</main>
|
||||
<div class="act-footer">
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<component :is="layout">
|
||||
<router-view name="layout" />
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$header-height: 60px !default;
|
||||
$sidebar-size: 90px !default;
|
||||
|
||||
.act-layout {
|
||||
// To scroll only in the middle, see https://jsfiddle.net/VNVqs/
|
||||
margin-bottom: v-bind(sidebarSize); // for scrolling
|
||||
margin-top: $header-height; // for scrolling
|
||||
.act-footer {
|
||||
display: none;
|
||||
}
|
||||
.act-sidebar {
|
||||
bottom: 0;
|
||||
height: v-bind(sidebarSize);
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
.act-header {
|
||||
height: $header-height;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
@media (screen(sm)) {
|
||||
margin-bottom: 0;
|
||||
margin-left: v-bind(sidebarSize);
|
||||
.act-footer {
|
||||
display: block
|
||||
}
|
||||
.act-sidebar {
|
||||
left: 0;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
width: v-bind(sidebarSize);
|
||||
}
|
||||
.act-header {
|
||||
left: v-bind(sidebarSize);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
77
src/layouts/Default.vue
Normal file
77
src/layouts/Default.vue
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { RouterView } from 'vue-router';
|
||||
|
||||
import Footer from "@/components/Footer.vue";
|
||||
import Sidebar from "@/components/Sidebar.vue";
|
||||
import TopBar from "@/components/TopBar.vue";
|
||||
|
||||
import { useSessionStore } from "@/stores/sessionStore";
|
||||
|
||||
const sessionStore = useSessionStore();
|
||||
|
||||
const sidebarSize = computed(() => {
|
||||
return sessionStore.isAnonymous ? '0' : '90px';
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="act-layout">
|
||||
<TopBar class="act-header"></TopBar>
|
||||
<div class="act-sidebar" v-if="!sessionStore.isAnonymous">
|
||||
<Sidebar></Sidebar>
|
||||
</div>
|
||||
<div class="act-content">
|
||||
<main class="">
|
||||
<router-view />
|
||||
</main>
|
||||
<div class="act-footer">
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
$header-height: 60px !default;
|
||||
$sidebar-size: 90px !default;
|
||||
|
||||
.act-layout {
|
||||
// To scroll only in the middle, see https://jsfiddle.net/VNVqs/
|
||||
margin-bottom: v-bind(sidebarSize); // for scrolling
|
||||
margin-top: $header-height; // for scrolling
|
||||
.act-footer {
|
||||
display: none;
|
||||
}
|
||||
.act-sidebar {
|
||||
bottom: 0;
|
||||
height: v-bind(sidebarSize);
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
.act-header {
|
||||
height: $header-height;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
@media (screen(sm)) {
|
||||
margin-bottom: 0;
|
||||
margin-left: v-bind(sidebarSize);
|
||||
.act-footer {
|
||||
display: block
|
||||
}
|
||||
.act-sidebar {
|
||||
left: 0;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
width: v-bind(sidebarSize);
|
||||
}
|
||||
.act-header {
|
||||
left: v-bind(sidebarSize);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
9
src/layouts/Neat.vue
Normal file
9
src/layouts/Neat.vue
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { RouterView } from 'vue-router'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="">
|
||||
<router-view />
|
||||
</main>
|
||||
</template>
|
||||
|
|
@ -1,9 +1,12 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
import { useSessionStore } from "@/stores/sessionStore";
|
||||
import Neat from '../layouts/Neat.vue'
|
||||
|
||||
import AboutView from '../views/AboutView.vue'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
import LoginView from '../views/LoginView.vue'
|
||||
import PrintView from '../views/PrintView.vue'
|
||||
import ProfileView from '../views/ProfileView.vue'
|
||||
import StickerBuilderView from '../views/StickerBuilderView.vue'
|
||||
import StickerView from '../views/StickerView.vue'
|
||||
|
|
@ -31,6 +34,15 @@ const router = createRouter({
|
|||
name: 'home',
|
||||
path: '/',
|
||||
},
|
||||
{
|
||||
component: PrintView,
|
||||
meta: {
|
||||
layout: Neat,
|
||||
title: 'Print',
|
||||
},
|
||||
name: 'print',
|
||||
path: '/print/:username',
|
||||
},
|
||||
{
|
||||
component: ProfileView,
|
||||
meta: {
|
||||
|
|
|
|||
|
|
@ -88,6 +88,11 @@ const events = [{
|
|||
v-if="myPage">
|
||||
New sticker
|
||||
</Button>
|
||||
<Button
|
||||
as="router-link"
|
||||
:to="{ name: 'print', params: { username: user?.username }}">
|
||||
Print
|
||||
</Button>
|
||||
<div class="stickers">
|
||||
<div v-for="sticker in stickersStore.getStickersCreatedBy(user?.username)">
|
||||
<div class="stickerWrapper">
|
||||
|
|
|
|||
Loading…
Reference in a new issue