From 739e33507cdc42a0e70e518ad29d6787b79fc96f Mon Sep 17 00:00:00 2001
From: ZachTRice <zachtrice@gmail.com>
Date: Wed, 17 Jan 2018 12:04:07 -0500
Subject: [PATCH] Fix style regressions - Add "Segoe UI" default font back to
 "Add Layers" button - Change tour step 1 to be a wide window - Add `bordered`
 styles to tour windows which were removed from our version of joyride; this
 requires using an after element on the `nub` element whereas before there was
 a second element. - Fix margins in tour windows - Remove `minimal-ui`
 viewport attribute Connects to #671, Connects to #670

---
 web/css/jquery-ui-override.css |  2 ++
 web/css/sidebar.css            |  2 --
 web/css/tour.css               | 58 ++++++++++++++++++++++++++++++++--
 web/index.html                 |  2 +-
 web/pages/tour.html            |  8 ++---
 5 files changed, 62 insertions(+), 10 deletions(-)

diff --git a/web/css/jquery-ui-override.css b/web/css/jquery-ui-override.css
index f874c0ce1f..2a0925bceb 100644
--- a/web/css/jquery-ui-override.css
+++ b/web/css/jquery-ui-override.css
@@ -1,6 +1,7 @@
 /*
  * Default jquery-ui button
  */
+
 a.ui-button.ui-state-default {
   color: #eee;
   font-weight: 700;
@@ -11,6 +12,7 @@ a.ui-button.ui-state-default {
   background-image: -o-linear-gradient(#555, #666);
   font-family: "Segoe UI", "Arial", sans-serif;
 }
+
 a.ui-button.ui-state-default.ui-state-hover {
   border-color: #eee;
   background-color: #eee;
diff --git a/web/css/sidebar.css b/web/css/sidebar.css
index 0d1caec3a7..4e67b79a69 100644
--- a/web/css/sidebar.css
+++ b/web/css/sidebar.css
@@ -42,8 +42,6 @@
 }
 
 #productsHolder footer .action {
-  font-family: 'Open Sans', sans-serif;
-  font-weight: 700;
   display: inline-block;
   border-color: transparent;
   color: #fff;
diff --git a/web/css/tour.css b/web/css/tour.css
index 6e9b7f070f..37e14dd595 100644
--- a/web/css/tour.css
+++ b/web/css/tour.css
@@ -14,10 +14,17 @@
   background-color: rgb(175, 181, 196);
 }
 
+.joyride-tip-guide p,
+.joyride-tip-guide ul {
+  margin: 0 0 14px;
+}
+
+.joyride-tip-guide.bordered,
 .joyride-bordered {
   border: #808080 solid 1px;
 }
 
+.joyride-tip-guide.wide,
 .joyride-wide {
   width: 450px;
 }
@@ -155,7 +162,6 @@ button.skipTour:hover {
 .tour ul {
   color: rgb(38, 43, 49);
   font: 400 13px/16px 'Open Sans', sans-serif;
-  margin: 0 0 14px;
 }
 
 .joyride-content-wrapper {
@@ -323,6 +329,7 @@ button.done:hover {
 
 .joyride-tip-guide .joyride-next-tip {
   float: right;
+  margin-right: 0;
 }
 
 .joyride-tip-guide .joyride-next-tip:hover,
@@ -431,6 +438,15 @@ p.wv-tour-page-count {
   pointer-events: none;
 }
 
+.joyride-tip-guide.bordered span.joyride-nub::after {
+  content: " ";
+  display: block;
+  position: absolute;
+  width: 0;
+  height: 0;
+  z-index: -1;
+}
+
 .joyride-tip-guide span.joyride-nub.top {
   border-color: #afb5c4 !important;
   border-top-color: transparent !important;
@@ -438,6 +454,19 @@ p.wv-tour-page-count {
   border-right-color: transparent !important;
 }
 
+.joyride-tip-guide.toolbarTip span.joyride-nub.top {
+  left: 250px;
+}
+
+.joyride-tip-guide.bordered span.joyride-nub.top::after {
+  top: -16px;
+  left: -15px;
+  border: 15px solid #808080;
+  border-top-color: transparent;
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+
 .joyride-tip-guide span.joyride-nub.right {
   border-color: #afb5c4 !important;
   border-top-color: transparent !important;
@@ -445,6 +474,15 @@ p.wv-tour-page-count {
   border-bottom-color: transparent !important;
 }
 
+.joyride-tip-guide.bordered span.joyride-nub.right::after {
+  top: -15px;
+  left: -14px;
+  border: 15px solid #808080;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+}
+
 .joyride-tip-guide span.joyride-nub.bottom {
   border-color: #afb5c4 !important;
   border-bottom-color: transparent !important;
@@ -452,6 +490,15 @@ p.wv-tour-page-count {
   border-right-color: transparent !important;
 }
 
+.joyride-tip-guide.bordered span.joyride-nub.bottom::after {
+  top: -14px;
+  left: -15px;
+  border: 15px solid #808080;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+
 .joyride-tip-guide span.joyride-nub.left {
   border-color: #afb5c4 !important;
   border-top-color: transparent !important;
@@ -459,6 +506,11 @@ p.wv-tour-page-count {
   border-bottom-color: transparent !important;
 }
 
-.joyride-tip-guide.toolbarTip span.joyride-nub.top {
-  left: 250px;
+.joyride-tip-guide.bordered span.joyride-nub.left::after {
+  top: -15px;
+  left: -16px;
+  border: 15px solid #808080;
+  border-top-color: transparent;
+  border-left-color: transparent;
+  border-bottom-color: transparent;
 }
diff --git a/web/index.html b/web/index.html
index 7387662fca..0e8983128f 100644
--- a/web/index.html
+++ b/web/index.html
@@ -26,7 +26,7 @@
 
     <!-- meta defines -->
     <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="keywords" content="nasa, worldview, nasa worldview, eosdis worldview, satellite imagery, remote sensing, natural hazards, natural disasters, near real-time, nrt, lance, wildfire management, air quality, weather forecasting, agriculture, dust storms, smoke plumes, vegetation, severe storms, shipping, fisheries, floods, drought, oil spills">
     <meta name="description" content="Interactive interface for browsing full-resolution, global, near real-time satellite imagery.  Supports time-critical application areas such as wildfire management, air quality measurements, and weather forecasting.  Data is generally available within three hours of observation.">
diff --git a/web/pages/tour.html b/web/pages/tour.html
index adc3e9c005..5a816ab359 100644
--- a/web/pages/tour.html
+++ b/web/pages/tour.html
@@ -111,7 +111,7 @@ <h3>Timeline</h3>
           </td>
         </tr>
       </table>
-      <br/>
+      <br>
       <p>
         <span class="tryIt">Try It!</span></p>
       <ul>
@@ -145,7 +145,7 @@ <h3>Timeline - Continued</h3>
           </td>
         </tr>
       </table>
-      <br/>
+      <br>
       <p>
         <span class="tryIt">Try It!</span></p>
       <ul>
@@ -315,12 +315,12 @@ <h3>Toolbar</h3>
       You have now completed a tour of @NAME@! If you followed the “Try It” steps, you’re now looking at fires in northern California as they were observed by satellites on August 23, 2012. You can use the tools in any order. We hope you continue
       exploring!
     </p>
-    <br/>
+    <br>
     <p class="splashwelcome">
       <a class="feedback">Contact us</a>
       if you have any questions about @NAME@.
     </p>
-    <br/>
+    <br>
     <table class="tour">
       <tr>
         <td rowspan="2" colspan="2">