sub menu popup in place

This commit is contained in:
did 2011-11-16 11:19:57 +01:00
parent 2c18f401bb
commit a48b602ea9
4 changed files with 39 additions and 15 deletions

View File

@ -5,6 +5,8 @@ class Locomotive.Views.ApplicationView extends Backbone.View
render: -> render: ->
@render_flash_messages(@options.flash) @render_flash_messages(@options.flash)
@add_submenu_behaviours()
@center_ui_dialog() @center_ui_dialog()
if @options.view? if @options.view?
@ -20,3 +22,18 @@ class Locomotive.Views.ApplicationView extends Backbone.View
center_ui_dialog: -> center_ui_dialog: ->
$(window).resize -> $(window).resize ->
$('.ui-dialog-content:visible').dialog('option', 'position', 'center') $('.ui-dialog-content:visible').dialog('option', 'position', 'center')
add_submenu_behaviours: ->
# sub menu links
$('#submenu ul li.hoverable').hover(
->
$(@).find('a').addClass('hover')
$(@).find('.popup').show()
->
$(@).find('a').removeClass('hover');
$(@).find('.popup').hide()
)
css = $('#submenu > ul').attr('class')
$("#submenu > ul > li.#{css}").addClass('on') if css != ''

View File

@ -78,14 +78,12 @@ ul.list {
float: left; float: left;
height: 31px; height: 31px;
width: 18px; width: 18px;
// background: transparent image-url("locomotive/list/item-left.png") no-repeat left 0;
} }
strong { strong {
display: block; display: block;
height: 31px; height: 31px;
margin-left: 18px; margin-left: 18px;
// background: transparent image-url("locomotive/list/item-right.png") no-repeat right 0;
a { a {
position: relative; position: relative;

View File

@ -48,8 +48,6 @@ body {
position: relative; position: relative;
padding-top: 20px; padding-top: 20px;
z-index: 99;
h1 { h1 {
margin-bottom: 0px; margin-bottom: 0px;
font-size: 100%; font-size: 100%;

View File

@ -38,7 +38,7 @@
border-color: transparent !important; border-color: transparent !important;
border-color-bottom: #fff; border-color-bottom: #fff;
padding-bottom: 0px; padding-bottom: 0px;
@include border-left-radius(0px); // !important is missing here @include border-bottom-radius(0px); // !important is missing here
position: relative; position: relative;
z-index: 998; z-index: 998;
@ -65,7 +65,6 @@
clear: both; clear: both;
position: relative; position: relative;
top: -1px; top: -1px;
z-index: 998;
height: 60px; height: 60px;
margin: 0px 8px; margin: 0px 8px;
padding: 0 0px; padding: 0 0px;
@ -117,10 +116,16 @@
display: inline-block; display: inline-block;
margin: 15px 0 0 0; height: 20px;
line-height: 20px;
margin: 18px 0 0 0;
padding: 0px 10px 0 15px; padding: 0px 10px 0 15px;
@include border-radius(10px);
text-decoration: none; text-decoration: none;
font-size: 11px;
em { em {
display: inline-block; display: inline-block;
@ -128,9 +133,13 @@
background: transparent image-url("locomotive/menu/icons.png") no-repeat 0 0px; background: transparent image-url("locomotive/menu/icons.png") no-repeat 0 0px;
height: 11px; height: 11px;
width: 11px; width: 11px;
top: 1px; top: 2px;
left: -5px; left: -5px;
} }
span {
font-size: 11px;
}
} }
} }
@ -141,7 +150,7 @@
top: 42px; top: 42px;
min-width: 250px; min-width: 250px;
background: #fff; background: #fff;
@include box-shadow(0px, 0px, 10px, rgba(0, 0, 0, 0.5)); @include box-shadow(rgba(0, 0, 0, 0.5) 0px 0px 10px 0px);
@include border-radius(16px); @include border-radius(16px);
@include border-top-left-radius(0px); @include border-top-left-radius(0px);
z-index: 997; z-index: 997;
@ -161,7 +170,7 @@
.inner { padding: 8px 16px; } .inner { padding: 8px 16px; }
h2 { h2 {
font-size: 0.7em; font-size: 11px;
font-weight: bold; font-weight: bold;
color: #1e1f26; color: #1e1f26;
margin-bottom: 0px; margin-bottom: 0px;
@ -172,7 +181,7 @@
padding: 10px 0 0 0px; padding: 10px 0 0 0px;
a { a {
font-size: 0.8em; font-size: 13px;
background: transparent image-url("locomotive/menu/popup/add.png") no-repeat left 4px; background: transparent image-url("locomotive/menu/popup/add.png") no-repeat left 4px;
padding-left: 12px; padding-left: 12px;
} }
@ -192,13 +201,15 @@
li { li {
position: relative; position: relative;
height: 24px;
line-height: 24px;
a { font-size: 0.7em; } a { font-size: 11px; }
span { span {
@include absolute-position(top, 6px, right, 15px, inline); @include absolute-position(top, -1px, right, 0px, inline);
color: #8b8d9a; color: #8b8d9a;
font-size: 0.7em; font-size: 11px;
} }
} }
@ -214,7 +225,7 @@
padding: 3px 10px; padding: 3px 10px;
background: #ebedf4; background: #ebedf4;
font-weight: bold; font-weight: bold;
font-size: 0.8em; font-size: 13px;
} }
} }
} }