#487: NOSCRIPT navbar and footer

misago/static/misago/css/_misago/footer.less

@@ -0,0 +1,109 @@
+//
+// Forum Footer
+// --------------------------------------------------
+
+
+//== Footer container
+//
+//**
+.main-footer {
+  margin-top: @line-height-computed * 1.5;
+  margin-bottom: @line-height-computed * 1.5;
+
+  text-align: center;
+}
+
+
+//== Footer menu
+//
+//**
+.main-footer {
+  .footer-nav {
+    margin: 0px;
+    overflow: auto;
+    padding: 0px;
+
+    text-align: center;
+
+    li {
+      display: inline-block;
+      padding: @padding-large-vertical @padding-xs-horizontal;
+      padding-bottom: @padding-small-vertical;
+
+      a {
+        &:link, &:visited {
+          color: @footer-link-color;
+          text-decoration: none;
+        }
+
+        &:hover {
+          color: @footer-link-hover-color;
+          text-decoration: underline;
+        }
+
+        &:active {
+          color: @footer-link-active-color;
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
+
+//== Misago branding
+//
+//**
+.main-footer {
+  .misago-branding {
+    a {
+      display: inline-block;
+
+      color: @text-color;
+      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      font-size: @misago-branding-size;
+
+      .brand-border {
+        background: @text-color;
+        border: none;
+        border-radius: @misago-branding-size * 0.15;
+        display: inline-block;
+        margin-right: @misago-branding-size * 0.1;
+        position: relative;
+        top: @misago-branding-size * 0.18;
+        overflow: hidden;
+        width: @misago-branding-size + 3px;
+        height: @misago-branding-size + 3px;
+
+        &>span {
+          display: inline-block;
+          position: absolute;
+          bottom: -20%;
+          right: -18%;
+          .rotate(-45deg);
+
+          color: @body-bg;
+          font-size: @misago-branding-size * 1.2;
+          font-weight: bold;
+        }
+      }
+
+      .subscript {
+        display: inline-block;
+        position: relative;
+        bottom: (@misago-branding-size  - (@misago-branding-size * 0.6)) / 2 - 1px;
+
+        font-size: @misago-branding-size * 0.6;
+      }
+
+      &, &:link, &:visited {
+        .opacity(0.4);
+      }
+
+      &:active, &:hover {
+        .opacity(0.8);
+
+        text-decoration: none;
+      }
+    }
+  }
+}

misago/static/misago/css/misago/footer.less

@@ -1,59 +1,32 @@
 //
-// Forum Footer
+// Misago Footer
 // --------------------------------------------------
 
 
-//== Footer container
-//
-//**
-.main-footer {
-  margin-top: @line-height-computed * 1.5;
-  margin-bottom: @line-height-computed * 1.5;
+.site-footer {
+  margin-top: @line-height-computed;
 
+  color: @footer-color;
   text-align: center;
-}
-
 
-//== Footer menu
-//
-//**
-.main-footer {
   .footer-nav {
-    margin: 0px;
-    overflow: auto;
-    padding: 0px;
-
-    text-align: center;
-
-    li {
-      display: inline-block;
-      padding: @padding-large-vertical @padding-xs-horizontal;
-      padding-bottom: @padding-small-vertical;
-
-      a {
-        &:link, &:visited {
-          color: @footer-link-color;
-          text-decoration: none;
-        }
+    a, a:link, a:visited {
+      color: @footer-link-color;
+    }
 
-        &:hover {
-          color: @footer-link-hover-color;
-          text-decoration: underline;
-        }
+    a:hover, a:focus {
+      color: @footer-link-hover-color;
+    }
 
-        &:active {
-          color: @footer-link-active-color;
-          text-decoration: underline;
-        }
-      }
+    a:active {
+      color: @footer-link-active-color;
     }
   }
-}
 
-//== Misago branding
-//
-//**
-.main-footer {
+  .noscript-message {
+    color: @footer-noscript-color;
+  }
+
   .misago-branding {
     a {
       display: inline-block;
@@ -62,6 +35,14 @@
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
       font-size: @misago-branding-size;
 
+      .subscript {
+        display: inline-block;
+        position: relative;
+        bottom: (@misago-branding-size  - (@misago-branding-size * 0.75)) / 2 - 1px;
+
+        font-size: @misago-branding-size;
+      }
+
       .brand-border {
         background: @text-color;
         border: none;
@@ -87,16 +68,8 @@
         }
       }
 
-      .subscript {
-        display: inline-block;
-        position: relative;
-        bottom: (@misago-branding-size  - (@misago-branding-size * 0.6)) / 2 - 1px;
-
-        font-size: @misago-branding-size * 0.6;
-      }
-
       &, &:link, &:visited {
-        .opacity(0.4);
+        .opacity(0.3);
       }
 
       &:active, &:hover {
@@ -106,4 +79,23 @@
       }
     }
   }
+
+  /* Small devices (tablets, 768px and up) */
+  @media (min-width: @screen-sm-min) {
+    text-align: left;
+
+    .first-row {
+      overflow: auto;
+
+      &>* {
+        float: left;
+      }
+
+      .noscript-message {
+        margin-left: @line-height-computed;
+      }
+    }
+  }
 }
+
+

misago/static/misago/css/misago/misago.less

@@ -0,0 +1,3 @@
+// Components
+@import "footer.less";
+@import "navbar.less";

misago/static/misago/css/misago/navbar.less

@@ -0,0 +1,52 @@
+//
+// Misago Navbar
+// --------------------------------------------------
+
+
+// Navbar brand
+.navbar-primary {
+  .navbar-brand {
+    font-size: @font-size-large * 1.2;
+
+    img {
+      border-radius: @border-radius-small;
+      display: inline-block;
+      height: @navbar-height - @navbar-padding-vertical * 2 + 3px;
+
+      position: relative;
+      bottom: 2px;
+    }
+  }
+}
+
+
+// Navbar nav
+.navbar-primary {
+  .navbar-nav {
+
+    // Make icons bigger
+    &>li {
+      &>a {
+        .fa, .glyphicon {
+          position: relative;
+          top: (@font-size-large - @font-size-base) / 2 + 1px;
+
+          font-size: @font-size-large;
+        }
+      }
+    }
+
+    // Uncollapse the nav
+    float: right;
+    margin: 0;
+
+    > li {
+      float: left;
+      > a {
+        padding-top:    @navbar-padding-vertical;
+        padding-bottom: @navbar-padding-vertical;
+      }
+    }
+
+  }
+}

misago/static/misago/css/ranks.less

@@ -1,43 +1,3 @@
 //
 // Ranks flavours
 // --------------------------------------------------
-
-
-// Forum team
-//
-//==
-.user-profile {
-  &.profile-team {
-    .user-title {
-      a, a:link, a:visited, span {
-        background-color: fadeOut(@brand-accent, 10%);
-      }
-
-      a:hover {
-        background: @brand-accent;
-      }
-
-      a:active {
-        background: darken(@brand-accent, 15%);
-      }
-    }
-  }
-}
-
-
-.ranks-online {
-  .rank-online.rank-team {
-    small {
-      background-color: fadeOut(@brand-accent, 10%);
-    }
-  }
-}
-
-
-.posts-list {
-  .post.rank-team {
-    .user-rank {
-      background-color: fadeOut(@brand-accent, 10%);
-    }
-  }
-}

misago/templates/misago/base.html

@@ -23,13 +23,17 @@
   <body>
 
     <noscript>
+      {% include "misago/navbar.html" %}
+
       {% block content %}{% endblock content %}
+
+      {% include "misago/footer.html" %}
     </noscript>
 
     <section id="main"></section>
 
-    {% javascript 'misago_lib' %}
-    {% javascript 'misago' %}
+    {% javascript "misago_lib" %}
+    {% javascript "misago" %}
 
   </body>
 </html>

misago/templates/misago/footer.html

@@ -0,0 +1,42 @@
+{% load i18n %}
+<footer class="site-footer">
+  <div class="container">
+
+    <div class="first-row">
+
+      <ul class="list-inline footer-nav">
+        <li>
+          <a href="{% url 'misago:terms_of_service' %}">{% trans "Terms of service" %}</a>
+        </li>
+        <li>
+          <a href="{% url 'misago:privacy_policy' %}">{% trans "Privacy policy" %}</a>
+        </li>
+        {% if misago_settings.terms_of_service or misago_settings.terms_of_service_link %}
+        <li>
+          <a href="{% url 'misago:terms_of_service' %}">{% trans "Terms of service" %}</a>
+        </li>
+        {% endif %}
+
+        {% if misago_settings.privacy_policy or misago_settings.privacy_policy_link %}
+        <li>
+          <a href="{% url 'misago:privacy_policy' %}">{% trans "Privacy policy" %}</a>
+        </li>
+        {% endif %}
+      </ul>
+
+      <p class="noscript-message text-warning">
+        <span class="fa fa-exclamation-triangle fa-lg"></span>
+        {% trans "For complete experience please enable JavaScript." %}
+      </p>
+
+    </div>
+
+    <div class="misago-branding">
+      <a href="http://misago-project.org">
+        <span class="subscript">powered by</span>
+        <span class="brand-border"><span>m</span></span><span class="subscript">isago</span>
+      </a>
+    </div>
+
+  </div>
+</footer>

misago/templates/misago/navbar.html

@@ -0,0 +1,11 @@
+{% load staticfiles %}
+<nav class="navbar navbar-primary navbar-default navbar-static-top" role="navigation">
+  <div class="container">
+
+    <a class="navbar-brand" href="{% url 'misago:index' %}">
+      <img src="{% static 'misago/img/misago_logo.png' %}" alt="">
+      <span>{{ misago_settings.forum_name }}</span>
+    </a>
+
+  </div><!-- /.container -->
+</nav>