Commits

Wilson Xu  committed 9ebae24

Added bootstrap grid layout.

  • Participants
  • Parent commits 8b4f71f

Comments (0)

Files changed (12)

File fbone/static/css/bootstrap.min.css

 input.span15,textarea.span15{display:inline-block;float:none;width:870px;margin-left:0;}
 input.span16,textarea.span16{display:inline-block;float:none;width:930px;margin-left:0;}
 input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
-.actions{background:#f5f5f5;margin-top:18px;margin-bottom:18px;padding:17px 20px 18px 150px;border-top:1px solid #ddd;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.actions .secondary-action{float:right;}.actions .secondary-action a{line-height:30px;}.actions .secondary-action a:hover{text-decoration:underline;}
+.actions{margin-top:18px;margin-bottom:18px;padding:17px 20px 18px 150px;}.actions .secondary-action{float:right;}.actions .secondary-action a{line-height:30px;}.actions .secondary-action a:hover{text-decoration:underline;}
 .help-inline,.help-block{font-size:13px;line-height:18px;color:#bfbfbf;}
 .help-inline{padding-left:5px;*position:relative;*top:-5px;}
 .help-block{display:block;max-width:600px;}

File fbone/static/css/style.css

 .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; }
+#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; }
 
 .remember_me { margin-left: 5px; }
+
+/* The white background content wrapper */
+.content {
+    background-color: #fff;
+    padding: 20px;
+    margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
+    -webkit-border-radius: 0 0 6px 6px;
+    -moz-border-radius: 0 0 6px 6px;
+    border-radius: 0 0 6px 6px;
+    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
+    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
+    box-shadow: 0 1px 2px rgba(0,0,0,.15);
+}
+
+/* Page header tweaks */
+.page-header {
+    background-color: #f5f5f5;
+    padding: 20px 20px 10px;
+    margin: -20px -20px 20px;
+}

File fbone/static/js/libs/bootstrap-dropdown.js

+/* ============================================================
+ * bootstrap-dropdown.js v1.3.0
+ * http://twitter.github.com/bootstrap/javascript.html#dropdown
+ * ============================================================
+ * 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( $ ){
+
+  /* DROPDOWN PLUGIN DEFINITION
+   * ========================== */
+
+  $.fn.dropdown = function ( selector ) {
+    return this.each(function () {
+      $(this).delegate(selector || d, 'click', function (e) {
+        var li = $(this).parent('li')
+          , isActive = li.hasClass('open')
+
+        clearMenus()
+        !isActive && li.toggleClass('open')
+        return false
+      })
+    })
+  }
+
+  /* APPLY TO STANDARD DROPDOWN ELEMENTS
+   * =================================== */
+
+  var d = 'a.menu, .dropdown-toggle'
+
+  function clearMenus() {
+    $(d).parent('li').removeClass('open')
+  }
+
+  $(function () {
+    $('html').bind("click", clearMenus)
+    $('body').dropdown( '[data-dropdown] a.menu, [data-dropdown] .dropdown-toggle' )
+  })
+
+}( window.jQuery || window.ender );

File fbone/templates/change_password.html

         {{ form.hidden_tag() }}
         {{ form.next }}
         <fieldset>
-            <legend><b>{{ page_title }}</b>
-            </legend>
+            <legend>Please input new password twice.</legend>
             {{ render_input(form.password) }}
             {{ render_input(form.password_again) }}
             {{ render_action(form.submit) }}

File fbone/templates/home.html

 {% extends "layout.html" %}
 
 {% block body %}
-<ul>
-    <li>{{ g.user.name }}</li>
-    <li>{{ g.user.email }}</li>
-</ul>
-<a href='{{ url_for('frontend.change_password') }}'>{{ _('Change password') }}</a>
+<p>home</p>
 {% endblock %}
 

File fbone/templates/index.html

-{% from 'macros/_misc.html' import render_pagination, render_users %}
-
-{% set page_title = _('All Users') %}
-
-{% extends 'layout.html' %}
-
-{% block learn_more %}{% endblock %}
-
-{% block body %}
-{{ render_users(pagination.items) }}
-{{ render_pagination(pagination=pagination, endpoint='frontend.index') }}
-{% endblock %}
+{% from 'macros/_misc.html' import render_pagination, render_users %}
+
+{% set page_title = _('All Users') %}
+
+{% extends 'layout.html' %}
+
+{% block body %}
+<p>index</p>
+{{ render_pagination(pagination=pagination, endpoint='frontend.index') }}
+{% endblock %}

File fbone/templates/layout.html

     <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
     {% endblock %}
 </head>
-<body>
+<body style='padding-top: 40px; background-color: #EEE;'>
     {% block flash_message %}
         {% with messages = get_flashed_messages(with_categories=True) %}
             {% if messages %}
         {% endwith %}
     {% endblock %}
 
+    <div class="topbar-wrapper" style="z-index: 5;">
+        <header class="topbar" data-dropdown="dropdown" role='banner'>
+            <div class="topbar-inner">
+                <div class="container">
+                    <h3><a class='brand' href='{{ url_for('frontend.index') }}'>Fbone</a></h3>
+                    <form class="pull-left" action="{{ url_for('frontend.search') }}">
+                        <input type='text' name='keywords' value='{{ keywords|default('') }}' placeholder='{{ _('Search...') }}' />
+                    </form>
+                    {% if current_user.is_authenticated() %}
+                    <ul class="nav secondary-nav">
+                        <li class="dropdown">
+                        <a href="#" class="dropdown-toggle">{{ current_user.name }}</a>
+                        <ul class="dropdown-menu">
+                            <li><a href="{{ url_for('frontend.change_password') }}">Change Password</a></li>
+                            <li class="divider"></li>
+                            <li><a href="{{ url_for('frontend.logout') }}">Logout</a></li>
+                        </ul>
+                        </li>
+                    </ul>
+                    {% elif request.url.split('/')|last != 'login' %}
+                    <form class='pull-right' method='POST' action='{{ url_for('frontend.login') }}'>
+                        {{ login_form.hidden_tag() }}
+                        {{ login_form.next }}
+                        {{ login_form.login(class_='input-small', placeholder='Username') }}
+                        {{ login_form.password(class_='input-small', placeholder='Password') }}
+                        <button class='btn' type='submit'>Log in</button>
+                    </form>
+                    {% endif %}
+                </div>
+            </div><!-- /topbar-inner -->
+        </header><!-- /topbar -->
+    </div>
+
     <div class="container">
-        <header role='banner'>
-            <h1><a href="{{ url_for('frontend.index') }}">Fbone</a><small> A Flask skeleton project.</small></h1>
-            {% block main_nav %}
-            <nav role='navigation'>
-                <ul id='main_nav' class='card_container lh48'>
-                    {% if g.user %}
-                        <li><a href="{{ url_for('user.home') }}">{{ g.user.name }}</a></li>
-                        <li><a href="{{ url_for('frontend.logout') }}">{{ _('Log out') }}</a></li>
-                    {% else %}
-                        <li><a href="{{ url_for('frontend.signup', next=request.url if g.keep_login_url else None) }}">{{ _('Sign up') }}</a></li>
-                        <li><a href="{{ url_for('frontend.login', next=request.url if g.keep_login_url else None) }}">{{ _('Log in') }}</a></li>
-                    {% endif %}
-                </ul>
-            </nav>
-            {% endblock %}
-            {% block search %}
-            <form id='search' action="{{ url_for('frontend.search') }}" method='GET'>
-                <input type='text' name='keywords' value="{{ keywords|default('') }}" placeholder="{{ _('Search...') }}" />
-                <input class='btn' type='submit' value="{{ _('Search') }}" />
-            </form>
-            {% endblock %}
-        </header>
+        <div class="content">
+            <div class="page-header">
+                <h1>{{ page_title }}</h1>
+            </div>
 
-        {% block learn_more %}
-            {% if not g.user %}
-            <p class='learn_more'>{{ _('Fbone is a Flask skeleton project.') }} <a href='{{ url_for('frontend.about') }}'>{{ _('Learn more') }} &rarr;</a></p>
-            {% endif %}
-        {% endblock %}
-
-        <div id="main" role="main">
-            {% block body %}
-            {% endblock %}
+            <div id="main" role="main">
+                {% block body %}
+                {% endblock %}
+            </div>
         </div>
 
         <footer>
