improve error message styling

fossar · Aug 11, 2013 · 1208c2b · 1208c2b
1 parent 2f6540d
commit 1208c2b
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 68 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -22,41 +22,22 @@ input {
     padding:6px;
 }
 
-/* error bar */
-
-#error-bar {
+#error {
+    display:none;
+    position:absolute;
+    width:100%;
+    background:#f2dede;
+    border:1px solid #eed3d7;
+    color:#b94a48;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+    filter: alpha(opacity=90);
+    -moz-opacity: 0.9;
+    -khtml-opacity: 0.9;
+    opacity: 0.9;
+    z-index:100;
     text-align:center;
-    background-color: #f9edbe;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    -khtml-border-radius: 4px;
-    border-color: #f0c36d;
-    border-radius: 4px;
-    width: 100%;
-    padding: 10px 0 10px 0;
-    display: none;
+    padding:10px;
 }
-    #error-bar-inner {
-        position:relative;
-        diplay: inline-block;
-    }
-
-    #error-close {
-        float:right;
-        margin-right:10px;
-        text-decoration:none;
-        font-size:0.8em;
-        color:#aaa;
-        cursor: pointer;
-    }
-
-.sticky {  
-    position: fixed;  
-    top: 0;  
-    z-index: 100;  
-    border-top: 0;  
-}
-
 
 
 /* navigation */

diff --git a/public/js/selfoss-base.js b/public/js/selfoss-base.js
@@ -179,7 +179,7 @@ var selfoss = {
                 else if (textStatus == "parsererror")
                     location.reload();
                 else if (errorThrown)
-                    selfoss.events.showErrorBar('Load list error: '+errorThrown);
+                    selfoss.showError('Load list error: '+errorThrown);
             }
         });
     },
@@ -202,7 +202,7 @@ var selfoss = {
                 selfoss.events.navigation();
             },
             error: function(jqXHR, textStatus, errorThrown) {
-                selfoss.events.showErrorBar('Load tags error: '+errorThrown);
+                selfoss.showError('Load tags error: '+errorThrown);
             },
             complete: function(jqXHR, textStatus) {
                 $('#nav-tags').removeClass('loading');
@@ -260,6 +260,28 @@ var selfoss = {
                 }
             });
         }
+    },
+
+
+    /**
+     * anonymize links
+     *
+     * @return void
+     * @param parent element
+     */
+    showError: function(message) {
+        if(typeof(message) == 'undefined') {
+            var message = "Oops! Something went wrong";
+        }
+        var error = $('#error');
+        error.html(message);
+        error.show();
+        window.setTimeout(function() {
+            error.click();
+        }, 10000);
+        error.unbind('click').click(function() {
+            error.fadeOut();
+        });
     }
 };
 

diff --git a/public/js/selfoss-events-entries.js b/public/js/selfoss-events-entries.js
@@ -127,7 +127,7 @@ selfoss.events.entries = function(e) {
             },
             error: function(jqXHR, textStatus, errorThrown) {
                 streamMore.removeClass('loading');
-                selfoss.events.showErrorBar('Load more error: '+errorThrown);
+                selfoss.showError('Load more error: '+errorThrown);
             }
         });
     });

diff --git a/public/js/selfoss-events-entriestoolbar.js b/public/js/selfoss-events-entriestoolbar.js
@@ -117,7 +117,7 @@ selfoss.events.entriesToolbar = function(parent) {
                     // rollback ui changes
                     setButton(!starr);
                     updateStats(!starr);
-                    selfoss.events.showErrorBar('Can not star/unstar item: '+errorThrown); 
+                    selfoss.showError('Can not star/unstar item: '+errorThrown); 
                 }
             });
 
@@ -208,7 +208,7 @@ selfoss.events.entriesToolbar = function(parent) {
                     // rollback ui changes
                     updateStats(!unread);
                     setButton(!unread);
-                    selfoss.events.showErrorBar('Can not mark/unmark item: '+errorThrown); 
+                    selfoss.showError('Can not mark/unmark item: '+errorThrown); 
                 }
             });
 

