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>
<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 items-center justify-center flex-shrink-0 bg-primary h-[60px]">
Designer
@ -58,9 +58,9 @@ import OverlayBadge from 'primevue/overlaybadge';
</a>
</div>
</div>
</div>
<div 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]">
</aside>
<main class="min-h-screen flex flex-col relative flex-auto">
<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">
<a
v-styleclass="{
@ -71,7 +71,7 @@ import OverlayBadge from 'primevue/overlaybadge';
leaveActiveClass: 'animate-fadeoutleft',
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" />
</a>
@ -120,13 +120,13 @@ import OverlayBadge from 'primevue/overlaybadge';
</a>
</li>
</ul>
</div>
<div class="p-4 flex flex-col flex-auto">
</header>
<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">
<RouterView />
</div>
</div>
</div>
</main>
</div>
</template>

2
src/main.ts
View file

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

21
src/views/StickerView.vue
View file

@ -67,30 +67,29 @@ function onFormSubmit() {
<template>
<div id="StickerPage">
<h1>Sticker</h1>
<div id="StickerWrapper">
<p>6-inch sticker</p>
<!-- <Button class="w-20" type="submit" severity="secondary" label="Take a snapshot" />-->
<div id="StickerWrapper" class="sticky top-0 z-10">
<Sticker
id="Sticker1"
v-bind:layout v-bind:color="color2"
v-bind:message1 v-bind:message2
v-bind:message3 v-bind:message4
/>
<p>8-inch sticker</p>
<Sticker
id="Sticker2"
v-bind:layout v-bind:color="color2"
v-bind:message1 v-bind:message2
v-bind:message3 v-bind:message4
/>
<!-- <p>8-inch sticker</p>-->
<!-- <Sticker-->
<!-- id="Sticker2"-->
<!-- v-bind:layout v-bind:color="color2"-->
<!-- v-bind:message1 v-bind:message2-->
<!-- v-bind:message3 v-bind:message4-->
<!-- />-->
</div>
<Button type="submit" severity="secondary" label="Take a snapshot" />
<Card>
<template #content>
<Form v-slot="$form"
v-bind:initialValues
v-bind:resolver="resolver"
@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="col-span-12">
<label for="nickname2">Layout {{layout}}</label>