dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #29014
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 14587: Top menu
Merge authors:
Mark Polak (markpo)
------------------------------------------------------------
revno: 14587 [merge]
committer: Lars Helge Øverland <larshelge@xxxxxxxxx>
branch nick: dhis2
timestamp: Tue 2014-04-01 15:15:26 +0200
message:
Top menu
modified:
dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/menu.css
dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.menu.js
--
lp:dhis2
https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk
Your team DHIS 2 developers is subscribed to branch lp:dhis2.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription
=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/menu.css'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/menu.css 2014-04-01 11:08:21 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/menu.css 2014-04-01 13:00:51 +0000
@@ -6,7 +6,8 @@
padding: 0 20px 0 0;
}
-#menuLinkArea li {
+#menuLinkArea li
+{
float: right;
}
@@ -30,34 +31,40 @@
color: #000;
}
-.app-menu:after {
+.app-menu:after
+{
clear: both;
content: "";
}
.app-menu ul,
-.app-menu li {
+.app-menu li
+{
list-style: none;
}
.app-manager-header,
-.app-menu {
+.app-menu
+{
margin: 0 auto;
position: relative;
- width: 808px;
+ width: 535px;
}
-.app-menu li {
+.app-menu li
+{
float: left;
position: relative;
}
-#menuOrderBy {
+#menuOrderBy
+{
float: right;
}
.app-menu .app-menu-item,
-.app-menu .app-menu-placeholder {
+.app-menu .app-menu-placeholder
+{
margin: 10px;
display: block;
border: 1px solid #d0d0d0;
@@ -68,7 +75,8 @@
padding: 10px;
}
-.app-menu .app-menu-item img {
+.app-menu .app-menu-item img
+{
max-height: 36px;
max-width: 36px;
display: block;
@@ -77,7 +85,8 @@
position: absolute;
}
-.app-menu .app-menu-item span {
+.app-menu .app-menu-item span
+{
font-size: 1.15em;
padding-left: 48px;
display: block;
@@ -86,17 +95,20 @@
}
.app-menu .app-menu-placeholder,
-.app-menu .app-menu-item:hover {
+.app-menu .app-menu-item:hover
+{
border: 1px dashed #9ec5df;
background-color: #e9f5fb;
text-decoration: none;
}
-.app-menu-item-description {
+.app-menu-item-description
+{
display: none;
}
-.app-menu-item-description .fa.fa-arrows {
+.app-menu-item-description .fa.fa-arrows
+{
font-size: 1.3em;
position: absolute;
right: 5px;
@@ -106,7 +118,8 @@
/**
* When hovered display the description and hide the favorites icon
*/
-.app-menu li:hover a .app-menu-item-description {
+.app-menu li:hover a .app-menu-item-description
+{
position: absolute;
top: 0;
right: 0;
@@ -122,15 +135,18 @@
border-radius: 5px;
}
-.app-menu li.ui-sortable-helper:hover a .app-menu-item-description {
+.app-menu li.ui-sortable-helper:hover a .app-menu-item-description
+{
display: none;
}
-.app-menu li.ui-sortable-helper:hover a {
+.app-menu li.ui-sortable-helper:hover a
+{
background-color: rgba(255, 255, 255, 0.30);
}
-.app-menu-item .app-menu-item-description span {
+.app-menu-item .app-menu-item-description span
+{
color: #444;
display: block;
font-size: 1em;
@@ -139,18 +155,21 @@
margin: 0;
}
-.app-menu-item .app-menu-item-description p {
+.app-menu-item .app-menu-item-description p
+{
height: 35px;
margin: 0;
overflow: hidden;
padding: 0;
}
-.app-menu li:hover a .fa.fa-bookmark {
+.app-menu li:hover a .fa.fa-bookmark
+{
display: none;
}
-.app-menu a.app-menu-item .fa.fa-bookmark {
+.app-menu a.app-menu-item .fa.fa-bookmark
+{
color: #276696;
font-size: 2em;
position: absolute;
@@ -162,7 +181,8 @@
* IE8 hack to display all items after the 9th item differently
* TODO: When support for IE8 is dropped this can be changed to a nth style selector
*/
-.app-menu li + li + li + li + li + li + li + li + li + li a.app-menu-item .fa.fa-bookmark {
+.app-menu li + li + li + li + li + li + li + li + li + li a.app-menu-item .fa.fa-bookmark
+{
display: none;
}
@@ -179,7 +199,8 @@
width: 105px;
}
-.menu-link i.fa {
+.menu-link i.fa
+{
font-size: 2em;
padding-right: 10px;
position: relative;
@@ -194,7 +215,8 @@
/**
* App menu dropdown box
*/
-.app-menu-dropdown {
+.app-menu-dropdown
+{
background-color: #fff;
border: 1px solid #bbb;
border-radius: 2px;
@@ -209,22 +231,26 @@
z-index: 10;
}
-.app-menu-dropdown ul {
+.app-menu-dropdown ul
+{
margin: 0;
}
-.app-menu-dropdown li {
+.app-menu-dropdown li
+{
float: left;
}
-.app-menu-dropdown img {
+.app-menu-dropdown img
+{
padding-left: 36px;
padding-right: 36px;
padding-top: 15px;
padding-bottom: 5px;
}
-.app-menu-dropdown span {
+.app-menu-dropdown span
+{
display: block;
height: 30px;
padding-left: 10px;
@@ -235,7 +261,8 @@
}
.app-menu-dropdown .caret-up-background,
-.app-menu-dropdown .caret-up-border {
+.app-menu-dropdown .caret-up-border
+{
border-left: 10px solid transparent;
border-right: 10px solid transparent;
width: 0;
@@ -243,17 +270,20 @@
position: absolute;
}
-.app-menu-dropdown .caret-up-background {
+.app-menu-dropdown .caret-up-background
+{
border-bottom: 10px solid #fff;
top: -9px;
}
-.app-menu-dropdown .caret-up-border {
+.app-menu-dropdown .caret-up-border
+{
border-bottom: 10px solid #bbb;
top: -10px;
}
-.app-menu-dropdown a.app-menu-item {
+.app-menu-dropdown a.app-menu-item
+{
color: #000;
display: block;
height: 110px;
@@ -261,14 +291,16 @@
width: 120px;
}
-.app-menu-dropdown a.app-menu-item:hover span {
+.app-menu-dropdown a.app-menu-item:hover span
+{
padding-left: 10px;
padding-right: 10px;
text-align: center;
width:100px;
}
-.apps-menu-more {
+.apps-menu-more
+{
display: table;
height: 30px;
padding-top: 10px;
@@ -276,7 +308,8 @@
width: 100%;
}
-.apps-menu-more a {
+.apps-menu-more a
+{
color: #4A89BA;
border: 1px solid #ccc;
background-color: #f5f5f7;
@@ -286,13 +319,15 @@
text-decoration: none;
}
-.apps-menu-more a:hover {
+.apps-menu-more a:hover
+{
color: #fff;
border: 1px solid #4A89BA;
background-color: #4A89BA;
}
-.menu-placeholder {
+.menu-placeholder
+{
width: 100%;
text-align: center;
vertical-align: middle;
@@ -302,39 +337,60 @@
* Overrides
* TODO: Merge these with the main stylesheet
*/
-hr.app-separator {
+hr.app-separator
+{
border: none;
border-top: 1px solid #bbb;
height: 1px;
position: absolute;
- top: 288px;
+ top: 484px;
width: 100%;
}
#menuDropDown1 .caret-up-background,
-#menuDropDown1 .caret-up-border {
+#menuDropDown1 .caret-up-border
+{
left: 296px;
}
#menuDropDown3 .caret-up-background,
-#menuDropDown3 .caret-up-border {
+#menuDropDown3 .caret-up-border
+{
left: 292px;
}
-.drop-down-menu-link {
+.drop-down-menu-link
+{
cursor: pointer;
display: block;
}
-.show-menu {
+.show-menu
+{
display: block;
}
/*
* Media queries for the menu
*/
-@media only screen and (max-width: 580px) {
- #headerText {
+@media only screen and (max-width: 580px)
+{
+ #headerText
+ {
display: none;
}
}
+
+@media only screen and (min-width: 840px)
+{
+ .app-manager-header,
+ .app-menu
+ {
+ width: 808px;
+ }
+
+ hr.app-separator
+ {
+ top: 288px;
+ }
+}
\ No newline at end of file
=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.menu.js'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.menu.js 2014-04-01 11:01:32 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.menu.js 2014-04-01 12:46:32 +0000
@@ -368,7 +368,9 @@
$(selector).parent().addClass('app-menu-dropdown ui-helper-clearfix');
$(selector).html('');
- return $.tmpl( "appMenuItemTemplate", favorites).appendTo(selector);
+ $.tmpl( "appMenuItemTemplate", favorites).appendTo(selector);
+
+ twoColumnRowFix();
}
function renderAppManager(selector) {
@@ -409,7 +411,32 @@
}
/**
- * Render the menumanager and the dropdown meny and attach the update handler
+ * Resets the app blocks margin in case of a resize or a sort update.
+ * This function adds a margin to the 9th element when the screen is using two columns to have a clear separation
+ * between the favorites and the other apps
+ *
+ * @param event
+ * @param ui
+ */
+ function twoColumnRowFix(event, ui) {
+ var self = $('.app-menu ul'),
+ elements = $(self).find('li:not(.ui-sortable-helper)');
+
+ elements.each(function (index, element) {
+ $(element).css('margin-right', '0px');
+ if ($(element).hasClass('app-menu-placeholder')) {
+ $(element).css('margin-right', '10px');
+ }
+ //Only fix the 9th element when we have a small enough screen
+ if (index === 8 && (self.width() < 808)) {
+ $(element).css('margin-right', '255px');
+ }
+ });
+
+ }
+
+ /**
+ * Render the menumanager and the dropdown menu and attach the update handler
*/
//TODO: Rename this as the name is not very clear to what it does
function renderMenu() {
@@ -424,7 +451,10 @@
//Render the dropdown menu
renderDropDownFavorites();
- }
+ },
+ sort: twoColumnRowFix,
+ tolerance: "pointer",
+ cursorAt: { left: 55, top: 30 }
};
renderAppManager(selector);
@@ -459,6 +489,8 @@
renderMenu();
});
+
+ $(window).resize(twoColumnRowFix);
});
})(jQuery, dhis2.menu);