Merge pull request #199 from fac-17/feature/restyle-comments

Feature/restyle comments
fac-17 · Sep 19, 2019 · 000905a · 000905a
2 parents 1501442 + 676f4d2
commit 000905a
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 22 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -443,16 +443,42 @@ keyframes active {
   text-align: center;
 }
 
+.product-rating{
+  grid-area: rating;
+}
+
+.product-comment{
+  grid-area: comment;
+}
+
+.product-upvotes{
+  grid-area: upvotes;
+}
+
+.upvote-button{
+  grid-area: button;
+  width: 5vw;
+  height: 5vw;
+  font-size: 1.8em;
+
+}
+
 .product-comment-card {
   margin: 10px;
   padding: 10px;
-  box-shadow: 5px 5px 10px var(--grey);
+  box-shadow: 0.5em 0.5em 1em var(--purple);
   border-radius: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  display: grid;
+  grid-template-columns: 20vw 20vw 20vw 20vw;
+  grid-template-rows: auto;
+  grid-template-areas: ". rating . upvotes"
+  "comment comment comment  ."
+  "comment comment comment button";
+  justify-items: center;
 }
 
+
+
 .product-para {
   font-weight: bold;
 }

diff --git a/src/views/productPage.hbs b/src/views/productPage.hbs
@@ -15,27 +15,31 @@
 
     <p class="product-para">{{chosenProduct.product_description}}</p>
 
-    <form action="/submitrating/{{chosenProduct.id}}" method="POST">
-        <label for="rating">Rating</label>
-        <select id="rating" name="rating">
-            <option value=1>⭐</option>
-            <option value=2>⭐⭐</option>
-            <option value=3>⭐⭐⭐</option>
-            <option value=4>⭐⭐⭐⭐</option>
-            <option value=5>⭐⭐⭐⭐⭐</option>
-        </select>
-        <label for="comment">Comment: </label>
-        <input id="comment" type="text" name="comment">
+    <section id="rateThisProduct">
+        <h3>Rate this product</h3>
+        <form action="/submitrating/{{chosenProduct.id}}" method="POST">
+            <label for="rating">Rating</label>
+            <select id="rating" name="rating">
+                <option value=1>⭐</option>
+                <option value=2>⭐⭐</option>
+                <option value=3>⭐⭐⭐</option>
+                <option value=4>⭐⭐⭐⭐</option>
+                <option value=5>⭐⭐⭐⭐⭐</option>
+            </select>
+            <label for="comment">Comment: </label>
+            <input id="comment" type="text" name="comment">
 
-        <input type="submit">
-    </form>
-    <section>
+            <input type="submit">
+        </form>
+    </section>
+    <section id="productComments">
+        <h3>Comments</h3>
         {{#each ratings}}
         <article class="product-comment-card">
-            <p>{{this.comment}}</p>
-            <p>Rating: <span class="result-rating">{{this.rating}}</span></p><br>
-            <p>UpVotes: <span id='upvotes-{{this.id}}'>{{this.votes}}</span></p>
-            <button id='upvote-button-{{chosenProduct.id}}-{{this.id}}' class="upvote-button">Upvote</button>
+            <p class="product-rating">Rating: <span class="result-rating">{{this.rating}}</span></p><br>
+            <p class="product-comment">{{this.comment}}</p>
+            <p class="product-upvotes">UpVotes: <span id='upvotes-{{this.id}}'>{{this.votes}}</span></p>
+            <button id='upvote-button-{{chosenProduct.id}}-{{this.id}}' class="upvote-button">&#11014</button>
         </article>
         {{/each}}
     </section>