Skip to content

Commit

Permalink
Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jodekq
Jodekq committed Feb 13, 2024
1 parent eed6810 commit a9346bc
Show file tree
Hide file tree
Showing 7 changed files with 475 additions and 68 deletions.
38 changes: 36 additions & 2 deletions src/client/_styles/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,15 +97,36 @@ body {
height: fit-content;
}

.button-1 {
padding: 2px var(--small-gap);
font-weight: bold;
background-color: var(--primary);
border-radius: var(--border-radius);
color: var(--text-opposite);
cursor: pointer;
height: fit-content;
}

.button-2 {
color: var(--text);
border: 2px solid var(--primary);
border-radius: var(--border-radius);
padding: 2px var(--small-gap);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--small-gap);
height: fit-content;
}

.close-button {
display: flex;
align-items: center;
background-color: var(--light-error);
padding: 2px 8px;
padding: 2px var(--small-gap);
border-radius: var(--border-radius);
color: var(--text-opposite);
cursor: pointer;
font-size: 12px;
}

.dropdown-button {
Expand Down Expand Up @@ -177,6 +198,19 @@ body {
outline: none;
}

.modal-info-item {
color: var(--dark-text);
border: 2px solid var(--dark-3);
padding: 2px var(--small-gap);
border-radius: var(--border-radius);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--small-gap);
height: fit-content;
width: fit-content;
}

// defined items end

header {
Expand Down
12 changes: 6 additions & 6 deletions src/client/_templates/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@
</head>
<body>
<header>
<a href="../"><h4>Plate Pilot</h4></a>
<a href="../../../dist/"><h4>Plate Pilot</h4></a>
<span>Sign In</span>
</header>
<div class="nav-wrapper">
<nav>
<a class="item-style-1 item-1" href="../addplate/"><i class='bx bx-plus-medical'></i><span>New Plates</span></a>
<a class="item-style-1 item-2" href="../saveplates/"><i class='bx bx-save'></i><span>Saved Plates</span></a>
<a class="item-style-1 item-3" href="../tobuy/"><i class='bx bx-list-check'></i><span>ToBuy</span></a>
<a class="item-style-1 item-4" href="../fridge/"><i class='bx bx-fridge'></i><span>Fridge</span></a>
<a class="item-style-1 item-5" href="../calendar/"><i class='bx bxs-calendar'></i><span>Calendar</span></a>
<a class="item-style-1 item-1" href="../../../dist/addplate/"><i class='bx bx-plus-medical'></i><span>New Plates</span></a>
<a class="item-style-1 item-2" href="../../../dist/saveplates/"><i class='bx bx-save'></i><span>Saved Plates</span></a>
<a class="item-style-1 item-3" href="../../../dist/tobuy/"><i class='bx bx-list-check'></i><span>ToBuy</span></a>
<a class="item-style-1 item-4" href="../../../dist/fridge/"><i class='bx bx-fridge'></i><span>Fridge</span></a>
<a class="item-style-1 item-5" href="../../../dist/calendar/"><i class='bx bxs-calendar'></i><span>Calendar</span></a>
</nav>
</div>
</body>
Expand Down
31 changes: 11 additions & 20 deletions src/client/addplate/_styles/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,14 @@

.addplate {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;

padding: var(--gap);

height: 100%;

.container {
width: 98%;

width: 100%;
height: 100%;

display: flex;
Expand All @@ -27,7 +24,7 @@

.content-wrapper {
width: 100%;

max-width: 1100px;
background-color: var(--surface);

border: 2px solid var(--dark-2);
Expand Down Expand Up @@ -152,12 +149,12 @@
display: flex;
gap: var(--gap);
flex-wrap: wrap;
flex-direction: column;

.column-wrapper {
.row-wrapper {
display: flex;
flex-direction: column;
color: var(--text);
gap: var(--small-gap);
gap: var(--gap);

.sub-group {
display: flex;
Expand All @@ -181,7 +178,7 @@

.subcontent-wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: column;
color: var(--text);
gap: var(--small-gap);

Expand Down Expand Up @@ -228,23 +225,17 @@
}

.add-wrapper {
display: flex;
align-items: center;

min-width: 250px;

border: 2px solid var(--dark-3);
border-radius: var(--border-radius);

padding: 0 var(--small-gap);

.add-button-2 {
display: flex;
gap: var(--small-gap);

padding: 5px;

width: 100%;

border: 2px solid var(--dark-3);
border-radius: var(--border-radius);

max-width: 200px;

cursor: pointer;

Expand Down
40 changes: 2 additions & 38 deletions src/client/addplate/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
</div>
</div>
<div class="bottom-wrapper">
<div class="column-wrapper">
<div class="row-wrapper">
<div class="sub-group">
<span>Portions</span>
<input class="sub-group-input" type="number" value="4">
Expand Down Expand Up @@ -110,41 +110,6 @@
</div>
</div>
</div>
<!-- <div class="content">
<div class="subcontent">
<span>Plate Name</span>
<input type="text" alt="Enter name of your Plate">
</div>
<div class="subcontent">
<span>Date</span>
<input type="date" alt="Choose Date">
</div>
<div class="subcontent-small">
<span class="subcontent-head">Ingredients</span>
<div class="add-amount-wrapper">
<div id="add-ingredient-button" class="add-button-2"><i class='bx bx-plus'></i><span>Add Ingredient</span></div>
</div>
<div class="subcontent-items sub-ingredient"></div>
</div>
<div class="subcontent-small">
<span class="subcontent-head">Drinks</span>
<div class="add-amount-wrapper">
<div id="add-drink-button" class="add-button-2"><i class='bx bx-plus'></i><span>Add Drink</span></div>
</div>
<div class="subcontent-items sub-drink">
</div>
</div>
<div class="subcontent-small">
<span class="subcontent-head">Equipment</span>
<div class="add-amount-wrapper">
<div id="add-equipment-button" class="add-button-2"><i class='bx bx-plus'></i><span>Add Equipment</span></div>
</div>
<div class="subcontent-items sub-equipment">
</div>
</div>
</div> -->
</section>
<section class="addplate-button-container">
<div class="connector"></div>
Expand All @@ -164,8 +129,7 @@
<div class="step-info side-info">
<div class="step-head">1. Step</div>
<small class="add-info-button"><i class='bx bx-plus'></i>Add Heading</small>
<small class="add-info-button"><i class='bx bx-plus'></i>Add Time</small>
<small class="add-info-button"><i class='bx bx-plus'></i>Add Time of Day</small>
<small class="add-info-button"><i class='bx bx-plus'></i>Add info</small>
</div>
<div class="step-info step-text">
<div class="step-head">
Expand Down
23 changes: 23 additions & 0 deletions src/client/saveplates/_src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,27 @@ changeListButton?.addEventListener("click", () => {
element.style.width = "100%";
element.style.maxWidth = "none";
});
});

const savePlateItems = document.querySelectorAll(".saveplates-item");

savePlateItems.forEach(item => {
item.addEventListener("click", () => {
const clickedItemId = item.id;

const modalItemId = clickedItemId + "-modal";
const modalElement = document.getElementById(modalItemId);

if (modalElement) {
modalElement.style.display = "flex";

const closeButton = modalElement.querySelector(".close-button");

if (closeButton) {
closeButton.addEventListener("click", () => {
modalElement.style.display = "none";
});
}
}
});
});
Loading

0 comments on commit a9346bc

Please sign in to comment.