[extensions-web/wip/tomtryf/redesign: 2/18] Update main navigation bar style



commit d8cdc119b051caaa51d7d9e006e99987af9cf48b
Author: Tom Tryfonidis <tomtryf gnome org>
Date:   Fri Feb 17 15:57:37 2017 +0200

    Update main navigation bar style

 sweettooth/auth/forms.py                           |    5 +-
 .../templates/registration/login_popup_form.html   |   29 ++-
 sweettooth/static/css/style.css                    |  384 ++++++++++++--------
 sweettooth/static/css/sweettooth.css               |  117 +------
 sweettooth/static/css/text.css                     |    7 +-
 sweettooth/static/images/avatar-default.svg        |  152 ++++++++
 sweettooth/static/images/gnome-extensions.svg      |  139 +++++++
 sweettooth/templates/base.html                     |  109 ++++--
 sweettooth/templates/usermenu.html                 |   15 +-
 9 files changed, 640 insertions(+), 317 deletions(-)
---
diff --git a/sweettooth/auth/forms.py b/sweettooth/auth/forms.py
index 92e2182..32300e9 100644
--- a/sweettooth/auth/forms.py
+++ b/sweettooth/auth/forms.py
@@ -7,9 +7,9 @@ from registration.forms import RegistrationFormUniqueEmail
 class PlainOutputForm(object):
     def as_plain(self):
         return self._html_output(
-            normal_row = u'%(errors)s%(field)s%(help_text)s',
+            normal_row = u'<div class="form-group">%(field)s</div> %(errors)s%(help_text)s',
             error_row = u'%s',
-            row_ender = u'',
+            row_ender = u'</div>',
             help_text_html = u'<br /><span class="helptext">%s</span>',
             errors_on_separate_row = False)
 
@@ -25,6 +25,7 @@ class InlineForm(object):
         super(InlineForm, self).__init__(*a, **kw)
         for field in self.fields.itervalues():
             field.widget.attrs['placeholder'] = field.label
+            field.widget.attrs['class'] = 'form-control'
 
 class InlineAuthenticationForm(PlainOutputForm, AutoFocusForm,
                                InlineForm, auth_forms.AuthenticationForm):
diff --git a/sweettooth/auth/templates/registration/login_popup_form.html 
b/sweettooth/auth/templates/registration/login_popup_form.html
index 27d2860..bf28862 100644
--- a/sweettooth/auth/templates/registration/login_popup_form.html
+++ b/sweettooth/auth/templates/registration/login_popup_form.html
@@ -1,7 +1,22 @@
-<form action="{% url 'auth-login' %}" method="POST" class="login_popup_form user_popup">
-  {% csrf_token %}
-  {{ login_popup_form.as_plain }}
-  <input type="hidden" name="next" value="{{ request.path }}">
-  <input type="submit" value="Login">
-  <a href="{% url 'registration_register' %}">Register</a>
-</form>
+<div class="row">
+    <div class="col-sm-12">
+        <form action="{% url 'auth-login' %}" method="POST" class="form">
+          {% csrf_token %}
+          {{ login_popup_form.as_plain }}
+            <div class="form-group">
+                <input type="hidden" name="next" id="id_username" class="form-control" value="{{ 
request.path }}"/>
+            </div>
+            <div class="form-group">
+                <button type="submit" class="btn btn-primary btn-block">Log in</button>
+            </div>
+            <div class="form-group">
+                <a href="{% url 'auth_password_reset' %}" class="">Forgot your password?</a>
+            </div>
+            <li class="divider"></li>
+            <p>Don't have an account?</p>
+            <div class="form-group">
+                <a href="{% url 'registration_register' %}" class="btn btn-success btn-block 
no-decoration">Register</a>
+            </div>
+        </form>
+    </div>
+</div>
diff --git a/sweettooth/static/css/style.css b/sweettooth/static/css/style.css
index b089e55..56b99fb 100644
--- a/sweettooth/static/css/style.css
+++ b/sweettooth/static/css/style.css
@@ -7,7 +7,6 @@ Version: 20160212
 */
 
 
-@import url("reset.css");
 @import url("text.css");
 @import url("960.css");
 @import url("sweettooth.css");
@@ -19,12 +18,6 @@ Version: 20160212
 /* Base information */
 /* ========================================================================== */
 
-html {
-    background: #fff url(../images/html-bg.png) 0 10px repeat-x;
-}
-body {
-    
-}
 a {
     color: #204a87;
 }
@@ -51,8 +44,19 @@ a:visited {
     width: 780px;
     margin: 0 auto;
 }
+.col-centered{
+    float: none;
+    margin: 0 auto;
+}
+.no-padding {
+   padding: 0 !important;
+   margin: 0 !important;
+}
 
-
+.btn-success,
+.btn-primary {
+    color: #fff !important;
+}
 
 /* Accessibility access */
 /* ========================================================================== */
@@ -66,179 +70,217 @@ a:visited {
     top: -200px;
 }
 
-
-
-/* Global Domain Bar */
+/* GNOME Header */
 /* ========================================================================== */
 
-
-
-#global_domain_bar {
-    background: #fff;
-    height: 10px;
+.gnome-header {
+    margin-bottom: 90px;
 }
-#global_domain_bar .maxwidth {
-    position: relative;
+.gnome-header .avatar {
+    margin: 10px 0;
+    padding: 0;
+    border-radius: 50%;
 }
-
-/* Tab */
-
-#global_domain_bar .tab {
-    background: #fff;
-    position: absolute;
-    right: 0;
-    float: right;
-    padding: 6px 8px;
-    font-size: 12px;
-    line-height: 16px;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
-    -moz-box-shadow: 0 4px 2px -2px #8fb3d9;
-    -webkit-box-shadow: 0 4px 2px -2px #8fb3d9;
-    box-shadow: 0 4px 2px -2px #8fb3d9;
-    white-space: nowrap;
+.gnome-header .avatar img {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
 }
