diff --git a/.htmlhintrc b/.htmlhintrc index 6a6a6bd..c833339 100644 --- a/.htmlhintrc +++ b/.htmlhintrc @@ -1,4 +1,4 @@ { "attr-value-not-empty": false, - "space-tab-mixed-disabled": false + "space-tab-mixed-disabled": "tab" } diff --git a/.stylelintrc.json b/.stylelintrc.json index 76eba38..c3e95e2 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,4 +1,7 @@ { "extends": "stylelint-config-standard", - "ignore": ["inside-parens", "param", "value"] + "ignore": ["inside-parens", "param", "value"], + "rules":{ + "indentation": "tab" + } } \ No newline at end of file diff --git a/source/CreatePage.html b/source/CreatePage.html index 0388673..cb05872 100644 --- a/source/CreatePage.html +++ b/source/CreatePage.html @@ -1,97 +1,88 @@ - - - - - Food Journal + + + + + Food Journal - - + + - - - - - - + + + + + + + - + + +
+ logo +

Food Journal

+
+
+

New Entry

- - -
- logo -

Food Journal

- -
-
-

New Entry

+
+
+ Pic: + Choose Input type: + + + +
+
+ Meal: + + +
+
+ Rating: + + + + + +
- -
- Pic: - Choose Input type: - - - -
-
- Meal: - - -
-
- Rating: - - - - - -
- -
- Other Info: - - +
+ Other Info: + + -
- - -
- + + + +
+ \ No newline at end of file diff --git a/source/ReviewDetails.html b/source/ReviewDetails.html index 7fd0200..6a27560 100644 --- a/source/ReviewDetails.html +++ b/source/ReviewDetails.html @@ -1,10 +1,10 @@ - - - - - Food Journal + + + + + Food Journal @@ -15,98 +15,91 @@ - - -
- logo -

Food Journal

+
- + +
+

Cucumber Salad

+
+ +
+ + photo - -
-

default meal name

-
- -
- - photo +
+ +
+
-

default comment

+
+ +

The food was good

+
-
-
-
+
+ + + +
-
- -

default comment

-
+
+
+
+ Pic: + Choose Input type: + + + +
+
+ + Meal: + + +
+ +
+ Rating: + + + + + +
-
- - - -
- -
- -
- Pic: - Choose Input type: - - - -
-
- - Meal: - - -
- -
- Rating: - - - - - -
- -
- Other Info: - - - -
- - -
> - +
+ Other Info: + + + +
+ + +
+ 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/assets/scripts/main.e2e.test.js b/source/assets/scripts/main.e2e.test.js index 594d359..9ca2044 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) { @@ -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"); diff --git a/source/index.html b/source/index.html index 61304b2..e1fadbb 100644 --- a/source/index.html +++ b/source/index.html @@ -1,59 +1,55 @@ - - - - - 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 48757d7..5ca6c38 100644 --- a/source/static/homepage.css +++ b/source/static/homepage.css @@ -1,57 +1,68 @@ /* homepage.css */ + /* Color*/ body{ /*background-color: #97a5bd*/ background-color: #E3E3EC; } -.Top-Bar{ + +.top-bar { + display: flex; + justify-content: center; } -.Top-Bar > img{ - position: relative; + +.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;*/ - color: #8284D0; - font-size: 100px; - font-family: 'Lucida Sans'; + +.top-bar > h1 { + position: relative; + text-align: center; + color: #e4c3d2; + font-size: 6rem; } -.Top-Bar > form{ - position: relative; - float: right; + +.body-container { + display: flex; + max-height: 100%; } -.Review-boxes { - position: relative; + +.center-display { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.search-bar { + display: flex; + justify-content: center; } #recent-reviews-text { - font-family: 'Lucida Sans'; - text-align: center; - font-size: 80px; - /*Color: #E4C3D2;*/ - color: #8284D0; - -} -.Review-boxes > input { - position: relative; + text-align: center; + font-size: 4rem; + color: #e4c3d2; } img#create-btn { - position: relative; + position: relative; + align-self: center; + padding-left: 2.5%; + padding-right: 2.5%; } -.Filter-box{ - background: #e4d9e9; - position: absolute; - border: 5px solid #99a2c2; -} -.review-container{ - display: flex; - position: relative; - flex-wrap: wrap; +.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; }