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

* Fixes a blowout of the design layout in the footer with extremely small viewport * Removed overloaded rule in `.../common.css` due to deprecation... See [here](http://getbootstrap.com/css/#responsive-utilities-classes)... post #379 * Manually change all grepped `visible-` to appropriate matches
OpenUserJS · Feb 9, 2015 · f252b39 · f252b39
1 parent 3caf899
commit f252b39
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 16 deletions.
diff --git a/public/css/common.css b/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;
   }

diff --git a/views/includes/footer.html b/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">

diff --git a/views/includes/header.html b/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>

diff --git a/views/includes/scriptPageHeader.html b/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">