-#global_domain_bar .tab a.root {
-    color: #555753 !important;
-    font-weight: bold;
+.navbar-default .navbar-nav > #userDropdownMenu > a:hover,
+.navbar-default .navbar-nav > #userDropdownMenu > a:focus {
+    background: transparent;
+}
+.gnome-navbar-brand {
+    height: 50px;
+    padding: 6px;
+    float: left;
+    outline: 0;
+    margin-left: 7px;
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: 80%;
+    color: #ffffff;
     text-decoration: none;
-    background: #fff url(../images/favicon.png) 0 0 no-repeat;
-    padding-left: 18px;
-    border-right: 1px solid #ccc;
-    padding-right: 6px;
-    margin-right: 3px;
 }
-#global_domain_bar .tab a.root:last-child {
-    border-right: 0;
-    padding-right: 0;
-    margin-right: 0;
-    padding-bottom: 3px;
+.gnome-navbar-brand:hover,
+.gnome-navbar-brand:active {
+    color: #ffffff;
+    text-decoration: none;
 }
-#global_domain_bar .tab a.root:hover {
-    text-decoration: underline;
+.gnome-navbar-brand img {
+    max-height: 35px;
+    min-height: 35px;
+    min-width: 35px;
+    vertical-align: middle !important;
 }
 
-
-/* Header */
+/* Main Navigation Menu */
 /* ========================================================================== */
 
-
-
-#header {
-    margin: 20px auto 0;
+.navbar-default {
+    background-color: #4a86cf;
+    border-color: #3968a1;
 }
-#header img {
-    vertical-align: middle;
-    float: left;
-    margin-right: 10px;
+.navbar-default .navbar-brand {
+    color: #ffffff;
 }
-#header #logo {
-    float: left;
+.navbar-default .navbar-brand:hover,
+.navbar-default .navbar-brand:focus {
+    color: #ffffff;
 }
-#header #logo h1 {
-    margin: 0;
+.navbar-default .navbar-text {
+    color: #ffffff;
 }
-#header #logo img {
-    -webkit-transition: opacity 200ms ease-out;
-    -moz-transition: opacity 200ms ease-out;
-    transition: opacity 200ms ease-out;
-    opacity: 1;
-    margin-left: -3px;
-    height: 76px;
-    width: 199px;
+.navbar-default .navbar-nav > li {
+    margin-left: 10px;
+}
+.navbar-default .navbar-nav > li > a {
+    color: #ffffff;
+    text-decoration: none;
 }
-#header #logo img:hover {
-    opacity: 0.85;
+.navbar-default .navbar-nav > li > a:hover,
+.navbar-default .navbar-nav > li > a:focus {
+    color: #ffffff;
+    background: rgba(100%, 100%, 100%, 0.2);
 }
-
-
-
-/* Top bar */
-/* ========================================================================== */
-
-
-
-#top_bar {
-    background: #2e3436 url("../images/top_bar-bg.png") top repeat-x;
-    padding: 8px 0;
-    margin-top: 23px;
-    font-size: 13px;
-    line-height: normal;
-    -moz-border-radius: 6px;
-    -webkit-border-radius: 6px;
-    border-radius: 6px;
-    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+.navbar-default .navbar-nav > .active > a,
+.navbar-default .navbar-nav > .active > a:hover,
+.navbar-default .navbar-nav > .active > a:focus {
+    color: #ffffff;
+    background-color: #3968a1;
 }
-#top_bar ul {
-    list-style: none;
-    margin: 0;
-    padding: 0 5px;
+.navbar-default .navbar-nav > .open > a,
+.navbar-default .navbar-nav > .open > a:hover,
+.navbar-default .navbar-nav > .open > a:focus {
+    color: #ffffff;
+    background-color: #3968a1;
 }
-#top_bar ul li {
-    display: inline;
-    margin: 0 5px 0 0;
+.navbar-default .navbar-toggle {
+    border-color: #3968a1;
 }
-#top_bar a {
-    color: #fff;
-    text-decoration: none;
-    padding: 4px 8px;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    border-radius: 4px;
-    outline: 0;
-    -webkit-transition: background 100ms linear;
-    -moz-transition: background 100ms linear;
-    transition: background 100ms linear;
-    text-shadow: 0 1px 0 #000;
+.navbar-default .navbar-toggle:hover,
+.navbar-default .navbar-toggle:focus {
+    background-color: #3968a1;
 }
-#top_bar a:hover {
-    background: #64696d;
-    background: rgba(100%, 100%, 100%, 0.2);
+.navbar-default .navbar-toggle .icon-bar {
+    background-color: #ffffff;
 }
-#top_bar a:focus {
-    background: rgba(100%, 100%, 100%, 0.15);
+.navbar-default .navbar-collapse,
+.navbar-default .navbar-form {
+    border-color: transparent;
 }
-#top_bar a:active, #top_bar li.current-menu-item a, #top_bar li.current-page-ancestor a {
-    background: #1c2021 url("../images/top_bar-item-bg.png") top repeat-x;
-    -moz-box-shadow: inset 0 -1px 0 rgba(100%,100%,100%, 0.4), inset 0 1px 3px rgba(0,0,0,0.4);
-    -webkit-box-shadow: inset 0 -1px 0 rgba(100%,100%,100%, 0.4), inset 0 1px 3px rgba(0,0,0,0.4);
-    box-shadow: inset 0 -1px 0 rgba(100%,100%,100%, 0.4), inset 0 1px 3px rgba(0,0,0,0.4);
+.navbar-default .navbar-link {
+    color: #ffffff;
 }
