makes whole challenge cliclickable

Relates #93

.gitignore

@@ -62,3 +62,6 @@ typings/
 
 #DS store 
 .DS_Store
+
+#VS Code settings
+.vscode

private/sass/challenges.scss

@@ -8,6 +8,7 @@
   border: 1px solid #ccc;
   border-top: none;
   border-radius: 10px;
+  margin-bottom: $smallest;
 }
 
 .tab {
@@ -24,21 +25,21 @@
   cursor: pointer;
 }
 
-// .tab button:hover {
-//   background-color: #ddd;
-//   border-radius: 3px;
-// }
-
-// .tab button:focus,
-//  .tab button:active,
-// //  .tab li:active
-//  {
-//   background-color: $orange1;
-//   color: $black;
-//   border: none;
-//   // padding: $smallest;
-//   border-radius: 3px;
-// }
+.tab button:hover {
+  background-color: #ddd;
+  border-radius: 3px;
+}
+
+.tab button:focus,
+ .tab button:active,
+//  .tab li:active
+ {
+  background-color: $orange1;
+  color: $black;
+  border: none;
+  // padding: $smallest;
+  border-radius: 3px;
+}
 
 .tab nav ul {
   list-style: none;

private/sass/inventory.scss

@@ -7,11 +7,17 @@
 }
 
 .items-overview {
+  display: block;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  margin: 0;
+  border: 2px $navy1 solid;
+  border-top: 1px $navy1 solid;
+  border-right: 1px $navy1 solid;
+  border-radius: 10px;
+  padding: $smallest;
+  margin-bottom: $small;
 }
 
 .bought-icon,

private/sass/style.scss

