alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2024-12-27 09:29:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #84 from cse110-fa22-group29/sprint-2-css-review-details

Browse Source 
Sprint 2 css review details
This commit is contained in:
Arthur Lu 2022-11-21 17:20:36 -08:00 committed by GitHub
commit 63a7d5ce1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 626 additions and 593 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
source/CreatePage.html
View File

@ -7,6 +7,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Food Journal</title> <title>Food Journal</title>
<!--Add Favicon-->
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico">
<!-- Recipe Card Custom Element --> <!-- Recipe Card Custom Element -->
<script src="assets/scripts/ReviewCard.js" type="module"></script> <script src="assets/scripts/ReviewCard.js" type="module"></script>
@ -15,72 +18,74 @@
<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config--> <!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
<!-- <link rel="stylesheet" href="/static/reset.css" /> --> <!-- <link rel="stylesheet" href="/static/reset.css" /> -->
<link rel="stylesheet" href="./static/CreatePage.css" /> <link rel="stylesheet" href="./static/CreatePage.css" />
<link rel="icon" href="./assets/images/icons/favicon.ico"> <link rel="stylesheet" href="./static/Form.css" />
<script src="./assets/scripts/CreatePage.js" type="module"></script> <script src="./assets/scripts/CreatePage.js" type="module"></script>
</head> </head>
<body> <header>
<input type="button" value="Home" id="home-btn" onclick="window.location.assign('./index.html')"> <div class="top-bar">
<div class ="top-bar"> <img src ="./assets/images/Logo.png" alt="logo" />
<img src ="./assets/images/icons/Logo.png" alt="logo" />
<h1> Food Journal </h1> <h1> Food Journal </h1>
<img src ="./assets/images/Logo.png" alt="logo" />
</div> </div>
</header>
<body>
<div class="journal-form"> <div class="journal-form">
<h1>New Entry </h1> <h1>New Entry</h1>
<form id="new-food-entry"> <form id="new-food-entry">
<fieldset>
<legend>Pic:</legend>
Choose Input type:
<select id="select" name="select">
<option value="file">File Upload</option>
<option value="url">From an URL</option>
</select>
<label for="mealImage" id="source">
Source:
<input type="file" accept="image/*" id="mealImg" name="mealImg">
</label>
<label for="image-alt">
Alt Text:
<input type="text" id="imgAlt" name="imgAlt">
</label>
</fieldset>
<fieldset>
<legend> Meal: </legend>
<label for="Meal: ">Meal:
<input type="text" id="mealName" name="mealName" required>
</label>
<label for="comments">Comments:
<br>
<textarea name="comments" id="comments"></textarea>
</label>
</fieldset>
<fieldset class="rating">
<legend> Rating: </legend>
<input type="radio" id="s5" name="rating" value="5"/> <label for="s5" id="s5-select"> 5 stars </label>
<input type="radio" id="s4" name="rating" value="4"/> <label for="s4" id="s4-select"> 4 stars </label>
<input type="radio" id="s3" name="rating" value="3"/> <label for="s3" id="s3-select"> 3 stars </label>
<input type="radio" id="s2" name="rating" value="2"/> <label for="s2" id="s2-select"> 2 stars </label>
<input type="radio" id="s1" name="rating" value="1"/> <label for="s1" id="s1-select"> 1 star </label>
</fieldset>
<fieldset> <fieldset>
<legend>Other Info:</legend> <legend>PICTURE:</legend>
<label for="restaurant"> <select id="select" name="select">
Restaurant: <option value="file">File Upload</option>
<input type="text" id="restaurant" name="restaurant" required> <option value="url">From an URL</option>
</label> </select>
<label for="tag-form"> <label for="mealImage" id="source">
Tags: <input type="file" accept="image/*" id="mealImg" name="mealImg">
<input type="text" id="tag-form" name="tag-form"> </label>
<div class='tag-container' id="tag-container-form"> </fieldset>
</div>
<button type="button" id="tag-add-btn">Add Tag</button>
</label>
<fieldset>
<legend>MEAL NAME:</legend>
<label for="Name: "> <input type="text" id="mealName" name="mealName" required> </label>
</fieldset>
</fieldset> <fieldset>
<button type="submit" id="save-btn" value="Submit">Save Review</button> <legend>RESTAURANT NAME:</legend>
<label for="Name:"> <input type="text" id="restaurant" name="restaurant" required> </label>
</fieldset>
<fieldset>
<legend>RATING:</legend>
<div style="display: flex; justify-content: flex-start; align-items: center;">
<div class="rating">
<input type="radio" id="s5" name="rating" value="5"/> <label for="s5" id="s5-select"> 5 stars </label>
<input type="radio" id="s4" name="rating" value="4"/> <label for="s4" id="s4-select"> 4 stars </label>
<input type="radio" id="s3" name="rating" value="3"/> <label for="s3" id="s3-select"> 3 stars </label>
<input type="radio" id="s2" name="rating" value="2"/> <label for="s2" id="s2-select"> 2 stars </label>
<input type="radio" id="s1" name="rating" value="1"/> <label for="s1" id="s1-select"> 1 star </label>
</div>
</div>
</fieldset>
<fieldset>
<legend>COMMENTS:</legend>
<textarea name="comments" id="comments" rows="5" style="resize: none; width: 100%;"></textarea>
</fieldset>
<fieldset>
<legend>TAGS: (ex. cuisine, distance, cost, etc)</legend>
<input type="text" id="tag-form" name="tag-form">
<div class='tag-container' id="tag-container-form">
</div>
<button type="button" id="tag-add-btn"> + </button>
</fieldset>
<button type="submit" id="save-btn" value="Submit">Save</button>
<input type="button" value="Cancel" id="home-btn" onclick="window.location.assign('./index.html')">
</form> </form>
</div> </div>
</body> </body>

174
source/ReviewDetails.html
View File

