diff --git a/app/assets/icons/sort_asc.svg b/app/assets/icons/sort_asc.svg deleted file mode 100755 index 5a65ae1..0000000 --- a/app/assets/icons/sort_asc.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - \ No newline at end of file diff --git a/app/assets/icons/sort_desc.svg b/app/assets/icons/sort_desc.svg deleted file mode 100755 index 3efa217..0000000 --- a/app/assets/icons/sort_desc.svg +++ /dev/null @@ -1,4 +0,0 @@ - - \ No newline at end of file diff --git a/app/assets/styles/form/dropdown.css b/app/assets/styles/form/dropdown.css deleted file mode 100644 index ab1a7ff..0000000 --- a/app/assets/styles/form/dropdown.css +++ /dev/null @@ -1,64 +0,0 @@ -.DropDown { - --border-color: var(--color-light); - --label-color: var(--color-darkest); - --background-color: var(--color-lightest); - --arrow-color: var(--color-main-dark); - - position: relative; - - &.active { - --background-color: var(--color-main-dark); - --label-color: var(--color-lightest); - --arrow-color: var(--color-lightest); - --border-color: var(--color-main-dark); - - & ul { - scale: 1 1; - } - } - - & button { - all: unset; - cursor: pointer; - color: var(--label-color); - border: 1px solid var(--border-color); - border-radius: var(--radius-default); - background: var(--background-color); - padding: .5rem 1rem; - display: flex; - align-items: center; - justify-content: space-between; - gap: .5rem; - transition: var(--transition-default); - width: 70px; - - & .icon { - color: var(--arrow-color); - } - } - - & ul { - position: absolute; - list-style: none; - transform-origin: top; - scale: 1 0; - transition: var(--transition-default); - color: var(--color-darkest); - border: 1px solid var(--color-main-dark); - border-radius: var(--radius-default); - background: var(--color-lightest); - box-shadow: var(--box-shadow-z2); - width: 100%; - z-index: 2000; - top: 0; - - & li { - padding: .5rem 1rem; - - &.selected { - background: var(--color-main-dark); - color: var(--color-lightest); - } - } - } -} \ No newline at end of file diff --git a/app/assets/styles/form/togglebutton.css b/app/assets/styles/form/togglebutton.css deleted file mode 100644 index 1854a47..0000000 --- a/app/assets/styles/form/togglebutton.css +++ /dev/null @@ -1,14 +0,0 @@ -.ToggleButton { - all: unset; - color: var(--color-lightest); - background: var(--color-main-dark); - padding: .5rem .8rem; - border-radius: var(--radius-default); - display: flex; - align-items: center; - justify-content: center; - - & .icon { - font-size: 1.2rem; - } -} \ No newline at end of file diff --git a/app/assets/styles/page.css b/app/assets/styles/page.css index e8695d1..d621995 100644 --- a/app/assets/styles/page.css +++ b/app/assets/styles/page.css @@ -14,25 +14,24 @@ } .filter-bar { + background: var(--color-lightest); display: flex; justify-content: space-between; padding: var(--padding-default); - & .box { - display: flex; - flex-direction: column; - gap: .5rem; + & > button { + all: unset; + cursor: pointer; + color: var(--color-main-darkest); + font-weight: bolder; + font-family: 'Roboto', sans-serif; - & strong { - color: var(--color-darkest); - font-size: .8rem; + &.active { + color: var(--color-main-darkest); } - & > div { - background: var(--color-lightest); - display: flex; - justify-content: flex-end; - gap: .5rem; + &:not(.active) { + opacity: .5; } } } diff --git a/app/assets/styles/priceCard.css b/app/assets/styles/priceCard.css index c4ef36d..4abf44e 100755 --- a/app/assets/styles/priceCard.css +++ b/app/assets/styles/priceCard.css @@ -2,7 +2,7 @@ position: relative; width: 100%; color: var(--color-darkest); - border-bottom: 1px dashed var(--color-light); + border-bottom: 1px solid var(--color-light); .bottom { position: absolute; diff --git a/app/components/Pp/Form/DropDown.vue b/app/components/Pp/Form/DropDown.vue deleted file mode 100644 index 93cd611..0000000 --- a/app/components/Pp/Form/DropDown.vue +++ /dev/null @@ -1,45 +0,0 @@ - - - diff --git a/app/components/Pp/Form/ToggleButton.vue b/app/components/Pp/Form/ToggleButton.vue deleted file mode 100644 index 34796f5..0000000 --- a/app/components/Pp/Form/ToggleButton.vue +++ /dev/null @@ -1,21 +0,0 @@ - - - - - \ No newline at end of file diff --git a/app/pages/index.vue b/app/pages/index.vue index 52fdddf..a492a64 100755 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -13,32 +13,13 @@ @update="updateCard()" />
+
+

Mit ProPapier Preise vergleichen und sparen

+
('cards', []) const currentSort = useLocalStorage('sort', 0) -const currentSortDirection = useLocalStorage('sortDirection', 0) const currentCard = ref() const currentCardIndex = ref(-1) const modal = useTemplateRef('modal') const deleteModal = useTemplateRef('deleteModal') const priceCards = useTemplateRef<(typeof PpPriceCard)[]>('priceCard') -const sortElements : DropDownElement[] = [ - { - label: 'Rollen', - value: 0, - }, - { - label: 'Blatt', - value: 1, - }, - { - label: 'Lagen', - value: 2, - } -] -const currentSortElement = ref(sortElements[0]!) - -const setSortElement = (element : DropDownElement) => { - sort(element.value as number) -} - const createCard = (uuid : string) : Card => ({ uuid, name: '', @@ -111,6 +70,7 @@ const createCard = (uuid : string) : Card => ({ layers: '', }) + const addCard = (card : Card) => { cards.value.unshift({ ...card }) sort() @@ -151,23 +111,37 @@ const openDeleteModal = () => { deleteModal.value?.$el.showModal() } +const filterButtons = ref([ + { + 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 - - if (currentSortDirection.value === 0) { - return bCard[key] - aCard[key] - } - return aCard[key] - bCard[key] }) } const sort = async (index : number = currentSort.value) => { currentSort.value = index - currentSortElement.value = sortElements[index]! + filterButtons.value.forEach(button => { button.active = false }) + filterButtons.value[index]!.active = true await nextTick() @@ -177,12 +151,4 @@ const sort = async (index : number = currentSort.value) => { case 2: return sortBy('ppl') } } - -const countSortDirection = () => { - let newSortDirection = currentSortDirection.value + 1 - if (newSortDirection > 1) newSortDirection = 0 - - currentSortDirection.value = newSortDirection - sort() -} diff --git a/nuxt.config.ts b/nuxt.config.ts index fe5dc01..f1fe86c 100755 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -54,27 +54,11 @@ export default defineNuxtConfig({ './app/assets/styles/priceCard.css', './app/assets/styles/form/textfield.css', './app/assets/styles/form/search.css', - './app/assets/styles/form/dropdown.css', - './app/assets/styles/form/togglebutton.css', './app/assets/styles/toolbar.css', './app/assets/styles/page.css', './app/assets/styles/dialog.css', ], - icon: { - customCollections: [ - { - prefix: 'pp', - dir: './app/assets/icons' - } - ], - provider: 'iconify', - serverBundle: 'local', - clientBundle: { - scan: true, - }, - }, - site: { url: 'https://pro-papier.de', name: 'ProPapier', diff --git a/shared/DropDown.ts b/shared/DropDown.ts deleted file mode 100644 index b4c2652..0000000 --- a/shared/DropDown.ts +++ /dev/null @@ -1,4 +0,0 @@ -export type DropDownElement = { - label: string - value: string | number -} \ No newline at end of file