brian/activist
1
0
Fork 0
Code Activity Actions

Enabled the sidebar to slideout.

Browse source 
Use main, header, and aside.

Disabled #Sticker2 and the snapshot button for now.
This commit is contained in:
Brian D 2024-11-17 21:08:05 -05:00
parent 24c00be38f
commit 8e7c20fde9
3 changed files with 20 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/App.vue
View file

@ -5,7 +5,7 @@ import OverlayBadge from 'primevue/overlaybadge';
<template> <template>
<div class="min-h-screen flex relative lg:static bg-surface-50 dark:bg-surface-950"> <div class="min-h-screen flex relative lg:static bg-surface-50 dark:bg-surface-950">
<div id="app-sidebar-5" class="bg-surface-900 h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-10 border-surface-800 w-72 lg:w-28 select-none"> <aside id="app-sidebar-5" class="bg-surface-900 h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-10 border-surface-800 w-36 lg:w-28 select-none">
<div class="flex flex-col h-full"> <div class="flex flex-col h-full">
<div class="flex items-center justify-center flex-shrink-0 bg-primary h-[60px]"> <div class="flex items-center justify-center flex-shrink-0 bg-primary h-[60px]">
Designer Designer
@ -58,9 +58,9 @@ import OverlayBadge from 'primevue/overlaybadge';
</a> </a>
</div> </div>
</div> </div>
</div> </aside>
<div class="min-h-screen flex flex-col relative flex-auto"> <main class="min-h-screen flex flex-col relative flex-auto">
<div class="flex justify-between items-center px-8 bg-surface-0 dark:bg-surface-950 relative lg:static border-b border-surface h-[60px]"> <header class="flex justify-between items-center px-4 bg-surface-0 dark:bg-surface-950 relative lg:static border-b border-surface h-[60px]">
<div class="flex"> <div class="flex">
<a <a
v-styleclass="{ v-styleclass="{
@ -71,7 +71,7 @@ import OverlayBadge from 'primevue/overlaybadge';
leaveActiveClass: 'animate-fadeoutleft', leaveActiveClass: 'animate-fadeoutleft',
hideOnOutsideClick: true hideOnOutsideClick: true
}" }"
class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 mr-4 mt-1" class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 mr-4 mt-2"
> >
<i class="pi pi-bars text-4xl" /> <i class="pi pi-bars text-4xl" />
</a> </a>
@ -120,13 +120,13 @@ import OverlayBadge from 'primevue/overlaybadge';
</a> </a>
</li> </li>
</ul> </ul>
</div> </header>
<div class="p-4 flex flex-col flex-auto"> <div class="p-0 sm:p-4">
<div class="border-2 border-dashed border-surface rounded-border bg-surface-0 dark:bg-surface-950 flex-auto"> <div class="border-2 border-dashed border-surface rounded-border bg-surface-0 dark:bg-surface-950 flex-auto">
<RouterView /> <RouterView />
</div> </div>
</div> </div>
</div> </main>
</div> </div>
</template> </template>

2
src/main.ts
View file

@ -7,6 +7,7 @@ import App from './App.vue'
import router from './router' import router from './router'
import PrimeVue from 'primevue/config'; import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura'; import Aura from '@primevue/themes/aura';
import StyleClass from 'primevue/styleclass';
const app = createApp(App) const app = createApp(App)
@ -18,4 +19,5 @@ app.use(PrimeVue, {
} }
}) })
app.directive('styleclass', StyleClass);
app.mount('#app') app.mount('#app')

21
src/views/StickerView.vue
View file

@ -67,30 +67,29 @@ function onFormSubmit() {
<template> <template>
<div id="StickerPage"> <div id="StickerPage">
<h1>Sticker</h1> <h1>Sticker</h1>
<div id="StickerWrapper"> <!-- <Button class="w-20" type="submit" severity="secondary" label="Take a snapshot" />-->
<p>6-inch sticker</p> <div id="StickerWrapper" class="sticky top-0 z-10">
<Sticker <Sticker
id="Sticker1" id="Sticker1"
v-bind:layout v-bind:color="color2" v-bind:layout v-bind:color="color2"
v-bind:message1 v-bind:message2 v-bind:message1 v-bind:message2
v-bind:message3 v-bind:message4 v-bind:message3 v-bind:message4
/> />
<p>8-inch sticker</p> <!-- <p>8-inch sticker</p>-->
<Sticker <!-- <Sticker-->
id="Sticker2" <!-- id="Sticker2"-->
v-bind:layout v-bind:color="color2" <!-- v-bind:layout v-bind:color="color2"-->
v-bind:message1 v-bind:message2 <!-- v-bind:message1 v-bind:message2-->
v-bind:message3 v-bind:message4 <!-- v-bind:message3 v-bind:message4-->
/> <!-- />-->
</div> </div>
<Button type="submit" severity="secondary" label="Take a snapshot" />
<Card> <Card>
<template #content> <template #content>
<Form v-slot="$form" <Form v-slot="$form"
v-bind:initialValues v-bind:initialValues
v-bind:resolver="resolver" v-bind:resolver="resolver"
@submit="onFormSubmit"> @submit="onFormSubmit">
<div class="bg-surface-50 dark:bg-surface-950 px-6 py-10 md:px-12 lg:px-5"> <div class="bg-surface-50 dark:bg-surface-950 px-3 py-5 md:px-12 lg:px-5">
<div class="grid grid-cols-12 gap-4"> <div class="grid grid-cols-12 gap-4">
<div class="col-span-12"> <div class="col-span-12">
<label for="nickname2">Layout {{layout}}</label> <label for="nickname2">Layout {{layout}}</label>