@ -6,106 +6,116 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Food Journal</title> <title>Food Journal</title>
<!--Add Favicon-->
<link rel="icon" type="image/x-icon" href="./assets/images/icons/favicon.ico">
<!-- Recipe Card Custom Element --> <!-- Recipe Card Custom Element -->
<script src="assets/scripts/ReviewCard.js" type="module"></script> <script src="assets/scripts/ReviewCard.js" type="module"></script>
<!-- Main Stylesheets & Scripts --> <!-- Main Stylesheets & Scripts -->
<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config--> <!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
<!-- <link rel="stylesheet" href="/static/reset.css" /> --> <!-- <link rel="stylesheet" href="/static/reset.css" /> -->
<link rel="stylesheet" href="./static/ReviewDetails.css" /> <link rel="stylesheet" href="./static/ReviewDetails.css" />
<link rel="stylesheet" href="./static/Form.css" />
<script src="assets/scripts/ReviewDetails.js" type="module"></script> <script src="assets/scripts/ReviewDetails.js" type="module"></script>
</head> </head>
<body> <body>
<div class ="top-bar"> <header>
<img src ="./assets/images/icons/Logo.png" alt="logo" /> <div class="top-bar">
<h1 style="font-family:'Lucida Sans'"> Food Journal </h1> <img src ="./assets/images/Logo.png" alt="logo" />
<h1> Food Journal </h1>
</div> <img src ="./assets/images/Logo.png" alt="logo" />
<!--- meal -->
<div class = "meal-name">
<h1 id="d-mealName"> Cucumber Salad </h1>
</div>
<div class = "meal-pics-and-tags">
<!-- image source -->
<img src = https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1,
alt = "photo" width=40% height=40% id="d-mealImg">
<div class = "tag-container", id="d-tags">
</div> </div>
</div> </header>
<div class = "stars-and-comments">
<img src = "./assets/images/icons/5-star.svg" width=10% height=10% id="d-rating">
<h2> The food was good </h2>
</div>
<main> <main>
<input type="button" value="Home" id="home-btn" onclick="window.location.assign('./index.html')"> <div class="journal-form" id="review-details">
<button type="button" id="update-btn">Update</button> <form>
<button type="button" id="delete-btn" class="danger">Delete</button> <fieldset class = "meal-name">
<h1 id="d-mealName" style="font-family: Century Gothic;"></h1>
<h1 id="d-restaurant" style="font-family: Century Gothic; font-size: 30px;"></h1>
</fieldset>
<fieldset class = "meal-pics">
<!-- image source -->
<img width=40% height=40% id="d-mealImg" style="margin-left: auto; margin-right: auto; display: block;"/>
</fieldset>
<fieldset class = "stars-and-comments" style="text-align: center;">
<img width=30% height=30% id="d-rating" style="margin-left: auto; margin-right: auto; display: block;"/>
<p id = "d-comments"></p>
</fieldset>
<fieldset class = "meal-tags">
<div class = "tag-container" id="d-tags" style="justify-content: center;"></div>
</fieldset>
</form>
</div>
<!---Navigation Buttons-->
<div style="display: flex; justify-content: center;">
<img src="./assets/images/home_button_for_interface.png" style="margin: 20px 10px 20px 10px;" id="home-btn" onclick="window.location.assign('./index.html')" height="50" width="50"/>
<img src ="./assets/images/edit_button_for_interface.png" style="margin: 20px 10px 20px 10px;" id="update-btn" height="50" width="50"/>
<img src ="./assets/images/delete_icon_for_interface.png" style="margin: 20px 10px 20px 10px;" id="delete-btn" class="danger" height="50" width="50"/>
</div>
</main> </main>
<div class = journal-form id="update-form-div"> <div class="journal-form hidden" id="update-form">
<form id="update-food-entry"> <h1>Update Entry</h1>
<fieldset>
<legend>Pic:</legend>
Choose Input type:
<select id="select" name="select">
<option value="file">File Upload</option>
<option value="url">From an URL</option>
</select>
<label for="mealImage" id="source">
Source:
<input type="file" accept="image/*" id="mealImg" name="mealImg">
</label>
<label for="image-alt">
Alt Text:
<input type="text" id="imgAlt" name="imgAlt">
</label>
</fieldset>
<fieldset>
<legend> Meal: </legend> <form id="new-food-entry">
<label for="Meal: ">Meal:
<input type="text" id="mealName" name="mealName" required>
</label>
<label for="comments">Comments:
<br>
<textarea name="comments" id="comments"></textarea>
</label>
</fieldset>
<fieldset class="rating"> <fieldset>
<legend> Rating: </legend> <legend>PICTURE:</legend>
<input type="radio" id="s5" name="rating" value="5"/> <label for="s5" id="s5-select"> 5 stars </label> <select id="select" name="select">
<input type="radio" id="s4" name="rating" value="4"/> <label for="s4" id="s4-select"> 4 stars </label> <option value="file">File Upload</option>
<input type="radio" id="s3" name="rating" value="3"/> <label for="s3" id="s3-select"> 3 stars </label> <option value="url">From an URL</option>
<input type="radio" id="s2" name="rating" value="2"/> <label for="s2" id="s2-select"> 2 stars </label> </select>
<input type="radio" id="s1" name="rating" value="1"/> <label for="s1" id="s1-select"> 1 star </label> <label for="mealImage" id="source">
</fieldset> <input type="file" accept="image/*" id="mealImg" name="mealImg">
</label>
</fieldset>
<fieldset> <fieldset>
<legend>Other Info:</legend> <legend>MEAL NAME:</legend>
<label for="restaurant"> <label for="Name: "> <input type="text" id="mealName" name="mealName" required> </label>
Restaurant: </fieldset>
<input type="text" id="restaurant" name="restaurant" required>
</label>
<label for="tag-form">
Tags:
<input type="text" id="tag-form" name="tag-form">
<div class='tag-container' id="tag-container-form">
</div> <fieldset>
<button type="button" id="tag-add-btn">Add Tag</button> <legend>RESTAURANT NAME:</legend>
</label> <label for="Name:"> <input type="text" id="restaurant" name="restaurant" required> </label>
</fieldset>
</fieldset> <fieldset>
<button type="submit" id="save-btn" value="Submit">Update Review</button> <legend>RATING:</legend>
<div style="display: flex; justify-content: flex-start; align-items: center;">
<div class="rating">
<input type="radio" id="s5" name="rating" value="5"/> <label for="s5" id="s5-select"> 5 stars </label>
<input type="radio" id="s4" name="rating" value="4"/> <label for="s4" id="s4-select"> 4 stars </label>
<input type="radio" id="s3" name="rating" value="3"/> <label for="s3" id="s3-select"> 3 stars </label>
<input type="radio" id="s2" name="rating" value="2"/> <label for="s2" id="s2-select"> 2 stars </label>
<input type="radio" id="s1" name="rating" value="1"/> <label for="s1" id="s1-select"> 1 star </label>
</div>
</div>
</fieldset>
<fieldset>
<legend>COMMENTS:</legend>
<textarea name="comments" id="comments" rows="5" style="resize: none; width: 100%;"></textarea>
</fieldset>
<fieldset>
<legend>TAGS: (ex. cuisine, distance, cost, etc)</legend>
<input type="text" id="tag-form" name="tag-form">
<div class='tag-container' id="tag-container-form">
</div>
<button type="button" id="tag-add-btn"> + </button>
</fieldset>
<button type="submit" id="save-btn" value="Submit">Save</button>
<input type="button" value="Cancel" id="home-btn" onclick="window.location.assign('./index.html')">
</form> </form>
</div> </div>
</body> </body>

