Commits

Wilson Xu committed 2fd6303

Added flash message auto hidden.

Comments (0)

Files changed (3)

fbone/static/css/style.css

 .lh48 { line-height: 48px; }
 .lh32 { line-height: 32px; }
 
-#flash_message_container { position: fixed; top: 0; left: 0; width: 100%; overflow: visible; z-index: 10000;  display:none;  }
-#flash_message_container .flash_message_container_bkg { background-color: #EEFDEA; opacity: .95; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=95)"; filter: alpha(opacity=95); position: static;  }
-#flash_message_container .flash_messages {font-size:150%;}
-.error { color: red; }
-.success { color: #3CC721; }
-
 .pagination_list a, .pagination_list span { background-color: #ECEFF5; padding: 2px 6px; text-decoration: none; }
 .pagination_list a:hover { background-color: #6D84B4; color: white; text-decoration: none; }
 .pagination_list span { background-color: #6D84B4; color: white; }
 
+.error { color: red; }
+/*.success { color: #3CC721; }*/
+
+#flash_message_container {
+    z-index: 9999;
+    text-align: center;
+    width: 100%;
+    position: fixed;
+    margin: 0;
+    padding: 5px 10px;
+    font-weight: bold;
+    font-size: 1.2em;
+    overflow: visible;
+}
+
+.flash_message {
+    background-color: yellow;
+    padding: 5px 10px;
+}
+
 /* ==|== media queries ======================================================
    PLACEHOLDER Media Queries for Responsive Design.
    These override the primary ('mobile first') styles

fbone/static/js/script.js

 /* Author: Wilson Xu */
 
 function hide_flask_message_container() {
-    $('#flash_message_container').slideUp()
+    $('#flash_message_container').slideUp('fast');
 }
 
 $(document).ready(function() {
-    if (! Modernizr.input.autofocus) {
-        $("form input[autofocus]").last().focus()
-    }
-
-    flash_message_container = $('#flash_message_container')
-    if (flash_message_container) {
-        flash_message_container.slideDown(function() {
-            setTimeout(hide_flask_message_container, 3000)
-        })
-    }
+    $('#flash_message_container').slideDown(function() {
+        setTimeout(hide_flask_message_container, 3000);
+    });
 })
-
-
-

fbone/templates/layout.html

 <body>
     <div id="container">
         {% block flash_message %}
-        <div id='flash_message_container'>
-            <div class='flash_message_container_bkg'>
-                {% with messages = get_flashed_messages(with_categories=True) %}
-                    {% if messages %}
-                    <ul class='nostyle_list flash_messages'>
-                        {% for category, msg in messages %}
-                        <li class="{{ category }}">{{ msg }}</li>
-                        {% endfor %}
-                    </ul>
-                    {% endif %}
-                {% endwith %}
-            </div>
-        </div>
+            {% with messages = get_flashed_messages(with_categories=True) %}
+                {% if messages %}
+                <div id='flash_message_container'>
+                    {% for category, msg in messages %}
+                    <span class="flash_message {{ category }}">{{ msg }}</span>
+                    {% endfor %}
+                </div>
+                {% endif %}
+            {% endwith %}
         {% endblock %}
 
         <header role='banner'>