Merge pull request #23 from daniiJenelle/jenelleBranch

dashboard structure has been styled and city list links are fixed. :o…

scripts/script.js

@@ -274,7 +274,6 @@ app.smoothScroll = function () {
       scrollTop: $(`#dashboard`).offset().top
     }, 900, function () {
       window.location.hash = `#dashboard`;
-      $(`header`).css(`display`, `none`);
     });
   });
 }
@@ -285,8 +284,6 @@ app.smoothScrollOneChoice = function () {
     scrollTop: $(`#dashboard`).offset().top
   }, 900, function () {
     window.location.hash = `#dashboard`;
-
-    $(`header`).css(`display`, `none`);
   });
 
 }
@@ -311,7 +308,7 @@ app.displayNewsDashboard = function (news) {
       articleImage = `https://www.nytimes.com/` + `${article.multimedia[0].url}`
     }
 
-    $(`.news`).append(`<a href="${articleLink}" class="singleArticle"><img src="${articleImage}" alt=""><h3>${articleTitle}</h3><p>${articleDate.toDateString()}</p><p>${articleAbstract}</p></a>`);
+    $(`.news`).append(`<a href="${articleLink}" title="click to read more" class="singleArticle"><img src="${articleImage}" alt=""><h3>${articleTitle}</h3><p>${articleDate.toDateString()}</p><p>${articleAbstract}</p></a>`);
   });
 }
 

styles/sass/_cityList.scss

@@ -72,7 +72,8 @@
     }
   }
 
-  li {
+  li, 
+  a {
     width: 100%;
     color: transparent;
     font-family: "Campton Semibold", sans-serif;
@@ -84,10 +85,6 @@
     opacity: 1;
     -webkit-text-stroke: 1.4px $black;
 
-    &.fadeOutCity {
-      opacity: 0;
-    }
-
     &.selectedCity {
       color: $white;
       transform: scale(1.08); 
@@ -102,8 +99,11 @@
         cursor: default;
       }
     }
-
 
+    &.fadeOutCity {
+      opacity: 0;
+    }
+
     &:hover {
       cursor: pointer;
       transform: scale(1.05);

styles/sass/_dashboard.scss

@@ -1,69 +1,85 @@
 .dashboard {
     background: white;
     color: $black;
+    height: 100vh;
 }
 
 .dashboardWrapper {
     display: flex;
+    width: 95%;
+    height: 100vh;
+    margin: 0 auto;
+    border: 1px solid purple;
+
     a {
     text-decoration: none;
     color: $black;
     padding: 10px;
     }
 }
 
-.dashboardLeft, .dashboardRight {
+.dashboardLeft,
+.dashboardRight {
+    margin: 40px 20px 0;
     width: 50%;
-    height: 100vh;
+    height: calc(100% - 40px);
     border: 2px solid tomato;
 }
 
+.dashboardRight {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .dashSection {
     border: 2px solid green;
-    padding: 5%;
+
 }
 
 .cityName {
     height: 20%;
+    margin-bottom: 40px;
 }
 
 // NEWS SECTION STYLING STARTS HERE
 .news {
     overflow-y: auto;
-    height: 80%;
+    height: calc(80% - 40px);
     border: 2px solid blue;
     display: flex;
     flex-wrap: wrap;
     .singleArticle {
-        width: 50%;
-        border-top: 1px solid black;
-        
-        img {
-        filter: grayscale(100%);
-        }
+      width: 50%;
+      border-top: 1px solid black;
+
+      img {
+      filter: grayscale(100%);
+      }
     }
 }
 
 // WEATHER SECTION STYLING STARTS HERE
+
+.weather,
+.dateTime {
+  width: calc(50% - 20px);
+  height: calc(50% - 20px);
+  margin-bottom: 40px;
+  background: $lightGrey;
+}
+
 .weather {
-    height: 30%;
     display: flex;
+    margin-right: 40px;
     div {
         width: calc(100% / 3);
     }
 }
 
-.dateTime {
-    height: 20%;
-}
-
 .cityPhoto {
-    height: 50%;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-}
-
-// .dashboardDisplayNone {
-//     display: none;
-// }
+  width: 100%;
+  height: calc(50% - 20px);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}

styles/sass/_generalStyling.scss

@@ -1,15 +1,20 @@
 // GLOBAL VARIABLES
 $black: #000;
-$grey: #565656;
+$lightGrey: #DBDBDB;
+$darkGrey: #c9c9c9;
 $white: #E7E6E6;
-$teal: #A7D6CB;
+$teal: #BAD8CA;
+
+// FONTS
+$med: "Campton Medium", sans-serif;
+$semibold: "Campton Semibold", sans-serif;
+$bold: "Campton Bold", sans-serif;
 
 // MIXINS
 @mixin wrapper($max-width: 1280px, $width: 85%, $margin: 0 auto) {
   max-width: $max-width;
   width: $width;
   margin: $margin;
-  // border: 1px solid red;
 }
 
 @mixin flexCenter($wrap: wrap, $justify-content: center, $align-items: center) {
@@ -27,7 +32,21 @@ $teal: #A7D6CB;
   right: 0;
 }
 
+h1,
+h2,
+h3, 
+div,
+ul,
+p {
+  margin: 0; 
+  padding: 0;
+}
+
 img {
   width: 100%;
   display: block;
+}
+
+a {
+  text-decoration: none;
 }

styles/sass/_setup.scss

@@ -40,14 +40,4 @@ article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary
 
 html {
   font-size: 62.5%;
-}
-
-h1,
-h2,
-h3, 
-div,
-ul,
-p {
-  margin: 0; 
-  padding: 0;
 }