-#top_bar li.selected a {
-    font-weight: bold;
+.navbar-default .navbar-link:hover {
+    color: #ffffff;
 }
-#top_bar #main_search {
-    text-align: right;
+.navbar-default .navbar-header .icons{
+    display: block;
+    float: right;
+    margin: 5px 20px !important;
 }
-#top_bar input {
-    margin: -8px 0 -8px -8px;
-    line-height: 22px;
-    width: 150px;
-    border: 0;
-    font: inherit;
-    color: inherit;
-    padding: 8px 8px 8px 28px;
-    background: transparent url(../images/search-icon.png) 8px center no-repeat;
-    color: #fff;
-    border-left: 1px solid rgba(100%,100%,100%,0.3);
-    outline: none;
+.navbar-default .navbar-header .icons li{
+    display: inline-block !important;
 }
-#top_bar input.placeholder {
-    color: #CCC;
+
+/* User settings */
+
+.login_popup_form {
+    padding: 15px 15px;
+    min-width: 220px;
 }
-#top_bar input:focus {
-    background-color: rgba(100%,100%,100%,0.1);
-    -moz-border-radius-topright: 5px;
-    -moz-border-radius-bottomright: 5px;
-    -webkit-border-top-right-radius: 6px;
-    -webkit-border-bottom-right-radius: 6px;
-    border-top-right-radius: 6px;
-    border-bottom-right-radius: 6px;
+ul.login_popup_form li p {
+   margin: 0;
 }
 
+.navbar-nav>li>.dropdown-menu {
+    margin-top: 18px;
+}
+.navbar-nav>li>.dropdown-menu, ul.dropdown-menu {
+    border-radius: 6px;
+}
+.navbar-nav>li>.dropdown-menu li {
+    margin-left: 0px;
+}
+
+@media screen and (min-width:767px) {
+    #userDropdownMenu .dropdown-menu:after {
+        position: absolute;
+        top: -11px;
+        left: 83%;
+        display: inline-block;
+        border-right: 11px solid transparent;
+        border-bottom: 11px solid #ffffff;
+        border-left: 11px solid transparent;
+        content:'';
+    }
+    #userDropdownMenu .dropdown-menu:before {
+        position: absolute;
+        top: -12px;
+        left: 83%;
+        display: inline-block;
+        border-right: 11px solid transparent;
+        border-bottom: 11px solid #ccc;
+        border-left: 11px solid transparent;
+        border-bottom-color: rgba(0, 0, 0, 0.2);
+        content:'';
+    }
+}
+
+/* Animated "Close" icon on Navbar */
+/* ========================================================================== */
+
+.navbar-toggle {
+    border: none;
+    background: transparent !important;
+}
+.navbar-toggle:hover {
+    background: transparent !important;
+}
+.navbar-toggle .icon-bar {
+    width: 22px;
+    transition: all 0.2s;
+}
+.navbar-toggle .top-bar {
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform-origin: 10% 10%;
+    -webkit-transform-origin: 10% 10%;
+    -ms-transform-origin: 10% 10%;
+}
+.navbar-toggle .middle-bar {
+    opacity: 0;
+}
+.navbar-toggle .bottom-bar {
+    transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    transform-origin: 10% 90%;
+    -webkit-transform-origin: 10% 90%;
+    -ms-transform-origin: 10% 90%;
+}
+.navbar-toggle.collapsed .top-bar {
+    transform: rotate(0);
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+}
+.navbar-toggle.collapsed .middle-bar {
+    opacity: 1;
+}
+.navbar-toggle.collapsed .bottom-bar {
+    transform: rotate(0);
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+}
+.navbar-form,
+.navbar-collapse {
+    box-shadow: none;
+}
+
+
+
 /* -> subpages list */
 
 /*
@@ -640,3 +682,45 @@ hr.bottom_shadow {
     -webkit-transform: rotate(180deg);
     transform: rotate(180deg);
 }
+
+
+/* Responsive Media Queries */
+/* ========================================================================== */
+
+@media screen and (max-width: 767px) {
+
+    .dropdown-menu.login_popup_form li a {
+            color: #ffffff;
+
+    }
+    .dropdown-menu.login_popup_form li{
+            color: #ffffff;
+
+    }
+
+    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
+        color: #ffffff;
+    }
+    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
+        color: #ffffff;
+    }
+    .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
+    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
+    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
+        color: #ffffff;
+        background-color: #3968a1;
+    }
+    .navbar-default .btn-link {
+        color: #fff;
+    }
+    .navbar-default .navbar-header .icons {
+        margin: 0px 20px !important;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .gnome-header .avatar img {
+        margin-right: 15px;
+    }
+}
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 7cdcc72..76afc21 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -20,127 +20,28 @@ span.action_button {
 }
 
 
