diff mbox

[Branch,~linaro-validation/lava-server/trunk] Rev 292: Fix top menu alignment/rendering.

Message ID 20111129093714.13982.77984.launchpad@ackee.canonical.com
State Accepted
Headers show

Commit Message

Zygmunt Krynicki Nov. 29, 2011, 9:37 a.m. UTC 
------------------------------------------------------------
revno: 292
committer: Zygmunt Krynicki <zygmunt.krynicki@linaro.org>
branch nick: lava-server
timestamp: Fri 2011-11-18 14:57:11 +0100
message:
  Fix top menu alignment/rendering.
  
  I tried a lot of things to make this work. Currently the main panel is a flex
  container, each item is wrapped in a div box that can optionally flex to fill
  the space (like the spacer between menu items and indicators). The actual text
  of the menu is rendered as a table-cell to get vertical-align to work sensibly.
  The innermost item is also sized with height: 80px to make the menu wide enough
  and look nice. My attempts to use min-height to avoid overflow failed as this
  does not seem to work with everything else.
  
  Testing done in Firefox 7 and Chromium 15 on Ubuntu, pending testing on other
  systems (where fonts will differ, among others) and mobile browsers.
modified:
  lava_server/htdocs/css/default.css
  lava_server/templates/layouts/content.html


--
lp:lava-server
https://code.launchpad.net/~linaro-validation/lava-server/trunk

You are subscribed to branch lp:lava-server.
To unsubscribe from this branch go to https://code.launchpad.net/~linaro-validation/lava-server/trunk/+edit-subscription
diff mbox

Patch

=== modified file 'lava_server/htdocs/css/default.css'
--- lava_server/htdocs/css/default.css	2011-11-10 12:26:47 +0000
+++ lava_server/htdocs/css/default.css	2011-11-18 13:57:11 +0000
@@ -72,32 +72,29 @@ 
 }
 
 #lava-panel .lava-panel-element {
-  display: block;
-  line-height: 18px;
-  min-height: 18px;
-  padding: 10px 1ex;
+}
+
+#lava-panel .lava-panel-element .lava-panel-menu-text {
+  display: table-cell;
+  vertical-align: middle;
+  padding: 1ex;
+  height: 50px;
+}
+
+#lava-panel .lava-panel-element:hover {
+  border-color: white;
+}
+
+#lava-panel .lava-panel-element.lava-indicator {
+  box-pack: end;
+  -moz-box-pack: end;
+  -webkit-box-pack: end;
 }
 
 #lava-panel .lava-panel-element.has-menu {
   cursor: pointer;
 }
 
-/*
-#lava-panel .lava-panel-element:hover {
-  background-color: #444;
-  color: #000;
-}
-
-#lava-panel a.lava-panel-element:hover {
-  color: #a1cd41;
-}
-
-#lava-panel .lava-panel-element.no-hover:hover {
-  background-color: inherit;
-  color: inherit;
-}
-*/
-
 #lava-panel .lava-panel-element.active {
   background-image: linear-gradient(bottom, rgb(161,205,65) 0%, rgb(0,0,0) 20%);
   background-image: -o-linear-gradient(bottom, rgb(161,205,65) 0%, rgb(0,0,0) 20%);
@@ -114,7 +111,6 @@ 
   color: white;
 }
 
-
 #lava-panel a {
   color: inherit;
   text-decoration: none;
@@ -135,7 +131,7 @@ 
 
   position: absolute;
   left: 0;
-  top: 35px;
+  top: 50px;
 
   background: black;
   border: 2px solid #a1cd41;
@@ -177,6 +173,7 @@ 
 
 #lava-user-indicator .sign-in-hint {
   font-size: 8pt;
+  color: #888;
 }
 
 /* AJAX indicator */

=== modified file 'lava_server/templates/layouts/content.html'
--- lava_server/templates/layouts/content.html	2011-11-18 11:24:38 +0000
+++ lava_server/templates/layouts/content.html	2011-11-18 13:57:11 +0000
@@ -18,7 +18,9 @@ 
     {% block menu %}
     <!-- menu -->
     {% for menu in lava.menu_list %}
-    <a class="lava-panel-element{% if menu.sub_menu %} has-menu{% endif %}" href="{{ menu.url }}">{{ menu.label }}{% if menu.sub_menu %} &#x25BE;{% endif %}</a>
+    <div class="lava-panel-element{% if menu.sub_menu %} has-menu{% endif %}">
+      <a class="lava-panel-menu-text" href="{{ menu.url }}">{{ menu.label }}{% if menu.sub_menu %} &#x25BE;{% endif %}</a>
+    </div>
     {% if menu.sub_menu %}
     <ul class="lava-panel-menu">
     {% for sub_menu in menu.sub_menu %}
@@ -35,7 +37,9 @@ 
 
     <!-- ajax indicator -->
     <div class="lava-panel-element lava-indicator no-hover" id="lava-ajax-indicator">
-      <img src="{{ STATIC_URL }}lava-server/images/ajax-loader.gif" alt="AJAX progress indicator"/>
+      <div class="lava-panel-menu-text">
+        <img src="{{ STATIC_URL }}lava-server/images/ajax-loader.gif" alt="AJAX progress indicator"/>
+      </div>
     </div>
     <script type="text/javascript">
       $(document).ajaxStart(function() {
@@ -55,17 +59,19 @@ 
 
     <!-- user indicator -->
     <div class="lava-indicator lava-panel-element {% if user.is_authenticated %}has-menu{% endif %}" id="lava-user-indicator">
-      <img 
-      src="{{ STATIC_URL }}lava-server/images/avatar-default-symbolic.svg"
-      width="18" height="18"/>
-      {% if user.is_authenticated %}
-      <a href="{% url lava.me %}" class="username">{{user.get_full_name|default:user.username}} &#x25BE;</a>
-      {% else %}
-      <a href="{% url django.contrib.auth.views.login %}" class="username"
-        >{% trans "Guest" %}</a>
-      <br/>
-      <span class="sign-in-hint">Click to sign-in</span>
-      {% endif %}
+      <div class="lava-panel-menu-text">
+        <img 
+        src="{{ STATIC_URL }}lava-server/images/avatar-default-symbolic.svg"
+        width="18" height="18"/>
+        {% if user.is_authenticated %}
+        <a href="{% url lava.me %}" class="username">{{user.get_full_name|default:user.username}} &#x25BE;</a>
+        {% else %}
+        <a href="{% url django.contrib.auth.views.login %}" class="username"
+          >{% trans "Guest" %}</a>
+        <br/>
+        <span class="sign-in-hint">Click to sign-in</span>
+        {% endif %}
+      </div>
     </div>
     {% if user.is_authenticated %}
     <ul class="lava-panel-menu">