add: subheader
Subheader for dynamic content
This commit is contained in:
parent
4b07ebb2ec
commit
1bd69c9c97
6 changed files with 259 additions and 101 deletions
|
|
@ -102,7 +102,6 @@
|
|||
|
||||
&:hover {
|
||||
scale: 1.2;
|
||||
--background: var(--color-light);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,57 +1,61 @@
|
|||
.Header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--padding-default);
|
||||
background: var(--color-main-darkest);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: bold;
|
||||
background: var(--color-main-darkest);
|
||||
|
||||
& a {
|
||||
text-decoration: none;
|
||||
color: var(--color-lightest);
|
||||
}
|
||||
|
||||
& .header-text {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
& input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& input[type="checkbox"]:checked + nav {
|
||||
translate: 0;
|
||||
}
|
||||
|
||||
& nav,
|
||||
& ul {
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
& nav {
|
||||
position: fixed;
|
||||
padding: var(--padding-default);
|
||||
translate: 100% 0;
|
||||
width: 100vw;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100dvh;
|
||||
transition: 150ms ease-in-out;
|
||||
background: var(--color-lightest);
|
||||
font-size: 2em;
|
||||
align-items: end;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
& ul {
|
||||
width: 100%;
|
||||
& header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
& li {
|
||||
list-style: none;
|
||||
justify-content: space-between;
|
||||
padding: var(--padding-default);
|
||||
padding-bottom: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: bold;
|
||||
|
||||
& a {
|
||||
text-decoration: none;
|
||||
color: var(--color-lightest);
|
||||
}
|
||||
|
||||
& .header-text {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
& input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& input[type="checkbox"]:checked + nav {
|
||||
translate: 0;
|
||||
}
|
||||
|
||||
& nav,
|
||||
& ul {
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
& nav {
|
||||
position: fixed;
|
||||
padding: var(--padding-default);
|
||||
translate: 100% 0;
|
||||
width: 100vw;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100dvh;
|
||||
transition: 150ms ease-in-out;
|
||||
background: var(--color-lightest);
|
||||
font-size: 2em;
|
||||
align-items: end;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
& ul {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
& li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -22,7 +22,14 @@
|
|||
}
|
||||
|
||||
.search-bar {
|
||||
z-index: 100;
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
|
||||
& p {
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
font-weight: lighter;
|
||||
color: var(--color-lightest);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,25 @@
|
|||
<template>
|
||||
<header class="Header">
|
||||
<NuxtLink class="header-text" to="/">
|
||||
ProPapier
|
||||
</NuxtLink>
|
||||
<label for="burger_nav_toggle" v-if="available">
|
||||
<Icon name="solar:hamburger-menu-broken" size="2em" />
|
||||
</label>
|
||||
<input type="checkbox" id="burger_nav_toggle" v-if="available" />
|
||||
<nav class="flex-col" v-if="available">
|
||||
<label for="burger_nav_toggle">
|
||||
<Icon name="solar:close-circle-broken" />
|
||||
<div class="Header">
|
||||
<header>
|
||||
<NuxtLink class="header-text" to="/">
|
||||
ProPapier
|
||||
</NuxtLink>
|
||||
<label for="burger_nav_toggle" v-if="available">
|
||||
<Icon name="solar:hamburger-menu-broken" size="2em" />
|
||||
</label>
|
||||
<ul class="flex-col">
|
||||
<li>Home</li>
|
||||
<li>Übersicht</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<input type="checkbox" id="burger_nav_toggle" v-if="available" />
|
||||
<nav class="flex-col" v-if="available">
|
||||
<label for="burger_nav_toggle">
|
||||
<Icon name="solar:close-circle-broken" />
|
||||
</label>
|
||||
<ul class="flex-col">
|
||||
<li>Home</li>
|
||||
<li>Übersicht</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div id="subheader" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -12,13 +12,11 @@
|
|||
:current-card-index="currentCardIndex"
|
||||
@update="updateCard()"
|
||||
/>
|
||||
<div class="search-bar">
|
||||
<PpFormSearch
|
||||
v-model="search"
|
||||
label="Suche nach Klopapier!"
|
||||
id="search_field"
|
||||
/>
|
||||
</div>
|
||||
<Teleport to="#subheader">
|
||||
<div class="search-bar">
|
||||
<p>Preise. Schnell. Unkompliziert.</p>
|
||||
</div>
|
||||
</Teleport>
|
||||
<section class="content flex-col">
|
||||
<aside class="filter-bar">
|
||||
<button v-for="(button, index) in filterButtons" @click="() => sort(index)" :class="{ 'active': button.active }">
|
||||
|
|
@ -38,15 +36,6 @@
|
|||
</div>
|
||||
</section>
|
||||
<PpToolbar>
|
||||
<PpButton class="mini-button text-white transparent" @click="sort(currentSort)">
|
||||
<Icon class="icon" name="uil:refresh" mode="svg" />
|
||||
<span>Neu sortieren</span>
|
||||
<span
|
||||
class="dot"
|
||||
:class="{ visible : isDirty}"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</PpButton>
|
||||
<PpButton class="mini-button text-white transparent" @click="openModal(true, -1)">
|
||||
<Icon class="icon" name="uil:plus" mode="svg" />
|
||||
<span>Hinzufügen</span>
|
||||
|
|
@ -63,15 +52,12 @@ import { PpPriceCardDialog, PpDeleteDialog, PpPriceCard } from '#components'
|
|||
|
||||
const cards = useLocalStorage<Card[]>('cards', [])
|
||||
const currentSort = useLocalStorage<number>('sort', 0)
|
||||
const isDirty = ref(false)
|
||||
const currentCard = ref<Card>()
|
||||
const currentCardIndex = ref<number>(-1)
|
||||
const modal = useTemplateRef<typeof PpPriceCardDialog>('modal')
|
||||
const deleteModal = useTemplateRef<typeof PpDeleteDialog>('deleteModal')
|
||||
const priceCards = useTemplateRef<(typeof PpPriceCard)[]>('priceCard')
|
||||
|
||||
const search = ref('')
|
||||
|
||||
const createCard = (uuid : string) : Card => ({
|
||||
uuid,
|
||||
name: '',
|
||||
|
|
@ -84,12 +70,12 @@ const createCard = (uuid : string) : Card => ({
|
|||
|
||||
const addCard = (card : Card) => {
|
||||
cards.value.unshift({ ...card })
|
||||
isDirty.value = true
|
||||
sort()
|
||||
}
|
||||
|
||||
const removeCard = (index : number) => {
|
||||
cards.value.splice(index, 1)
|
||||
isDirty.value = true
|
||||
sort()
|
||||
}
|
||||
|
||||
const updateCard = () => {
|
||||
|
|
@ -100,7 +86,7 @@ const updateCard = () => {
|
|||
|
||||
const newCard = { ...currentCard.value! }
|
||||
cards.value.splice(currentCardIndex.value, 1, newCard)
|
||||
isDirty.value = true
|
||||
sort()
|
||||
}
|
||||
|
||||
const openModal = (createNew : boolean, index : number) => {
|
||||
|
|
@ -149,23 +135,17 @@ const sortBy = (key : 'ppr' | 'pps' | 'ppl') => {
|
|||
})
|
||||
}
|
||||
|
||||
const sort = (index : number) => {
|
||||
const sort = async (index : number = currentSort.value) => {
|
||||
currentSort.value = index
|
||||
filterButtons.value.forEach(button => { button.active = false })
|
||||
filterButtons.value[index]!.active = true
|
||||
|
||||
switch (index) {
|
||||
case 0:
|
||||
sortBy('ppr')
|
||||
break
|
||||
case 1:
|
||||
sortBy('pps')
|
||||
break
|
||||
case 2:
|
||||
sortBy('ppl')
|
||||
break
|
||||
}
|
||||
await nextTick()
|
||||
|
||||
isDirty.value = false
|
||||
switch (index) {
|
||||
case 0: return sortBy('ppr')
|
||||
case 1: return sortBy('pps')
|
||||
case 2: return sortBy('ppl')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
165
app/pages/other.vue
Normal file
165
app/pages/other.vue
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
<template>
|
||||
<div>
|
||||
<ClientOnly>
|
||||
<PpDeleteDialog
|
||||
ref="deleteModal"
|
||||
:current-card-index="currentCardIndex"
|
||||
@delete="removeCard(currentCardIndex)"
|
||||
/>
|
||||
<PpPriceCardDialog
|
||||
ref="modal"
|
||||
:current-card="currentCard"
|
||||
:current-card-index="currentCardIndex"
|
||||
@update="updateCard()"
|
||||
/>
|
||||
<div class="search-bar">
|
||||
<PpFormSearch
|
||||
v-model="search"
|
||||
label="Suche nach Klopapier!"
|
||||
id="search_field"
|
||||
/>
|
||||
</div>
|
||||
<section class="content flex-col">
|
||||
<aside class="filter-bar">
|
||||
<button v-for="(button, index) in filterButtons" @click="() => sort(index)" :class="{ 'active': button.active }">
|
||||
{{ button.label }}
|
||||
</button>
|
||||
</aside>
|
||||
<div class="flex-col" role="list">
|
||||
<PpPriceCard
|
||||
ref="priceCard"
|
||||
v-for="(card, index) in cards"
|
||||
:key="card.uuid"
|
||||
:deletable="cards.length > 1"
|
||||
:card="card"
|
||||
@update="openModal(false, index)"
|
||||
@remove="openDeleteModal()"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<PpToolbar>
|
||||
<PpButton class="mini-button text-white transparent" @click="sort(currentSort)">
|
||||
<Icon class="icon" name="uil:refresh" mode="svg" />
|
||||
<span>Neu sortieren</span>
|
||||
<span
|
||||
class="dot"
|
||||
:class="{ visible : isDirty}"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</PpButton>
|
||||
<PpButton class="mini-button text-white transparent" @click="openModal(true, -1)">
|
||||
<Icon class="icon" name="uil:plus" mode="svg" />
|
||||
<span>Hinzufügen</span>
|
||||
</PpButton>
|
||||
</PpToolbar>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Card } from '../../shared/Card'
|
||||
import type { Button } from '../../shared/ButtonGroup'
|
||||
import { PpPriceCardDialog, PpDeleteDialog, PpPriceCard } from '#components'
|
||||
|
||||
const cards = useLocalStorage<Card[]>('cards', [])
|
||||
const currentSort = useLocalStorage<number>('sort', 0)
|
||||
const isDirty = ref(false)
|
||||
const currentCard = ref<Card>()
|
||||
const currentCardIndex = ref<number>(-1)
|
||||
const modal = useTemplateRef<typeof PpPriceCardDialog>('modal')
|
||||
const deleteModal = useTemplateRef<typeof PpDeleteDialog>('deleteModal')
|
||||
const priceCards = useTemplateRef<(typeof PpPriceCard)[]>('priceCard')
|
||||
|
||||
const search = ref('')
|
||||
|
||||
const createCard = (uuid : string) : Card => ({
|
||||
uuid,
|
||||
name: '',
|
||||
price: '',
|
||||
roles: '',
|
||||
sheets: '',
|
||||
layers: '',
|
||||
})
|
||||
|
||||
|
||||
const addCard = (card : Card) => {
|
||||
cards.value.unshift({ ...card })
|
||||
isDirty.value = true
|
||||
}
|
||||
|
||||
const removeCard = (index : number) => {
|
||||
cards.value.splice(index, 1)
|
||||
isDirty.value = true
|
||||
}
|
||||
|
||||
const updateCard = () => {
|
||||
if (currentCardIndex.value === -1) {
|
||||
addCard(currentCard.value!)
|
||||
return
|
||||
}
|
||||
|
||||
const newCard = { ...currentCard.value! }
|
||||
cards.value.splice(currentCardIndex.value, 1, newCard)
|
||||
isDirty.value = true
|
||||
}
|
||||
|
||||
const openModal = (createNew : boolean, index : number) => {
|
||||
if (createNew) {
|
||||
currentCardIndex.value = -1
|
||||
currentCard.value = createCard(randomUUID())
|
||||
modal.value?.$el.showModal()
|
||||
return
|
||||
}
|
||||
|
||||
currentCardIndex.value = index
|
||||
currentCard.value = { ...cards.value[index]! }
|
||||
|
||||
modal.value?.$el.showModal()
|
||||
return
|
||||
}
|
||||
|
||||
const openDeleteModal = () => {
|
||||
deleteModal.value?.$el.showModal()
|
||||
}
|
||||
|
||||
const filterButtons = ref<Button[]>([
|
||||
{
|
||||
label: 'Rollen',
|
||||
icon: 'uil:toilet-paper',
|
||||
active: currentSort.value === 0,
|
||||
},
|
||||
{
|
||||
label: 'Blatt',
|
||||
icon: 'uil:file-landscape',
|
||||
active: currentSort.value === 1,
|
||||
},
|
||||
{
|
||||
label: 'Lagen',
|
||||
icon: 'uil:layer-group',
|
||||
active: currentSort.value === 2,
|
||||
},
|
||||
])
|
||||
|
||||
const sortBy = (key : 'ppr' | 'pps' | 'ppl') => {
|
||||
cards.value.sort((a, b) => {
|
||||
const aCard = priceCards.value?.find(card => card.uuid === a.uuid) || null
|
||||
const bCard = priceCards.value?.find(card => card.uuid === b.uuid) || null
|
||||
if (!aCard || !bCard) return 0
|
||||
return aCard[key] - bCard[key]
|
||||
})
|
||||
}
|
||||
|
||||
const sort = (index : number) => {
|
||||
currentSort.value = index
|
||||
filterButtons.value.forEach(button => { button.active = false })
|
||||
filterButtons.value[index]!.active = true
|
||||
|
||||
isDirty.value = false
|
||||
|
||||
switch (index) {
|
||||
case 0: return sortBy('ppr')
|
||||
case 1: return sortBy('pps')
|
||||
case 2: return sortBy('ppl')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue