refactor modal so that if user has no pref, page is rendered with mod…

…al already on it (no fade in or flicker). see #175
tabulapdf · May 13, 2014 · cd39463 · cd39463
1 parent d89732b
commit cd39463
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/webapp/static/css/tabula_web.css b/webapp/static/css/tabula_web.css
@@ -75,7 +75,7 @@ img.page-image {
 
 #myModal {
     width: 80%;
-    margin: -170px 0 0 -40%;
+    margin: 150px 0 0 -40%;
     max-height: 500px;
 }
 
@@ -266,4 +266,4 @@ div.explanation-label {
   left: 0;
   background-color: #000;
   opacity: 0.8;
-}
+}
diff --git a/webapp/static/js/update-notifications.js b/webapp/static/js/update-notifications.js
@@ -1,8 +1,12 @@
 $(function() {
 
   function showNotificationModal(){
+    $('#myModal').show();
     $('#myModal').modal("show");
   }
+  function hideNotificationModal(){
+    $('#myModal').hide();
+  }
 
   $('#myModal').on('hidden.bs.modal', function (e) {
     if( $('input#update-notifications').is(':checked')){
@@ -15,10 +19,12 @@ $(function() {
 
   var notificationSetting = localStorage.getItem("tabula-notifications");
   if ( notificationSetting == "false" ){
+    hideNotificationModal();
     return;
   }else if (notificationSetting == null){
     showNotificationModal();
   }else{
+    hideNotificationModal();
     getNotifications();
   } // if it's neither "false" nor null, it's true (or something weird)
     // so we can continue.

diff --git a/webapp/views/index.html.erb b/webapp/views/index.html.erb
@@ -70,7 +70,7 @@
   </div>
 </div>
 
-<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+<div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     <h3 id="myModalLabel">Welcome to Tabula!</h3>