0
source/assets/images/icons/0-star.svg → source/assets/images/0-star.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
source/assets/images/icons/1-star.svg → source/assets/images/1-star.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
source/assets/images/icons/2-star.svg → source/assets/images/2-star.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
source/assets/images/icons/3-star.svg → source/assets/images/3-star.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
source/assets/images/icons/4-star.svg → source/assets/images/4-star.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
source/assets/images/icons/5-star.svg → source/assets/images/5-star.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
source/assets/images/icons/Grouppink.png → source/assets/images/Grouppink.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

0
source/assets/images/icons/Logo.png → source/assets/images/Logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

0
source/assets/images/icons/default_plate.png → source/assets/images/default_plate.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 311 KiB

After

Width:  |  Height:  |  Size: 311 KiB

BIN
source/assets/images/delete_icon_for_interface.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
source/assets/images/edit_button_for_interface.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

0
source/assets/images/icons/favicon.ico → source/assets/images/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
source/assets/images/home_button_for_interface.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

0
source/assets/images/icons/plate_with_chopsticks.png → source/assets/images/plate_with_chopsticks.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 129 KiB

After

Width:  |  Height:  |  Size: 129 KiB

0
source/assets/images/icons/plate_with_cutlery.png → source/assets/images/plate_with_cutlery.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 253 KiB

After

Width:  |  Height:  |  Size: 253 KiB

159
source/assets/scripts/ReviewCard.js
View File

