Merge branch 'release/3.1.41'

azavea · Dec 21, 2023 · 8d4ca82 · 8d4ca82
2 parents 00f3383 + b719efa
commit 8d4ca82
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 38 deletions.
diff --git a/python/cac_tripplanner/templates/base.html b/python/cac_tripplanner/templates/base.html
@@ -71,9 +71,12 @@
 
   <body>
     {% block body %}
-    <div id="body-div" class="body-{{ tab|default:'home' }}
-        {% if 'map' in tab %}body-map{% endif %}">
-        {% block content %}<h1>I'm abstract - you should never see me!</h1>{% endblock %}
+    <div class="body-wrapper">
+      {% include "partials/alert-banner.html" %}
+      <div id="body-div" class="body-{{ tab|default:'home' }}
+          {% if 'map' in tab %}body-map{% endif %}">
+          {% block content %}<h1>I'm abstract - you should never see me!</h1>{% endblock %}
+      </div>
     </div>
     {% endblock body %}
 
@@ -167,6 +170,19 @@
 
     <script type="text/javascript">
         jQuery.noConflict(); // because JotForms.
+        // Hide top alert banner across pages on close
+        jQuery(document).ready(function ($) {
+            const hideBanner = localStorage.getItem('hide-top-alert-banner') || false;
+            if(!hideBanner){
+                jQuery('.nav-banner').removeClass('hidden');
+            };
+
+            jQuery('.nav-banner').on('click', function(e) {
+                e.stopPropagation();
+                localStorage.setItem('hide-top-alert-banner', true);
+                jQuery('.nav-banner').addClass('hidden');
+            });
+        });
     </script>
 
     {% block jspage %}

diff --git a/python/cac_tripplanner/templates/partials/alert-banner.html b/python/cac_tripplanner/templates/partials/alert-banner.html
@@ -0,0 +1,6 @@
+<div class="nav-banner alert-warning hidden">
+    <div class="alert-body">Message for all of our Android app users: after January 1, 2024, we will no longer be supporting the app, but the GoPhillyGo mobile website will continue to be available across all devices.</div>
+    <button title="Dismiss this message" name="close"
+        class="btn-dismiss-nav-banner"><i class="icon-cancel"></i>
+    </button>
+</div>
diff --git a/python/cac_tripplanner/templates/partials/header.html b/python/cac_tripplanner/templates/partials/header.html
@@ -13,17 +13,5 @@
         <a id="explore-header-link" class="nav-item {% if tab == 'explore'%} on {% endif %}"
             data-tab-id="EXPLORE" href="/explore">Explore</a>
         <a class="nav-item {% if tab == 'info'%} on {% endif %}" href="{% url 'learn-list' %}">Learn</a>
-        <a
-            class="android-link"
-            href="https://play.google.com/store/apps/details?id=org.gophillygo.app"
-            target="_blank"
-            rel="noopener noreferrer"
-        >
-            <img
-                class="image"
-                alt="Get it on Google Play"
-                src="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png"
-            />
-        </a>
     </nav>
 </header>
diff --git a/src/app/styles/components/_app-header.scss b/src/app/styles/components/_app-header.scss
@@ -161,25 +161,6 @@
         }
     }
 
-    .android-link {
-        @include delinkify();
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        height: 60px;  // dimensions hard-coded bc otherwise some browsers
-        width: 155px;  // don't position it properly ¯\_(ツ)_/¯
-
-        @include respond-to('xxs') {
-            display: none;
-        }
-
-        .image {
-            height: 100%;
-            width: auto;
-        }
-    }
-
     .slogan-start {
         text-align: right;
     }

diff --git a/src/app/styles/components/_nav-alert-banner.scss b/src/app/styles/components/_nav-alert-banner.scss
@@ -0,0 +1,39 @@
+
+.nav-banner {
+    position: relative;
+    display: flex;
+    flex: 0 0 $nav-alert-banner-height;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 1.3rem;
+    padding: 1rem 1rem 1.2rem;
+    text-align: center;
+
+    @include respond-to('xs') {
+        text-align: left;
+        align-items: flex-start;
+    }
+
+    &.hidden {
+        visibility: hidden;
+        flex: 0 0 0;
+        padding: 0px;
+        height: 0px;
+    }
+
+    .alert-body {
+        display: flex;
+        align-items: center;
+    }
+
+    button {
+        flex: 0 0 20px;
+        padding: 0;
+        border: 0;
+        border-radius: 0;
+        background: none;
+        text-align: center;
+        cursor: pointer;
+    }
+}
diff --git a/src/app/styles/layouts/_info.scss b/src/app/styles/layouts/_info.scss
@@ -1,6 +1,5 @@
 .body-info, .body-explore, .body-about {
     display: block;
-    position: absolute;
     top: 0;
     right: 0;
     bottom: 0;

diff --git a/src/app/styles/main.scss b/src/app/styles/main.scss
@@ -39,7 +39,8 @@
 'components/sidebar-banner',
 'components/modal',
 'components/spinner',
-'components/privacy-tos';
+'components/privacy-tos',
+'components/nav-alert-banner';
 
 
 // Layouts

diff --git a/src/app/styles/pages/_PROTOTYPE.scss b/src/app/styles/pages/_PROTOTYPE.scss
@@ -27,3 +27,19 @@
         display: none;
     }
 }
+
+.body-wrapper {
+    display: flex;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    flex-flow: column nowrap;
+    align-items: stretch;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
diff --git a/src/app/styles/pages/_home.scss b/src/app/styles/pages/_home.scss
@@ -1,6 +1,5 @@
 .body-home {
     display: flex;
-    position: absolute;
     top: 0;
     right: 0;
     bottom: 0;

diff --git a/src/app/styles/pages/_map.scss b/src/app/styles/pages/_map.scss
@@ -1,6 +1,5 @@
 .body-map {
     display: flex;
-    position: absolute;
     top: 0;
     right: 0;
     bottom: 0;

diff --git a/src/app/styles/utils/_variables.scss b/src/app/styles/utils/_variables.scss
@@ -16,6 +16,8 @@ $footer-sidebar-height: 60px;
 $directions-form-home-height: 180px;
 $directions-form-sidebar-height: 140px;
 
+$nav-alert-banner-height: 30px;
+
 $sidebar-banner-height: 50px;
 
 $route-summary-default-dasharray: 7, 7;