-/* Global Domain Bar */
-/* ========================================================================== */
-
-#global_domain_bar .tab a.root {
-    margin-right: 0 !important;
-}
-
-#global_domain_bar .tab a.user {
-    padding: 2px 14px 2px 4px;
-    margin: -2px -4px -2px 2px;
-    color: inherit !important;
-    text-decoration: none;
-    border-radius: 4px;
-    background: url(../images/globaldomain-user-arrow.png) right center no-repeat;
-    outline: none;
-}
-#global_domain_bar .tab a.user:hover,
-#global_domain_bar .tab a.user:focus {
-    background-color: #ececec;
-}
-#global_domain_bar .tab a.user.active {
-    background-color: #ececec;
-    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
-}
-
-/* User settings */
-
-#global_domain_bar .user_popup:before {
-    width: 20px;
-    height: 10px;
-    margin-top: -17px;
-    pointer-events: none;
-    right: 10px;
-    position: absolute;
-    content: url(../images/globaldomain-popup-arrow.png);
-}
-#global_domain_bar .user_popup {
-    display: none;
-    z-index: 10;
-    position: absolute;
-    background: #000;
-    background: rgba(0, 0, 0, 0.9);
-    border: 2px solid rgba(100%, 100%, 100%, 0.2);
-    right: 0;
-    top: -10px;
-    margin: 32px 0 0 0;
-    min-width: 140px;
-    border-radius: 10px;
-}
-#global_domain_bar .user_popup a.text {
-    color: #fff;
-    text-decoration: none;
-    display: block;
-    padding: 3px 16px;
-}
-#global_domain_bar .user_settings a.text:hover {
-    background: rgba(100%, 100%, 100%, 0.2);
-}
-#global_domain_bar .user_settings ul {
-    margin: 14px 0;
-}
-#global_domain_bar .user_settings li {
-    list-style-type: none;
-    margin-left: 0;
-}
-#global_domain_bar .avatar {
-    display: block;
-    margin: 14px auto 0 auto;
-    width: 70px;
-    height: 70px;
-    background-color: #fff;
-    background-size: contain;
-    border: 2px solid #8b8b8b;
-    border-radius: 5px;
-}
-#global_domain_bar .avatar:hover {
-    border: 2px solid #bbbbbb;
-}
-
 /* Unreviewed Extension Counter */
 /* ==================================================================== */
 
 #unreviewed_counter {
-    border-right: 1px solid #ccc;
-    color: #555753;
+    background-color: #3968A1;
+    color: #ffffff;
+    font-weight: 700;
     text-decoration: none;
-    padding: 0 4px;
+    padding: 0 5px;
+    border-radius: 4px;
+    margin-top: 13px;
+    margin-right: 10px;
+    border: 1px solid #195EB1;
 }
 
 #unreviewed_counter:hover {
-    background-color: #ececec;
+    background-color: #195EB1;
 }
 
 /* Login Area */
 /* ==================================================================== */
 
-#global_domain_bar .login_popup_form * {
-    display: block;
-    margin: 10px 5px;
-}
-
-#global_domain_bar .login_popup_form input[type=submit],
-#global_domain_bar .login_popup_form a {
-    color: #fff;
-    display: block;
-    margin: 0;
-    border: 0;
-    background: none;
-    font-weight: normal;
-    padding: 3px 0;
-    border-radius: 0;
-    width: 100%;
-    text-decoration: none;
-    text-align: center;
-}
-
-#global_domain_bar .login_popup_form input[type=submit]:hover,
-#global_domain_bar .login_popup_form a:hover {
-    background: rgba(100%, 100%, 100%, 0.2);
-}
-
 #auth_form ol {
     list-style-type: none;
     font-size: 2em;
diff --git a/sweettooth/static/css/text.css b/sweettooth/static/css/text.css
index d6b0eac..2380b5d 100644
--- a/sweettooth/static/css/text.css
+++ b/sweettooth/static/css/text.css
@@ -72,7 +72,12 @@ code {
     background: rgba(0,0,0,0.1);
     padding: 1px;
 }
-
+a {
+    text-decoration: underline;
+}
+.no-decoration {
+    text-decoration: none;
+}
 
 /* Text classes */
 /* ========================================================================== */