@ -12,76 +12,93 @@ class ReviewCard extends HTMLElement {
let styleEl = document.createElement("style"); let styleEl = document.createElement("style");
styleEl.textContent = ` styleEl.textContent = `
* { * {
font-family: sans-serif; font-family: Century Gothic;
margin: 0; margin: 0;
padding: 0; padding: 0;
} overflow-wrap: anywhere;
}
a { a {
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
article { article {
align-items: center; align-items: center;
border: 1px solid rgb(223, 225, 229); border: 2px solid rgb(31, 41, 32);
border-radius: 8px; border-radius: 8px;
display: grid; display: grid;
grid-template-rows: 118px 56px 14px 18px 15px 36px; grid-template-rows: 118px 56px 14px 18px 15px 36px;
height: auto; height: auto;
row-gap: 5px; row-gap: 5px;
padding: 0 16px 16px 16px; padding: 0 16px 16px 16px;
width: 178px; width: 178px;
margin: 8px 8px 8px 8px; margin: 8px 8px 8px 8px;
} }
div.rating { div.rating {
align-items: center; align-items: center;
column-gap: 5px; column-gap: 5px;
display: flex; display: flex;
} }
div.rating>img { div.rating>img {
height: auto; height: auto;
display: inline-block; display: inline-block;
object-fit: scale-down; object-fit: scale-down;
width: 78px; width: 78px;
} }
article>img { article>img {
border-top-left-radius: 8px; border-top-left-radius: 6px;
border-top-right-radius: 8px; border-top-right-radius: 6px;
height: 118px; height: 119px;
object-fit: cover; object-fit: cover;
margin-left: -16px; margin-left: -16px;
width: calc(100% + 32px); width: calc(100% + 32px);
} }
label.restaurant-name { label.restaurant-name {
color: black !important; color: black !important;
} }
label.meal-name { label.meal-name {
display: -webkit-box; display: -webkit-box;
font-size: 16px; font-size: 16px;
height: 36px; height: 36px;
line-height: 18px; line-height: 18px;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
label:not(.meal-name), label:not(.meal-name),
span, span,
time { time {
color: #70757A; color: #70757A;
font-size: 12px; font-size: 12px;
} }
`;
.tag-container {
margin-top: 20px;
display: flex;
flex-flow: row wrap;
}
.a-tag {
background-color:#94da97;
border-radius: 7px;
color: #94da97;
padding-right: 7px;
padding-left: 7px;
margin: 3px;
font-weight: bold;
}
`;
articleEl.append(styleEl); articleEl.append(styleEl);
shadowEl.append(articleEl); shadowEl.append(articleEl);
this.shadowEl = shadowEl; this.shadowEl = shadowEl;
@ -117,7 +134,6 @@ class ReviewCard extends HTMLElement {
* following format: * following format:
* { * {
* "mealImg": "string", * "mealImg": "string",
* "imgAlt": "string",
* "mealName": "string", * "mealName": "string",
* "comments": "string", * "comments": "string",
* "rating": number, * "rating": number,
@ -138,13 +154,12 @@ class ReviewCard extends HTMLElement {
//image setup //image setup
let mealImg = document.createElement("img"); let mealImg = document.createElement("img");
mealImg.setAttribute("id", "a-mealImg"); mealImg.setAttribute("id", "a-mealImg");
mealImg.setAttribute("alt",data["imgAlt"]); mealImg.setAttribute("alt","Meal Photo Corrupted");
if(data["mealImg"] != ""){ mealImg.setAttribute("src",data["mealImg"]);
mealImg.setAttribute("src",data["mealImg"]); mealImg.addEventListener("error", function(e) {
} mealImg.setAttribute("src", "./assets/images/plate_with_cutlery.png");
else{ e.onerror = null;
mealImg.setAttribute("src", "./assets/images/icons/plate_with_cutlery.png"); });
}
//meal name setup //meal name setup
let mealLabel = document.createElement("label"); let mealLabel = document.createElement("label");
@ -169,7 +184,7 @@ class ReviewCard extends HTMLElement {
ratingDiv.setAttribute("class", "rating"); ratingDiv.setAttribute("class", "rating");
let starsImg = document.createElement("img"); let starsImg = document.createElement("img");
starsImg.setAttribute("id", "a-rating"); starsImg.setAttribute("id", "a-rating");
starsImg.setAttribute("src", "./assets/images/icons/"+data["rating"]+"-star.svg"); starsImg.setAttribute("src", "./assets/images/"+data["rating"]+"-star.svg");
starsImg.setAttribute("alt", data["rating"] +" stars"); starsImg.setAttribute("alt", data["rating"] +" stars");
starsImg.setAttribute("num", data["rating"]); starsImg.setAttribute("num", data["rating"]);
ratingDiv.append(starsImg); ratingDiv.append(starsImg);
@ -182,7 +197,7 @@ class ReviewCard extends HTMLElement {
if(data["tags"]){ if(data["tags"]){
for (let i = 0; i < data["tags"].length; i++) { for (let i = 0; i < data["tags"].length; i++) {
let newTag = document.createElement("label"); let newTag = document.createElement("label");
newTag.setAttribute("class","tag"); newTag.setAttribute("class","a-tag");
newTag.innerHTML = data["tags"][i]; newTag.innerHTML = data["tags"][i];
tagContainer.append(newTag); tagContainer.append(newTag);
} }
@ -211,7 +226,6 @@ class ReviewCard extends HTMLElement {
* following format: * following format:
* { * {
* "mealImg": "string", * "mealImg": "string",
* "imgAlt": "string",
* "mealName": "string", * "mealName": "string",
* "comments": "string", * "comments": "string",
* "rating": number, * "rating": number,
@ -229,7 +243,6 @@ class ReviewCard extends HTMLElement {
//get image //get image
let mealImg = this.shadowEl.getElementById("a-mealImg"); let mealImg = this.shadowEl.getElementById("a-mealImg");
dataContainer["mealImg"] = mealImg.getAttribute("src"); dataContainer["mealImg"] = mealImg.getAttribute("src");
dataContainer["imgAlt"] = mealImg.getAttribute("alt");
//get meal name //get meal name
let mealLabel = this.shadowEl.getElementById("a-mealName"); let mealLabel = this.shadowEl.getElementById("a-mealName");

34
source/assets/scripts/ReviewDetails.js
View File

@ -16,41 +16,39 @@ function setupInfo(){
//meal image //meal image
let mealImg = document.getElementById("d-mealImg"); let mealImg = document.getElementById("d-mealImg");
mealImg.setAttribute("alt", currReview["imgAlt"]); mealImg.setAttribute("src",currReview["mealImg"]);
if(currReview["mealImg"] != ""){ mealImg.addEventListener("error", function(e) {
mealImg.setAttribute("src",currReview["mealImg"]); mealImg.setAttribute("src", "./assets/images/plate_with_cutlery.png");
} e.onerror = null;
else{ });
mealImg.setAttribute("src", "./assets/images/icons/plate_with_cutlery.png");
}
//meal name //meal name
let mealLabel = document.getElementById("d-mealName"); let mealLabel = document.getElementById("d-mealName");
mealLabel.innerHTML = currReview["mealName"]; mealLabel.innerHTML = currReview["mealName"];
//restaurant name //restaurant name
/*let restaurantLabel = document.getElementById("d-restaurant"); let restaurantLabel = document.getElementById("d-restaurant");
restaurantLabel.innerHTML = currReview["restaurant"]; restaurantLabel.innerHTML = currReview["restaurant"];
//comments //comments
let comments = document.getElementById("d-comments"); let comments = document.getElementById("d-comments");
comments.innerText = currReview["comments"]; comments.innerText = currReview["comments"];
*/
//rating //rating
let starsImg = document.getElementById("d-rating"); let starsImg = document.getElementById("d-rating");
starsImg.setAttribute("src", "./assets/images/icons/"+currReview["rating"]+"-star.svg"); starsImg.setAttribute("src", "./assets/images/"+currReview["rating"]+"-star.svg");
starsImg.setAttribute("alt", currReview["rating"] +" stars"); starsImg.setAttribute("alt", currReview["rating"] +" stars");
/*
//tags //tags
let tagContainer = document.getElementById("d-tags"); let tagContainer = document.getElementById("d-tags");
if(currReview["tags"]){ if(currReview["tags"]){
for (let i = 0; i < currReview["tags"].length; i++) { for (let i = 0; i < currReview["tags"].length; i++) {
let newTag = document.createElement("label"); let newTag = document.createElement("label");
newTag.setAttribute("class","tag"); newTag.setAttribute("class","d-tag");
newTag.innerHTML = currReview["tags"][i]; newTag.innerHTML = currReview["tags"][i];
tagContainer.append(newTag); tagContainer.append(newTag);
} }
}*/ }
} }
function setupDelete(){ function setupDelete(){
@ -69,17 +67,17 @@ function setupUpdate(){
let updateBtn = document.getElementById("update-btn"); let updateBtn = document.getElementById("update-btn");
let currID = JSON.parse(sessionStorage.getItem("currID")); let currID = JSON.parse(sessionStorage.getItem("currID"));
let currReview = getReviewFromStorage(currID); let currReview = getReviewFromStorage(currID);
let form = document.getElementById("update-food-entry"); let form = document.getElementById("new-food-entry");
let updateDiv = document.getElementById("update-form-div"); let updateDiv = document.getElementById("update-form");
updateBtn.addEventListener("click", function(){ updateBtn.addEventListener("click", function(){
//update function //update function
updateDiv.style.display = "block"; updateDiv.classList.remove("hidden");
let tagContainer = document.getElementById("tag-container-form"); let tagContainer = document.getElementById("tag-container-form");
//Set value of each input element to current's values //Set value of each input element to current's values
document.getElementById("mealImg").defaultValue = currReview["mealImg"]; document.getElementById("mealImg").defaultValue = currReview["mealImg"];
document.getElementById("imgAlt").defaultValue = currReview["imgAlt"];
document.getElementById("mealName").defaultValue = currReview["mealName"]; document.getElementById("mealName").defaultValue = currReview["mealName"];
document.getElementById("comments").textContent = currReview["comments"]; document.getElementById("comments").textContent = currReview["comments"];
document.getElementById("s" + `${currReview["rating"]}`).checked = true; document.getElementById("s" + `${currReview["rating"]}`).checked = true;
@ -173,7 +171,7 @@ function setupUpdate(){
updateReviewToStorage(currID, newData); updateReviewToStorage(currID, newData);
form.style.display = "none"; updateDiv.classList.add("hidden");
}); });

13
source/assets/scripts/appTestHelpers.js
View File

@ -8,7 +8,6 @@ import {strict as assert} from "node:assert";
export async function setReviewForm(page, review) { export async function setReviewForm(page, review) {
// Set text fields // Set text fields
await page.$eval("#imgAlt", (el, value) => el.value = value, review.imgAlt);
await page.$eval("#mealName", (el, value) => el.value = value, review.mealName); await page.$eval("#mealName", (el, value) => el.value = value, review.mealName);
await page.$eval("#comments", (el, value) => el.value = value, review.comments); await page.$eval("#comments", (el, value) => el.value = value, review.comments);
await page.$eval("#restaurant", (el, value) => el.value = value, review.restaurant); await page.$eval("#restaurant", (el, value) => el.value = value, review.restaurant);
@ -34,19 +33,17 @@ export async function setReviewForm(page, review) {
} }
/** /**
* Tests a page or shadowDOM for correct element text, src, or alt values * Tests a page or shadowDOM for correct element text or src values
* @param {Object} root page or shodowDOM to test * @param {Object} root page or shodowDOM to test
* @param {string} prefix prefix character for element IDs * @param {string} prefix prefix character for element IDs
* @param {Object} expected values for eahc element * @param {Object} expected values for each element
*/ */
export async function checkCorrectness(root, prefix, expected){ export async function checkCorrectness(root, prefix, expected){
// Get the review image and check src and alt // Get the review image and check src
let img = await root.$(`#${prefix}-mealImg`); let img = await root.$(`#${prefix}-mealImg`);
let imgSrc = await img.getProperty("src"); let imgSrc = await img.getProperty("src");
let imgAlt = await img.getProperty("alt"); // Check src
// Check src and alt
assert.strictEqual(await imgSrc.jsonValue(), expected.imgSrc); assert.strictEqual(await imgSrc.jsonValue(), expected.imgSrc);
assert.strictEqual(await imgAlt.jsonValue(), expected.imgAlt);
// Get the title, comment, and restaurant // Get the title, comment, and restaurant
let title = await root.$(`#${prefix}-mealName`); let title = await root.$(`#${prefix}-mealName`);
@ -62,7 +59,7 @@ export async function checkCorrectness(root, prefix, expected){
assert.strictEqual(await restaurant_text.jsonValue(), expected.restaurant); assert.strictEqual(await restaurant_text.jsonValue(), expected.restaurant);
// Check tags // Check tags
let tags = await root.$$(".tag"); let tags = await root.$$(`.${prefix}-tag`);
assert.strictEqual(await tags.length, expected.tags.length); assert.strictEqual(await tags.length, expected.tags.length);
for(let i = 0; i < expected.tags.length; i++){ for(let i = 0; i < expected.tags.length; i++){
let tag_text = await tags[i].getProperty("innerText"); let tag_text = await tags[i].getProperty("innerText");

3
source/assets/scripts/localStorage.test.js
View File

@ -17,7 +17,6 @@ describe("test app localStorage interaction", () => {
it("test localStorage state after adding one review", () => { it("test localStorage state after adding one review", () => {
let review = { let review = {
"imgSrc": "sample src", "imgSrc": "sample src",
"imgAlt": "sample alt",
"mealName": "sample name", "mealName": "sample name",
"restaurant": "sample restaurant", "restaurant": "sample restaurant",
"rating": 5, "rating": 5,
@ -42,7 +41,6 @@ describe("test app localStorage interaction", () => {
ids.push(i); ids.push(i);
let new_review = { let new_review = {
"imgSrc": `sample src ${i}`, "imgSrc": `sample src ${i}`,
"imgAlt": `sample alt ${i}`,
"mealName": `sample name ${i}`, "mealName": `sample name ${i}`,
"restaurant": `sample restaurant ${i}`, "restaurant": `sample restaurant ${i}`,
"rating": i, "rating": i,
@ -68,7 +66,6 @@ describe("test app localStorage interaction", () => {
for(let i = 0; i < 1000; i++){ for(let i = 0; i < 1000; i++){
let new_review = { let new_review = {
"imgSrc": `updated sample src ${i}`, "imgSrc": `updated sample src ${i}`,
"imgAlt": `updated sample alt ${i}`,
"mealName": `updated sample name ${i}`, "mealName": `updated sample name ${i}`,
"restaurant": `updated sample restaurant ${i}`, "restaurant": `updated sample restaurant ${i}`,
"rating": i*2+i, "rating": i*2+i,

32
source/assets/scripts/main.e2e.test.js
View File

@ -48,7 +48,6 @@ describe("test App end to end", async () => {
// create a new review // create a new review
let review = { let review = {
imgAlt: "sample alt",
mealName: "sample name", mealName: "sample name",
comments: "sample comment", comments: "sample comment",
restaurant: "sample restaurant", restaurant: "sample restaurant",
@ -66,13 +65,12 @@ describe("test App end to end", async () => {
it("check details page", async () => { it("check details page", async () => {
// check the details page for correctness // check the details page for correctness
let expected = { let expected = {
imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png", imgSrc: "http://localhost:8080/assets/images/plate_with_cutlery.png",
imgAlt: "sample alt",
mealName: "sample name", mealName: "sample name",
comments: "sample comment", comments: "sample comment",
restaurant: "sample restaurant", restaurant: "sample restaurant",
tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"], tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"],
rating: "http://localhost:8080/assets/images/icons/1-star.svg" rating: "http://localhost:8080/assets/images/1-star.svg"
}; };
await checkCorrectness(page, "d", expected); await checkCorrectness(page, "d", expected);
}); });
@ -88,13 +86,12 @@ describe("test App end to end", async () => {
let shadowRoot = await review_card.getProperty("shadowRoot"); let shadowRoot = await review_card.getProperty("shadowRoot");
let expected = { let expected = {
imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png", imgSrc: "http://localhost:8080/assets/images/plate_with_cutlery.png",
imgAlt: "sample alt",
mealName: "sample name", mealName: "sample name",
comments: "sample comment", comments: "sample comment",
restaurant: "sample restaurant", restaurant: "sample restaurant",
tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"], tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"],
rating: "http://localhost:8080/assets/images/icons/1-star.svg" rating: "http://localhost:8080/assets/images/1-star.svg"
}; };
await checkCorrectness(shadowRoot, "a", expected); await checkCorrectness(shadowRoot, "a", expected);
}); });
@ -114,13 +111,12 @@ describe("test App end to end", async () => {
// check the details page for correctness // check the details page for correctness
let expected = { let expected = {
imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png", imgSrc: "http://localhost:8080/assets/images/plate_with_cutlery.png",
imgAlt: "sample alt",
mealName: "sample name", mealName: "sample name",
comments: "sample comment", comments: "sample comment",
restaurant: "sample restaurant", restaurant: "sample restaurant",
tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"], tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"],
rating: "http://localhost:8080/assets/images/icons/1-star.svg" rating: "http://localhost:8080/assets/images/1-star.svg"
}; };
await checkCorrectness(page, "d", expected); await checkCorrectness(page, "d", expected);
}); });
@ -137,13 +133,12 @@ describe("test App end to end", async () => {
// check the details page for correctness // check the details page for correctness
let expected = { let expected = {
imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png", imgSrc: "http://localhost:8080/assets/images/plate_with_cutlery.png",
imgAlt: "sample alt",
mealName: "sample name", mealName: "sample name",
comments: "sample comment", comments: "sample comment",
restaurant: "sample restaurant", restaurant: "sample restaurant",
tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"], tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"],
rating: "http://localhost:8080/assets/images/icons/1-star.svg" rating: "http://localhost:8080/assets/images/1-star.svg"
}; };
await checkCorrectness(shadowRoot, "a", expected); await checkCorrectness(shadowRoot, "a", expected);
}); });
@ -164,7 +159,6 @@ describe("test App end to end", async () => {
// create a new review // create a new review
let review = { let review = {
imgAlt: "updated alt",
mealName: "updated name", mealName: "updated name",
comments: "updated comment", comments: "updated comment",
restaurant: "updated restaurant", restaurant: "updated restaurant",
@ -182,13 +176,12 @@ describe("test App end to end", async () => {
it("check details page", async () => { it("check details page", async () => {
// check the details page for correctness // check the details page for correctness
let expected = { let expected = {
imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png", imgSrc: "http://localhost:8080/assets/images/plate_with_cutlery.png",
imgAlt: "updated alt",
mealName: "updated name", mealName: "updated name",
comments: "updated comment", comments: "updated comment",
restaurant: "updated restaurant", restaurant: "updated restaurant",
tags: ["tag -0", "tag -1", "tag -2", "tag -3", "tag -4", "tag -5"], tags: ["tag -0", "tag -1", "tag -2", "tag -3", "tag -4", "tag -5"],
rating: "http://localhost:8080/assets/images/icons/5-star.svg" rating: "http://localhost:8080/assets/images/5-star.svg"
}; };
await checkCorrectness(page, "d", expected); await checkCorrectness(page, "d", expected);
}); });
@ -205,13 +198,12 @@ describe("test App end to end", async () => {
// check the details page for correctness // check the details page for correctness
let expected = { let expected = {
imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png", imgSrc: "http://localhost:8080/assets/images/plate_with_cutlery.png",
imgAlt: "updated alt",
mealName: "updated name", mealName: "updated name",
comments: "updated comment", comments: "updated comment",
restaurant: "updated restaurant", restaurant: "updated restaurant",
tags: ["tag -0", "tag -1", "tag -2", "tag -3", "tag -4", "tag -5"], tags: ["tag -0", "tag -1", "tag -2", "tag -3", "tag -4", "tag -5"],
rating: "http://localhost:8080/assets/images/icons/5-star.svg" rating: "http://localhost:8080/assets/images/5-star.svg"
}; };
await checkCorrectness(shadowRoot, "a", expected); await checkCorrectness(shadowRoot, "a", expected);
}); });

4
source/assets/scripts/main.js
View File

@ -18,12 +18,12 @@ function init() {
* @param {Array<Object>} reviews An array of reviews * @param {Array<Object>} reviews An array of reviews
*/ */
function addReviewsToDocument(reviews) { function addReviewsToDocument(reviews) {
let box = document.getElementById("review-container"); let reviewBox = document.getElementById("review-container");
reviews.forEach(review => { reviews.forEach(review => {
let newReview = document.createElement("review-card"); let newReview = document.createElement("review-card");
newReview.data = review; newReview.data = review;
//TODO: want to append it to whatever the box is in layout //TODO: want to append it to whatever the box is in layout
box.append(newReview); reviewBox.append(newReview);
}); });
} }

14
source/index.html
View File

@ -7,6 +7,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Food Journal</title> <title>Food Journal</title>
<!--Add Favicon-->
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico">
<!-- Recipe Card Custom Element --> <!-- Recipe Card Custom Element -->
<script src="assets/scripts/ReviewCard.js" type="module"></script> <script src="assets/scripts/ReviewCard.js" type="module"></script>
@ -19,9 +22,9 @@
<body> <body>
<header> <header>
<div class="top-bar"> <div class="top-bar">
<img src ="./assets/images/icons/Logo.png" alt="logo" /> <img src ="./assets/images/Logo.png" alt="logo" />
<h1> Food Journal </h1> <h1> Food Journal </h1>
<img src ="./assets/images/icons/Logo.png" alt="logo" /> <img src ="./assets/images/Logo.png" alt="logo" />
</div> </div>
</header> </header>
<main> <main>
@ -31,17 +34,16 @@
<div class="search-bar"> <div class="search-bar">
<form id="form"> <form id="form">
<input type="search" id="searching" name="searchBar" placeholder="Search journal..."> <input type="search" id="searching" name="searchBar" placeholder="Search journal...">
<button class="click" type="search"> Search <button class="click" type="search"> Search </button>
</button>
<div class="Filter-box"> <div class="Filter-box">
</div> </div>
</form> </form>
</div> </div>
<div class="center-display"> <div class="center-display">
<img src ="./assets/images/icons/Grouppink.png" alt="CREATE" style="opacity: 100%;" id="create-btn" onclick="window.location.assign('./CreatePage.html')"/> <img src ="./assets/images/Grouppink.png" alt="CREATE" style="opacity: 100%;" id="create-btn" onclick="window.location.assign('./CreatePage.html')"/>
<h2 id="recent-reviews-text"> Recent Reviews </h2> <h2 id="recent-reviews-text"> Recent Reviews </h2>
<img src ="./assets/images/icons/Grouppink.png" style="opacity:0;"/> <img src ="./assets/images/Grouppink.png" style="opacity:0;"/>
</div> </div>

BIN
source/static/CoveredByYourGrace-Regular.ttf Normal file
View File

Binary file not shown.

86
source/static/CreatePage.css
View File

@ -1,87 +1,31 @@
/* CreatePage.css */ /* CreatePage.css */
body { @font-face {
background-color: #13323b; font-family: "testFont";
src: url(CoveredByYourGrace-Regular.ttf);
} }
h1 { body {
text-align: center; background-color: #F8F3F1;
} }
.top-bar { .top-bar {
margin-top: -8cm; display: flex;
justify-content: center;
} }
.top-bar > img { .top-bar > img {
position: relative; position: relative;
top: 7.85cm; align-self: center;
padding-left: 2.5%;
padding-right: 2.5%;
} }
.top-bar > h1 { .top-bar > h1 {
position: relative; position: relative;
top: 2.2cm; text-align: center;
font-size: 3cm; color:#516754;
color: #eaa9bc; font-size: 6rem;
} font-family: 'testFont';
.top-bar > form {
position: relative;
left: 32cm;
}
.journal-form {
font-size: 120%;
width: 50%;
display: block;
margin: auto;
color: #ccb3bb;
border: 3px solid rgb(7 0 0);
background-color: #b52754;
}
.hidden,
.rating:not(:checked) > input { /* Hide radio circles while star rating */
display: none;
}
/* Unchecked stars */
.rating:not(:checked) > label {
/* Make stars line up sideways and not vertically */
float: right;
/* Hide label text */
width: 1em;
overflow: hidden;
white-space: nowrap;
/* Star default color and size */
font-size: 200%;
line-height: 1.2;
color: #b3b3cc;
}
.rating > label:active {
position: relative;
}
.rating:not(:checked) > label::before {
content: "★";
}
/* Checked star color */
.rating > input:checked ~ label {
color: #ffbf00;
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: orangered;
}
.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
color: orangered;
} }

147
source/static/Form.css Normal file
View File

@ -0,0 +1,147 @@
.journal-form h1 {
font-family: 'testFont';
text-align: center;
}
.journal-form {
font-size: 120%;
font-family: 'Century Gothic';
width: 50%;
margin: auto;
color: #516754;
border: 2px solid rgb(31, 41, 32);
border-radius: 8px;
background-color: #f7dfd5;
}
fieldset {
border: none;
}
input[type=text] {
width: 100%;
box-sizing: border-box;
background-color: #f7dfd5;
border: none;
border-bottom: 1px solid rgb(0, 0, 0);
}
input[type=text]:focus {
outline: none;
border-bottom: 1px solid rgb(0, 0, 0);
}
.rating {
display: flex; flex-wrap: nowrap; flex-direction: row-reverse;
}
.hidden,
.rating:not(:checked) > input { /* Hide radio circles while star rating */
display: none;
}
/* Unchecked stars */
.rating:not(:checked) > label {
/* Make stars line up sideways and not vertically */
float: right;
/* Hide label text */
width: 1em;
overflow: hidden;
white-space: nowrap;
/* Star default color and size */
font-size: 200%;
line-height: 1.2;
color: #b3b3cc;
}
.rating > label:active {
position: relative;
}
.rating:not(:checked) > label::before {
content: "★";
}
/* Checked star color */
.rating > input:checked ~ label {
color: #ffbf00;
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: orangered;
}
.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
color: orangered;
}
.tag-container {
display: flex;
flex-flow: row wrap;
}
.tag {
background-color: grey;
border-radius: 7px;
color: white;
padding-right: 7px;
padding-left: 7px;
margin: 3px;
}
.tag::before {
display: inline-block;
content: "x";
height: 15px;
width: 15px;
margin-right: 4px;
text-align: center;
color: white;
cursor: pointer;
}
.tag:hover::before {
color: red;
}
#tag-add-btn {
background-color: #94da97; /* Green */
border: round;
color: rgb(206, 83, 179);
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 10%;
margin-top: 5px;
}
#tag-add-btn:hover {
background-color: rgb(206, 83, 179); /* Green */
border: round;
color: #94da97;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 10%;
margin-top: 5px;
}
.hidden {
display: none;
}
.tag-container * {
max-width: 100%;
overflow-wrap: anywhere;
}

93
source/static/OFL.txt Normal file
View File

@ -0,0 +1,93 @@
Copyright (c) 2010, Kimberly Geswein (kimberlygeswein.com)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

98
source/static/ReviewDetails.css
View File

@ -1,7 +1,12 @@
/* ReviewDetails.css */ /* ReviewDetails.css */
@font-face {
font-family: "testFont";
src: url(CoveredByYourGrace-Regular.ttf);
}
body { body {
background-color: #13323b; background-color: #F8F3F1;
} }
h1 { h1 {
@ -9,88 +14,31 @@ h1 {
} }
.top-bar { .top-bar {
margin-top: -8cm; display: flex;
justify-content: center;
} }
.top-bar > img { .top-bar > img {
position: relative; position: relative;
top: 7.85cm; align-self: center;
padding-left: 2.5%;
padding-right: 2.5%;
} }
.top-bar > h1 { .top-bar > h1 {
position: relative; position: relative;
top: 2.2cm; text-align: center;
font-size: 3cm; /*color: #e4c3d2;*/
color: #eaa9bc; color:#516754;
font-size: 6rem;
font-family: 'testFont';
} }
.top-bar > form { .d-tag {
position: relative; background-color: grey;
left: 32cm; border-radius: 7px;
} color: white;
padding-right: 7px;
.journal-form { padding-left: 7px;
font-size: 120%; margin: 10px 10px 10px 10px;
width: 50%;
display: none;
margin: auto;
color: #ccb3bb;
border: 3px solid rgb(7 0 0);
background-color: #b52754;
}
.meal-name {
font-size: 150%;
margin: left;
width: 50%;
border: 3px;
color: rgb(228 119 119);
text-align: left;
}
.hidden,
.rating:not(:checked) > input { /* Hide radio circles while star rating */
display: none;
}
/* Unchecked stars */
.rating:not(:checked) > label {
/* Make stars line up sideways and not vertically */
float: right;
/* Hide label text */
width: 1em;
overflow: hidden;
white-space: nowrap;
/* Star default color and size */
font-size: 200%;
line-height: 1.2;
color: #b3b3cc;
}
.rating > label:active {
position: relative;
}
.rating:not(:checked) > label::before {
content: "★";
}
/* Checked star color */
.rating > input:checked ~ label {
color: #ffbf00;
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: orangered;
}
.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
color: orangered;
} }

55
source/static/homepage.css
View File

@ -1,8 +1,16 @@
/* homepage.css */ /* homepage.css */
/* Color */
body { @font-face {
background-color: #97a5bd; font-family: "testFont";
src: url(CoveredByYourGrace-Regular.ttf);
}
/* Color*/
body{
/*background-color: #97a5bd*/
/*background-color: #E3E3EC;*/
background-color: #F8F3F1;
} }
.top-bar { .top-bar {
@ -20,8 +28,11 @@ body {
.top-bar > h1 { .top-bar > h1 {
position: relative; position: relative;
text-align: center; text-align: center;
color: #e4c3d2; /*color: #e4c3d2;*/
/*color: rgb(145, 124, 175);*/
color:#516754;
font-size: 6rem; font-size: 6rem;
font-family: 'testFont';
} }
.body-container { .body-container {
@ -41,10 +52,44 @@ body {
justify-content: center; justify-content: center;
} }
.search-bar > form {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: rgb(239, 183, 183);
font-size: 17px;
border: none;
border-radius: 12px;
cursor: pointer;
}
#recent-reviews-text { #recent-reviews-text {
text-align: center; text-align: center;
font-size: 4rem; font-size: 4rem;
color: #e4c3d2; /* color: #e4c3d2; */
/*color: rgb(145, 124, 175);*/
color: #516754;
font-family: 'testFont';
}
img#create-btn {
position: relative;
align-self: center;
padding-left: 2.5%;
padding-right: 2.5%;
}
.review-container {
display: flex;
position: relative;
flex-wrap: wrap;
justify-content: center;
}
.review-container > div {
background-color: #f1f1f1;
text-align: center;
} }
img#create-btn { img#create-btn {

158
source/static/reset.css
View File

@ -1,158 +0,0 @@
/* This is a generic CSS file that sets preliminary rules for content that should be the same across pages */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
nav ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
content: "";
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input,
select {
vertical-align: middle;
}
img,
fieldset,
object {
border: none;
}
*,
*::after,
*::before {
box-sizing: border-box;
}
button,
label {
cursor: pointer;
}
html,
body {
height: 100%;
}
form {
border: solid;
}