From 9e0cadba66df2e6524bb0be129b4c7a1463a0fb6 Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Mon, 3 Feb 2014 12:14:08 +0600 Subject: [PATCH] New Issues Page: improve rendering of sidebar items --- .../app/views/issues/templates/_issue.hbs.erb | 2 +- .../issues/templates/_issues_actions.hbs.erb | 4 +- .../webapp/javascripts/navigator/issues.js | 5 ++ .../src/main/webapp/stylesheets/navigator.css | 53 ++++++++-------- .../webapp/stylesheets/navigator/base.css | 53 ++++++++-------- .../webapp/stylesheets/navigator/base.less | 63 +++++++++---------- 6 files changed, 90 insertions(+), 90 deletions(-) diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issue.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issue.hbs.erb index 9cd21c89fd7..0cc63fe2f66 100644 --- a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issue.hbs.erb +++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issue.hbs.erb @@ -19,6 +19,6 @@ {{#unless singleProject}}
{{projectLongName}}
{{/unless}} -
{{componentLongName}}
+
{{componentLongName}}
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issues_actions.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issues_actions.hbs.erb index 442c668b20e..784e4c0ea1c 100644 --- a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issues_actions.hbs.erb +++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issues_actions.hbs.erb @@ -2,7 +2,7 @@ {{#unless maxResultsReached}}
{{#if sorting}} - Ordered by {{sorting.sortText}} {{#if sorting.asc}}{{else}}{{/if}} + Ordered by {{sorting.sortText}} {{#if sorting.asc}}{{else}}{{/if}} {{else}} Order {{/if}} @@ -17,7 +17,7 @@ {{/unless}}
- Found: {{paging.total}} + Found: {{paging.total}} {{#if appState.canBulkChange}} li { - padding-top: 10px; + padding: 5px 0; cursor: pointer; + transition: all 0.3s ease; } .navigator-results-list > li:first-child { - padding-top: 0; + border-top: 1px solid transparent; } -.navigator-results-list > li:first-child:hover .line:first-child { - border-top-color: transparent; +.navigator-results-list > li:first-child.active { + border-top-color: #4B9FD5; } .navigator-results-list > li .line { padding: 5px 10px; line-height: 1; - transition: all 0.3s ease; -} -.navigator-results-list > li .line:first-child { - border-top: 1px solid transparent; - background-color: #efefef; -} -.navigator-results-list > li .line:last-child { - border-bottom: 1px solid transparent; } .navigator-results-list > li .line-small { font-size: 11px; @@ -200,17 +193,18 @@ text-overflow: ellipsis; white-space: nowrap; } -.navigator-results-list > li:hover .line, -.navigator-results-list > li.active .line { +.navigator-results-list > li:hover { background-color: #efefef; } -.navigator-results-list > li:hover .line:first-child, -.navigator-results-list > li.active .line:first-child { - border-top-color: #e1e1e1; +.navigator-results-list > li.active { + background-color: #CAE3F2; + border-color: #4B9FD5; +} +.navigator-results-list > li + li { + border-top: 1px solid #e1e1e1; } -.navigator-results-list > li:hover .line:last-child, -.navigator-results-list > li.active .line:last-child { - border-bottom-color: #e1e1e1; +.navigator-results-list > li.active + li { + border-top-color: #4B9FD5; } .navigator-results-no-issues { padding-top: 20%; @@ -251,14 +245,18 @@ } .navigator-actions { padding: 0 10px 0 0; - line-height: 30px; border-right: 1px solid #e1e1e1; - border-top: 1px solid #e1e1e1; + border-bottom: 1px solid #e1e1e1; background-color: #ffffff; + font-size: 11px; +} +.navigator-actions strong { + font-weight: bold; } .navigator-actions-order { float: left; padding: 0 10px; + line-height: 30px; cursor: pointer; transition: all 0.3s ease; } @@ -270,11 +268,11 @@ z-index: 2; -moz-box-sizing: border-box; box-sizing: border-box; - bottom: 30px; + top: 134px; left: 0; min-width: 160px; background-color: #fff; - border-top: 1px solid #e1e1e1; + border-bottom: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; overflow: scroll; display: none; @@ -294,6 +292,7 @@ } .navigator-actions-total { float: right; + line-height: 26px; } .navigator-actions-bulk { position: relative; diff --git a/sonar-server/src/main/webapp/stylesheets/navigator/base.css b/sonar-server/src/main/webapp/stylesheets/navigator/base.css index f3e6c83887d..abd78b59ff6 100644 --- a/sonar-server/src/main/webapp/stylesheets/navigator/base.css +++ b/sonar-server/src/main/webapp/stylesheets/navigator/base.css @@ -35,8 +35,8 @@ z-index: 2; -moz-box-sizing: border-box; box-sizing: border-box; - top: 104px; - bottom: 30px; + top: 134px; + bottom: 0; left: 0; width: 320px; } @@ -55,7 +55,7 @@ z-index: 2; -moz-box-sizing: border-box; box-sizing: border-box; - bottom: 0; + top: 104px; left: 0; width: 320px; height: 30px; @@ -167,26 +167,19 @@ overflow-y: auto; } .navigator-results-list > li { - padding-top: 10px; + padding: 5px 0; cursor: pointer; + transition: all 0.3s ease; } .navigator-results-list > li:first-child { - padding-top: 0; + border-top: 1px solid transparent; } -.navigator-results-list > li:first-child:hover .line:first-child { - border-top-color: transparent; +.navigator-results-list > li:first-child.active { + border-top-color: #4B9FD5; } .navigator-results-list > li .line { padding: 5px 10px; line-height: 1; - transition: all 0.3s ease; -} -.navigator-results-list > li .line:first-child { - border-top: 1px solid transparent; - background-color: #efefef; -} -.navigator-results-list > li .line:last-child { - border-bottom: 1px solid transparent; } .navigator-results-list > li .line-small { font-size: 11px; @@ -200,17 +193,18 @@ text-overflow: ellipsis; white-space: nowrap; } -.navigator-results-list > li:hover .line, -.navigator-results-list > li.active .line { +.navigator-results-list > li:hover { background-color: #efefef; } -.navigator-results-list > li:hover .line:first-child, -.navigator-results-list > li.active .line:first-child { - border-top-color: #e1e1e1; +.navigator-results-list > li.active { + background-color: #CAE3F2; + border-color: #4B9FD5; +} +.navigator-results-list > li + li { + border-top: 1px solid #e1e1e1; } -.navigator-results-list > li:hover .line:last-child, -.navigator-results-list > li.active .line:last-child { - border-bottom-color: #e1e1e1; +.navigator-results-list > li.active + li { + border-top-color: #4B9FD5; } .navigator-results-no-issues { padding-top: 20%; @@ -251,14 +245,18 @@ } .navigator-actions { padding: 0 10px 0 0; - line-height: 30px; border-right: 1px solid #e1e1e1; - border-top: 1px solid #e1e1e1; + border-bottom: 1px solid #e1e1e1; background-color: #ffffff; + font-size: 11px; +} +.navigator-actions strong { + font-weight: bold; } .navigator-actions-order { float: left; padding: 0 10px; + line-height: 30px; cursor: pointer; transition: all 0.3s ease; } @@ -270,11 +268,11 @@ z-index: 2; -moz-box-sizing: border-box; box-sizing: border-box; - bottom: 30px; + top: 134px; left: 0; min-width: 160px; background-color: #fff; - border-top: 1px solid #e1e1e1; + border-bottom: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; overflow: scroll; display: none; @@ -294,6 +292,7 @@ } .navigator-actions-total { float: right; + line-height: 26px; } .navigator-actions-bulk { position: relative; diff --git a/sonar-server/src/main/webapp/stylesheets/navigator/base.less b/sonar-server/src/main/webapp/stylesheets/navigator/base.less index 36207aa7b2e..3089076a1ac 100644 --- a/sonar-server/src/main/webapp/stylesheets/navigator/base.less +++ b/sonar-server/src/main/webapp/stylesheets/navigator/base.less @@ -29,8 +29,8 @@ .navigator-results { .navigator-element; - top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight; - bottom: @navigatorStatusHeight; + top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight + @navigatorStatusHeight; + bottom: 0; left: 0; width: @navigatorResultsWidth; } @@ -45,7 +45,7 @@ .navigator-actions { .navigator-element; - bottom: 0; + top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight; left: 0; .size(@navigatorResultsWidth, @navigatorStatusHeight); } @@ -190,30 +190,21 @@ .navigator-results-list { & > li { - padding-top: @navigatorPadding; + padding: @navigatorPadding / 2 0; cursor: pointer; + .trans; &:first-child { - padding-top: 0; + border-top: 1px solid transparent; - &:hover .line:first-child { - border-top-color: transparent; + &.active { + border-top-color: #4B9FD5; } } .line { padding: @navigatorPadding / 2 @navigatorPadding; line-height: 1; - .trans; - - &:first-child { - border-top: 1px solid transparent; - background-color: @navigatorBarBackground; - } - - &:last-child { - border-bottom: 1px solid transparent; - } } .line-small { @@ -231,21 +222,22 @@ white-space: nowrap; } - &:hover, - &.active { - .line { - background-color: @navigatorBarBackground; - - &:first-child { - border-top-color: @navigatorBorderLightColor; - } + &:hover { + background-color: @navigatorBarBackground; + } - &:last-child { - border-bottom-color: @navigatorBorderLightColor; - } - } + &.active { + background-color: #CAE3F2; + border-color: #4B9FD5; } + } + & > li + li { + border-top: 1px solid @navigatorBorderLightColor; + } + + & > li.active + li { + border-top-color: #4B9FD5; } } @@ -302,15 +294,19 @@ // Status .navigator-actions { padding: 0 @navigatorPadding 0 0; - line-height: @navigatorStatusHeight; + border-right: 1px solid @navigatorBorderLightColor; - border-top: 1px solid @navigatorBorderLightColor; + border-bottom: 1px solid @navigatorBorderLightColor; background-color: @white; + font-size: @smallFontSize; + + strong { font-weight: bold; } } .navigator-actions-order { float: left; padding: 0 @navigatorPadding; + line-height: @navigatorStatusHeight; cursor: pointer; .trans; @@ -321,11 +317,11 @@ .navigator-actions-order-choices { .navigator-element; - bottom: @navigatorStatusHeight; + top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight + @navigatorStatusHeight; left: 0; min-width: @navigatorResultsWidth / 2; background-color: #fff; - border-top: 1px solid @navigatorBorderLightColor; + border-bottom: 1px solid @navigatorBorderLightColor; border-right: 1px solid @navigatorBorderLightColor; overflow: scroll; display: none; @@ -349,6 +345,7 @@ .navigator-actions-total { float: right; + line-height: @navigatorStatusHeight - 4px; } .navigator-actions-bulk { -- 2.39.5