diff --git a/sweettooth/static/images/avatar-default.svg b/sweettooth/static/images/avatar-default.svg
new file mode 100644
index 0000000..9cb7fc9
--- /dev/null
+++ b/sweettooth/static/images/avatar-default.svg
@@ -0,0 +1,152 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/";
+   xmlns:cc="http://creativecommons.org/ns#";
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+   xmlns:svg="http://www.w3.org/2000/svg";
+   xmlns="http://www.w3.org/2000/svg";
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+   sodipodi:docname="avatar-default.svg"
+   inkscape:export-filename="/home/sam/dev/RESOURCES/gnome-icon-theme-symbolic/src/gnome-stencils.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90"
+   height="16"
+   id="svg7384"
+   version="1.1"
+   inkscape:version="0.92.0 r"
+   width="16">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:bbox-nodes="false"
+     inkscape:bbox-paths="true"
+     bordercolor="#666666"
+     borderopacity="1"
+     inkscape:current-layer="layer9"
+     inkscape:cx="48.900326"
+     inkscape:cy="-9.5721192"
+     gridtolerance="10"
+     inkscape:guide-bbox="true"
+     guidetolerance="10"
+     id="namedview88"
+     inkscape:object-nodes="false"
+     inkscape:object-paths="false"
+     objecttolerance="10"
+     pagecolor="#3a3b39"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     showborder="false"
+     showgrid="false"
+     showguides="true"
+     inkscape:snap-bbox="true"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:snap-global="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-others="false"
+     inkscape:snap-to-guides="true"
+     inkscape:window-height="961"
+     inkscape:window-maximized="1"
+     inkscape:window-width="1280"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:zoom="9.1743808">
+    <inkscape:grid
+       empspacing="2"
+       enabled="true"
+       id="grid4866"
+       originx="200"
+       originy="120"
+       snapvisiblegridlinesonly="true"
+       spacingx="1"
+       spacingy="1"
+       type="xygrid"
+       visible="true" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer9"
+     inkscape:label="status"
+     style="display:inline"
+     transform="translate(-41.0002,-337)">
+    <path
+       inkscape:connector-curvature="0"
+       d="m 51.55489,345.09373 c -0.70541,0.62353 -1.53918,0.90625 -2.55469,0.90625 -1.01551,0 
-1.85318,-0.29053 -2.55859,-0.91406 -1.10938,0.36328 -2.43603,1.28775 -2.4375,2.90234 l -0.0039,3.01172 c 
-7.2e-4,0.554 0.446,1.00002 1,1.00002 l 8,0 c 0.554,0 1,-0.44602 1,-1.00002 l 0,-3 c 0,-1.38672 
-1.10231,-2.5558 -2.44531,-2.90625 z"
+       id="path3940-5"
+       sodipodi:nodetypes="csccsssscc"
+       style="fill:#ffffff;fill-opacity:1;stroke:none" />
+    <path
+       sodipodi:cx="49.5"
+       sodipodi:cy="342.5"
+       d="M 52,342.5 A 2.5,2.5 0 0 1 49.5,345 2.5,2.5 0 0 1 47,342.5 2.5,2.5 0 0 1 49.5,340 2.5,2.5 0 0 1 
52,342.5 Z"
+       id="path3942-6"
+       sodipodi:rx="2.5"
+       sodipodi:ry="2.5"
+       
style="color:#bebebe;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       transform="matrix(1.2,0,0,1.2,-10.3998,-69.00003)"
+       sodipodi:type="arc" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer10"
+     inkscape:label="devices"
+     style="display:inline"
+     transform="translate(-41.0002,-337)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer11"
+     inkscape:label="apps"
+     transform="translate(-41.0002,-337)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer13"
+     inkscape:label="places"
+     style="display:inline"
+     transform="translate(-41.0002,-337)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer14"
+     inkscape:label="mimetypes"
+     transform="translate(-41.0002,-337)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer15"
+     inkscape:label="emblems"
+     style="display:inline"
+     transform="translate(-41.0002,-337)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g71291"
+     inkscape:label="emotes"
+     style="display:inline"
+     transform="translate(-41.0002,-337)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g4953"
+     inkscape:label="categories"
+     style="display:inline"
+     transform="translate(-41.0002,-337)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer12"
+     inkscape:label="actions"
+     style="display:inline"
+     transform="translate(-41.0002,-337)" />
+</svg>
diff --git a/sweettooth/static/images/gnome-extensions.svg b/sweettooth/static/images/gnome-extensions.svg
new file mode 100644
index 0000000..6497c28
--- /dev/null
+++ b/sweettooth/static/images/gnome-extensions.svg
@@ -0,0 +1,139 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/";
+   xmlns:cc="http://creativecommons.org/ns#";
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+   xmlns:svg="http://www.w3.org/2000/svg";
+   xmlns="http://www.w3.org/2000/svg";
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+   version="1.0"
+   width="1062.9567"
+   height="408.40155"
+   id="svg3642"
+   inkscape:version="0.92.0 r"
+   sodipodi:docname="gnome-l10n.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96">
+  <metadata
+     id="metadata24">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1280"
+     inkscape:window-height="961"
+     id="namedview22"
+     showgrid="false"
+     inkscape:zoom="1"
+     inkscape:cx="622.15068"
+     inkscape:cy="73.6725"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g15041"
+     showborder="true"
+     borderlayer="false"
+     inkscape:showpageshadow="false" />
+  <defs
+     id="defs3644" />
+  <g
+     transform="translate(162.8693,-197.3138)"
+     id="layer1">
+    <g
+       transform="matrix(1.293235,0,0,1.293235,-4878.321,-1224.915)"
+       id="g15041">
+      <g
+         transform="matrix(2.438586,0,0,2.438586,3659.952,1113.451)"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-miterlimit:4"
+         id="g15043">
+        <g
+           style="fill:#ffffff;fill-opacity:1"
+           id="g15045">
+          <path
+             d="M 86.068,0 C 61.466,0 56.851,35.041 70.691,35.041 84.529,35.041 110.671,0 86.068,0 Z"
+             style="fill:#ffffff;fill-opacity:1"
+             id="path15047"
+             inkscape:connector-curvature="0" />
+          <path
+             d="M 45.217,30.699 C 52.586,31.149 60.671,2.577 46.821,4.374 32.976,6.171 37.845,30.249 
45.217,30.699 Z"
+             style="fill:#ffffff;fill-opacity:1"
+             id="path15049"
+             inkscape:connector-curvature="0" />
+          <path
+             d="M 11.445,48.453 C 16.686,46.146 12.12,23.581 3.208,29.735 -5.7,35.89 6.204,50.759 
11.445,48.453 Z"
+             style="fill:#ffffff;fill-opacity:1"
+             id="path15051"
+             inkscape:connector-curvature="0" />
+          <path
+             d="M 26.212,36.642 C 32.451,35.37 32.793,9.778 21.667,14.369 10.539,18.961 19.978,37.916 
26.212,36.642 l 0,0 z"
+             style="fill:#ffffff;fill-opacity:1"
+             id="path15053"
+             inkscape:connector-curvature="0" />
+          <path
+             d="m 58.791,93.913 c 1.107,8.454 -6.202,12.629 -13.36,7.179 C 22.644,83.743 83.16,75.088 
79.171,51.386 75.86,31.712 15.495,37.769 8.621,68.553 3.968,89.374 27.774,118.26 52.614,118.26 c 12.22,0 
26.315,-11.034 28.952,-25.012 C 83.58,82.589 57.867,86.86 58.791,93.913 l 0,0 z"
+             style="fill:#ffffff;fill-opacity:1"
+             id="path15055"
+             inkscape:connector-curvature="0" />
+        </g>
+      </g>
+      <g
+         id="g15057"
+         style="fill:#ffffff">
+        <path
+           d="m 4176.2963,1214.4401 c -15.1078,0.4069 -27.0386,5.8367 -35.8126,16.25 -9.0861,10.8369 
-13.6562,25.8104 -13.6562,44.9063 0,19.0432 4.5703,33.9757 13.6562,44.8124 9.1305,10.8369 21.6664,16.25 
37.6563,16.25 16.034,0 28.6014,-5.4131 37.6875,-16.25 9.0859,-10.8367 13.6251,-25.7692 13.625,-44.8124 
-1e-4,-19.0959 -4.5391,-34.0694 -13.625,-44.9063 -9.0861,-10.8366 -21.6536,-16.2499 -37.6875,-16.25 -0.6246,0 
-1.2296,-0.016 -1.8437,0 z m 1.125,22 c 0.2415,-0.01 0.4737,0 0.7187,0 7.8833,10e-5 13.9919,3.4114 
18.3125,10.25 4.3203,6.8388 6.4999,16.4913 6.5,28.9063 0,12.3623 -2.1799,21.9427 -6.5,28.7812 -4.3204,6.8389 
-10.4293,10.2812 -18.3125,10.2812 -7.8391,0 -13.8983,-3.4423 -18.2187,-10.2812 -4.3204,-6.8385 
-6.4999,-16.4189 -6.5,-28.7812 0,-12.4149 2.1798,-22.0675 6.5,-28.9063 4.1852,-6.6249 10.0123,-10.0428 
17.5,-10.25 z"
+           
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:148.699646px;line-height:125%;font-family:'Bitstream
 Vera 