-        {% block footer %}
-        © 2011 Fbone -
-        <a href='{{ url_for('frontend.about') }}'>{{ _('About') }}</a> -
-        <a href='{{ url_for('frontend.blog') }}'>{{ _('Blog') }}</a> -
-        <a href='{{ url_for('frontend.help') }}'>{{ _('Help') }}</a> -
-        <a href='{{ url_for('frontend.terms') }}' title='{{ _('Terms of Service') }}'>{{ _('Terms') }}</a>
-        {% endblock %}
+            <p style='text-align: center;'>
+                © 2011 Fbone -
+                <a href='{{ url_for('frontend.about') }}'>{{ _('About') }}</a> -
+                <a href='{{ url_for('frontend.blog') }}'>{{ _('Blog') }}</a> -
+                <a href='{{ url_for('frontend.help') }}'>{{ _('Help') }}</a> -
+                <a href='{{ url_for('frontend.terms') }}' title='{{ _('Terms of Service') }}'>{{ _('Terms') }}</a>
+            </p>
         </footer>
     </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>
     {% endblock %}
-
-    <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
-       chromium.org/developers/how-tos/chrome-frame-getting-started -->
-    <!--[if lt IE 7 ]>
-    <script defer src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
-    <script defer>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
-    <![endif]-->
 </body>
 </html>

File fbone/templates/login.html

         {{ form.hidden_tag() }}
         {{ form.next }}
         <fieldset>
-            <legend><b>{{ page_title }}</b>. {{ _('Not a member? ') }}
-                <a href="{{ url_for('frontend.signup') }}">{{ _('Sign up') }}</a>{{ _(' please.') }}
-            </legend>
+            <legend>Not a member? <a href="{{ url_for('frontend.signup') }}">Sign up</a> please.</legend>
             {{ render_input(form.login, True) }}
             {{ render_input(form.password) }}
             <div class='clearfix'>

File fbone/templates/signup.html

         {{ form.hidden_tag() }}
         {{ form.next }}
         <fieldset>
-            <legend><b>{{ page_title }}</b>. {{ _('Already have account? ') }}
-                <a href="{{ url_for('frontend.login') }}">{{ _('Login') }}</a>{{ _(' please.') }}
-            </legend>
+            <legend>Already have account? <a href="{{ url_for('frontend.login') }}">Login</a> please.</legend>
             {{ render_input(form.name, True) }}
             {{ render_input(form.email) }}
             {{ render_input(form.password) }}

File fbone/templates/user.html

 {% extends "layout.html" %}
 
 {% block body %}
-<ul>
-    <li>{{ user.name }}</li>
-    <li>{{ user.email }}</li>
-</ul>
+<p>user</p>
 {% endblock %}

File fbone/views/frontend.py

 
 @frontend.route('/')
 def index():
+    login_form= LoginForm(next=request.args.get('next'))
     page = int(request.args.get('page', 1))
     pagination = User.query.paginate(page=page, per_page=1)
-    return render_template('index.html', pagination=pagination)
+    return render_template('index.html', pagination=pagination, login_form=login_form,
+                           current_user=current_user)
 
 
 @frontend.route('/search')
 
 @frontend.route('/signup', methods=['GET', 'POST'])
 def signup():
+    login_form= LoginForm(next=request.args.get('next'))
     form = SignupForm(next=request.args.get('next'))
 
     if form.validate_on_submit():
         if login_user(user):
             return redirect(form.next.data or url_for('user.home'))
 
-    return render_template('signup.html', form=form)
+    return render_template('signup.html', form=form, login_form=login_form)
 
 
 @frontend.route('/change_password', methods=['GET', 'POST'])

File fbone/views/user.py

     if current_user.is_authenticated() and current_user.name == name:
         return redirect(url_for('user.home'))
     user = User.query.filter_by(name=name).first_or_404()
-    return render_template('user.html', user=user)
+    return render_template('user.html', current_user=current_user)
 
 
 @user.route('/')