Fix top bar flickering problem.

diff --git a/apps/funding/static/funding/funding.js b/apps/funding/static/funding/funding.js
index 5b3b3f0..765bddc 100644 (file)
--- a/apps/funding/static/funding/funding.js
+++ b/apps/funding/static/funding/funding.js
@@ -6,22 +6,13 @@ $(function() {
         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();
-        localStorage.removeItem('hide-offer-id');
+        if(Modernizr.localstorage)
+            localStorage.removeItem('hide-offer-id');
     });\r
 });
\ No newline at end of file

diff --git a/apps/funding/templates/funding/includes/funding.html b/apps/funding/templates/funding/includes/funding.html
index 66804a4..c8f62d2 100644 (file)
--- a/apps/funding/templates/funding/includes/funding.html
+++ b/apps/funding/templates/funding/includes/funding.html
@@ -5,7 +5,7 @@
 
 {% 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">
@@ -45,9 +45,28 @@
     <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 %}
 
 {% endspaceless %}

diff --git a/apps/wolnelektury_core/static/scss/funding/funding.scss b/apps/wolnelektury_core/static/scss/funding/funding.scss
index 617cc47..3b63e20 100644 (file)
--- a/apps/wolnelektury_core/static/scss/funding/funding.scss
+++ b/apps/wolnelektury_core/static/scss/funding/funding.scss
@@ -4,7 +4,12 @@
     @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;
@@ -119,11 +124,6 @@
         font-weight: bold;
         @include size(font-size, 15px);
     }
-    .close {
-        position: absolute;
-        top: 0px;
-        @include size(right, 5px);
-    }
 }
 
 .funding-top-header {
@@ -195,7 +195,10 @@
     }
 }
 
-.funding-handle {
+#funding-closeable {
+    display: none;
+}
+#funding-handle {
     position: absolute;
     top: 0;
     right: 0;