Sans';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1pt;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           id="path15059"
+           inkscape:connector-curvature="0" />
+        <path
+           d="m 4005.6293,1325.612 c -13.3076,11.1757 -33.1067,11.0472 -41.3549,11.0472 -16.6133,0 
-29.7747,-5.471 -39.4842,-16.413 -9.7097,-10.9946 -14.5644,-25.8819 -14.5644,-44.6622 0,-18.9906 
4.9438,-33.9305 14.8316,-44.82 9.8878,-10.8892 23.4277,-16.3339 40.62,-16.334 6.6363,10e-5 12.9831,0.7366 
19.0406,2.2094 6.1019,1.473 11.8475,3.6562 17.2368,6.5494 l -6.921,20.4608 c -3.0298,-1.6586 -6.4987,-3.2932 
-9.7145,-4.4424 -5.4784,-1.8411 -10.979,-2.7617 -16.5018,-2.7618 -10.2442,10e-5 -18.15,3.3932 
-23.7173,10.1792 -5.523,6.7336 -8.2844,16.3867 -8.2844,28.9594 0,12.4676 2.6723,22.0945 8.0172,28.8806 
5.3446,6.7861 13.3768,10.1791 22.7818,10.1791 9.5548,0 15.4728,-2.4084 18.6291,-4.9461 l 0,-20.3835 
-20.7001,0 0,-20.3584 40.0855,0"
+           
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:148.699646px;line-height:125%;font-family:'Bitstream
 Vera 
Sans';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1pt;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           id="path15061"
+           inkscape:connector-curvature="0" />
+        <path
+           d="m 4023.2108,1216.5605 16.2279,0 51.2775,70.8022 0,-70.8022 21.8853,0 0,117.8103 -16.2279,0 
-51.2774,-70.8022 0,70.8022 -21.8854,0 0,-117.8103"
+           
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:148.699646px;line-height:125%;font-family:'Bitstream
 Vera 
Sans';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1pt;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           id="path15063"
+           inkscape:connector-curvature="0" />
+        <path
+           d="m 4246.3361,1216.5605 32.7366,0 22.7151,73.5479 22.8487,-73.5479 27.6698,0 12.5,117.8103 
-24.3186,0 -7.5,-73.668 -22.9823,74.0213 -16.3015,0 -22.9824,-76.5213 -7.5,76.168 -24.3854,0 12.5,-117.8103"
+           
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:148.699646px;line-height:125%;font-family:'Bitstream
 Vera 
Sans';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1pt;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           id="path15065"
+           inkscape:connector-curvature="0" />
+        <path
+           d="m 4382.3597,1216.5605 69.4147,0 0,22.9624 -43.6933,0 0,24.4365 33.5877,0 0,20.4623 -33.5877,0 
0,26.9868 45.1631,0 0,22.9623 -70.8845,0 0,-117.8103"
+           
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:148.699646px;line-height:125%;font-family:'Bitstream
 Vera 
Sans';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1pt;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           id="path15067"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         aria-label="EXTENSIONS"
+         transform="matrix(0.91901991,0,0,0.77325467,3546.302,1136.9622)"
+         
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:82.66666412px;line-height:25px;font-family:'Bitstream
 Vera Sans';-inkscape-font-specification:'Bitstream Vera 
Sans';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.91727346px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         id="flowRoot4500">
+        <path
+           id="path4526"
+           
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Bitstream Vera 
Sans';-inkscape-font-specification:'Bitstream Vera Sans Bold';stroke-width:0.91727346px"
+           d="m 982.90235,283.00912 v 12.7552 q -4.96484,-2.22005 -9.6875,-3.35026 -4.72265,-1.1302 
-8.92057,-1.1302 -5.57031,0 -8.23438,1.53385 -2.66406,1.53385 -2.66406,4.76302 0,2.42187 1.77604,3.79427 
1.81641,1.33203 6.53907,2.30078 l 6.61979,1.33203 q 10.05078,2.01823 14.28906,6.13542 4.23828,4.11719 
4.23828,11.70573 0,9.97005 -5.93359,14.85416 -5.89323,4.84375 -18.04297,4.84375 -5.73177,0 -11.50391,-1.08984 
-5.77213,-1.08984 -11.54427,-3.22917 v -13.11849 q 5.77214,3.06771 11.14063,4.64193 5.40885,1.53386 
10.41406,1.53386 5.08594,0 7.79036,-1.69532 2.70443,-1.69531 2.70443,-4.84375 0,-2.82552 -1.85677,-4.35937 
-1.81641,-1.53386 -7.30599,-2.74479 l -6.01432,-1.33203 q -9.04167,-1.9375 -13.23959,-6.17579 
-4.15755,-4.23828 -4.15755,-11.42317 0,-9.0013 5.8125,-13.84505 5.8125,-4.84375 16.71094,-4.84375 4.96484,0 
10.21224,0.76692 5.24739,0.72657 10.85807,2.22006 z m -111.20442,-1.89714 h 17.35677 l 21.91796,41.33333 v 
-41.33333 h 14.73308 V 341.3763 H 908.34897 L 886.431,30
 0.04297 v 41.33333 h -14.73307 z m -42.70573,10.17188 q -7.10417,0 -11.01954,5.24739 -3.91536,5.2474 
