Browse Source

Fixes for pointing dropdowns in menus

pull/1129/head
jlukic 10 years ago
parent
commit
92daf45345
4 changed files with 42 additions and 10 deletions
  1. 23
      server/documents/modules/dropdown.html.eco
  2. 14
      src/definitions/collections/menu.less
  3. 11
      src/definitions/modules/sidebar.js
  4. 4
      src/themes/packages/default/collections/menu.variables

23
server/documents/modules/dropdown.html.eco

@ -121,6 +121,29 @@ themes : ['Default']
</div> </div>
</div> </div>
</div> </div>
<div class="another hover example">
<div class="ui vertical menu">
<div class="menu">
<a class="active item">
Home
</a>
<div class="ui left pointing dropdown link item">
<i class="dropdown icon"></i>
Messages
<div class="menu">
<a class="item"><i class="mail icon"></i>Inbox</a>
<a class="item"><i class="book icon"></i>Archive</a>
</div>
</div>
<a class="item">
Browse
</a>
<a class="item">
Help
</a>
</div>
</div>
</div>
<div class="another button example"> <div class="another button example">
<div class="ui blue labeled icon top left pointing dropdown button"> <div class="ui blue labeled icon top left pointing dropdown button">
<i class="settings icon"></i> <i class="settings icon"></i>

14
src/definitions/collections/menu.less

@ -102,12 +102,12 @@
} }
/* Floated Content */ /* Floated Content */
.ui.menu .item.left,
.ui.menu .menu.left {
.ui.menu:not(.vertical) .item.left,
.ui.menu:not(.vertical) .menu.left {
float: left; float: left;
} }
.ui.menu .item.right,
.ui.menu .menu.right {
.ui.menu:not(.vertical) .item.right,
.ui.menu:not(.vertical) .menu.right {
float: right; float: right;
} }
@ -270,13 +270,15 @@
/* Menu Position */ /* Menu Position */
.ui.menu .dropdown.item .menu { .ui.menu .dropdown.item .menu {
background: @dropdownBackground; background: @dropdownBackground;
left: 1px;
left: 0px;
margin: @dropdownMenuOffset 0px 0px; margin: @dropdownMenuOffset 0px 0px;
min-width: calc(100% - 1px); min-width: calc(100% - 1px);
box-shadow: @dropdownBoxShadow; box-shadow: @dropdownBoxShadow;
} }
.ui.menu .pointing.dropdown.item .menu { .ui.menu .pointing.dropdown.item .menu {
margin-top: @dropdownPointingDistance; margin-top: @dropdownPointingDistance;
border-top-left-radius: 0em;
border-top-right-radius: 0em;
} }
.ui.menu .simple.dropdown.item .menu { .ui.menu .simple.dropdown.item .menu {
margin: 0px !important; margin: 0px !important;
@ -504,7 +506,7 @@
.ui.vertical.menu .dropdown.item .menu { .ui.vertical.menu .dropdown.item .menu {
top: 0% !important; top: 0% !important;
left: 100%; left: 100%;
margin: 0px 0px 0px @dropdownMenuOffset;
margin: @dropdownMenuOffset 0px 0px @dropdownMenuOffset;
box-shadow: @dropdownVerticalBoxShadow; box-shadow: @dropdownVerticalBoxShadow;
} }
.ui.vertical.menu .dropdown.item.active { .ui.vertical.menu .dropdown.item.active {

11
src/definitions/modules/sidebar.js

@ -63,6 +63,7 @@ $.fn.sidebar = function(parameters) {
element = this, element = this,
instance = $module.data(moduleNamespace), instance = $module.data(moduleNamespace),
currentScroll,
transitionEnd, transitionEnd,
module module
@ -296,9 +297,12 @@ $.fn.sidebar = function(parameters) {
requestAnimationFrame(transition); requestAnimationFrame(transition);
} }
else { else {
$module.scrollTop(0);
if(module.is.mobile()) { if(module.is.mobile()) {
window.scrollTo(0, 0);
requestAnimationFrame(function() {
$module.scrollTop(0);
currentScroll = $(window).scrollTop();
window.scrollTo(0, 0);
});
} }
module.remove.allVisible(); module.remove.allVisible();
requestAnimationFrame(transition); requestAnimationFrame(transition);
@ -322,6 +326,9 @@ $.fn.sidebar = function(parameters) {
$transition $transition
.on(transitionEnd, function(event) { .on(transitionEnd, function(event) {
if( event.target == $transition[0] ) { if( event.target == $transition[0] ) {
if(module.is.mobile()) {
window.scrollTo(0, currentScroll);
}
$transition.off(transitionEnd); $transition.off(transitionEnd);
module.remove.transition(); module.remove.transition();
module.remove.direction(); module.remove.direction();

4
src/themes/packages/default/collections/menu.variables

@ -125,13 +125,13 @@
/* Dropdown */ /* Dropdown */
@dropdownBackground: #FFFFFF; @dropdownBackground: #FFFFFF;
@dropdownMenuOffset: 1px; @dropdownMenuOffset: 1px;
@dropdownPointingDistance: 0.75em;
@dropdownPointingDistance: 1px;
@dropdownTextColor: @textColor; @dropdownTextColor: @textColor;
@dropdownTextColorHover: @darkTextColor; @dropdownTextColorHover: @darkTextColor;
@dropdownIconMargin: 0em 0em 0em 1em; @dropdownIconMargin: 0em 0em 0em 1em;
@dropdownBoxShadow: 0 1px 1px 1px @solidBorderColor;
@dropdownBoxShadow: 0px 1px 0px 1px @borderColor;
@dropdownVerticalBoxShadow: 0 0px 1px 1px @solidBorderColor; @dropdownVerticalBoxShadow: 0 0px 1px 1px @solidBorderColor;
/* Pointing Arrow */ /* Pointing Arrow */

Loading…
Cancel
Save