added responsive layout with groups
diff --git a/website/templates/html/outer.html b/website/templates/html/outer.html
index 02a61ac..a8b73ad 100644
--- a/website/templates/html/outer.html
+++ b/website/templates/html/outer.html
@@ -7,66 +7,72 @@
{% block body %}
<header>
</header>
- <div id="body_div">
- <div class="navbar-wrapper">
- <div class="navbar{% if top_bar_background=="Black" %} navbar-inverse{% endif %}"
- style="margin-bottom: 0px;">
- <div class="navbar-inner">
- <div class="container">
- <a class="brand" href="/">{{ brand_html }}</a>
- <ul class="nav">
- {% for page in top_bar_items %}
- {% if not page.parent_label %}
- <li data-label="{{ page.label }}"
- {% if page.child_items %}
- class="dropdown"
- {% endif %}>
- <a href="{{ page.url or '#' }}"
- {% if page.child_items %}
- class="dropdown-toggle"
- onclick="return false;"
- data-toggle="dropdown"
- {% endif %}
- {{ page.target or ''}}>
- {{ page.label }}
- {% if page.child_items %}
- <b class="caret"></b>
- </a>
- <ul class="dropdown-menu">
- {% for child in page.child_items %}
- <li data-label="{{ child.label }}">
- <a {% if child.indent %}
- style="padding-left:
- {{(int(child.indent)+1)*15 }}px"
- {% endif %}
- href="{{ child.url }}" {{ child.target or '' }}>
- {{ child.label }}
+ <div class="container">
+ <div class="outer">
+ <div class="navbar{% if top_bar_background=="Black" %} navbar-inverse{% endif %}"
+ style="margin-bottom: 0px;">
+ <div class="navbar-inner">
+ <a class="brand" href="index">{{ brand_html }}</a>
+ <div class="container">
+ <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <div class="nav-collapse collapse">
+ <ul class="nav">
+ {% for page in top_bar_items %}
+ {% if not page.parent_label %}
+ <li data-label="{{ page.label }}"
+ {% if page.child_items %}
+ class="dropdown"
+ {% endif %}>
+ <a href="{{ page.url or '#' }}"
+ {% if page.child_items %}
+ class="dropdown-toggle"
+ onclick="return false;"
+ data-toggle="dropdown"
+ {% endif %}
+ {{ page.target or ''}}>
+ {{ page.label }}
+ {% if page.child_items %}
+ <b class="caret"></b>
</a>
- </li>
+ <ul class="dropdown-menu">
+ {% for child in page.child_items %}
+ <li data-label="{{ child.label }}">
+ <a {% if child.indent %}
+ style="padding-left:
+ {{(int(child.indent)+1)*15 }}px"
+ {% endif %}
+ href="{{ child.url }}" {{ child.target or '' }}>
+ {{ child.label }}
+ </a>
+ </li>
+ {% endfor %}
+ </ul>
+ {% else %}
+ </a>
+ {% endif %}
+ </li>
+ {% endif %}
{% endfor %}
- </ul>
- {% else %}
- </a>
- {% endif %}
- </li>
- {% endif %}
- {% endfor %}
- </ul>
- <img src="lib/images/ui/spinner.gif" id="spinner"/>
- <ul class="nav pull-right">
- <li id="login-topbar-item"><a href="login">Login</a></li>
- </ul>
+ </ul>
+ <ul class="nav pull-right">
+ <li id="login-topbar-item"><a href="login">Login</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
</div>
+ <script>$('.dropdown-toggle').dropdown()</script>
+ <div class="content row" id="page-{{ name }}" style="display: block;">
+ {% block content %}
+ {% endblock %}
</div>
</div>
- </div>
- <script>$('.dropdown-toggle').dropdown()</script>
- <div class="content" id="page-{{ name }}" style="display: block;">
- {% block content %}
- {% endblock %}
- </div>
</div>
- <footer><div class="web-footer">
+ <footer class="container"><div class="web-footer">
{% if facebook_share or google_plus_one or twitter_share or linked_in_share %}
<div class="social-icons" style="">
<span style="font-size: 11px;">{{ share_text or "Share this page on: "}}</span>