-3.91536,14.77344 0,9.48567 3.91536,14.73307 3.91537,5.2474 11.01954,5.2474 7.14453,0 11.05989,-5.2474 
3.91537,-5.2474 3.91537,-14.73307 0,-9.52604 -3.91537,-14.77344 -3.91536,-5.24739 -11.05989,-5.24739 z m 
0,-11.26172 q 14.53125,0 22.76562,8.3151 8.23437,8.3151 8.23437,22.96745 0,14.61198 -8.23437,22.92708 
-8.23437,8.3151 -22.76562,8.3151 -14.49089,0 -22.76563,-8.3151 -8.23437,-8.3151 -8.23437,-22.92708 
0,-14.65235 8.23437,-22.96745 8.27474,-8.3151 22.76563,-8.3151 z m -58.36721,1.08984 h 15.54036 v 60.26432 h 
-15.54036 z m -17.63933,1.89714 v 12.7552 q -4.96484,-2.22005 -9.6875,-3.35026 -4.72265,-1.1302 
-8.92057,-1.1302 -5.57031,0 -8.23437,1.53385 -2.66407,1.53385 -2.66407,4.76302 0,2.42187 1.77605,3.79427 
1.8164,1.33203 6.53906,2.30078 l 6.61979,1.33203 q 10.05078,2.01823 14.28906,6.13542 4.23828,4.11719 
4.23828,11.70573 0,9.97005 -5.93359,14.85416 -5.89323,4.84375 -18.04
 297,4.84375 -5.73177,0 -11.5039,-1.08984 -5.77214,-1.08984 -11.54427,-3.22917 v -13.11849 q 5.77213,3.06771 
11.14062,4.64193 5.40885,1.53386 10.41406,1.53386 5.08594,0 7.79037,-1.69532 2.70442,-1.69531 
2.70442,-4.84375 0,-2.82552 -1.85677,-4.35937 -1.8164,-1.53386 -7.30599,-2.74479 l -6.01432,-1.33203 q 
-9.04167,-1.9375 -13.23958,-6.17579 -4.15755,-4.23828 -4.15755,-11.42317 0,-9.0013 5.8125,-13.84505 
5.8125,-4.84375 16.71093,-4.84375 4.96485,0 10.21224,0.76692 5.2474,0.72657 10.85807,2.22006 z m 
-111.20441,-1.89714 h 17.35677 l 21.91797,41.33333 v -41.33333 h 14.73307 v 60.26432 h -17.35677 l 
-21.91796,-41.33333 v 41.33333 h -14.73308 z m -56.51042,0 h 41.9388 v 11.74609 H 600.8112 v 11.22136 h 
24.82421 v 11.74609 H 600.8112 v 13.80469 h 27.28645 v 11.74609 h -42.82682 z m -63.53385,0 h 55.54167 v 
11.74609 h -19.98047 v 48.51823 h -15.54036 v -48.51823 h -20.02084 z m -23.00781,29.50651 20.90886,30.75781 
h -16.1862 l -14.08724,-20.58594 -13.96615,20.58594 h -16.26692 l 20.9
 0885,-30.75781 -20.10156,-29.50651 h 16.22656 l 13.19922,19.41536 13.15885,-19.41536 h 16.30729 z m 
-90.09374,-29.50651 h 41.9388 v 11.74609 h -26.39844 v 11.22136 h 24.82422 v 11.74609 h -24.82422 v 13.80469 
h 27.28646 v 11.74609 h -42.82682 z"
+           inkscape:connector-curvature="0" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/sweettooth/templates/base.html b/sweettooth/templates/base.html
index 81346db..b6939b6 100644
--- a/sweettooth/templates/base.html
+++ b/sweettooth/templates/base.html
@@ -1,8 +1,11 @@
+{% load gravatar %}
 <!doctype html>
 <html>
   <head>
     {% load static from staticfiles %}
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" />
     <link rel="stylesheet" href="{% static 'css/style.css' %}" />
     <link rel="shortcut icon" href="{% static 'images/favicon.png' %}" />
     <link rel="alternate" type="application/rss+xml"
@@ -28,55 +31,80 @@
     {% block head %} {% endblock %}
   </head>
   <body>
