=== modified file 'lava_server/htdocs/css/default.css'
@@ -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'
@@ -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
});
+
});
</script>