Merge pull request #579 from Martii/fixFooterBlowoutLayoutOnXSviews

Use short OUJS name in footer with \*-xs-\* modes

Auto-merge

Author: Martii

public/css/common.css

@@ -3,10 +3,7 @@ html, body {
 }
 
 @media (max-width: 767px) {
-  span.visible-xs {
-    display: inline !important;
-  }
-  ul.nav > li > a > span.visible-xs + i.fa {
+  ul.nav > li > a > span.visible-xs-inline + i.fa {
     float: right;
     line-height: 20px;
   }

views/includes/footer.html

@@ -3,7 +3,7 @@
     <div class="container-fluid">
       <div class="navbar-header">
         <button type="button" data-toggle="collapse" data-target=".navbar-collapse-bottom" class="navbar-toggle" onclick="$('html, body').animate({scrollTop: $(document).height()}, 'slow')"><i class="fa fa-bars"></i></button>
-        <a href="https://github.com/OpenUserJs" class="navbar-brand">&copy; 2014+ OpenUserJS Group</a>
+        <a href="https://github.com/OpenUserJs" class="navbar-brand">&copy; 2014+ <span class="hidden-xs">OpenUserJS</span><span class="visible-xs-inline">OUJS</span> Group</a>
       </div>
       <div class="navbar-collapse navbar-collapse-bottom collapse">
         <ul class="nav navbar-nav navbar-right">

views/includes/header.html

@@ -6,21 +6,21 @@
     </div>
     <div class="navbar-collapse navbar-collapse-top collapse">
       <ul class="nav navbar-nav navbar-right">
-        <li><a href="/" title="Scripts"><span class="visible-xs"><i class="fa fa-file-code-o"></i> </span>Scripts</a></li>
-        <li><a href="/?library=true" title="Script Libraries"><span class="visible-xs"><i class="fa fa-file-excel-o"></i> </span>Libraries</a></li>
-        <li><a href="/groups" title="Script Groups"><span class="visible-xs"><i class="fa fa-folder"></i> </span>Groups</a></li>
-        <li><a href="/forum"><span class="visible-xs"><i class="fa fa-comment"></i> </span>Discussions</a></li>
-        <li><a href="/users"><span class="visible-xs"><i class="fa fa-user"></i> </span>Users</a></li>
+        <li><a href="/" title="Scripts"><span class="visible-xs-inline"><i class="fa fa-file-code-o"></i> </span>Scripts</a></li>
+        <li><a href="/?library=true" title="Script Libraries"><span class="visible-xs-inline"><i class="fa fa-file-excel-o"></i> </span>Libraries</a></li>
+        <li><a href="/groups" title="Script Groups"><span class="visible-xs-inline"><i class="fa fa-folder"></i> </span>Groups</a></li>
+        <li><a href="/forum"><span class="visible-xs-inline"><i class="fa fa-comment"></i> </span>Discussions</a></li>
+        <li><a href="/users"><span class="visible-xs-inline"><i class="fa fa-user"></i> </span>Users</a></li>
         {{#authedUser}}
         {{#authedUser.isMod}}
-        <li><a href="/mod" title="Moderation"><i class="fa fa-eye"></i><span class="visible-xs"> Moderation</span></a></li>
+        <li><a href="/mod" title="Moderation"><i class="fa fa-eye"></i><span class="visible-xs-inline"> Moderation</span></a></li>
         {{/authedUser.isMod}}
         {{#authedUser.isAdmin}}
-        <li><a href="/admin" title="Administration"><i class="fa fa-coffee"></i><span class="visible-xs"> Admin</span></a></li>
+        <li><a href="/admin" title="Administration"><i class="fa fa-coffee"></i><span class="visible-xs-inline"> Admin</span></a></li>
         {{/authedUser.isAdmin}}
-        <!-- <li><a href="#" class="disabled"><i class="fa fa-envelope-o"></i> 0<span class="visible-xs"> Unread Messages</span></a></li> -->
+        <!-- <li><a href="#" class="disabled"><i class="fa fa-envelope-o"></i> 0<span class="visible-xs-inline"> Unread Messages</span></a></li> -->
         <li><a href="{{authedUser.userPageUrl}}" title="My profile">{{authedUser.name}}</a></li>
-        <li><a href="/logout" title="Logout"><span class="visible-xs">Logout</span><i class="fa fa-sign-out"></i></a></li>
+        <li><a href="/logout" title="Logout"><span class="visible-xs-inline">Logout</span><i class="fa fa-sign-out"></i></a></li>
         {{/authedUser}}
         {{^authedUser}}
         <li><a href="/register">Login / Sign Up <i class="fa fa-sign-in"></i></a></li>

views/includes/scriptPageHeader.html

@@ -21,8 +21,8 @@ <h2 class="page-heading">
 <nav class="navbar navbar-default navbar-static-top" role="navigation">
   <div class="navbar-header">
     <button type="button" data-toggle="collapse" data-target="#content-navbar" class="navbar-toggle"><i class="fa fa-bars"></i></button>
-    <div class="navbar-brand visible-xs"></div> {{! Cheating at padding. }}
-    <p class="navbar-text visible-xs"><i class="fa fa-fw fa-signal"></i> <b>Installs:</b> {{script.installs}}</p>
+    <div class="navbar-brand visible-xs-block"></div> {{! Cheating at padding. }}
+    <p class="navbar-text visible-xs-block"><i class="fa fa-fw fa-signal"></i> <b>Installs:</b> {{script.installs}}</p>
   </div>
   <div class="navbar-collapse collapse in" id="content-navbar">
     <ul class="nav navbar-nav">