From 2e2f68abec59720fb011968f126440ec25f8d9f6 Mon Sep 17 00:00:00 2001 From: WilliamSavage Date: Wed, 15 Feb 2017 17:40:42 +0000 Subject: [PATCH 1/6] wraps sections in dev to add flex styling --- public/main.css | 35 ++++++++++++++++++++++++++++++++++- views/resources.hbs | 26 ++++++++++++++------------ views/reviews.hbs | 14 ++++++++------ views/reviews_by_user.hbs | 2 +- views/topics.hbs | 20 ++++++++++---------- 5 files changed, 67 insertions(+), 30 deletions(-) diff --git a/public/main.css b/public/main.css index 29d3b11..4f91d36 100644 --- a/public/main.css +++ b/public/main.css @@ -1,14 +1,47 @@ body { background-color: #ddd; + margin: 0; } .navbar { margin-bottom: 10px; + background: #2C333A; + padding: 1rem; } +.navbar__list { + margin: 0; + padding: 0; +} + +.navbar__listitem { + list-style-type: none; + display: inline-block; + transition: color 1s ease; +} + +.navbar__listitem:hover { + color: #ff4422; +} + +.navbar__listitem a { + color: white; + font-family: 'Lato', 'Futura', 'Didact Gothic', sans-serif; + font-size: 1.2rem; + text-decoration: none; +} + + .topics, .resources, .reviews { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; +} + +.topic, .resource, .review { font-family: 'Lato', 'Futura', 'Didact Gothic', sans-serif; - display: inline-block; + display: block; height: 200px; width: 200px; margin: 20px; diff --git a/views/resources.hbs b/views/resources.hbs index ac7d33a..acbd506 100644 --- a/views/resources.hbs +++ b/views/resources.hbs @@ -1,12 +1,14 @@ -{{#each resources}} -
-

{{this.title}}


-

{{this.reviews_count}} reviews{{# if this.has_reviews}}, average rating {{this.reviews_avg}}{{/if}}

- {{# if ../credentials}} - Write review
- Edit
- {{else}} -

Login/register to add a review

- {{/if}} -
-{{/each}} +
+ {{#each resources}} +
+

{{this.title}}


+

{{this.reviews_count}} reviews{{# if this.has_reviews}}, average rating {{this.reviews_avg}}{{/if}}

+ {{# if ../credentials}} + Write review
+ Edit
+ {{else}} +

Login/register to add a review

+ {{/if}} +
+ {{/each}} +
diff --git a/views/reviews.hbs b/views/reviews.hbs index 6193573..7101bdd 100644 --- a/views/reviews.hbs +++ b/views/reviews.hbs @@ -1,8 +1,10 @@

Reviews of: {{title}}

-{{#each reviews}} -
-

Rating: {{this.rating}} stars


-

{{this.content}}

-
-{{/each}} +
+ {{#each reviews}} +
+

Rating: {{this.rating}} stars


+

{{this.content}}

+
+ {{/each}} +
diff --git a/views/reviews_by_user.hbs b/views/reviews_by_user.hbs index c88e949..ecdfd5a 100644 --- a/views/reviews_by_user.hbs +++ b/views/reviews_by_user.hbs @@ -2,7 +2,7 @@ {{#each reviews}} -
+

Review of {{this.title}}

Rating: {{this.rating}}

{{this.content}}

diff --git a/views/topics.hbs b/views/topics.hbs index 14fe76d..76224ee 100644 --- a/views/topics.hbs +++ b/views/topics.hbs @@ -1,11 +1,11 @@ -{{#each topics}} - -
-

{{this.title}}

-
- -
-
- -{{/each}} +
+ {{#each topics}} +
+

{{this.title}}

+
+ +
+
+ {{/each}} +
From 93dd0cc2619670869d4502a579b7ae9e5ecb472d Mon Sep 17 00:00:00 2001 From: WilliamSavage Date: Wed, 15 Feb 2017 18:13:43 +0000 Subject: [PATCH 2/6] adds star rating instead of number #150 --- public/reviews.css | 13 +++++++++++++ views/resources.hbs | 14 ++++++++++++-- 2 files changed, 25 insertions(+), 2 deletions(-) create mode 100644 public/reviews.css diff --git a/public/reviews.css b/public/reviews.css new file mode 100644 index 0000000..ea513b3 --- /dev/null +++ b/public/reviews.css @@ -0,0 +1,13 @@ +.rating-static { + width: 60px; + height: 16px; + display: block; + background: url('http://www.itsalif.info/blogfiles/rating/star-rating.png') 0 0 no-repeat; +} + +.rating-5 { background-position: 0 0; } +.rating-4 { background-position: -12px 0; } +.rating-3 { background-position: -24px 0; } +.rating-2 { background-position: -36px 0; } +.rating-1 { background-position: -48px 0; } +.rating-0 { background-position: -60px 0; } diff --git a/views/resources.hbs b/views/resources.hbs index acbd506..f391334 100644 --- a/views/resources.hbs +++ b/views/resources.hbs @@ -1,8 +1,18 @@
{{#each resources}}
-

{{this.title}}


-

{{this.reviews_count}} reviews{{# if this.has_reviews}}, average rating {{this.reviews_avg}}{{/if}}

+

{{this.title}}

+

+ {{this.type}} +

+

+ {{this.reviews_count}} reviews + + {{# if this.has_reviews}} + + {{/if}} +

+ {{# if ../credentials}} Write review
Edit
From 4bcc0295fa7e72aefd1883cda077a17a8c2574ab Mon Sep 17 00:00:00 2001 From: WilliamSavage Date: Wed, 15 Feb 2017 18:14:38 +0000 Subject: [PATCH 3/6] gets type label from db and displays on resource view --- db_build.sql | 8 +++++++- src/queries.js | 1 + 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/db_build.sql b/db_build.sql index f530899..80834b6 100644 --- a/db_build.sql +++ b/db_build.sql @@ -13,7 +13,9 @@ CREATE TABLE users ( ); INSERT INTO users(firstname, lastname, github, email, username, password) VALUES - ('Jen', 'Spencer', 'jsms90', 'jen@foundersandcoders.com', 'jsms90', '$2a$10$UpA4.c39Yp09g5zZZnmeTuE7gabMK2wWeEWlM4d.uSs8iO86FZvyS'); + ('Jen', 'Spencer', 'jsms90', 'jen@foundersandcoders.com', 'jsms90', '$2a$10$UpA4.c39Yp09g5zZZnmeTuE7gabMK2wWeEWlM4d.uSs8iO86FZvyS'), + ('William', 'Savage', 'SavageWilliam', 'willsavage@hotmail.com', 'SavageWilliam', '$2a$10$UpA4.c39Yp09g5zZZnmeTuE7gabMK2wWeEWlM4d.uSs8iO86FZvyS'); + CREATE TABLE topics ( id SMALLINT PRIMARY KEY, @@ -74,4 +76,8 @@ CREATE TABLE reviews ( user_id INTEGER NOT NULL REFERENCES users(id) ); +INSERT INTO reviews(rating, resource_id, content, user_id) VALUES + (5, 1, 'Great resource! I hope someone writes one for learning JS in 2017!', 2); + + COMMIT; diff --git a/src/queries.js b/src/queries.js index a432936..af9217e 100644 --- a/src/queries.js +++ b/src/queries.js @@ -58,6 +58,7 @@ queries.getTopics = (cb) => { queries.getResources = (topicsEndpoint, cb) => { const sql = `SELECT resources.title, resources.endpoint, url, topics.endpoint AS topics_endpoint, + (SELECT label FROM type WHERE type.id = resources.type_id) AS type, (SELECT COUNT(*) FROM reviews WHERE reviews.resource_id = resources.id) AS reviews_count, (SELECT AVG(rating) FROM reviews WHERE reviews.resource_id = resources.id)::int AS reviews_avg, (EXISTS (SELECT * FROM reviews WHERE reviews.resource_id = resources.id)) AS has_reviews From 5d247248e9dfeb4a36adec30b67c5ff4f6c0f38b Mon Sep 17 00:00:00 2001 From: WilliamSavage Date: Wed, 15 Feb 2017 18:15:34 +0000 Subject: [PATCH 4/6] tidy styling and import star rating css file --- public/main.css | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/public/main.css b/public/main.css index 4f91d36..973b0e2 100644 --- a/public/main.css +++ b/public/main.css @@ -1,3 +1,5 @@ +@import url("reviews.css"); + body { background-color: #ddd; margin: 0; @@ -18,6 +20,7 @@ body { list-style-type: none; display: inline-block; transition: color 1s ease; + margin-left: 1rem; } .navbar__listitem:hover { @@ -31,8 +34,9 @@ body { text-decoration: none; } - .topics, .resources, .reviews { + width: 95%; + margin: 0 auto; display: flex; flex-direction: row; justify-content: center; @@ -47,7 +51,7 @@ body { margin: 20px; padding: 0px 20px; border-radius: 10px; - background-color: #eee; + background-color: #fff; background-size: cover; background-position: center; background-repeat: no-repeat; @@ -56,7 +60,7 @@ body { .topic_title, .resources_title { text-align: center; margin-top: -25px; - margin-bottom: 15px; + margin-bottom: 10px; } .reviews_title { From 8699f8d159ce3a954ae9f7633cc5122ff5a92f7b Mon Sep 17 00:00:00 2001 From: WilliamSavage Date: Wed, 15 Feb 2017 18:15:44 +0000 Subject: [PATCH 5/6] removes console.log --- src/routes.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/routes.js b/src/routes.js index 3158066..b6850cf 100644 --- a/src/routes.js +++ b/src/routes.js @@ -5,7 +5,6 @@ const home = { path: '/', handler (req, reply) { queries.getTopics((err, topics) => { - console.log(req.auth.credentials); if (err) console.log('No topics were loaded!', err); reply.view('topics', { topics }); }); From 3afe22d43f8d7aa4adadf56a74fea95ce8f25d46 Mon Sep 17 00:00:00 2001 From: WilliamSavage Date: Wed, 15 Feb 2017 18:20:20 +0000 Subject: [PATCH 6/6] adds reviews to db sql to test star rating #150 --- db_build.sql | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/db_build.sql b/db_build.sql index 80834b6..8876fd5 100644 --- a/db_build.sql +++ b/db_build.sql @@ -77,7 +77,10 @@ CREATE TABLE reviews ( ); INSERT INTO reviews(rating, resource_id, content, user_id) VALUES - (5, 1, 'Great resource! I hope someone writes one for learning JS in 2017!', 2); + (5, 1, 'Great resource! I hope someone writes one for learning JS in 2017!', 2), + (3, 1, 'I love JS!', 1), + (3, 2, 'I learnt the importance of testing via this resource!', 2), + (4, 3, 'HTML & CSS is my bread and butter!', 2); COMMIT;