diff --git a/public/js/selfoss-events-navigation.js b/public/js/selfoss-events-navigation.js
@@ -24,7 +24,7 @@ selfoss.events.navigation = function() {
                     selfoss.reloadList();
                 },
                 error: function(jqXHR, textStatus, errorThrown) {
-                    selfoss.events.showErrorBar('Can not save new color: '+errorThrown);
+                    selfoss.showError('Can not save new color: '+errorThrown);
                 }
             });
 
@@ -169,7 +169,7 @@ selfoss.events.navigation = function() {
                 error: function(jqXHR, textStatus, errorThrown) {
                     content.html(articleList);
                     $('#content').removeClass('loading');
-                    selfoss.events.showErrorBar('Can not mark all visible item:'+errorThrown);
+                    selfoss.showError('Can not mark all visible item:'+errorThrown);
                 }
             });
         });

diff --git a/public/js/selfoss-events-sources.js b/public/js/selfoss-events-sources.js
@@ -27,7 +27,7 @@ selfoss.events.sources = function() {
             },
             error: function(jqXHR, textStatus, errorThrown) {
                 parent.find('.source-edit-delete').removeClass('loading');                     
-                selfoss.events.showErrorBar('Error adding source: '+errorThrown); 
+                selfoss.showError('Error adding source: '+errorThrown); 
             }
         });
     });
@@ -130,7 +130,7 @@ selfoss.events.sources = function() {
             },
             error: function(jqXHR, textStatus, errorThrown) {
                 parent.find('.source-edit-delete').removeClass('loading');
-                selfoss.events.showErrorBar('Error deleting source: '+errorThrown); 
+                selfoss.showError('Error deleting source: '+errorThrown); 
             }
         }); 
     });

diff --git a/public/js/selfoss-events.js b/public/js/selfoss-events.js
@@ -34,12 +34,6 @@ selfoss.events = {
         if(location.hash.trim().length!=0)
             location.hash = "";
 
-        // bind error bar close/dimiss link
-        $('#error-close').unbind('click').click(function() {
-            $('#error-bar-inner').html('');
-            $('#error-bar').hide();
-        });
-
     },
 
 
@@ -82,7 +76,7 @@ selfoss.events = {
                     if (textStatus == "abort")
                         return;
                     else if (errorThrown)
-                        selfoss.events.showErrorBar('Load list error: '+errorThrown); 
+                        selfoss.showError('Load list error: '+errorThrown); 
                 },
                 complete: function(jqXHR, textStatus) {
                     $('#content').removeClass('loading');
@@ -109,15 +103,5 @@ selfoss.events = {
             $('#nav-tags-wrapper').height("auto");
             $("#nav-tags-wrapper").mCustomScrollbar("disable",selfoss.isSmartphone());
         }
-    },
-
-
-    // Show error bar
-    showErrorBar: function(message) {
-        if(typeof(message) == 'undefined') {
-            var message = "Oops! Something went wrong";
-        }
-        $('#error-bar-inner').html(message);
-        $('#error-bar').show();
     }
 };
diff --git a/templates/home.phtml b/templates/home.phtml
@@ -34,15 +34,8 @@
     <?PHP echo $this->loggedin===true ? "loggedin" : "notloggedin"; ?> 
     <?PHP echo \F3::get('auto_mark_as_read')==1 ? "auto_mark_as_read" : ""; ?>
 ">
-
-    <!-- error bar -->
-    <div id="error-bar" class="sticky">
-      <span id="error-bar-inner">
-      </span>
-      <span id="error-close">
-        dismiss
-      </span>
-    </div>
+
+    <div id="error">error message</div>
 
     <!-- language settings for jQuery -->
     <span id="lang"