Commits

Wilson Xu committed 165c55c

Used bootstrap alert message.

Comments (0)

Files changed (4)

fbone/static/css/style.css

-.card_container { overflow: auto; list-style: none; list-style-image: none; padding: 0; margin: 0; }
-.card_container li { float: left; padding: 0 5px; }
-.lh48 { line-height: 48px; }
-.lh32 { line-height: 32px; }
-
-.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 { text-align: center; width: 100%; position: fixed; margin: 0; padding: 5px 10px; font-weight: bold; font-size: 1.2em; overflow: visible; z-index: 10001; }
-.flash_message { background-color: yellow; padding: 5px 10px; }
-
+/* Login form. */
 .remember_me { margin-left: 5px; }
 
 /* The white background content wrapper */

fbone/static/js/libs/bootstrap-alerts.js

+/* ==========================================================
+ * bootstrap-alerts.js v1.3.0
+ * http://twitter.github.com/bootstrap/javascript.html#alerts
+ * ==========================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+
+!function( $ ){
+
+  /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
+   * ======================================================= */
+
+   var transitionEnd
+
+   $(document).ready(function () {
+
+     $.support.transition = (function () {
+       var thisBody = document.body || document.documentElement
+         , thisStyle = thisBody.style
+         , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
+       return support
+     })()
+
+     // set CSS transition event type
+     if ( $.support.transition ) {
+       transitionEnd = "TransitionEnd"
+       if ( $.browser.webkit ) {
+        transitionEnd = "webkitTransitionEnd"
+       } else if ( $.browser.mozilla ) {
+        transitionEnd = "transitionend"
+       } else if ( $.browser.opera ) {
+        transitionEnd = "oTransitionEnd"
+       }
+     }
+
+   })
+
+ /* ALERT CLASS DEFINITION
+  * ====================== */
+
+  var Alert = function ( content, options ) {
+    this.settings = $.extend({}, $.fn.alert.defaults, options)
+    this.$element = $(content)
+      .delegate(this.settings.selector, 'click', this.close)
+  }
+
+  Alert.prototype = {
+
+    close: function (e) {
+      var $element = $(this).parent('.alert-message')
+
+      e && e.preventDefault()
+      $element.removeClass('in')
+
+      function removeElement () {
+        $element.remove()
+      }
+
+      $.support.transition && $element.hasClass('fade') ?
+        $element.bind(transitionEnd, removeElement) :
+        removeElement()
+    }
+
+  }
+
+
+ /* ALERT PLUGIN DEFINITION
+  * ======================= */
+
+  $.fn.alert = function ( options ) {
+
+    if ( options === true ) {
+      return this.data('alert')
+    }
+
+    return this.each(function () {
+      var $this = $(this)
+
+      if ( typeof options == 'string' ) {
+        return $this.data('alert')[options]()
+      }
+
+      $(this).data('alert', new Alert( this, options ))
+
+    })
+  }
+
+  $.fn.alert.defaults = {
+    selector: '.close'
+  }
+
+  $(document).ready(function () {
+    new Alert($('body'), {
+      selector: '.alert-message[data-alert] .close'
+    })
+  })
+
+}( window.jQuery || window.ender );

fbone/templates/layout.html

     {% endblock %}
 </head>
 <body style='padding-top: 40px; background-color: #EEE;'>
-    {% block flash_message %}
-        {% 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 %}
 
     <div class="topbar-wrapper" style="z-index: 5;">
         <header class="topbar" data-dropdown="dropdown" role='banner'>
     <div class="container">
         <div class="content">
             <div class="page-header">
+                {% block flash_message %}
+                    {% with messages = get_flashed_messages(with_categories=True) %}
+                        {% if messages %}
+                        <div id='flash_message_container'>
+                            {% for category, msg in messages %}
+                                <div class="alert-message {{ category }}" data-alert>
+                                  <a class="close" href="#">×</a>
+                                  <p>{{ msg }}</p>
+                                </div>
+                            {% endfor %}
+                        </div>
+                        {% endif %}
+                    {% endwith %}
+                {% endblock %}
                 <h1>{{ page_title }}</h1>
             </div>
 
     {% block js_script %}
     <script src="{{ url_for('static', filename='js/script.js') }}"></script>
     <script src="{{ url_for('static', filename='js/libs/bootstrap-dropdown.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/libs/bootstrap-alerts.js') }}"></script>
     {% endblock %}
 </body>
 </html>

fbone/views/frontend.py

         if user and authenticated:
             remember = request.form.get('remember') == 'y'
             if login_user(user, remember=remember):
-                flash("Logged in!")
+                flash("Logged in!", 'success')
             return redirect(form.next.data or url_for('user.home'))
         else:
             flash(_('Sorry, invalid login'), 'error')
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.