Add single page styling

rel issue #56

private/sass/selected-page.scss

@@ -0,0 +1,90 @@
+@import "colors";
+@import "fonts";
+@import "sizes";
+
+.selected-item-body {
+  padding: $medium;
+  display: flex;
+  min-height: 100vh;
+}
+
+.selected-item-main {
+  background-color: $green1;
+  align-items: stretch;
+  width: 100%;
+  top: 0;
+  margin: 0;
+  border-radius: $medium;
+  padding: $medium;
+}
+
+#close-button {
+  position: absolute;
+  right: $small;
+  top: $small;
+  width: $larger;
+  height: $larger;
+  border-radius: 50%;
+  background-color: $orange1;
+  color: $white;
+  font-size: $large;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: transform 0.5s ease;
+}
+
+.close-icon {
+  width: 100%;
+  padding: $small;
+}
+
+#close-button:hover {
+  transform: scale(1.1, 1.1);
+}
+
+.single-page-button {
+  cursor: pointer;
+  width: 100%;
+  height: $large;
+  background-color: $orange1;
+  border-radius: $medium;
+  font-size: $medium;
+  font-family: $main-text;
+  font-weight: 500;
+  color: $white;
+  margin-top: $large;
+}
+
+.challenge-page {
+  margin-bottom: $godzilla;
+}
+
+.action-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: $large;
+  margin: auto;
+  text-align: center;
+}
+
+.acceptBtn,
+.complBtn {
+  margin-top: 0;
+}
+
+.header-img {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.selected-item-img {
+  height: 50%;
+  border-radius: $large;
+}
+
+.selected-item-title {
+  text-align: center;
+}

public/js/challenges.js

@@ -1,38 +1,40 @@
 let challengePage = document.querySelector(".challenge-page");
 let url = window.location.href.split("/")[3];
-let h2id = document.querySelector(".h2-id");
+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 h2 = document.createElement("h2");
+  let h3 = document.createElement("h3");
 
   if (url === "new-challenges") {
     f.setAttribute("method", "post");
     f.setAttribute("action", "/challenge/accepted");
-    s.setAttribute("class", "acceptBtn");
+    f.classList.add("action-section");
+    s.classList.add("single-page-button", "acceptBtn");
     s.setAttribute("type", "submit");
-    s.setAttribute("value", "accept challenge");
+    s.setAttribute("value", "Yes I am! Accept that Challenge!!");
     id.setAttribute("name", "challenge_id");
     id.setAttribute("type", "hidden");
-    id.setAttribute("value", h2id.innerHTML);
-    h2.innerHTML = "Accept Challenge";
-    f.appendChild(h2);
+    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");
-    s.setAttribute("class", "complBtn");
+    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", h2id.innerHTML);
-    h2.innerHTML = "Complete Challenge";
-    f.appendChild(h2);
+    id.setAttribute("value", h3id.innerHTML);
+    h3.innerHTML = "Complete Challenge";
+    f.appendChild(h3);
     f.appendChild(s);
     f.appendChild(id);
     challengePage.appendChild(f);

public/js/dom.js

@@ -1,27 +1,31 @@
 // wooooo go dom
 
 function openCity(evt, cityName) {
-    // Declare all variables
-
-    let i, tabcontent, tablinks;
+  // Declare all variables
 
-    // Get all elements with class="tabcontent" and hide them
-    tabcontent = document.getElementsByClassName("tabcontent");
-    for (i = 0; i < tabcontent.length; i++) {
-        tabcontent[i].style.display = "none";
-    }
+  let i, tabcontent, tablinks;
 
-    // Get all elements with class="tablinks" and remove the class "active"
-    tablinks = document.getElementsByClassName("tablinks");
-    for (i = 0; i < tablinks.length; i++) {
-        tablinks[i].className = tablinks[i].className.replace(" active", "");
-    }
+  // Get all elements with class="tabcontent" and hide them
+  tabcontent = document.getElementsByClassName("tabcontent");
+  for (i = 0; i < tabcontent.length; i++) {
+    tabcontent[i].style.display = "none";
+  }
 
-    // Show the current tab, and add an "active" class to the button that opened the tab
-    document.getElementById(cityName).style.display = "block";
-    evt.currentTarget.className += " active";
+  // Get all elements with class="tablinks" and remove the class "active"
+  tablinks = document.getElementsByClassName("tablinks");
+  for (i = 0; i < tablinks.length; i++) {
+    tablinks[i].className = tablinks[i].className.replace(" active", "");
+  }
+
+  // Show the current tab, and add an "active" class to the button that opened the tab
+  document.getElementById(cityName).style.display = "block";
+  evt.currentTarget.className += " active";
 }
 // To show first tab by default //
 
 document.getElementById("defaultOpen").click();
-//
+
+function goBack() {
+  window.history.back();
+}
+//

src/controllers/getSingleTopic.js

@@ -1,12 +1,14 @@
-const topics = require('../model/topics')
+const topics = require("../model/topics");
 
 exports.get = (req, res) => {
   const { singleTopic } = req.params;
   for (let i = 0; i < topics.length; i++) {
     if (topics[i].title.includes(singleTopic)) {
       const topicDetails = topics[i];
-      return res.render('singletopic', { topicDetails });
+      return res.render("singletopic", {
+        layout: "content-selected",
+        topicDetails
+      });
     }
   }
 };
-

src/views/bought-item-select.hbs

@@ -4,7 +4,7 @@
 
   {{!-- <img class="challenge-img" src="{{challenge.img_link}}"> --}}
 
-  <h2>{{{item.title}}}</h2>
+  <h2 class="selected-item-title">{{{item.title}}}</h2>
   <h2 class="h2-id">{{{item.id}}}</h2>
 
   <article class="item-what">
@@ -21,6 +21,6 @@
     </p>
   </article>
 
-  <a href="{{{item.ext_link}}}" target="_blank" class="ext-link"><button>Find out more</button></a>
+  <a href="{{{item.ext_link}}}" target="_blank" class="ext-link"><button class="single-page-button">Find out more</button></a>
 
 </section>

src/views/challSelect.hbs

@@ -1,9 +1,11 @@
 <section class="challenge-page">
 
-  {{!-- <img class="challenge-img" src="{{challenge.img_link}}"> --}}
+  <header class="header-img">
+    <img class="selected-item-img" src="{{challenge.img_link}}">
+  </header>
+
+  <h2 class="selected-item-title">{{{challenge.title}}}</h2>
 
-  <h2>{{{challenge.title}}}</h2>
-  <h2 class="h2-id">{{{challenge.id}}}</h2>
 
   <article class="challenge-what">
     <h3>What</h3>
@@ -19,8 +21,10 @@
     </p>
   </article>
 
-  <a href="{{{challenge.ext_link}}}" target="_blank" class="ext-link"><button>Find out more</button></a>
+  <a href="{{{challenge.ext_link}}}" target="_blank" class="ext-link"><button class="single-page-button">Find
+      out more</button></a>
 
 
+</section>
 
-</section>
+<section class="accept-challenge-section"></section>