using bootstrap notify for notifications

public/javascripts/utils.js

@@ -1,23 +1,29 @@
 "use strict";
 
-function showMessage(str) {
-    console.log("message: ", str);
-
-    const top = $("#top-message");
-
-    top.fadeIn(1500).css("display","inline-block");
-    top.html(str);
-    top.fadeOut(1500);
+function showMessage(message) {
+    console.log("message: ", message);
+
+    $.notify({
+        // options
+        message: message
+    },{
+        // settings
+        type: 'success',
+        delay: 1500
+    });
 }
 
-function showError(str) {
-    console.log("error: ", str);
-
-    const error = $("#error-message");
-
-    error.show().css("display","inline-block");
-    error.html(str);
-    error.fadeOut(10000);
+function showError(message) {
+    console.log("error: ", message);
+
+    $.notify({
+        // options
+        message: message
+    },{
+        // settings
+        type: 'danger',
+        delay: 10000
+    });
 }
 
 function getDateFromTS(timestamp) {

public/stylesheets/style.css

@@ -32,16 +32,6 @@
     background-color: #eee;
 }
 
-#top-message {
-    display: none; /* initial state is hidden */
-    color: #333;
-}
-
-#error-message {
-    display: none; /* initial state is hidden */
-    color: red;
-}
-
 .note-editable p {
     padding: 0;
     margin: 0;
@@ -118,4 +108,9 @@ div.ui-tooltip {
     overflow: auto;
 }
 
+.alert {
+    padding: 5px;
+    width: auto;
+}
+
 #loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;background-color:#fff;opacity:1;transition:opacity 2s ease}#loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#3498db;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}#loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#e74c3c;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}#loader:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#f9c922;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}

views/index.ejs

@@ -23,9 +23,6 @@
         </div>
 
         <div>
-          <span id="top-message"></span>
-          <span id="error-message"></span>
-
           <button class="btn btn-xs" onclick="syncNow();">Sync now (<span id="changesToPushCount">0</span>)</button>
 
           <button class="btn btn-xs" onclick="settings.showDialog();">Settings</button>
@@ -277,6 +274,8 @@
     <link href="libraries/jqueryui/jquery-ui.min.css" rel="stylesheet">
     <script src="libraries/jqueryui/jquery-ui.min.js"></script>
 
+    <script src="libraries/bootstrap-notify.min.js"></script>
+
     <!-- Include Fancytree skin and library -->
     <link href="libraries/fancytree/skin-win8/ui.fancytree.css" rel="stylesheet">
     <script src="libraries/fancytree/jquery.fancytree-all.js"></script>