-    <!-- global gnome.org domain bar -->
-    <div id="global_domain_bar">
-      <div class="maxwidth">
-        <div class="tab">
-          {% spaceless %}
-
-          <a class="root" href="http://www.gnome.org/";>GNOME.org</a>
-          {% if n_unreviewed_extensions %}
-          <a id="unreviewed_counter" href="{% url 'review-list' %}">{{ n_unreviewed_extensions }}</a>
-          {% endif %}
-          {% if request.user.is_authenticated %}
-          <a class="user" href="#">{{ request.user.username }}</a>
-          {% else %}
-          <a class="user" href="{% url 'auth-login' %}">Login</a>
-          {% endif %}
-
-          {% endspaceless %}
-        </div>
-        {% include "usermenu.html" %}
-      </div>
-    </div>
-
-    <!-- header -->
-    <div id="header" class="container_12">
-        <div id="logo" class="grid_3">
-            <h1><a title="GNOME Shell Extensions" href="/"><img src="{% static 
'images/gnome-logo-extensions.png' %}" alt="GNOME Shell Extensions" /></a></h1>
-        </div>
-        <div id="top_bar" class="grid_9">
-            <div class="left">
-                <ul id="globalnav" class="{% block navclass %}{% endblock %}">
-                {% with request.resolver_match.url_name as url_name %}
-                    {% for page in global_menu %}
-                        <li class="{% if url_name == page.id %}current_page_item current-menu-item{% endif 
%}"><a href="{% url page.id %}">{{page.name}}</a></li>
-                    {% endfor %}
-                {% endwith %}
+    <header class="gnome-header">
+        <div class="navbar navbar-fixed-top navbar-default affix-top">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
data-target="#navbar-wrapper" aria-expanded="false">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar top-bar"></span>
+                        <span class="icon-bar middle-bar"></span>
+                        <span class="icon-bar bottom-bar"></span>
+                    </button>
+                    <a class="gnome-navbar-brand" title="GNOME Shell Extensions" href="/"><img src="{% 
static 'images/gnome-extensions.svg' %}" alt="GNOME Shell Extensions" /></a>
+                    <ul class="nav navbar-nav icons visible-xs">
+                        {% if n_unreviewed_extensions %}
+                        <li>
+                            <a id="unreviewed_counter" href="{% url 'review-list' %}">{{ 
n_unreviewed_extensions }}</a>
+                        </li>
+                        {% endif%}
+                        <li class="dropdown">
+                        {% if request.user.is_authenticated %}
+                            <a data-target="#userDropdownMenu" class="dropdown-toggle avatar" 
data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="{% gravatar_url 
request request.user.email %}"></a>
+                        {% else %}
+                            <a href="#userDropdownMenu" class="dropdown-toggle" data-toggle="dropdown" 
role="button" aria-haspopup="true" aria-expanded="false"><img src="{% static 'images/avatar-default.svg' %}" 
alt="GNOME Shell Extensions" /></a>
+                        {% endif %}
+                        </li>
+                    </ul>
+                </div>
+                <ul class="nav navbar-nav navbar-right no-padding">
+                    <li id="userDropdownMenu" class="dropdown">
+                    {% spaceless %}
+                    {% if request.user.is_authenticated %}
+                        <a href="{% url 'auth-profile' user=request.user.username %}" class="dropdown-toggle 
hidden-xs avatar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img 
src="{% gravatar_url request request.user.email %}"></a>
+                    {% else %}
+                        <a href="{% url 'auth-login' %}" class="dropdown-toggle hidden-xs" 
data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Log in <span 
class="caret"></span></a>
+                    {% endif %}
+                    {% endspaceless %}
+                        <ul class="dropdown-menu login_popup_form">
+                            <li>
+                                {% include "usermenu.html" %}
+                            </li>
+                        </ul>
+                    </li>
                 </ul>
-            </div>
-            <div class="right">
-                 {% block search-bar %}
-                {% endblock %}
+                {% if n_unreviewed_extensions %}
+                <div class="nav navbar-nav navbar-right hidden-xs">
+                    <li>
+                        <a id="unreviewed_counter" href="{% url 'review-list' %}">{{ n_unreviewed_extensions 
}}</a>
+                    </li>
+                </div>
+                {% endif %}
+                <div id="navbar-wrapper" class="collapse navbar-collapse">
+                    <ul class="nav navbar-nav">
+                    {% with request.resolver_match.url_name as url_name %}
+                        {% for page in global_menu %}
+                            <li class="{% if url_name == page.id %}active{% endif %}"><a href="{% url 
page.id %}">{{page.name}}</a></li>
+                        {% endfor %}
+                    {% endwith %}
+                    </ul>
+                </div>
             </div>
         </div>
-    </div>
+    </header>
 
     <div class="clearfix"></div>
 
     <div id="container" class="two_columns">
         <div class="container_12">
             <div id="content" class="without_sidebar">
+            <div class="row">
+            <div class="col-sm-12">
+                 {% block search-bar %}
+                {% endblock %}
+            </div>
+            </div>
+                
               <div id="message_container">
                 {% for message in messages %}
                 <p class="message {{ message.tags }}">{{ message }}</p>
@@ -139,5 +167,6 @@
         <div class="clear"></div>
       </div>
     </div>
+    <script src="{% static 'js/bootstrap.min.js' %}"></script>
   </body>
 </html>
diff --git a/sweettooth/templates/usermenu.html b/sweettooth/templates/usermenu.html
index 5805db2..a2526c2 100644
--- a/sweettooth/templates/usermenu.html
+++ b/sweettooth/templates/usermenu.html
@@ -1,13 +1,10 @@
 {% if request.user.is_authenticated %}
-<div class="user_settings user_popup">
-  {% load gravatar %}
-  <a class="avatar" href="{% url 'auth-profile' user=request.user.username %}" title="Profile">
-    <img src="{% gravatar_url request request.user.email %}">
-  </a>
-  <ul>
-    <li><a class="text" href="{% url 'auth-settings' user=request.user.username %}">Website Settings</a></li>
-    <li><a class="text" href="{% url 'auth-logout' %}">Log Out</a></li>
-  </ul>
+<div class="row">
+    <div class="col-sm-12">
+        <p><a class="btn btn-link no-decoration" href="{% url 'auth-profile' user=request.user.username 
%}">User Profile</a></p>
+        <p><a class="btn btn-link no-decoration" href="{% url 'auth-settings' user=request.user.username 
%}">User Settings</a></p>
+        <p><a class="btn btn-link no-decoration" href="{% url 'auth-logout' %}">Log out</a></p>
+    </div>
 </div>
 {% else %}
 {% include "registration/login_popup_form.html" %}



[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]