Star rating

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,11 @@ 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),
+  (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;

public/main.css

@@ -1,20 +1,57 @@
+@import url("reviews.css");
+
 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;
+ margin-left: 1rem;
+}
+
+.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 {
+  width: 95%;
+  margin: 0 auto;
+  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;
   padding: 0px 20px;
   border-radius: 10px;
-  background-color: #eee;
+  background-color: #fff;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -23,7 +60,7 @@ body {
 .topic_title, .resources_title {
   text-align: center;
   margin-top: -25px;
-  margin-bottom: 15px;
+  margin-bottom: 10px;
 }
 
 .reviews_title {

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; }

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

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 });
     });

views/resources.hbs

@@ -1,12 +1,24 @@
-{{#each resources}}
-   <section class="resources" style="display:inline-block">
-     <h3 class="resource_title"><a href={{this.url}}>{{this.title}}</a></h3><br>
-     <p><a class="resource_btn" href='/{{this.topics_endpoint}}/{{this.endpoint}}'>{{this.reviews_count}} reviews</a>{{# if this.has_reviews}}, average rating {{this.reviews_avg}}{{/if}}</p>
-     {{# if ../credentials}}
-       <a class="resource_btn" href='/create-review/{{this.endpoint}}'>Write review</a><br>
-       <a class="resource_btn" href="/edit-resource/{{this.endpoint}}">Edit</a><br>
-     {{else}}
-       <p>Login/register to add a review</p>
-     {{/if}}
-  </section>
-{{/each}}
+<div class='resources'>
+  {{#each resources}}
+     <section class="resource">
+       <h3 class="resource_title"><a href={{this.url}}>{{this.title}}</a></h3>
+       <p class='resource_type'>
+         {{this.type}}
+       </p>
+       <p><a class="resource_btn" href='/{{this.topics_endpoint}}/{{this.endpoint}}'>
+         {{this.reviews_count}} reviews</a>
+
+         {{# if this.has_reviews}}
+          <span class="rating-static rating-{{this.rating_avg}}"></span>
+         {{/if}}
+       </p>
+
+       {{# if ../credentials}}
+         <a class="resource_btn" href='/create-review/{{this.endpoint}}'>Write review</a><br>
+         <a class="resource_btn" href="/edit-resource/{{this.endpoint}}">Edit</a><br>
+       {{else}}
+         <p>Login/register to add a review</p>
+       {{/if}}
+    </section>
+  {{/each}}
+</div>

views/reviews.hbs

@@ -1,8 +1,10 @@
 <h3 class="reviews_title">Reviews of: {{title}}</h3>
 
-{{#each reviews}}
-  <section class="reviews">
-   <p>Rating: {{this.rating}} stars</p><br>
-   <p>{{this.content}}</p>
-  </section>
-{{/each}}
+<div class='reviews'>
+  {{#each reviews}}
+    <section class="review">
+     <p>Rating: {{this.rating}} stars</p><br>
+     <p>{{this.content}}</p>
+    </section>
+  {{/each}}
+</div>

views/reviews_by_user.hbs

@@ -2,7 +2,7 @@
 
 {{#each reviews}}
 
-  <section class="reviews">
+  <section class="review">
     <h3 class="reviews_title">Review of <a href="{{this.url}}">{{this.title}}</a></h3>
     <p>Rating: {{this.rating}}</p>
     <p>{{this.content}}</p>

views/topics.hbs

@@ -1,11 +1,11 @@
 <!-- below is test code to test our server -->
-{{#each topics}}
-
-  <section class="topics" style="background-image:url(/static/images/{{this.image_path}})">
-    <h3 class = "topic_title">{{this.title}}</h3>
-    <form class="topic_btn" action = {{this.endpoint}} method="get">
-      <input type="submit" value="Get Resources">
-   </form>
-  </section>
-
-{{/each}}
+<div class='topics'>
+  {{#each topics}}
+    <section class="topic" style="background-image:url(/static/images/{{this.image_path}})">
+      <h3 class = "topic_title">{{this.title}}</h3>
+      <form class="topic_btn" action = {{this.endpoint}} method="get">
+        <input type="submit" value="Get Resources">
+     </form>
+    </section>
+  {{/each}}
+</div>