From 46b1ec4b07fbaf043c6c8a6c301e39565798fa9d Mon Sep 17 00:00:00 2001 From: rheabhutada02 <83424582+rheabhutada02@users.noreply.github.com> Date: Mon, 21 Nov 2022 13:52:44 -0800 Subject: [PATCH] fixed form formatting, moved it to its own file --- source/CreatePage.html | 92 +++++++------- source/ReviewDetails.html | 124 +++++++++---------- source/assets/scripts/ReviewCard.js | 17 ++- source/assets/scripts/ReviewDetails.js | 5 +- source/index.html | 3 +- source/static/CreatePage.css | 101 +--------------- source/static/ReviewDetails.css | 96 --------------- source/static/homepage.css | 12 ++ source/static/reset.css | 158 ------------------------- source/static/reviewForm.css | 142 ++++++++++++++++++++++ 10 files changed, 287 insertions(+), 463 deletions(-) delete mode 100644 source/static/reset.css create mode 100644 source/static/reviewForm.css diff --git a/source/CreatePage.html b/source/CreatePage.html index a55d561..220c50e 100644 --- a/source/CreatePage.html +++ b/source/CreatePage.html @@ -15,6 +15,7 @@ + @@ -28,62 +29,61 @@ -

New Entry

-
- Choose Input type: - - -
-
- Meal: - - -
-
-
- Rating: -
- - - - - -
+
+ PICTURE: + + +
+ +
+ MEAL NAME: + +
-
+
+ RESTAURANT NAME: + +
+ +
+ RATING: +
+
+ + + + + +
+
+
- - -
+
diff --git a/source/ReviewDetails.html b/source/ReviewDetails.html index 47de4d3..77bf6d3 100644 --- a/source/ReviewDetails.html +++ b/source/ReviewDetails.html @@ -6,17 +6,18 @@ Food Journal - - + + - - - - - + + + + + + -
+
logo

Food Journal

@@ -27,7 +28,7 @@

Salad (default name)

-

Salad Inc. (default name)

+

Salad Inc. (default name)

@@ -51,58 +52,61 @@ -
-
-
- Pic: - Choose Input type: - - -
-
- - Meal: - - -
- -
- Rating: - - - - - -
+
diff --git a/source/assets/scripts/ReviewCard.js b/source/assets/scripts/ReviewCard.js index 57e5b98..0279fef 100644 --- a/source/assets/scripts/ReviewCard.js +++ b/source/assets/scripts/ReviewCard.js @@ -80,7 +80,22 @@ class ReviewCard extends HTMLElement { time { color: #70757A; font-size: 12px; - } + } + + .tag-container { + display: flex; + flex-flow: row wrap; + } + + .tag { + background-color:#94da97; + border-radius: 7px; + color: #94da97; + padding-right: 7px; + padding-left: 7px; + margin: 3px; + font-weight: bold; + } `; articleEl.append(styleEl); shadowEl.append(articleEl); diff --git a/source/assets/scripts/ReviewDetails.js b/source/assets/scripts/ReviewDetails.js index 194ceaf..d957561 100644 --- a/source/assets/scripts/ReviewDetails.js +++ b/source/assets/scripts/ReviewDetails.js @@ -68,11 +68,12 @@ function setupUpdate(){ let currID = JSON.parse(sessionStorage.getItem("currID")); let currReview = getReviewFromStorage(currID); let form = document.getElementById("update-food-entry"); - let updateDiv = document.getElementById("update-form-div"); + let updateDiv = document.getElementById("update-form"); updateBtn.addEventListener("click", function(){ //update function - updateDiv.style.display = "block"; + updateDiv.classList.remove("hidden"); + let tagContainer = document.getElementById("tag-container-form"); //Set value of each input element to current's values diff --git a/source/index.html b/source/index.html index e1fadbb..9e3e116 100644 --- a/source/index.html +++ b/source/index.html @@ -31,8 +31,7 @@
- +
diff --git a/source/static/CreatePage.css b/source/static/CreatePage.css index bdd9727..fc3a881 100644 --- a/source/static/CreatePage.css +++ b/source/static/CreatePage.css @@ -1,8 +1,8 @@ /* CreatePage.css */ @font-face { - font-family: "testFont"; - src: url(CoveredByYourGrace-Regular.ttf); + font-family: "testFont"; + src: url(CoveredByYourGrace-Regular.ttf); } body { @@ -25,102 +25,7 @@ body { .top-bar > h1 { position: relative; text-align: center; - /*color: #e4c3d2;*/ - /*color: rgb(145, 124, 175);*/ color:#516754; font-size: 6rem; - font-family: 'testFont'; -} - -.journal-form > h1 { font-family: 'testFont'; - text-align: center; -} - -.journal-form { - font-size: 120%; - font-family: 'Century Gothic'; - width: 50%; - display: block; - margin: auto; - color: #516754; - border: 2px solid rgb(31, 41, 32); - border-radius: 8px; - background-color: #f7dfd5; -} - -.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; -} +} \ No newline at end of file diff --git a/source/static/ReviewDetails.css b/source/static/ReviewDetails.css index c67c03c..c7359a2 100644 --- a/source/static/ReviewDetails.css +++ b/source/static/ReviewDetails.css @@ -32,100 +32,4 @@ h1 { color:#516754; font-size: 6rem; font-family: 'testFont'; -} - -.journal-form { - font-size: 120%; - font-family: 'Calibria'; - 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; -} - -.journal-form .tag-container{ - display: flex; - flex-flow: row wrap; -} - -.journal-form .tag{ - background-color: grey; - border-radius: 7px; - color: white; - padding-right: 7px; - padding-left: 7px; - margin: 3px; -} - -.journal-form .tag::before{ - display: inline-block; - content: "x"; - height: 15px; - width: 15px; - margin-right: 4px; - text-align: center; - color: white; - cursor: pointer; -} - -.journal-form .tag:hover::before{ - color: red; } \ No newline at end of file diff --git a/source/static/homepage.css b/source/static/homepage.css index b4e45da..503f51b 100644 --- a/source/static/homepage.css +++ b/source/static/homepage.css @@ -52,6 +52,18 @@ body{ 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 { text-align: center; font-size: 4rem; diff --git a/source/static/reset.css b/source/static/reset.css deleted file mode 100644 index fd42494..0000000 --- a/source/static/reset.css +++ /dev/null @@ -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; -} diff --git a/source/static/reviewForm.css b/source/static/reviewForm.css new file mode 100644 index 0000000..3d9bfa8 --- /dev/null +++ b/source/static/reviewForm.css @@ -0,0 +1,142 @@ +.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; +} \ No newline at end of file