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 #82 from cse110-fa22-group29/sprint-2-css-review-details

Browse Source 
Implement css and js for ReviewDetails
This commit is contained in:
Arthur Lu 2022-11-20 16:41:41 -08:00 committed by GitHub
commit 19bbabe9b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 173 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
source/ReviewDetails.html
View File

@ -10,20 +10,49 @@
<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/ReviewCard.css" /> <link rel="stylesheet" href="./static/ReviewDetails.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">
<img src ="./assets/images/icons/Logo.png" alt="logo" />
<h1 style="font-family:'Lucida Sans'"> Food Journal </h1>
</div>
<!--- 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 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')"> <input type="button" value="Home" id="home-btn" onclick="window.location.assign('./index.html')">
<button type="button" id="update-btn">Update</button> <button type="button" id="update-btn">Update</button>
<button type="button" id="delete-btn" class="danger">Delete</button> <button type="button" id="delete-btn" class="danger">Delete</button>
</main> </main>
<!----> <form id="update-food-entry" class="hidden">
<div class = journal-form id="update-form-div">
<form id="update-food-entry">
<fieldset> <fieldset>
<legend>Pic:</legend> <legend>Pic:</legend>
Choose Input type: Choose Input type:
@ -77,7 +106,8 @@
</label> </label>
</fieldset> </fieldset>
<button type="submit" id="save-btn" value="Submit">Add Review</button> <button type="submit" id="save-btn" value="Submit">Update Review</button>
</form> </form>
</div>>
</body> </body>
</html> </html>

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

@ -5,10 +5,54 @@ import {deleteReviewFromStorage, getReviewFromStorage, updateReviewToStorage} fr
window.addEventListener("DOMContentLoaded", init); window.addEventListener("DOMContentLoaded", init);
function init(){ function init(){
setupInfo();
setupDelete(); setupDelete();
setupUpdate(); setupUpdate();
} }
function setupInfo(){
let currID = JSON.parse(sessionStorage.getItem("currID"));
let currReview = getReviewFromStorage(currID);
//meal image
let mealImg = document.getElementById("d-mealImg");
mealImg.setAttribute("alt", currReview["imgAlt"]);
if(currReview["mealImg"] != ""){
mealImg.setAttribute("src",currReview["mealImg"]);
}
else{
mealImg.setAttribute("src", "./assets/images/icons/plate_with_cutlery.png");
}
//meal name
let mealLabel = document.getElementById("d-mealName");
mealLabel.innerHTML = currReview["mealName"];
//restaurant name
/*let restaurantLabel = document.getElementById("d-restaurant");
restaurantLabel.innerHTML = currReview["restaurant"];
//comments
let comments = document.getElementById("d-comments");
comments.innerText = currReview["comments"];
*/
//rating
let starsImg = document.getElementById("d-rating");
starsImg.setAttribute("src", "./assets/images/icons/"+currReview["rating"]+"-star.svg");
starsImg.setAttribute("alt", currReview["rating"] +" stars");
/*
//tags
let tagContainer = document.getElementById("d-tags");
if(currReview["tags"]){
for (let i = 0; i < currReview["tags"].length; i++) {
let newTag = document.createElement("label");
newTag.setAttribute("class","tag");
newTag.innerHTML = currReview["tags"][i];
tagContainer.append(newTag);
}
}*/
}
function setupDelete(){ function setupDelete(){
let deleteBtn = document.getElementById("delete-btn"); let deleteBtn = document.getElementById("delete-btn");
let currID = JSON.parse(sessionStorage.getItem("currID")); let currID = JSON.parse(sessionStorage.getItem("currID"));
@ -26,11 +70,11 @@ function setupUpdate(){
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("update-food-entry");
let updateDiv = document.getElementById("update-form-div");
updateBtn.addEventListener("click", function(){ updateBtn.addEventListener("click", function(){
//update function //update function
//form.style.display = "block"; updateDiv.style.display = "block";
form.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

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

@ -17,8 +17,7 @@ export function newReviewToStorage(review){
localStorage.setItem("activeIDS", JSON.stringify(tempIdArr)); localStorage.setItem("activeIDS", JSON.stringify(tempIdArr));
//increment nextID for next review creation //increment nextID for next review creation
nextReviewId++; localStorage.setItem("nextID", JSON.stringify(nextReviewId + 1));
localStorage.setItem("nextID", JSON.stringify(nextReviewId));
return nextReviewId; return nextReviewId;
} }

1
source/index.html
View File

@ -31,7 +31,6 @@
~ width: 100% for all divs ~ width: 100% for all divs
--> -->
<div style="display: flex; max-height: 100%; "> <div style="display: flex; max-height: 100%; ">
<div style="width: 20%;"></div> <div style="width: 20%;"></div>
<div style="width: 60%;"> <div style="width: 60%;">

130
source/static/ReviewCard.css
View File

@ -1,130 +0,0 @@
/* main.css */
* {
font-family: sans-serif;
}
body {
height: 100%;
width: 100%;
}
fieldset {
border: 2px solid rgb(214 214 214);
box-sizing: border-box;
display: block;
width: max-content;
}
form button {
display: block;
margin-top: 5px;
}
label[for="ingredients"] p {
margin: 0;
}
label[for="numRatings"] {
margin: 10px 0 0;
}
label[for^="rating"] {
padding-right: 10px;
}
label:not([for^="rating"]) {
display: block;
margin-bottom: 5px;
}
main {
column-gap: 10px;
display: flex;
flex-wrap: wrap;
height: auto;
max-width: 660px;
row-gap: 10px;
width: 100%;
}
.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;
}
.danger {
background-color: rgb(254 171 171);
border-color: red;
}
.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;
}

93
source/static/ReviewDetails.css Normal file
View File

@ -0,0 +1,93 @@
/* ReviewDetails.css */
body{
background-color: #13323b;
}
h1 {
text-align: center;
}
.Top-Bar{
margin-top: -8cm;
}
.Top-Bar > img{
position: relative;
top: 7.85cm;
}
.Top-Bar > h1{
position: relative;
top: 2.2cm;
font-size: 3cm;
color: #EAA9BC
}
.Top-Bar > form{
position: relative;
left: 32cm;
}
.journal-form {
font-size: 120%;
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;
}