Fix top bar flickering problem.
authorRadek Czajka <radekczajka@nowoczesnapolska.org.pl>
Thu, 2 Oct 2014 11:24:30 +0000 (13:24 +0200)
committerRadek Czajka <radekczajka@nowoczesnapolska.org.pl>
Thu, 2 Oct 2014 11:24:30 +0000 (13:24 +0200)
apps/funding/static/funding/funding.js
apps/funding/templates/funding/includes/funding.html
apps/wolnelektury_core/static/scss/funding/funding.scss

index 5b3b3f0..765bddc 100644 (file)
@@ -6,22 +6,13 @@ $(function() {
         if(Modernizr.localstorage)
             localStorage['hide-offer-id'] = fundNode.attr('data-offer-id');\r
     });
         if(Modernizr.localstorage)
             localStorage['hide-offer-id'] = fundNode.attr('data-offer-id');\r
     });
-        
 
 
-    var fundingTopHeader = $('.funding-top-header');
-    var fundingHandle = $('.funding-handle');
-    if(fundingTopHeader) {
-        var currentOfferId = fundingTopHeader.attr('data-offer-id');
-        var toggle = true;
-        if(Modernizr.localstorage) {
-            toggle = localStorage['hide-offer-id'] !== currentOfferId;
-        }
-        fundingTopHeader.toggle(toggle);
-        fundingHandle.toggle(!toggle);
-    }
+    var fundingTopHeader = $('#funding-closeable');
+    var fundingHandle = $('#funding-handle');
     fundingHandle.click(function(e) {
         fundingTopHeader.slideDown();
         $(e.target).hide();
     fundingHandle.click(function(e) {
         fundingTopHeader.slideDown();
         $(e.target).hide();
-        localStorage.removeItem('hide-offer-id');
+        if(Modernizr.localstorage)
+            localStorage.removeItem('hide-offer-id');
     });\r
 });
\ No newline at end of file
     });\r
 });
\ No newline at end of file
index 66804a4..c8f62d2 100644 (file)
@@ -5,7 +5,7 @@
 
 {% if offer %}
 
 
 {% if offer %}
 
-<div class="funding {{ add_class }}" data-offer-id="{{offer.id}}" style="">
+<div {% if closeable %}id="funding-closeable" {% endif %}class="funding {{ add_class }}" data-offer-id="{{offer.id}}" style="">
     {% if closeable %}<a href="#" class="close">X</a>{% endif %}
     {% if link and is_current %}
         <div class="call-area">
     {% if closeable %}<a href="#" class="close">X</a>{% endif %}
     {% if link and is_current %}
         <div class="call-area">
     <div style="clear: both"></div>
 </div>
 {% if closeable %}
     <div style="clear: both"></div>
 </div>
 {% if closeable %}
-    <div class="funding-handle">{% trans "Help free the book!" %}</div>
+    <div id="funding-handle">{% trans "Help free the book!" %}</div>
+
+<script type="text/javascript">(function() {
+var storage = true;
+try {
+    localStorage.setItem('test', 'test');
+    localStorage.removeItem('test');
+} catch (exception) {
+    storage = false;
+}
+if (storage) {
+    var closeable = document.getElementById('funding-closeable');
+    if (localStorage['hide-offer-id'] !== closeable.getAttribute('data-offer-id')) {
+        closeable.style.display = 'block';
+        document.getElementById('funding-handle').style.display = 'none';
+    }
+}
+})();</script>
+
 {% endif %}
 
 {% endif %}
 
+
 {% endif %}
 
 {% endspaceless %}
 {% endif %}
 
 {% endspaceless %}
index 617cc47..3b63e20 100644 (file)
@@ -4,7 +4,12 @@
     @include size(padding, 5px 0);
     position: relative;
     .close {
     @include size(padding, 5px 0);
     position: relative;
     .close {
-        @include size(font-size, 10px);
+        @include mono;
+        @include size(font-size, 16px);
+        position: absolute;
+        top: 0px;
+        right: 0;
+        @include size(padding, 1px 5px 10px 10px);
     }
     .call-area {
         float:left;
     }
     .call-area {
         float:left;
         font-weight: bold;
         @include size(font-size, 15px);
     }
         font-weight: bold;
         @include size(font-size, 15px);
     }
-    .close {
-        position: absolute;
-        top: 0px;
-        @include size(right, 5px);
-    }
 }
 
 .funding-top-header {
 }
 
 .funding-top-header {
     }
 }
 
     }
 }
 
-.funding-handle {
+#funding-closeable {
+    display: none;
+}
+#funding-handle {
     position: absolute;
     top: 0;
     right: 0;
     position: absolute;
     top: 0;
     right: 0;