changeset 2485:aac162fa416e

Fixes top navbar, responsiveness
author sharky93 <rishabhr123@gmail.com>
date Sun, 15 Sep 2013 00:06:32 +0530
parents 6315a41e86c8
children f338be977912
files MoinMoin/templates/basic.js MoinMoin/themes/basic/static/css/basic.css MoinMoin/themes/basic/static/custom-less/basic.less MoinMoin/themes/basic/templates/layout.html
diffstat 4 files changed, 92 insertions(+), 56 deletions(-) [+]
line wrap: on
line diff
--- a/MoinMoin/templates/basic.js	Sat Sep 14 18:43:21 2013 +0530
+++ b/MoinMoin/templates/basic.js	Sun Sep 15 00:06:32 2013 +0530
@@ -18,4 +18,5 @@
     }
     $('div.dropup').removeClass('menu');
     $('ul.dropdown-menu').removeClass('submenu');
+    $('.topnavcollapse').addClass('collapse');
 });
--- a/MoinMoin/themes/basic/static/css/basic.css	Sat Sep 14 18:43:21 2013 +0530
+++ b/MoinMoin/themes/basic/static/css/basic.css	Sun Sep 15 00:06:32 2013 +0530
@@ -475,7 +475,7 @@
 dd {
   margin-left: 0;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .dl-horizontal dt {
     float: left;
     width: 160px;
@@ -2691,7 +2691,7 @@
   border-top-color: #ffffff;
   border-bottom-color: #ffffff;
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 992px) {
   .navbar-brand {
     float: left;
     margin-left: -15px;
@@ -4208,6 +4208,9 @@
     display: none !important;
   }
 }
+@media screen and (min-width: 768px) {
+  
+}
 .moin-sitename {
   padding-left: 0px;
 }
@@ -4533,6 +4536,12 @@
 .moin-navbar-inverse .navbar-text > a {
   color: #c8ddf1;
 }
+.moin-navbar-inverse .navbar-brand {
+  color: #c8ddf1;
+}
+.moin-navbar-inverse .navbar-toggle {
+  margin-top: 0px;
+}
 .moin-quicklink {
   position: relative;
   padding: 10px 15px 10px 15px;
--- a/MoinMoin/themes/basic/static/custom-less/basic.less	Sat Sep 14 18:43:21 2013 +0530
+++ b/MoinMoin/themes/basic/static/custom-less/basic.less	Sun Sep 15 00:06:32 2013 +0530
@@ -1,4 +1,8 @@
 @import "bootstrap.less";
+
+// ---- Customising the top navbar breakpoint
+@grid-float-breakpoint: @screen-medium;
+
 .moin-sitename {
   padding-left: 0px;
 }
@@ -118,6 +122,12 @@
       color: @moin-navbar-inverse-textcolor;
     }
   }