@@ -16,7 +16,7 @@
 
 main {
   margin-top: $larger;
-  margin-bottom: $large;
+  margin-bottom: $large + 1rem;
 }
 
 body {

public/js/challenges.js

@@ -1,40 +1,41 @@
-let challengePage = document.querySelector(".challenge-page");
-let url = window.location.href.split("/")[3];
-let h3id = document.querySelector(".accept-challenge-section");
+/* eslint-disable */
+let challengePage = document.querySelector('.challenge-page');
+let url = window.location.href.split('/')[3];
+let h3id = document.querySelector('.accept-challenge-section');
 
 (function checkUrlandCreateForm(url) {
-  let f = document.createElement("form");
-  let s = document.createElement("input"); //input element, Submit button
-  let id = document.createElement("input");
-  let h3 = document.createElement("h3");
+  let f = document.createElement('form');
+  let s = document.createElement('input'); //input element, Submit button
+  let id = document.createElement('input');
+  let h3 = document.createElement('h3');
 
-  if (url === "new-challenges") {
-    f.setAttribute("method", "post");
-    f.setAttribute("action", "/challenge/accepted");
-    f.classList.add("action-section");
-    s.classList.add("single-page-button", "acceptBtn");
-    s.setAttribute("type", "submit");
-    s.setAttribute("value", "Yes I am! Accept that Challenge!!");
-    id.setAttribute("name", "challenge_id");
-    id.setAttribute("type", "hidden");
-    id.classList.add("id-hidden");
-    id.setAttribute("value", h3id.innerHTML);
-    h3.innerHTML = "Are you brave enough to accept this challenge?";
+  if (url === 'new-challenges') {
+    f.setAttribute('method', 'post');
+    f.setAttribute('action', '/challenge/accepted');
+    f.classList.add('action-section');
+    s.classList.add('single-page-button', 'acceptBtn');
+    s.setAttribute('type', 'submit');
+    s.setAttribute('value', 'Yes I am! Accept that Challenge!!');
+    id.setAttribute('name', 'challenge_id');
+    id.setAttribute('type', 'hidden');
+    id.classList.add('id-hidden');
+    id.setAttribute('value', h3id.innerHTML);
+    h3.innerHTML = 'Are you brave enough to accept this challenge?';
     f.appendChild(h3);
     f.appendChild(s);
     f.appendChild(id);
     challengePage.appendChild(f);
-  } else if (url === "acc-challenges") {
-    f.setAttribute("method", "post");
-    f.setAttribute("action", "/challenge/completed");
-    f.classList.add("action-section");
-    s.classList.add("single-page-button", "complBtn");
-    s.setAttribute("type", "submit");
-    s.setAttribute("value", "complete challenge");
-    id.setAttribute("name", "challenge_id");
-    id.setAttribute("type", "hidden");
-    id.setAttribute("value", h3id.innerHTML);
-    h3.innerHTML = "Complete Challenge";
+  } else if (url === 'acc-challenges') {
+    f.setAttribute('method', 'post');
+    f.setAttribute('action', '/challenge/completed');
+    f.classList.add('action-section');
+    s.classList.add('single-page-button', 'complBtn');
+    s.setAttribute('type', 'submit');
+    s.setAttribute('value', 'complete challenge');
+    id.setAttribute('name', 'challenge_id');
+    id.setAttribute('type', 'hidden');
+    id.setAttribute('value', h3id.innerHTML);
+    h3.innerHTML = 'Complete Challenge';
     f.appendChild(h3);
     f.appendChild(s);
     f.appendChild(id);

src/views/dashboard.hbs

@@ -2,17 +2,17 @@
     {{!--
 
     <body onload="document.getElementById('defaultOpen').click()"> --}}
-<!-- Tabbed test -->
+        <!-- Tabbed test -->
+
 
-
 
         <div class="tab">
             <nav>
-            <ul>
-                <li><button class="tablinks" onclick="openCity(event, 'new-challenge')" id="defaultOpen">All</button></li>
-                <li> <button class="tablinks" onclick="openCity(event, 'accepted-challenge')">Accepted </button></li>
-                <li> <button class="tablinks" onclick="openCity(event, 'completed-challenge')">Completed</button></li>
-            </ul>
+                <ul>
+                    <li><button class="tablinks" onclick="openCity(event, 'new-challenge')" id="defaultOpen">All</button></li>
+                    <li> <button class="tablinks" onclick="openCity(event, 'accepted-challenge')">Accepted </button></li>
+                    <li> <button class="tablinks" onclick="openCity(event, 'completed-challenge')">Completed</button></li>
+                </ul>
             </nav>
 
         </div>
@@ -22,7 +22,7 @@
         <section id="new-challenge" class="items-container tabcontent">
             <div class="bought-container">
                 {{#each newChallenges}}
-                <div class="items-overview">
+                <div class="items-overview" onclick="window.location.href='/new-challenges/{{this.id}}'">
                     {{!-- <h3 class="newChallH3">{{this.title}} : {{this.id}}</h3> --}}
                     <h3 class="newChallH3">{{this.title}}</h3>
                     <div class="icons">
@@ -43,7 +43,7 @@
         <section id="accepted-challenge" class="items-container tabcontent">
             <div class="challenges-container">
                 {{#each acceptedChallenges}}
-                <div class="items-overview">
+                <div class="items-overview" onclick="window.location.href='/new-challenges/{{this.id}}'">
                     <h3 id="challenge-content" class="newChallH3">{{this.title}}</h3>
                     <div class="icons">
                         <img class="bought-icon" src='{{this.img_link}}'>
@@ -63,15 +63,15 @@
         <section id="completed-challenge" class="items-container tabcontent">
             <div class="challenges-container">
                 {{#each completedChallenges}}
-                <div class="items-overview">
+                <div class="items-overview" onclick="window.location.href='/new-challenges/{{this.id}}'">
                     <h3 class="newChallH3">{{this.title}}</h3>
                     <div class="icons">
                         <img class="bought-icon" src='{{this.img_link}}'>
                         <button class="new-item-button" id="id-{{this.id}}" onclick="window.location.href='/comp-challenges/{{this.challenge_id}}'">
                             <img class="help-icon" src="../../public/imgs/help.svg" alt="">
                         </button>
                     </div>
-                    </div>
                 </div>
-                {{/each}}
+            </div>
+            {{/each}}
         </section>