Skip to content

Commit 5d738fe

Browse files
NoxtrahNoxtrah
committed
Some visual improvements on recipe-book and search-by-ingredientTab page.
1 parent bafe382 commit 5d738fe

File tree

4 files changed

+86
-19
lines changed

4 files changed

+86
-19
lines changed

‎scripts/recipe-book.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,19 @@ function sendRecipesToDatabase(){
4848

4949
}
5050

51+
function setupBackButton() {
52+
const backButton = document.getElementById('back-arrow-button');
53+
54+
backButton.addEventListener('click', () => {
55+
window.history.back();
56+
// window.history.go(-1);
57+
});
58+
}
59+
60+
setupBackButton();
61+
5162
document.addEventListener("DOMContentLoaded", function () {
63+
document.getElementById('my-recipe-book-title').textContent = "My Recipe Book";
5264
const recipeContainer = document.querySelector(".recipe-book-container");
5365

5466
// Show recipes when the page is loaded

‎styles/recipe-book.css

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,52 @@
1313
}
1414

1515
body {
16-
font-family: 'Arial', sans-serif;
17-
background-color: #f2f2f2;
18-
color: #333;
16+
font-family: Arial, sans-serif;
17+
font-size: larger;
18+
margin: 0;
19+
padding: 0;
20+
background-color: var(--background_color);
21+
}
22+
23+
header {
24+
background-color: var(--dark_grey);
25+
color: var(--light_purple);
26+
text-align: center;
27+
padding: 1em;
28+
}
29+
30+
#header-container {
31+
display: flex;
32+
align-items: center;
33+
}
34+
35+
#back-arrow-button {
36+
background: transparent;
37+
border: none;
38+
padding: 0;
39+
position: relative;
40+
}
41+
42+
.back-arrow {
43+
font-size: 5em;
44+
color: var(--light_purple);
45+
position: absolute;
46+
top: 50%;
47+
left: 50%;
48+
transform: translate(0%, -50%);
49+
transition: color 0.3s ease-in-out;
50+
}
51+
52+
#back-arrow-button:hover .back-arrow {
53+
color: var(--purple);
54+
/* Change the color on hover */
55+
cursor: pointer;
56+
/* Change the cursor on hover */
57+
}
58+
59+
#my-recipe-book-title {
60+
flex-grow: 1;
61+
/* This will make the title take up the remaining space */
1962
}
2063

2164
.add-recipe-btn {

‎styles/searchByIngredientTab.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ header {
6161
overflow-y:auto;
6262
overflow-x:visible;
6363
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
64-
margin-inline: 9.6vw;
64+
margin-inline: 10vw;
6565
margin-top: 10vh;
6666
white-space: nowrap;
6767
flex-direction: row; /* Lay out items horizontally */

‎templates/recipe-book.html

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,37 @@
99
</head>
1010

1111
<body>
12+
13+
<header>
14+
<div id="header-container">
15+
<button id="back-arrow-button">
16+
<ion-icon class="back-arrow" name="chevron-back-circle-outline"></ion-icon>
17+
</button>
18+
<h1 id="my-recipe-book-title">Loading...</h1>
19+
</div>
20+
</header>
21+
1222
<br>
13-
<h1 style="margin: 50px;">My Recipe Book</h1>
23+
<!-- <h1 style="margin: 50px;">My Recipe Book</h1> -->
1424
<div class="add-recipe-btn">
15-
<a href="addNewRecipeToBook.html" id="addrecipebtn">Add New Recipe</a>
25+
<a href="addNewRecipeToBook.html" id="addrecipebtn">Add New Recipe</a>
1626
</div>
1727

1828
<div class="grid-container">
1929

2030
<div class="recipe-item">
21-
<div class="book">
22-
<div class="gloss"></div>
23-
<img class="cover" src="../Images/background.png">
24-
<div class="description">
25-
<h1 class="recipe-dame"></h1>
26-
<hr>
27-
<p class="recipe-description"></p>
28-
</div>
31+
<div class="book">
32+
<div class="gloss"></div>
33+
<img class="cover" src="../Images/background.png">
34+
<div class="description">
35+
<h1 class="recipe-dame"></h1>
36+
<hr>
37+
<p class="recipe-description"></p>
38+
</div>
2939

30-
</div>
40+
</div>
3141

32-
<h1 class="recipe-title"></h1>
42+
<h1 class="recipe-title"></h1>
3343

3444
<div class="buttons">
3545
<button>Publish</button>
@@ -103,10 +113,12 @@ <h1 class="recipe-title"></h1>
103113
<button>Delete</button>
104114
</div> -->
105115

106-
</div>
116+
</div>
107117
</div>
108118

109-
<script src="../scripts/recipe-book.js"></script>
119+
<script src="../scripts/recipe-book.js"></script>
120+
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
121+
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
110122
</body>
111123

112-
</html>
124+
</html>

0 commit comments

Comments
 (0)