From patchwork Tue Nov 29 09:37:17 2011 Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit X-Patchwork-Submitter: Zygmunt Krynicki X-Patchwork-Id: 5352 Return-Path: X-Original-To: patchwork@peony.canonical.com Delivered-To: patchwork@peony.canonical.com Received: from fiordland.canonical.com (fiordland.canonical.com [91.189.94.145]) by peony.canonical.com (Postfix) with ESMTP id 6B06423E17 for ; Tue, 29 Nov 2011 09:37:27 +0000 (UTC) Received: from mail-lpp01m010-f52.google.com (mail-lpp01m010-f52.google.com [209.85.215.52]) by fiordland.canonical.com (Postfix) with ESMTP id 45B8CA18060 for ; Tue, 29 Nov 2011 09:37:27 +0000 (UTC) Received: by mail-lpp01m010-f52.google.com with SMTP id h2so1233343laa.11 for ; Tue, 29 Nov 2011 01:37:27 -0800 (PST) Received: by 10.152.162.10 with SMTP id xw10mr30690980lab.12.1322559446924; Tue, 29 Nov 2011 01:37:26 -0800 (PST) X-Forwarded-To: linaro-patchwork@canonical.com X-Forwarded-For: patch@linaro.org linaro-patchwork@canonical.com Delivered-To: patches@linaro.org Received: by 10.152.41.198 with SMTP id h6cs32674lal; Tue, 29 Nov 2011 01:37:26 -0800 (PST) Received: by 10.180.85.162 with SMTP id i2mr9773828wiz.22.1322559437681; Tue, 29 Nov 2011 01:37:17 -0800 (PST) Received: from indium.canonical.com (indium.canonical.com. [91.189.90.7]) by mx.google.com with ESMTPS id fw15si6497571wbb.73.2011.11.29.01.37.17 (version=TLSv1/SSLv3 cipher=OTHER); Tue, 29 Nov 2011 01:37:17 -0800 (PST) Received-SPF: pass (google.com: best guess record for domain of bounces@canonical.com designates 91.189.90.7 as permitted sender) client-ip=91.189.90.7; Authentication-Results: mx.google.com; spf=pass (google.com: best guess record for domain of bounces@canonical.com designates 91.189.90.7 as permitted sender) smtp.mail=bounces@canonical.com Received: from ackee.canonical.com ([91.189.89.26]) by indium.canonical.com with esmtp (Exim 4.71 #1 (Debian)) id 1RVK7p-0007IC-Cy for ; Tue, 29 Nov 2011 09:37:17 +0000 Received: from ackee.canonical.com (localhost [127.0.0.1]) by ackee.canonical.com (Postfix) with ESMTP id 5A7B9E15CF for ; Tue, 29 Nov 2011 09:37:17 +0000 (UTC) MIME-Version: 1.0 X-Launchpad-Project: lava-server X-Launchpad-Branch: ~linaro-validation/lava-server/trunk X-Launchpad-Message-Rationale: Subscriber X-Launchpad-Branch-Revision-Number: 307 X-Launchpad-Notification-Type: branch-revision To: Linaro Patch Tracker From: noreply@launchpad.net Subject: [Branch ~linaro-validation/lava-server/trunk] Rev 307: Adjust the menu bar. Message-Id: <20111129093717.13982.59152.launchpad@ackee.canonical.com> Date: Tue, 29 Nov 2011 09:37:17 -0000 Reply-To: noreply@launchpad.net Sender: bounces@canonical.com Errors-To: bounces@canonical.com Precedence: bulk X-Generated-By: Launchpad (canonical.com); Revision="14399"; Instance="launchpad-lazr.conf" X-Launchpad-Hash: 1880361c32e48facbe1f829c40f64bb8b3642ef6 ------------------------------------------------------------ revno: 307 committer: Zygmunt Krynicki branch nick: lava-server timestamp: Tue 2011-11-22 17:57:13 +0100 message: Adjust the menu bar. Another adjustment, apart from slight visual changes to make it more readable there are important bug fixes in the menu javascript code. It should no longer overflow the page and should behave properly on both sides of the screen. There are debugging console.log() messages everywhere that have to be removed but I wanted to keep them in this patch. 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 === modified file 'lava_server/htdocs/css/default.css' --- lava_server/htdocs/css/default.css 2011-11-18 15:38:45 +0000 +++ lava_server/htdocs/css/default.css 2011-11-22 16:57:13 +0000 @@ -60,33 +60,27 @@ #lava-panel { background: black; color: #cccccc; + font-family: 'Cantarell', sans-serif; font-weight: bold; font-size: 14px; - border-bottom: 2px solid #a1cd41; - width: 100%; + /* + border-bottom: 1px solid #333; + */ display: box; display: -moz-box; display: -webkit-box; + + width: 100%; + position: relative; + z-index: 1000; } #lava-panel.active { - border-color: white; - text-shadow: 0 0 2pt black; - background-image: linear-gradient(bottom, rgb(158,158,158) 0%, rgb(0,0,0) 20%); - background-image: -o-linear-gradient(bottom, rgb(158,158,158) 0%, rgb(0,0,0) 20%); - background-image: -moz-linear-gradient(bottom, rgb(158,158,158) 0%, rgb(0,0,0) 20%); - background-image: -webkit-linear-gradient(bottom, rgb(158,158,158) 0%, rgb(0,0,0) 20%); - background-image: -ms-linear-gradient(bottom, rgb(158,158,158) 0%, rgb(0,0,0) 20%); - background-image: -webkit-gradient( - linear, - left bottom, - left top, - color-stop(0, rgb(158,158,158)), - color-stop(0.2, rgb(0,0,0)) - ); + background-color: white; + color: black; } #lava-panel .lava-panel-element { @@ -95,9 +89,7 @@ #lava-panel .lava-panel-element .lava-panel-menu-text { display: table-cell; vertical-align: middle; - padding: 1ex; - height: 40px; - max-height: 50px; + padding: 1.2ex 1ex; } #lava-panel .lava-panel-element:hover { @@ -116,6 +108,7 @@ #lava-panel .lava-panel-element.active { color: white; + background: #0084b0; } #lava-panel a { @@ -138,24 +131,27 @@ position: absolute; left: 0; - top: 50px; - - background: #9e9e9e; - color: white; - border: 2px solid white; - border-top: none; + top: -1000px; + + background: white; + color: black; + + border: 1px solid #BBB; + border-radius: 0 0 3px 3px; margin: 0; - padding: 0; - display: none; - box-shadow: 2pt 2pt 2pt rgba(0, 0, 0, 0.4); + padding: 3px 0; + box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); + + z-index: 1000; } #lava-panel ul.lava-panel-menu li { margin: 0; padding: 0; - font-size: 9pt; - font-weight: normal; + font-size: 10pt; + font-weight: bold; + text-shadow: 0 0 2pt #CCC; } #lava-panel ul.lava-panel-menu li a { @@ -164,8 +160,9 @@ } #lava-panel ul.lava-panel-menu li a:hover { - background-color: #757575; color: white; + background: #0084b0; + text-shadow: none; } /* User indicator */ @@ -233,6 +230,7 @@ width: auto; } + #lava-around-content:before { display: block; content: " "; @@ -266,9 +264,11 @@ background-color: white; border-radius: 8px; -moz-border-radius: 8px; + border: 10pt dashed yellow, 10pt dashed black; color: #444; margin: 1ex 0 75px 0; overflow-x: auto; + box-shadow: 3pt 3pt 5pt rgba(0,0,0, 0.4); } === modified file 'lava_server/templates/layouts/content.html' --- lava_server/templates/layouts/content.html 2011-11-18 15:36:54 +0000 +++ lava_server/templates/layouts/content.html 2011-11-22 16:57:13 +0000 @@ -98,11 +98,13 @@ function close_current_menu() { if (current_menu) { + console.log("--- closing current menu ---"); current_menu.removeClass("active"); current_menu = null; } if (current_sub_menu) { - current_sub_menu.slideUp("fast"); + console.log("--- closing current sub menu ---"); + current_sub_menu.offset({top: -1000, left: 0}); current_sub_menu = null; } } @@ -128,10 +130,14 @@ // Clicking on a panel element with a menu does stuff $('.lava-panel-element.has-menu') .click(function(event) { + + console.log("----------------------"); + // Enter hover-mode menu_should_open = true; $("#lava-panel").addClass("active"); - if ($(this).next(".lava-panel-menu").is(":visible")) { + + if ($(this).next(".lava-panel-menu").position().top > -500) { // Clicking on a menu with a visible sub-menu just triggers the link return; } @@ -143,43 +149,72 @@ var self = $(this); current_menu = self; current_sub_menu = self.next(".lava-panel-menu"); - + + // Add an 'active' class to the current menu, this showes up as a nice gradient + current_menu.addClass("active"); + // The top absolute position of the menu. // Defaults to the bottom border of the panel - // with the border size (2px) substracted to make - // both borders overlap and look nicer - var _top = $("#lava-panel").outerHeight(false) - 2; + var _top = $("#lava-panel").outerHeight(true); + _top += 1; // The left absolute position of the menu. // defaults to the offset of the indicator span - var _left = $(this).offset().left; - - // Same with the right menu, the right margin - var _width = $(this).width(); + var _left = current_menu.offset().left; + console.log("_left is ", _left); + + // Same with the right menu, the right margin + var _menu_width = current_menu.width(); + console.log("_menu_width is ", _menu_width); + + // Same with the right menu, the right margin + var _sub_menu_width = current_sub_menu.width(); + console.log("_sub_menu_width is ", _sub_menu_width); // Adjust the width to consider the border of the pop-up menu. - var width_adj = current_sub_menu.outerWidth() - current_sub_menu.width(); - _width -= width_adj; - - // Don't set the width if it would make the menu too short. - if (_width < current_sub_menu.width()) { - _width = null; - } - - // Add an 'active' class to the current menu, this showes up as a nice gradient - current_menu - .addClass("active"); - // Repositiobn and slide down the sub menu + var _sub_menu_width_adj = current_sub_menu.outerWidth() - current_sub_menu.width(); + console.log("_sub_menu_width_adj is ", _sub_menu_width_adj); + + // Take border width into account + if (_sub_menu_width_adj != 0) { + _sub_menu_width -= _sub_menu_width_adj; + console.log("_sub_menu_width changes to ", _sub_menu_width); + } + + // Check how much space we have left + var _space_left = $("#lava-panel").width() - _left - current_sub_menu.outerWidth(true); + console.log("_space left is ", _space_left); + + // If we ran out of space then let's move the whole thing to the left + // This is only needed for the user indicator. + if (_space_left < 0) { + _left += _space_left; + _sub_menu_width += _sub_menu_width_adj; + console.log( + "sub-menu would go off-screen", + " _left changes to ", _left, + " _sub_menu_width changes to ", _sub_menu_width + ); + } + + // Don't set the width if it would make the menu too narrow. + if (_sub_menu_width < _menu_width) { + _sub_menu_width = _menu_width - _sub_menu_width_adj; + console.log("sub-menu is too narrow, _sub_menu_width changes to ", _menu_width); + } + + // Place & resize the sub menu + console.log("Setting position to ", {top: _top, left: _left}); + console.log("Setting width to ", _sub_menu_width); current_sub_menu - .css({ - top: _top, - left: _left, - width: _width - }) - .slideDown("fast") - .show() + .width(_sub_menu_width) + .offset({left: _left, top: _top}) .bind('mouseleave', function() { close_current_menu(); }); + // Slide it down + // .slideDown("fast") + // And bind a mouse leave event to close it when }); + });