+  .navbar-brand {
+    color: @moin-navbar-inverse-textcolor;
+  }
+  .navbar-toggle {
+    margin-top: 0px;
+  }
 }
 
 .moin-quicklink {
--- a/MoinMoin/themes/basic/templates/layout.html	Sat Sep 14 18:43:21 2013 +0530
+++ b/MoinMoin/themes/basic/templates/layout.html	Sun Sep 15 00:06:32 2013 +0530
@@ -39,6 +39,9 @@
     </a>
 {% endmacro %}
 
+{% block bootstrap_stylesheet %}
+{% endblock %}
+
 {% block head %}
     {{ super() }}
     <link media="all" rel="stylesheet" href="{{ theme_static('css/basic.css') }}" />
@@ -58,63 +61,76 @@
             <div class="col-lg-10">
                 <div class="row">
                     <div class="col-lg-12">
-                        <div class="navbar moin-navbar-inverse">
-                            <div class="col-lg-9 moin-sitename">
-                                <ul class="nav navbar-nav pull-left">
-                                {% if cfg.sitename %}
-                                    <li class="navbar-text"> {{ cfg.sitename }} </li>
-                                {% endif %}
-                                </ul>
-                        <ul class="nav navbar-nav pull-right">
+                        <nav class="navbar moin-navbar-inverse" role="navigation">
+                            <div class="col-lg-3">
+                                <div class="navbar-header">
+                                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".topnavcollapse">
+                                      <span class="sm-only"></span>
+                                      <span class="icon-bar"></span>
+                                      <span class="icon-bar"></span>
+                                      <span class="icon-bar"></span>
+                                    </button>
+                                    {% if cfg.sitename %}
+                                        <a class="navbar-brand" href="{{ url_for('frontend.show_item', item_name=cfg.item_root) }}"> 
+                                            {{ cfg.sitename }} 
+                                        </a>
+                                    {% endif %}
+                                </div>
+                            </div> <!-- column-sitename -->
+                            <div class="col-lg-6">
+                                <div class="nav-collapse topnavcollapse">
+                                    <ul class="nav navbar-nav pull-right">
 
-                            {% if user.valid -%}
-                            {% set avatar = user.avatar(20) %}
-                                {% if avatar %}
-                                    <li><img id="moin-avatar" src="{{ avatar }}" /></li>
-                                {%- endif %}
-                                {% if user.name -%}
-                                    {% set wiki_href, aliasname, title, exists = theme_supp.userhome() %}
-                                    <li>
-                                        {{ hyperlink(wiki_href, title, exists, aliasname, "icon-user icon-white", None) }}
-                                    </li>
-                                    {% if 'frontend.usersettings' not in cfg.endpoints_excluded -%}
-                                        <li>
-                                            {{ hyperlink(url_for('frontend.usersettings'), None, True,
-                                                _('Settings'), "icon-cog icon-white", None) }}
-                                        </li>
-                                    {%- endif %}
-                                {%- endif %}
-                                {% if user.auth_method in cfg.auth_can_logout %}
-                                    <li>
-                                        {{ hyperlink(url_for('frontend.logout', logout_submit=1), None, True,
-                                                _('Logout'), "icon-off icon-white", None) }}
-                                    </li>
-                                {% endif %}
-                            {% else %}
-                                {% set login_url = theme_supp.login_url() %}
-                                {% if login_url %}
-                                    <li>
-                                        {{ hyperlink(login_url, None, True, _('Login'), None, None) }}
-                                    </li>
-                                {% endif %}
-                            {%- endif %}
+                                        {% if user.valid -%}
+                                        {% set avatar = user.avatar(20) %}
+                                            {% if avatar %}
+                                                <li><img id="moin-avatar" src="{{ avatar }}" /></li>
+                                            {%- endif %}
+                                            {% if user.name -%}
+                                                {% set wiki_href, aliasname, title, exists = theme_supp.userhome() %}
+                                                <li>
+                                                    {{ hyperlink(wiki_href, title, exists, aliasname, "icon-user icon-white", None) }}
+                                                </li>
+                                                {% if 'frontend.usersettings' not in cfg.endpoints_excluded -%}
+                                                    <li>
+                                                        {{ hyperlink(url_for('frontend.usersettings'), None, True,
+                                                            _('Settings'), "icon-cog icon-white", None) }}
+                                                    </li>
+                                                {%- endif %}
+                                            {%- endif %}
+                                            {% if user.auth_method in cfg.auth_can_logout %}
+                                                <li>
+                                                    {{ hyperlink(url_for('frontend.logout', logout_submit=1), None, True,
+                                                            _('Logout'), "icon-off icon-white", None) }}
+                                                </li>
+                                            {% endif %}
+                                        {% else %}
+                                            {% set login_url = theme_supp.login_url() %}
+                                            {% if login_url %}
+                                                <li>
+                                                    {{ hyperlink(login_url, None, True, _('Login'), None, None) }}
+                                                </li>
+                                            {% endif %}
+                                        {%- endif %}
 
-                        </ul>
-                            </div> <!-- subcol-lg-7 user login -->
+                                    </ul>
+                                </div>
+                            </div><!-- column-user-options -->
+
                             <div class="col-lg-3">
-                        <form class="navbar-form pull-right" action="{{ url_for('frontend.search') }}" method="get">
-                            <div class="input-group">
-                                <input name='q' type="text" class="form-control" placeholder="Search ...">
-                                <div class="input-group-btn">
-                                    <button class="btn btn-primary" type="submit">
-                                        <i class="icon-search"></i>
-                                    </button>
-                                </div>
-                            </div>
-                        </form>
-                            </div> <!-- subcol-search-->
-                        </div> <!-- navbar-inverse-->
-                    </div>
+                                <form class="navbar-form" action="{{ url_for('frontend.search') }}" method="get" role="search">
+                                    <div class="input-group">
+                                        <input name='q' type="text" class="form-control" placeholder="Search ...">
+                                        <div class="input-group-btn">
+                                            <button class="btn btn-primary" type="submit">
+                                                <i class="icon-search"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </form>
+                            </div> <!-- column-3 -->
+                        </nav> <!-- navbar-inverse-->
+                    </div> <!-- column-12 -->
                 </div> <!-- row for top-navbar -->
                 <div class="row">
                     <div class="col-lg-12">