Using percentage sizes for footer information with ellipses overflow.

Also added title attributes so on-hover shows full string.
jaanek · Nov 5, 2015 · 224259b · 224259b
1 parent 041491e
commit 224259b
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 26 deletions.
diff --git a/web/assets/stylesheets/application.css b/web/assets/stylesheets/application.css
@@ -713,38 +713,37 @@ div.interval-slider input {
     position: relative;
     top: auto;
   }
-}
 
-.redis-url, .redis-namespace {
-  overflow: hidden;
-  white-space: nowrap;
+  .navbar-fixed-bottom .navbar-text {
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: normal;
+  }
 }
 
 @media (min-width: 768px) {
-  .redis-url {
-    max-width: 200px;
+  .navbar-fixed-bottom .navbar-text {
+    max-width: 22.5%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-left: 3%;
+    margin-right: 0;
   }
-
-  .redis-namespace {
-    max-width: 150px;
+  .navbar-fixed-bottom li:first-child .navbar-text {
+    margin-left: 0;
   }
-}
 
-@media (min-width: 992px) {
-  .redis-url {
-    max-width: 390px;
+  .navbar-fixed-bottom .navbar-text.redis-url {
+    max-width: 27%;
   }
 
-  .redis-namespace {
-    max-width: 300px;
+  .navbar-fixed-bottom .navbar-text.redis-namespace {
+    max-width: 18%;
   }
-}
-@media (min-width: 1200px) {
-  .redis-url {
-    max-width: 480px;
-  }
-
-  .redis-namespace {
-    max-width: 350px;
+  .navbar-fixed-bottom .navbar-text.product-version {
+    color: white;
   }
 }
diff --git a/web/views/_footer.erb b/web/views/_footer.erb
@@ -3,17 +3,17 @@
     <div class="container text-center">
         <ul class="nav">
           <li>
-            <p class="navbar-text" style="color:white;"><%= product_version %></p>
+            <p class="navbar-text product-version" title="<%= h(product_version) %>"><%= product_version %></p>
           </li>
           <li>
-            <p class="navbar-text redis-url">Redis: <%= redis_connection %></p>
+            <p class="navbar-text redis-url" title="<%= h(redis_connection)%>">Redis: <%= redis_connection %></p>
           </li>
           <li>
             <p class="navbar-text"><%= t('Time') %>: <%= Time.now.utc.strftime('%H:%M:%S UTC') %></p>
           </li>
           <% if namespace %>
               <li>
-                <p class="navbar-text redis-namespace"><%= t('Namespace') %>: <%= namespace %></p>
+                <p class="navbar-text redis-namespace" title="<%= h(namespace)%>" ><%= t('Namespace') %>: <%= namespace %></p>
               </li>
           <% end %>
         </ul>