Merge pull request #83 from INN/35-qa-fixes

Homepage QA fixes
INN · Feb 6, 2020 · 3e0f1de · 3e0f1de
2 parents 5c0fb18 + 9aa80ee
commit 3e0f1de
Show file tree

Hide file tree

Showing 12 changed files with 132 additions and 79 deletions.
diff --git a/wp-content/themes/ipbs-largo/css/child-style.css b/wp-content/themes/ipbs-largo/css/child-style.css
diff --git a/wp-content/themes/ipbs-largo/css/map.css b/wp-content/themes/ipbs-largo/css/map.css
diff --git a/wp-content/themes/ipbs-largo/homepages/assets/css/homepage.css b/wp-content/themes/ipbs-largo/homepages/assets/css/homepage.css
diff --git a/wp-content/themes/ipbs-largo/homepages/assets/less/homepage.less b/wp-content/themes/ipbs-largo/homepages/assets/less/homepage.less
@@ -11,7 +11,7 @@
 	.widget {
 		border-bottom: 1px solid @border-color;
 		padding-bottom: 2 * @measure;
-		margin: 0;
+		margin: 0!important;
 	}
 	.menu-container {
 		padding-top: 2 * @measure;
@@ -295,6 +295,7 @@
             grid-gap: @measure + 1rem;
             padding: 0 @measure * 2;
             .widget {
+				margin-bottom: 0!important;
                 &:first-of-type {
                     grid-area: title;
                     margin-bottom: 0;
@@ -332,13 +333,16 @@
     }
 }
 .widget_gce_widget {
+	margin-bottom: 0!important;
     .simcal-day-label {
         display: none;
     }
     .simcal-day {
         background: @lightgrey;
         padding: @measure;
-        margin-bottom: @measure * 2!important;
+        &:not(:last-of-type) {
+			margin-bottom: @measure * 2!important;
+		}
         .simcal-event-details {
             .date {
                 color: @black;

diff --git a/wp-content/themes/ipbs-largo/images/homepage.jpg b/wp-content/themes/ipbs-largo/images/homepage.jpg
diff --git a/wp-content/themes/ipbs-largo/less/footer.less b/wp-content/themes/ipbs-largo/less/footer.less
@@ -1,18 +1,23 @@
 .before-footer-wrapper {
     background-color: @white!important;
     #before-footer {
+        h3.widgettitle {
+            .widgettitle-mixin();
+        }
         .widget_text {
             text-align: center;
             pre {
                 background: transparent;
                 border: none;
                 .tcls-wrap {
+                    max-width: 1170px!important;
                     div {
                         div {
                             max-width: initial!important;
                         }
                     }
                     #tc-logo {
+                        max-width: 1170px!important;
                         .owl-controls {
                             .owl-nav {
                                 display: none!important;
@@ -119,6 +124,11 @@
                     display: grid;
                     grid-template-columns: repeat(4, 1fr);
                     grid-gap: 10px;
+                    li {
+                        a {
+                            font-size: 13px;
+                        }
+                    }
                 }
             }
             .widget-area {

diff --git a/wp-content/themes/ipbs-largo/less/header.less b/wp-content/themes/ipbs-largo/less/header.less
@@ -2,12 +2,15 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin-bottom: 0!important;
+    margin-top: 18px!important;
     &::before,
     &::after {
         display: none;
     }
     .header_img {
         max-height: 100px;
+        margin: 0;
         @media (max-width: 999px) {
             max-height: 60px;
         }

diff --git a/wp-content/themes/ipbs-largo/less/map.less b/wp-content/themes/ipbs-largo/less/map.less
@@ -1,55 +1,23 @@
 @import (reference) "variables.less";
 @font-map-labels: @font-description;
 
-#map-frame{
-  width: 100%;
-  height: auto;
-
-  line {
-    stroke-dashoffset: 1000;
-  }
-  .coverage {
-    pointer-events: none;
-  }
-  .coverage > g > circle {
-    opacity: 0;
-  }
-  .coverage > g > line {
-    opacity: 0;
-  }
-  .coverage > g > text {
-    opacity: 0;
-    font-family: @font-map-labels;
-    font-weight: 700;
-    font-size: 22px;
-  }
-  .heading {
-    opacity: 0;
-  }
-  .label {
-    cursor: pointer;
-  }
-  .heading text,
-  .label text {
-    fill: #515350;
-    text-transform: uppercase;
-    font-family: @font-map-labels;
-    font-weight: 700;
-  }
-  .label text {
-    font-size: 24px;
-  }
-  .heading text {
-    font-size: 20px;
-  }
-
+.ipbs-member-map-widget {
   #legend {
     font-size: 16px;
     line-height: 16px;
     font-family: @font-map-labels;
     color: #221F1F;
     border: 2px solid #d1d2d3;
     padding: 0.5em;
+    width: max-content;
+    margin: 0 auto;
+    margin-top: @measure * 2;
+    padding: @measure;
+    border-radius: 4px;
+    @media (max-width: 769px) {
+      width: unset;
+      text-align: center;
+    }
   }
   #legend span + span {
     padding-left: 1em;
@@ -83,14 +51,59 @@
     color: #FDC713;
     fill: #FDC713;
   }
-  .visuallyhidden {
-    position: absolute;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    width: 1px;
-    margin: -1px;
-    padding: 0;
-    border: 0;
-  }
-}
+  #map-frame{
+    width: 100%;
+    height: auto;
+    @media (min-width: 770px) {
+      max-width: 60%;
+      padding: 0 20%;
+    }
+    line {
+      stroke-dashoffset: 1000;
+    }
+    .coverage {
+      pointer-events: none;
+    }
+    .coverage > g > circle {
+      opacity: 0;
+    }
+    .coverage > g > line {
+      opacity: 0;
+    }
+    .coverage > g > text {
+      opacity: 0;
+      font-family: @font-map-labels;
+      font-weight: 700;
+      font-size: 22px;
+    }
+    .heading {
+      opacity: 0;
+    }
+    .label {
+      cursor: pointer;
+    }
+    .heading text,
+    .label text {
+      fill: #515350;
+      text-transform: uppercase;
+      font-family: @font-map-labels;
+      font-weight: 700;
+    }
+    .label text {
+      font-size: 24px;
+    }
+    .heading text {
+      font-size: 20px;
+    }
+    .visuallyhidden {
+      position: absolute;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      height: 1px;
+      width: 1px;
+      margin: -1px;
+      padding: 0;
+      border: 0;
+    }
+  }
+}
diff --git a/wp-content/themes/ipbs-largo/less/mixins.less b/wp-content/themes/ipbs-largo/less/mixins.less
@@ -15,23 +15,29 @@
   box-shadow: 0px 0px 16px @box-shadow-black;
 }
 .btn {
-    background: @red;
-    color: @white;
-    font-weight: 600;
-    border-radius: 20px!important;
-    padding: 10px 40px!important;
-    text-transform: uppercase;
-    text-decoration: none;
-    &:hover {
+    &:not(&.btn-navbar) {
+        background: @red;
+        color: @white;
+        font-weight: 600;
+        border-radius: 20px!important;
+        padding: 10px 50px!important;
+        text-transform: uppercase;
         text-decoration: none;
-    }
-    &:hover {
-        background: @darkred;
-    }
-    &.btn-blue {
-        background: @blue;
+        box-shadow: 0px 0px 24px @box-shadow-black;
+        font-size: 14px!important;
+        letter-spacing: 0.7px;
         &:hover {
-            background: @darkblue;
+            text-decoration: none;
+        }
+        &:hover {
+            background: @darkred;
+        }
+        &.btn-blue {
+            background: @blue;
+            color: @white!important;
+            &:hover {
+                background: @darkblue;
+            }
         }
     }
 }

diff --git a/wp-content/themes/ipbs-largo/less/navigation.less b/wp-content/themes/ipbs-largo/less/navigation.less
@@ -25,7 +25,7 @@
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
-                padding: @measure 0;
+                padding: 0.5rem 0;
                 .nav-right {
                     order: 2;
                     .toggle-nav-bar {

diff --git a/wp-content/themes/ipbs-largo/less/widgets.less b/wp-content/themes/ipbs-largo/less/widgets.less
@@ -4,6 +4,16 @@
     }
 }
 
+.widget {
+    margin-bottom: @measure * 2!important;
+}
+
+// member stations map widget
+.widget.ipbs-member-map-widget {
+    .description {
+        text-align: center;
+    }
+}
 // member stations widget
 .widget.ipbs-member-stations {
     margin-bottom: @measure * 2;
@@ -17,15 +27,15 @@
             align-items: center;
             justify-content: center;
             border-bottom: 1px solid @grey;
-            padding-top: @measure;
-            padding-bottom: @measure;
+            padding-top: 1rem;
+            padding-bottom: 1rem;
             margin-bottom: 0;
             &:not(:nth-child(3n)) {
                 border-right: 1px solid @grey;
             }
             img {
-                max-width: 150px;
-                max-height: 150px;
+                max-width: 100px;
+                max-height: 100px;
             }
             .member-stations-content {
                 margin-left: @measure;
@@ -65,6 +75,7 @@
     .video-widget {
         display: flex;
         align-items: center;
+        margin: @measure * 2 0;
         .video-widget-content-right {
             iframe {
                 width: 100%;

diff --git a/wp-content/themes/ipbs-largo/partials/member-map.php b/wp-content/themes/ipbs-largo/partials/member-map.php
@@ -32,4 +32,10 @@
 wp_enqueue_script( 'ipbs-map-animate' );
 wp_enqueue_style( 'ipbs-map-css' );
 
+echo '
+<div id="legend">
+	<span class="tv">TV <span class="visuallyhidden">stations are blue</span></span>
+	<span class="fm">FM <span class="visuallyhidden">stations are orange</span></span>
+	<span class="am">AM <span class="visuallyhidden">stations are yellow</span></span>
+</div>';
 echo file_get_contents( $path );