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 ccf4e561c98ceacd14d0e612f77e408fc6bac734..e8e566f53a2ca698ae09000cb73d54118282fd8d 100644 (file)
--- 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 cf1019308dba819aba7953a6f95d84113be5fa1c..0ba5e65776d915f24ff754e5465fe416369350a3 100644 (file)
--- 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 984364736b35290d8cb38a272f1016711d6bdf22..12e21c7d8b8e9f52b007d4b0655820604d94f426 100644 (file)
--- 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 {