Index: app/views/layouts/base.html.erb
===================================================================
--- app/views/layouts/base.html.erb (revision 18549)
+++ app/views/layouts/base.html.erb (working copy)
@@ -60,46 +60,75 @@
-
+
+
+
Index: lib/redmine/menu_manager.rb
===================================================================
--- lib/redmine/menu_manager.rb (revision 18549)
+++ lib/redmine/menu_manager.rb (working copy)
@@ -110,12 +110,14 @@
menu_name.present? && Redmine::MenuManager.items(menu_name).children.present?
end
- def render_menu(menu, project=nil)
+ def render_menu(menu, project=nil, options={})
links = []
menu_items_for(menu, project) do |node|
links << render_menu_node(node, project)
end
- links.empty? ? nil : content_tag('ul', links.join.html_safe)
+ default_options = {:class => 'nav-list'}
+ options = default_options.merge(options)
+ links.empty? ? nil : content_tag('ul', links.join.html_safe, options)
end
def render_menu_node(node, project=nil)
@@ -124,7 +126,7 @@
else
caption, url, selected = extract_node_details(node, project)
return content_tag('li',
- render_single_menu_node(node, caption, url, selected))
+ render_single_menu_node(node, caption, url, selected), :class => 'nav-item')
end
end
@@ -132,7 +134,7 @@
caption, url, selected = extract_node_details(node, project)
html = [].tap do |html|
- html << '
'
+ html << ''
# Parent
html << render_single_menu_node(node, caption, url, selected)
Index: public/javascripts/application.js
===================================================================
--- public/javascripts/application.js (revision 18549)
+++ public/javascripts/application.js (working copy)
@@ -892,8 +892,8 @@
$('input[data-disables], input[data-enables], input[data-shows]').each(toggleDisabledOnChange);
}
-function toggleNewObjectDropdown() {
- var dropdown = $('#new-object + ul.menu-children');
+function toggleNewObjectDropdown(element) {
+ var dropdown = $(element).next('.menu-children');
if(dropdown.hasClass('visible')){
dropdown.removeClass('visible');
}else{
Index: public/stylesheets/application.css
===================================================================
--- public/stylesheets/application.css (revision 18549)
+++ public/stylesheets/application.css (working copy)
@@ -15,44 +15,77 @@
#wrapper {background: white;overflow: hidden;}
#wrapper3 { display: flex; flex-direction: column; }
-#top-menu {background: #3E5B76; color: #fff; height:1.8em; font-size: 0.8em; padding: 2px 2px 0px 6px;}
-#top-menu ul {margin: 0; padding: 0;}
-#top-menu li {
- float:left;
- list-style-type:none;
- margin: 0px 0px 0px 0px;
- padding: 0px 0px 0px 0px;
- white-space:nowrap;
+#top-menu *, *::before, *::after {
+ box-sizing: border-box;
}
-#top-menu a {color: #fff; margin-right: 8px; font-weight: bold;}
-#top-menu #loggedas { float: right; margin-right: 0.5em; color: #fff; }
-
-#account {float:right;}
-
-#header {min-height:5.3em;margin:0;background-color:#628DB6;color:#f8f8f8; padding: 4px 8px 20px 6px; position:relative;}
+#top-menu {background: #3E5B76; padding: 0px 6px 0px 6px; display: flex;}
+#top-menu > nav {
+ line-height: 24px;
+ padding: 6px 0 6px 0;
+}
+#top-menu .general-menu {
+ align-items: stretch;
+ flex: 1 1 auto;
+}
+#top-menu .profile-menu {
+ flex: 0 0 auto;
+ border-top: 0;
+}
+#top-menu ul.nav-list > li.nav-item {
+ margin-right: 8px;
+}
+#top-menu ul.nav-list > li.nav-item:last-child {
+ margin-right: 0;
+}
+#top-menu ul.nav-list li.nav-item > a {
+ color: #fff;
+}
+#top-menu .profile-menu li.avatar-menu .drdn-content {
+ padding-top: 5px;
+}
+#top-menu .profile-menu li.avatar-menu li {
+ flex-direction: column;
+}
+#top-menu .profile-menu li.avatar-menu li a {
+ width: 100%;
+ display: block;
+ padding: 4px;
+}
+#top-menu .profile-menu li.avatar-menu:hover > a {
+ text-decoration: none;
+}
+#top-menu .profile-menu li.avatar-menu img.gravatar {
+ border: 1px solid #dfdfdf;
+ margin-right: 4px;
+}
+#top-menu .profile-menu li.avatar-menu:hover img.gravatar {
+ border: 1px solid #fff;
+}
+#top-menu .profile-menu li.avatar-menu ul {
+ padding: 0;
+ min-width: 200px;
+}
+#loggedas span.name {
+ font-weight: 600;
+ padding: 4px;
+}
+#loggedas span.login {
+ display: block;
+}
+#header {min-height:5.3em;margin:0;background-color:#628DB6;color:#f8f8f8; padding: 4px 8px 0 6px;}
#header a {color:#f8f8f8;}
#header h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#header h1 .breadcrumbs { display:block; font-size: .5em; font-weight: normal; }
-#quick-search {float:right;}
-#quick-search #q {width:130px; height:24px; box-sizing:border-box; vertical-align:middle; border:1px solid #ccc; border-radius:3px;}
+#quick-search label, #quick-search label a {color: #fff;}
+#quick-search #q {width:130px; height:24px;}
-#main-menu {position: absolute; bottom: 0px; left:6px; margin-right: -500px; width: 100%;}
-#main-menu ul {margin: 0; padding: 0; width: 100%; white-space: nowrap;}
-#main-menu li {
- float:none;
- list-style-type:none;
- margin: 0px 2px 0px 0px;
- padding: 0px 0px 0px 0px;
- white-space:nowrap;
- display:inline-block;
-}
-#main-menu li a {
- display: block;
+#main-menu {margin-right: -500px; width: 100%;}
+#main-menu li.nav-item a {
color: #fff;
text-decoration: none;
font-weight: bold;
- margin: 0;
+ display: block;
padding: 4px 10px 4px 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
@@ -149,6 +182,24 @@
a#toggle-completed-versions {color:#999;}
+/***** Navigation *****/
+nav ul.nav-list {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ white-space: nowrap;
+ display: flex;
+ flex-direction: row;
+}
+nav ul.nav-list li.nav-item {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ white-space: nowrap;
+}
+nav ul.nav-list li.nav-item > a {
+ padding: 4px;
+}
/***** Dropdown *****/
.drdn {position:relative;}
.drdn-trigger {
@@ -165,14 +216,22 @@
display:none;
position:absolute;
right:0px;
- top:25px;
+ top:28px;
min-width:100px;
background-color:#fff;
border:1px solid #ccc;
- border-radius:4px;
+ border-radius:3px;
color:#555;
z-index:99;
+ overflow: hidden;
}
+.drdn-content .divider {
+ height: 1px;
+ background-color: #ccc;
+ padding: 0;
+ margin: 0;
+ border: 0;
+}
.drdn.expanded .drdn-content {display:block;}
.drdn-content .quick-search {margin:8px;}
@@ -182,7 +241,6 @@
div + .drdn-items {border-top:1px solid #ccc;}
.drdn-items>* {
display:block;
- border:1px solid #fff;
overflow:hidden;
text-overflow: ellipsis;
white-space:nowrap;
@@ -207,7 +265,6 @@
border: none;
}
.drdn-items>span {color:#999;}
-
.contextual .drdn-content {top:18px;}
.contextual .drdn-items {padding:2px;}
.contextual .drdn-items>a:hover {color:#2A5685; border:1px solid #628db6; background-color:#eef5fd; border-radius:3px;}
@@ -216,11 +273,11 @@
#project-jump .drdn-trigger {
width:100%;
height:24px;
+ line-height: 16px;
display:inline-block;
padding:3px 18px 3px 6px;
border-radius:3px;
border:1px solid #ccc;
- margin:0 !important;
vertical-align:middle;
color:#555;
background:#fff url(../images/arrow_down.png) no-repeat 97% 50%;
@@ -227,8 +284,8 @@
}
#project-jump .drdn.expanded .drdn-trigger {background-image:url(../images/arrow_up.png);}
#project-jump .drdn-content {width:280px;}
-#project-jump .drdn-items>* {color:#555 !important;}
-#project-jump .drdn-items>a:hover {background-color:#759FCF; color:#fff !important;}
+#project-jump .drdn-items>*, .avatar-menu .drdn-items * {color:#555 !important;}
+#project-jump .drdn-items>a:hover, .avatar-menu .drdn-items a:hover {background-color:#759FCF; color:#fff !important; text-decoration: none;}
/***** Tables *****/
table.list, .table-list { border: 1px solid #e4e4e4; width: 100%; margin-bottom: 4px; border-radius: 3px; border-spacing: 0; overflow: hidden;}