From: Tom Hughes <tom@compton.nu>
Date: Mon, 10 Sep 2018 20:21:43 +0000 (+0100)
Subject: Avoid flickering welcome banner
X-Git-Tag: live~2858
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/1a66467ef610901163e3dd15167a66df7af1b4d2

Avoid flickering welcome banner

Make the welcome banner default to being hidden and then show
it (by adding a class) if there is no cookie.

Fixes #1951
---

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index ccf4e561c..e8e566f53 100644
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -187,12 +187,12 @@ $(document).ready(function () {
     $.cookie('_osm_location', OSM.locationCookie(map), { expires: expiry, path: '/' });
   });
 
-  if ($.cookie('_osm_welcome') === 'hide') {
-    $('.welcome').hide();
+  if ($.cookie('_osm_welcome') !== 'hide') {
+    $('.welcome').addClass('visible');
   }
 
   $('.welcome .close-wrap').on('click', function() {
-    $('.welcome').hide();
+    $('.welcome').removeClass('visible');
     $.cookie('_osm_welcome', 'hide', { expires: expiry, path: '/' });
   });
 
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index cf1019308..0ba5e6577 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -611,11 +611,18 @@ body.compact {
     height: auto;
     overflow: hidden;
 
-    #banner,
-    .welcome {
+    #banner {
       display: block;
     }
 
+    .welcome {
+      display: none;
+
+      &.visible {
+        display: block;
+      }
+    }
+
     #sidebar_content {
       display: none;
     }
diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss
index 984364736..12e21c7d8 100644
--- a/app/assets/stylesheets/small.scss
+++ b/app/assets/stylesheets/small.scss
@@ -126,9 +126,12 @@ body.small {
     }
   }
 
-  #sidebar .welcome,
-  #sidebar #banner {
-    display: none !important;
+  .overlay-sidebar #sidebar .welcome.visible {
+    display: none;
+  }
+
+  .overlay-sidebar #sidebar #banner {
+    display: none;
   }
 
   .leaflet-top.leaflet-right {