From 331f8e731ce48cc8b007bbb04092cc826ddd55c0 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Sun, 20 Nov 2022 16:54:15 -0800 Subject: [PATCH 1/7] add some padding to icons Signed-off-by: Arthur Lu --- source/index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/source/index.html b/source/index.html index 61304b2..68f51db 100644 --- a/source/index.html +++ b/source/index.html @@ -19,9 +19,9 @@
- logo + logo

Food Journal

- logo + logo
@@ -34,10 +34,10 @@
-
- CREATE +
+ CREATE

Recent Reviews

- + CREATE
From a5ac2dc940bb58c35a0614faa12a0f1cc4c087e5 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Sun, 20 Nov 2022 17:03:55 -0800 Subject: [PATCH 2/7] fix review card spacing and centering in homepage Signed-off-by: Arthur Lu --- source/assets/scripts/ReviewCard.js | 1 + source/static/homepage.css | 1 + 2 files changed, 2 insertions(+) diff --git a/source/assets/scripts/ReviewCard.js b/source/assets/scripts/ReviewCard.js index 70a0660..06ae059 100644 --- a/source/assets/scripts/ReviewCard.js +++ b/source/assets/scripts/ReviewCard.js @@ -36,6 +36,7 @@ class ReviewCard extends HTMLElement { row-gap: 5px; padding: 0 16px 16px 16px; width: 178px; + margin: 8px 8px 8px 8px; } div.rating { diff --git a/source/static/homepage.css b/source/static/homepage.css index 0d5f7a0..f101be5 100644 --- a/source/static/homepage.css +++ b/source/static/homepage.css @@ -46,6 +46,7 @@ img#create-btn { display: flex; position: relative; flex-wrap: wrap; + justify-content: center; } .review-container > div { background-color: #f1f1f1; From 142e6d93b6dc5800569fa8dde157a8f1f5032562 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Mon, 21 Nov 2022 02:53:50 +0000 Subject: [PATCH 3/7] set e2e test connection to 2 seconds --- source/assets/scripts/main.e2e.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/assets/scripts/main.e2e.test.js b/source/assets/scripts/main.e2e.test.js index 594d359..8ec23ca 100644 --- a/source/assets/scripts/main.e2e.test.js +++ b/source/assets/scripts/main.e2e.test.js @@ -22,7 +22,7 @@ describe("test App end to end", async () => { browser = await puppeteer.launch({args: root ? ["--no-sandbox"] : undefined}); page = await browser.newPage(); try{ - await page.goto("http://localhost:8080", {timeout: 1000}); + await page.goto("http://localhost:8080", {timeout: 2000}); await console.log(`✔ connected to localhost webserver as ${root ? "root" : "user"}`); } catch (error) { From 259018ca9724bfa148756fe154d17024d9b5431a Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Mon, 21 Nov 2022 03:06:47 +0000 Subject: [PATCH 4/7] fix linting issue --- source/assets/scripts/main.e2e.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/assets/scripts/main.e2e.test.js b/source/assets/scripts/main.e2e.test.js index 8ec23ca..9ca2044 100644 --- a/source/assets/scripts/main.e2e.test.js +++ b/source/assets/scripts/main.e2e.test.js @@ -39,7 +39,7 @@ describe("test App end to end", async () => { describe("test CRUD on simple inputs and default image", () => { - describe("test create 1 new review", async () => { + describe("test create 1 new review", async () => { it("create 1 new review", async () => { // Click the button to create a new review let create_btn = await page.$("#create-btn"); From eed39f580f65139fac35791b5a9cbcf19d326173 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Mon, 21 Nov 2022 03:17:32 +0000 Subject: [PATCH 5/7] cleanup css in homepage.css and index.html --- source/index.html | 18 ++++++++-------- source/static/homepage.css | 42 ++++++++++++++++++++++---------------- 2 files changed, 33 insertions(+), 27 deletions(-) diff --git a/source/index.html b/source/index.html index 68f51db..64bee94 100644 --- a/source/index.html +++ b/source/index.html @@ -18,10 +18,10 @@
-
- logo -

Food Journal

- logo +
+ logo +

Food Journal

+ logo
@@ -30,21 +30,21 @@ For mobile: + flex-direction: column-reverse;" ~ width: 100% for all divs --> -
+
-
- CREATE +
+ CREATE

Recent Reviews

- CREATE +
-
+ - +
+ Other Info: + + -
- -
-
- + + + +
+ \ No newline at end of file diff --git a/source/ReviewDetails.html b/source/ReviewDetails.html index 3c2cd1b..ea9eb94 100644 --- a/source/ReviewDetails.html +++ b/source/ReviewDetails.html @@ -1,113 +1,112 @@ - - - - - Food Journal + + + + + Food Journal - - + + - - - - - + + + + + + + +
+ logo +

Food Journal

- - -
- logo -

Food Journal

+
-
+ +
+

Cucumber Salad

+
+ +
+ + photo - -
-

Cucumber Salad

-
- -
- - photo +
+ +
+
-
- -
-
+
+ +

The food was good

+
-
- -

The food was good

-
+
+ + + +
-
- - - -
+
+
+
+ Pic: + Choose Input type: + + + +
+
+ + Meal: + + +
+ +
+ Rating: + + + + + +
-
- -
- Pic: - Choose Input type: - - - -
-
- - Meal: - - -
- -
- Rating: - - - - - -
- -
- Other Info: - - - -
- - -
> - +
+ Other Info: + + + +
+ + +
+ diff --git a/source/index.html b/source/index.html index 64bee94..7f998dc 100644 --- a/source/index.html +++ b/source/index.html @@ -1,59 +1,51 @@ - - - - - Food Journal + + + + + Food Journal - - + + - - - - - - -
-
-
- logo -

Food Journal

- logo -
-
- + + + + + + + +
+
+ logo +

Food Journal

+ logo +
+
+
+
+
+
+
+ CREATE +

Recent Reviews

+ +
- -
-
- -
-
- CREATE -

Recent Reviews

- +
+
+
+
+ + +
+
- -
- -
-
- - -
-
-
- -
- -
+
+ diff --git a/source/static/CreatePage.css b/source/static/CreatePage.css index 8d3a43e..b8714da 100644 --- a/source/static/CreatePage.css +++ b/source/static/CreatePage.css @@ -1,78 +1,81 @@ /* CreatePage.css */ -body{ - background-color: #13323b; +body { + background-color: #13323b; } h1 { - text-align: center; + 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 { + margin-top: -8cm; } -.Top-Bar > form{ - position: relative; - left: 32cm; + +.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: block; - margin: auto; - color: #ccb3bb; - border: 3px solid rgb(7, 0, 0); - background-color: #b52754; + 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; + display: none; } /* Unchecked stars */ .rating:not(:checked) > label { - /* Make stars line up sideways and not vertically */ - float: right; + /* Make stars line up sideways and not vertically */ + float: right; - /* Hide label text */ - width: 1em; - overflow: hidden; - white-space: nowrap; + /* Hide label text */ + width: 1em; + overflow: hidden; + white-space: nowrap; - /* Star default color and size */ - font-size: 200%; - line-height: 1.2; - color: #b3b3cc; + /* Star default color and size */ + font-size: 200%; + line-height: 1.2; + color: #b3b3cc; } .rating > label:active { - position: relative; + position: relative; } .rating:not(:checked) > label::before { - content: "★"; + content: "★"; } /* Checked star color */ .rating > input:checked ~ label { - color: #ffbf00; + color: #ffbf00; } .rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label { - color: orangered; + color: orangered; } .rating > input:checked + label:hover, @@ -80,5 +83,5 @@ h1 { .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label { - color: orangered; -} \ No newline at end of file + color: orangered; +} diff --git a/source/static/ReviewDetails.css b/source/static/ReviewDetails.css index 1a2c728..916dd60 100644 --- a/source/static/ReviewDetails.css +++ b/source/static/ReviewDetails.css @@ -1,87 +1,90 @@ /* ReviewDetails.css */ -body{ - background-color: #13323b; +body { + background-color: #13323b; } h1 { - text-align: center; + 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 { + margin-top: -8cm; } -.Top-Bar > form{ - position: relative; - left: 32cm; + +.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; + 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; + 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; + display: none; } /* Unchecked stars */ .rating:not(:checked) > label { - /* Make stars line up sideways and not vertically */ - float: right; + /* Make stars line up sideways and not vertically */ + float: right; - /* Hide label text */ - width: 1em; - overflow: hidden; - white-space: nowrap; + /* Hide label text */ + width: 1em; + overflow: hidden; + white-space: nowrap; - /* Star default color and size */ - font-size: 200%; - line-height: 1.2; - color: #b3b3cc; + /* Star default color and size */ + font-size: 200%; + line-height: 1.2; + color: #b3b3cc; } .rating > label:active { - position: relative; + position: relative; } .rating:not(:checked) > label::before { - content: "★"; + content: "★"; } /* Checked star color */ .rating > input:checked ~ label { - color: #ffbf00; + color: #ffbf00; } .rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label { - color: orangered; + color: orangered; } .rating > input:checked + label:hover, @@ -89,5 +92,5 @@ h1 { .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label { - color: orangered; -} \ No newline at end of file + color: orangered; +} diff --git a/source/static/homepage.css b/source/static/homepage.css index f473d53..33d39f6 100644 --- a/source/static/homepage.css +++ b/source/static/homepage.css @@ -1,60 +1,62 @@ /* homepage.css */ -/* Color*/ -body{ - background-color: #97a5bd; + +/* Color */ +body { + background-color: #97a5bd; } -.top-bar{ - display: flex; - justify-content: center; +.top-bar { + display: flex; + justify-content: center; } -.top-bar > img{ - position: relative; - align-self: center; - padding-left: 2.5%; - padding-right: 2.5%; + +.top-bar > img { + position: relative; + align-self: center; + padding-left: 2.5%; + padding-right: 2.5%; } -.top-bar > h1{ - position: relative; - text-align: center; - color: #E4C3D2; - font-size: 6rem; - font-family: 'Lucida Sans'; + +.top-bar > h1 { + position: relative; + text-align: center; + color: #e4c3d2; + font-size: 6rem; } .body-container { - display: flex; - max-height: 100%; + display: flex; + max-height: 100%; } .center-display { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; } #recent-reviews-text { - font-family: 'Lucida Sans'; - text-align: center; - font-size: 4rem; - color: #E4C3D2; + text-align: center; + font-size: 4rem; + color: #e4c3d2; } img#create-btn { - position: relative; - align-self: center; - padding-left: 2.5%; - padding-right: 2.5%; + 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 { + display: flex; + position: relative; + flex-wrap: wrap; + justify-content: center; } + .review-container > div { - background-color: #f1f1f1; - text-align: center; - } \ No newline at end of file + background-color: #f1f1f1; + text-align: center; +} diff --git a/source/static/reset.css b/source/static/reset.css index 6677f89..fd42494 100644 --- a/source/static/reset.css +++ b/source/static/reset.css @@ -69,17 +69,17 @@ time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - outline: 0; - font-size: 100%; - vertical-align: baseline; - background: transparent; + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; } body { - line-height: 1; + line-height: 1; } article, @@ -93,66 +93,66 @@ hgroup, menu, nav, section { - display: block; + display: block; } nav ul { - list-style: none; + list-style: none; } blockquote, q { - quotes: none; + quotes: none; } blockquote::before, blockquote::after, q::before, q::after { - content: ""; - content: none; + content: ""; + content: none; } a { - margin: 0; - padding: 0; - font-size: 100%; - vertical-align: baseline; - background: transparent; + margin: 0; + padding: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; } table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } input, select { - vertical-align: middle; + vertical-align: middle; } img, fieldset, object { - border: none; + border: none; } *, *::after, *::before { - box-sizing: border-box; + box-sizing: border-box; } button, label { - cursor: pointer; + cursor: pointer; } html, body { - height: 100%; + height: 100%; } form { - border: solid; + border: solid; } From 069aff88afee911afb1aca37b9711b8611cd8c0b Mon Sep 17 00:00:00 2001 From: d7hernan <83631798+d7hernan@users.noreply.github.com> Date: Sun, 20 Nov 2022 21:58:44 -0800 Subject: [PATCH 7/7] centered search journal form --- source/index.html | 18 +++++++++++------- source/static/homepage.css | 5 +++++ 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/source/index.html b/source/index.html index 7f998dc..e1fadbb 100644 --- a/source/index.html +++ b/source/index.html @@ -28,22 +28,26 @@
+
+
+ + +
+ +
+
+
CREATE

Recent Reviews

+
-
- - -
-
diff --git a/source/static/homepage.css b/source/static/homepage.css index 33d39f6..484b06d 100644 --- a/source/static/homepage.css +++ b/source/static/homepage.css @@ -36,6 +36,11 @@ body { align-items: center; } +.search-bar { + display: flex; + justify-content: center; +} + #recent-reviews-text { text-align: center; font-size: 4rem;