From c6c2ace1b7863ce0056588ec6c7e4f96082f6cd7 Mon Sep 17 00:00:00 2001 From: Jonas <60574217+Jodekq@users.noreply.github.com> Date: Fri, 9 Feb 2024 11:03:56 +0100 Subject: [PATCH] Changes --- src/client/_styles/index.scss | 49 +++- src/client/_styles/props.scss | 13 +- src/client/addplate/_src/index.ts | 18 ++ src/client/addplate/_styles/index.scss | 157 +++++++------ src/client/addplate/index.html | 48 ++-- src/client/fridge/_src/index.ts | 198 ++++++++++++----- src/client/fridge/_styles/index.scss | 296 ++++++++++++++++++++++--- src/client/fridge/index.html | 91 +++++++- src/client/tobuy/_styles/index.scss | 8 +- 9 files changed, 679 insertions(+), 199 deletions(-) diff --git a/src/client/_styles/index.scss b/src/client/_styles/index.scss index 21fe1b1..2125059 100644 --- a/src/client/_styles/index.scss +++ b/src/client/_styles/index.scss @@ -3,8 +3,6 @@ @import url('https://fonts.googleapis.com/css?family=Poppins:700|Poppins:400'); -// styles imports - body { font-family: 'Poppins'; @@ -48,6 +46,23 @@ body { background-color: var(--background); } +::-webkit-scrollbar { + width: 6px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: var(--dark-3); + border-radius: var(--border-radius); + + &:hover { + background: var(--dark-2); + } +} + // defined items start .bx-plus { @@ -83,6 +98,36 @@ body { height: fit-content; } +.close-button { + display: flex; + align-items: center; + background-color: var(--light-error); + padding: 2px 8px; + border-radius: var(--border-radius); + color: var(--text-opposite); + cursor: pointer; + font-size: 12px; +} + +.dropdown-button { + display: flex; + align-items: center; + justify-content: center; + + cursor: pointer; + + height: 25px; + width: fit-content; + min-width: 25px; + + border: 2px solid var(--dark-3); + border-radius: var(--border-radius); + + .dropdown-text { + padding: 0 var(--small-gap); + } +} + // defined items end header { diff --git a/src/client/_styles/props.scss b/src/client/_styles/props.scss index 7c9ebfe..c4d6724 100644 --- a/src/client/_styles/props.scss +++ b/src/client/_styles/props.scss @@ -1,9 +1,9 @@ :root { --border-radius: 10px; - --small-gap: .5em; - --gap: 1em; - --big-gap: 3em; + --small-gap: 8px; + --gap: 16px; + --big-gap: 32px; } @@ -18,8 +18,6 @@ body[data-theme="dark"] { --secondary: #287254; --dark-secondary: #162d23; - - --accent: #64C8B4; --text: #fffcec; --text-opposite: #000000; @@ -29,6 +27,9 @@ body[data-theme="dark"] { --dark-3: #282727; --error: #b00020; + --light-error: #e06666; + + --orange: #c73c03; } body[data-theme="white"] { @@ -41,8 +42,6 @@ body[data-theme="white"] { --secondary: #287254; --dark-secondary: #162d23; - - --accent: #64C8B4; --text: #000000; --dark-text: #ececec; diff --git a/src/client/addplate/_src/index.ts b/src/client/addplate/_src/index.ts index e69de29..b92e74d 100644 --- a/src/client/addplate/_src/index.ts +++ b/src/client/addplate/_src/index.ts @@ -0,0 +1,18 @@ +const addPlateDescription = document.getElementById("addplatedescription"); +const closePlateDescription = document.getElementById("closeplatedescription"); + +const plateDescription = document.querySelector('.plate-description') as HTMLElement; +const connector = document.querySelector('.connector') as HTMLElement; +const addPlateButton = document.querySelector('.addplate-button') as HTMLElement; + +addPlateDescription?.addEventListener('click', () => { + plateDescription.style.display ='block'; + connector.style.display ='flex'; + addPlateButton.style.display ='none'; +}); + +closePlateDescription?.addEventListener('click', () => { + plateDescription.style.display ='none'; + connector.style.display ='none'; + addPlateButton.style.display ='flex'; +}); \ No newline at end of file diff --git a/src/client/addplate/_styles/index.scss b/src/client/addplate/_styles/index.scss index b83940c..ff4ad33 100644 --- a/src/client/addplate/_styles/index.scss +++ b/src/client/addplate/_styles/index.scss @@ -21,6 +21,10 @@ flex-direction: column; align-items: center; + .plate-description { + display: none; + } + .content-wrapper { width: 100%; @@ -125,6 +129,8 @@ padding: 5px; width: 100%; + + cursor: pointer; span { color: var(--dark-text); @@ -167,66 +173,111 @@ } } - .description-content { - margin: var(--gap); - padding: var(--gap); - - height: 400px; + .description { + margin: var(--small-gap); + padding: var(--small-gap); border: 2px solid var(--dark-3); border-radius: var(--border-radius); + display: flex; + flex-direction: column; - .description-content-header { - display: flex; - flex-wrap: wrap; - justify-content: space-between; + .des-content { + padding: var(--small-gap); - color: var(--text); + .add-step-button { + color: var(--dark-text); + display: flex; + align-items: center; + gap: var(--small-gap); - .bx { - font-size: 22px; + border: 2px solid var(--dark-3); + border-radius: var(--border-radius); - @media (max-width:725px) { - font-size: 16px; - } + padding: 5px 15px; + + cursor: pointer; + + width: fit-content; } - .header { + .step { + color: var(--text); + + width: 100%; + display: flex; - gap: var(--gap); + flex-wrap: wrap; + gap: var(--big-gap); - span { - cursor: pointer; - padding: 6px; + .step-info { display: flex; - align-items: center; - justify-content: center; - border-radius: var(--border-radius); + flex-direction: column; - &:hover { - background-color: var(--dark-3); + gap: var(--gap); + + .add-info-button { + color: var(--dark-text); + border: 2px solid var(--dark-3); + border-radius: var(--border-radius); + padding: 3px 10px; + display: flex; + align-items: center; + gap: 2px; + cursor: pointer; } - .select-text { - @media (max-width:725px) { - font-size: 12px; - } + .button-shrink { + + @media (max-width:905px) { + font-size: 8px; + } } - } - .header-2 { - display: flex; - gap: var(--small-gap); + .step-head { + display: flex; + flex-wrap: wrap; + gap: var(--small-gap); + border-bottom: 2px solid var(--dark-3); + padding-bottom: var(--small-gap); - .bx { - font-size: 22px; + .step-head-span { + display: flex; + align-items: end; + + @media (max-width:905px) { + font-size: 12px; + } + + } + + .bx-icon { + display: flex; + align-items: center; + padding: 3px 6px 1px 6px; + border-radius: var(--border-radius); + cursor: pointer; - @media (max-width:725px) { - font-size: 16px; + &:hover { + background-color: var(--dark-3); + } } } } + + .step-text { + width: 60%; + padding: 15px; + border: 2px solid var(--dark-3); + border-radius: var(--border-radius); + height: fit-content; + } + + .side-info { + color: var(--primary); + max-width: 140px; + } } } } @@ -242,7 +293,7 @@ .connector { position: absolute; - display: flex; + display: none; justify-content: space-between; top: 0; left: 30px; @@ -285,7 +336,7 @@ display: flex; align-items: center; gap: var(--small-gap); - + padding: 15px; border: 2px solid var(--dark-2); @@ -310,32 +361,4 @@ } } } - - - - .link-stroke-down { - height: 50vh; - width: 20px; - - align-self: flex-end; - - border-top: 2px solid var(--dark-2); - border-left: 2px solid var(--dark-2); - border-radius: var(--border-radius) 0 0 0 ; - } - - .line-stroke-middle { - - } - - .link-stroke-up { - height: 50px; - width: 20px; - - align-self: flex-end; - - border-bottom: 2px solid var(--dark-2); - border-left: 2px solid var(--dark-2); - border-radius: 0 var(--border-radius) 0 ; - } } \ No newline at end of file diff --git a/src/client/addplate/index.html b/src/client/addplate/index.html index 361352a..ff042ab 100644 --- a/src/client/addplate/index.html +++ b/src/client/addplate/index.html @@ -1,9 +1,9 @@ - - - + + + PlatePilot | Add Plate @@ -66,33 +66,35 @@
-
Add Plate Descirption
+
Add Plate Descirption
-
+
Plate Description +
Close
-
-
-
- Normal text - - -
-
-
- - - - - +
+
+
Add Step
+
+
+
+
+
1. Step
+ Add Heading + Add Time + Add Time of Day
-
- - +
+
+ 1. Step Description + Add Time + Add Ingredient + +
-
+
diff --git a/src/client/fridge/_src/index.ts b/src/client/fridge/_src/index.ts index 612729b..380f970 100644 --- a/src/client/fridge/_src/index.ts +++ b/src/client/fridge/_src/index.ts @@ -1,66 +1,148 @@ document.addEventListener('DOMContentLoaded', () => { - const wrapper = document.querySelector('.fridge-content-wrapper'); - - if (wrapper) { - const categories = document.querySelectorAll('.category'); - let selectedCategory: string | null = null; - - const updateSelectedCategory = () => { - categories.forEach(category => { - const categoryData = category.getAttribute('data-category'); - const container = document.querySelector(`.fridge-content-container[data-category="${categoryData}"]`); - const icon = category.querySelector('.category-icon'); - - if (container) { - const containerRect = container.getBoundingClientRect(); - - if (containerRect.top <= wrapper.clientHeight / 2 && containerRect.bottom >= wrapper.clientHeight / 2) { - if (selectedCategory !== categoryData) { - categories.forEach(cat => cat.classList.remove('selected')); - categories.forEach(cat => cat.querySelector('.category-icon')?.classList.remove('selected-icon')); - category.classList.add('selected'); - icon?.classList.add('selected-icon'); - selectedCategory = categoryData; - } + const wrapper = document.querySelector('.fridge-content-wrapper'); + + if (wrapper) { + const categories = document.querySelectorAll('.category'); + let selectedCategory: string | null = null; + + const updateSelectedCategory = () => { + categories.forEach(category => { + const categoryData = category.getAttribute('data-category'); + const container = document.querySelector(`.fridge-content-container[data-category="${categoryData}"]`); + const icon = category.querySelector('.category-icon'); + + if (container) { + const containerRect = container.getBoundingClientRect(); + + if (containerRect.top <= wrapper.clientHeight / 2 && containerRect.bottom >= wrapper.clientHeight / 2) { + if (selectedCategory !== categoryData) { + categories.forEach(cat => cat.classList.remove('selected')); + categories.forEach(cat => cat.querySelector('.category-icon')?.classList.remove('selected-icon')); + category.classList.add('selected'); + icon?.classList.add('selected-icon'); + selectedCategory = categoryData; } } - }); - }; - - const clickAllItems = () => { - const allItemsCategory = document.querySelector('.category[data-category="all"]'); - if (allItemsCategory) { - const clickEvent = new Event('click', { bubbles: true }); - allItemsCategory.dispatchEvent(clickEvent); } - }; - - wrapper.addEventListener('scroll', () => { - updateSelectedCategory(); }); - - categories.forEach(category => { - category.addEventListener('click', () => { - categories.forEach(cat => cat.classList.remove('selected')); - categories.forEach(cat => cat.querySelector('.category-icon')?.classList.remove('selected-icon')); - category.classList.add('selected'); - category.querySelector('.category-icon')?.classList.add('selected-icon'); - selectedCategory = category.getAttribute('data-category'); - - const container = document.querySelector(`.fridge-content-container[data-category="${selectedCategory}"]`); - if (container) { - const containerRect = container.getBoundingClientRect(); - const offset = containerRect.top + window.scrollY - wrapper.getBoundingClientRect().top - (wrapper.clientHeight - containerRect.height) / 2; - - wrapper.scrollTo({ - top: offset + wrapper.scrollTop, - behavior: 'smooth' - }); - } - }); + }; + + const clickAllItems = () => { + const allItemsCategory = document.querySelector('.category[data-category="all"]'); + if (allItemsCategory) { + const clickEvent = new Event('click', { bubbles: true }); + allItemsCategory.dispatchEvent(clickEvent); + } + }; + + wrapper.addEventListener('scroll', () => { + updateSelectedCategory(); + }); + + categories.forEach(category => { + category.addEventListener('click', () => { + categories.forEach(cat => cat.classList.remove('selected')); + categories.forEach(cat => cat.querySelector('.category-icon')?.classList.remove('selected-icon')); + category.classList.add('selected'); + category.querySelector('.category-icon')?.classList.add('selected-icon'); + selectedCategory = category.getAttribute('data-category'); + + const container = document.querySelector(`.fridge-content-container[data-category="${selectedCategory}"]`); + if (container) { + const containerRect = container.getBoundingClientRect(); + const offset = containerRect.top + window.scrollY - wrapper.getBoundingClientRect().top - (wrapper.clientHeight - containerRect.height) / 2; + + wrapper.scrollTo({ + top: offset + wrapper.scrollTop, + behavior: 'smooth' + }); + } }); - - clickAllItems(); + }); + clickAllItems(); + } +}); + + +// open close modal + +const addModalItemButton = document.getElementById("addmodalitembutton"); + +addModalItemButton?.addEventListener('click', () => { + const fridgeModalScreen = document.querySelector('.fridge-modal') as HTMLElement; + fridgeModalScreen.style.display ='flex'; +}); + +const saveModalItemButton = document.getElementById("savebuttonmodal"); + +saveModalItemButton?.addEventListener('click', () => { + const fridgeModalScreen = document.querySelector('.fridge-modal') as HTMLElement; + fridgeModalScreen.style.display ='none'; +}); + + +// modal amount + +const dropdownAmountButton = document.getElementById("dropdown-amount-button")!; +const amountDropdown = document.getElementById("amount-dropdown-menu")!; + +dropdownAmountButton?.addEventListener('click', () => { + + if (amountDropdown) { + if (amountDropdown.style.display === 'none' || amountDropdown.style.display === '') { + amountDropdown.style.display = 'block'; + } else { + amountDropdown.style.display = 'none'; + } + } +}); + +const dropdownItems = amountDropdown?.getElementsByClassName("dropdown-item"); + +if (dropdownItems) { + for (const item of dropdownItems) { + item.addEventListener("click", (event) => { + const selectedItemText = item.textContent; + const newSpan = document.createElement("span"); + newSpan.textContent = selectedItemText; + newSpan.classList.add('dropdown-text') + + dropdownAmountButton.innerHTML = ''; + dropdownAmountButton.appendChild(newSpan); + amountDropdown.style.display = 'none'; + }); + } +} + +dropdownAmountButton?.addEventListener('click', () => { + if (amountDropdown) { + amountDropdown.style.display = (amountDropdown.style.display === 'none' + || amountDropdown.style.display === '') ? 'block' : 'none'; + } +}); + +dropdownAmountButton?.addEventListener('click', () => { + if (amountDropdown) { + amountDropdown.style.display = 'block'; + } +}); + + + +// modal category + +const categoryCards = document.querySelectorAll(".category-card"); + +categoryCards.forEach((card) => { + card.addEventListener("click", () => { + const isSelected = card.classList.contains("selected"); + + categoryCards.forEach((c) => { + c.classList.remove("selected"); + }); + + if (!isSelected) { + card.classList.add("selected"); } }); - \ No newline at end of file +}); \ No newline at end of file diff --git a/src/client/fridge/_styles/index.scss b/src/client/fridge/_styles/index.scss index 34c80e1..8081564 100644 --- a/src/client/fridge/_styles/index.scss +++ b/src/client/fridge/_styles/index.scss @@ -5,7 +5,7 @@ nav { .item-style-1 { - color: var(--dark-text); + color: var(--dark-text); } .item-4 { @@ -18,48 +18,282 @@ .category-icon.selected-icon { color: #FFFFFF; - } +} - .category[data-category="all"] .category-icon.selected-icon { +.category[data-category="all"] .category-icon.selected-icon { color: #FFFFFF; - } - - .category[data-category="fruits"] .category-icon.selected-icon { +} +.category-icon-all { + color: #FFFFFF; +} + +.category[data-category="fruits"] .category-icon.selected-icon { color: #FFA500; - } - - .category[data-category="vegetables"] .category-icon.selected-icon { +} +.category-icon-fruits { + color: #FFA500; +} + +.category[data-category="vegetables"] .category-icon.selected-icon { color: #008000; - } - - .category[data-category="grains"] .category-icon.selected-icon { - color: #F5F5DC; - } - - .category[data-category="meat"] .category-icon.selected-icon { +} +.category-icon-vegetables { + color: #008000; +} + +.category[data-category="grains"] .category-icon.selected-icon { + color: #e1c699; +} +.category-icon-grains { + color: #e1c699; +} + +.category[data-category="meat"] .category-icon.selected-icon { color: #de5959; - } - - .category[data-category="fish"] .category-icon.selected-icon { +} +.category-icon-meat { + color: #de5959; +} + +.category[data-category="fish"] .category-icon.selected-icon { color: #4b4be0; - } - - .category[data-category="dairy"] .category-icon.selected-icon { +} +.category-icon-fish { + color: #4b4be0; +} + +.category[data-category="dairy"] .category-icon.selected-icon { color: #e4e462; - } - - .category[data-category="sweets"] .category-icon.selected-icon { +} +.category-icon-dairy { + color: #e4e462; +} + +.category[data-category="sweets"] .category-icon.selected-icon { + color: #FFC0CB; +} +.category-icon-sweets { color: #FFC0CB; - } +} + +.fridge-modal { + position: fixed; + display: flex; //change back to none + justify-content: center; + width: 100%; + height: 100%; + + .modal-content-wrapper { + height: fit-content; + width: 400px; + background-color: var(--surface); + border: 2px solid var(--dark-2); + border-radius: var(--border-radius); + + .modal-content-container { + color: var(--text); + + .modal-content-header { + border-bottom: 2px solid var(--dark-2); + padding-bottom: var(--small-gap); + + display: flex; + justify-content: space-between; + + padding: var(--small-gap) var(--gap) var(--small-gap) var(--gap); + + .modal-header-text { + font-size: 18px; + } + } + + .modal-content { + display: flex; + flex-direction: column; + gap: var(--gap); + + padding: var(--small-gap) var(--gap) var(--gap) var(--gap); + + .modal-content-item-group { + display: flex; + gap: var(--small-gap); + + .modal-content-item { + display: flex; + flex-direction: column; + + .modal-item-header { + padding-left: 2px; + padding-bottom: 6px; + } + + .modal-input { + background-color: transparent; + border: 2px solid var(--dark-3); + border-radius: var(--border-radius); + color: var(--dark-text); + padding: var(--small-gap); + } + + .name { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .amount-input-wrapper { + display: flex; + align-items: center; + border: 2px solid var(--dark-3); + border-radius: var(--border-radius); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + padding: 0 var(--small-gap) 0 var(--small-gap); + + .amount { + width: 70px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + background-color: transparent; + color: var(--dark-text); + padding: var(--small-gap); + border: none; + } + } + + .amount-dropdown { + color: var(--text); + + display: none; + + position: absolute; + top: 115px; + + display: none; + flex-direction: column; + + background-color: var(--surface); + + border: 2px solid var(--dark-2); + border-radius: var(--border-radius); + + margin-left: 30px; + margin-top: 10px; + + user-select: none; + + .dropdown-item { + cursor: pointer; + padding: var(--small-gap); + border-bottom: 2px solid var(--dark-3); + } + + .last-dropdown-item { + border: none; + } + } + + + + .expiration-wrapper { + display: flex; + padding-left: 2px; + + gap: var(--small-gap); + + .expiration-content { + display: flex; + flex-direction: column; + + .expiration-text { + font-size: 12px; + padding-left: 2px; + } + + .expiration-input { + height: 25px; + width: 60px; + + border: 2px solid var(--dark-3); + + cursor: pointer; + } + + .day { + border-radius: var(--border-radius) 0 0 var(--border-radius); + } + + .month { + border-radius: 0; + } + + .year { + border-radius: 0 var(--border-radius) var(--border-radius) 0; + } + } + } + + .category-card-wrapper { + display: flex; + flex-wrap: wrap; + + gap: var(--small-gap); + + .category-card { + height: 60px; + width: 80px; + + border: 2px solid var(--dark-3); + border-radius: var(--border-radius); + + cursor: pointer; + + color: var(--dark-text); + + display: flex; + flex-direction: column; + align-items: center; + + padding: var(--small-gap); + + &:hover { + border: 2px solid var(--dark-2); + color: var(--text); + } + + .category-card-text { + font-size: 12px; + } + + .bx { + font-size: 21px; + } + } + + .selected { + border: 2px solid var(--dark-2); + color: var(--text); + } + } + } + + } + } + } + } +} + + .fridge { display: flex; .fridge-nav { - width: 20%; - min-width: 105px; + width: 15%; + min-width: 107px; - padding: 20px 5px 5px 1%; + padding: var(--small-gap); display: flex; flex-direction: column; @@ -174,6 +408,10 @@ border-left: 2px solid var(--dark-2); border-top: 2px solid var(--dark-2); border-right: 2px solid var(--dark-2); + + .bx { + font-size: 22px; + } } .fridge-content { diff --git a/src/client/fridge/index.html b/src/client/fridge/index.html index 53c173a..3bffcfa 100644 --- a/src/client/fridge/index.html +++ b/src/client/fridge/index.html @@ -7,7 +7,7 @@ PlatePilot | Fridge - + @@ -18,7 +18,76 @@ - + +
+
+
+
+ Add Item +
Save
+
+
+
+
+ Name + +
+
+ Amount +
+ + +
+
+
items
+
mg
+
g
+
kg
+
oz
+
lb
+
+
+
+
+
+ Category +
+
Fruitsnutrition
+
Vegetablesgrass
+
Grains
+
Meategg_alt
+
Fishset_meal
+
Dairy
+
Sweetsicecream
+
+
+
+
+
+ Expiration Date +
+
+ +
+ +
+
+
+
+
+
+
clear_allAll Items @@ -30,13 +99,13 @@ Dairy icecreamSweets
-
Add Item
+
Add Item
-
All Items
+ clear_all
All Items
@@ -44,7 +113,7 @@
All Items
- nutrition
Fruits
+ nutrition
Fruits
@@ -52,7 +121,7 @@
All Items
-
Vegetables
+ grass
Vegetables
@@ -60,7 +129,7 @@
Vegetables
-
Grains
+
Grains
@@ -68,7 +137,7 @@
Grains
-
Meat
+ egg_alt
Meat
@@ -76,7 +145,7 @@
Meat
-
Fish
+ set_meal
Fish
@@ -84,7 +153,7 @@
Fish
-
Dairy
+
Dairy
@@ -92,7 +161,7 @@
Dairy
-
Sweets
+ icecream
Sweets
diff --git a/src/client/tobuy/_styles/index.scss b/src/client/tobuy/_styles/index.scss index 6636423..7109818 100644 --- a/src/client/tobuy/_styles/index.scss +++ b/src/client/tobuy/_styles/index.scss @@ -16,9 +16,13 @@ } } +::-webkit-scrollbar { + display: none; +} + .tobuy { display: flex; - flex-direction: column; + flex-direction: column; width: 100%; @@ -31,7 +35,7 @@ .tobuy-container { display: flex; - overflow: scroll; + overflow-x: scroll; gap: var(--gap);