Component Viewer: fix display of the rule description

diff --git a/sonar-server/src/main/coffee/issues/views/rule-view.coffee b/sonar-server/src/main/coffee/issues/views/rule-view.coffee
index caf05d4c72f960b8afb1c47d8c9e554aba5066cf..25038b05df80a1234d130c83e533b62775f20c06 100644 (file)
--- a/sonar-server/src/main/coffee/issues/views/rule-view.coffee
+++ b/sonar-server/src/main/coffee/issues/views/rule-view.coffee
@@ -7,7 +7,6 @@ define [
 ) ->
 
   class IssueDetailRuleView extends Marionette.ItemView
-    className: 'rule-desc'
     template: Templates['rule']
 
     modelEvents:

diff --git a/sonar-server/src/main/hbs/issues/rule.hbs b/sonar-server/src/main/hbs/issues/rule.hbs
index 67b635092a323ac62ff9da5d3c0c696227f15591..7fcea0888f3cd9d835048cfbec421c3098fe08e3 100644 (file)
--- a/sonar-server/src/main/hbs/issues/rule.hbs
+++ b/sonar-server/src/main/hbs/issues/rule.hbs
@@ -1,7 +1,11 @@
-<h1 class="marginbottom10">{{name}}</h1>
-<div class="marginbottom10">{{{description}}}</div>
-<p class="note">
-  <span class="spacer-right">{{key}}</span>
-  <%= image_tag 'sep12.png', :class => 'spacer-right' -%>
-  {{#all characteristic subCharacteristic}}{{characteristic}} > {{subCharacteristic}}{{else}}{{t 'issue.technical_debt_deleted'}}{{/all}}
-</p>
\ No newline at end of file
+<div class="rule-desc">
+  <h1 class="marginbottom10">{{name}}</h1>
+  <div class="marginbottom10">{{{description}}}</div>
+</div>
+
+<ul class="note code-issue-bar">
+  <li>{{key}}</li>
+  {{#all characteristic subCharacteristic}}
+    <li>{{characteristic}} > {{subCharacteristic}}{{else}}{{t 'issue.technical_debt_deleted'}}</li>
+  {{/all}}
+</ul>
\ No newline at end of file

diff --git a/sonar-server/src/main/less/component-viewer.less b/sonar-server/src/main/less/component-viewer.less
index 51c2eb28d4d131fb298fa2231aa4af28a64f2485..01fff2e58211ca90c6eee64990da4b55a6c2f927 100644 (file)
--- a/sonar-server/src/main/less/component-viewer.less
+++ b/sonar-server/src/main/less/component-viewer.less
@@ -177,7 +177,7 @@
     background-color: @barBackgroundColor;
   }
 
-  .code .issue pre {
+  .code .issue > pre {
     display: inline-block;
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAYAAAAPDoR2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1M0M2Rjk4M0M3QUYxMUUzODkzRUREMUM5OTNDMjY4QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1M0M2Rjk4NEM3QUYxMUUzODkzRUREMUM5OTNDMjY4QSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjUzQzZGOTgxQzdBRjExRTM4OTNFREQxQzk5M0MyNjhBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjUzQzZGOTgyQzdBRjExRTM4OTNFREQxQzk5M0MyNjhBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+bcqJtQAAAEhJREFUeNpi+G+swwDGDAwgbAWlwZiJAQFCgfgwEIfDRaC67ID4NRDnQ2kQnwFZwgFqnANMAQOUYY9sF0wBiCGH5CBkrAgQYACuWi4sSGW8yAAAAABJRU5ErkJggg==);
     background-repeat: repeat-x;

diff --git a/sonar-server/src/main/less/style.less b/sonar-server/src/main/less/style.less
index 53cf45fb7954f0fdd06ab25e2aa2c17e5ee51015..dee81837691f824f183ec9395337cb6af78b9a38 100644 (file)
--- a/sonar-server/src/main/less/style.less
+++ b/sonar-server/src/main/less/style.less
@@ -969,13 +969,18 @@ th.operations, td.operations {
   content: ":";
 }
 
+.code-issue-list {
+  background-color: #E4ECF3;
+}
+
+.code-issue-bar,
 .code-issue-list {
   font-size: 0;
   white-space: nowrap;
-  background-color: #E4ECF3;
 }
 
-.code-issue-list > li {
+.code-issue-list > li,
+.code-issue-bar > li {
   display: inline-block;
   vertical-align: middle;
   height: 14px;
@@ -986,12 +991,14 @@ th.operations, td.operations {
   font-size: 12px;
 }
 
-.code-issue-list > li:first-child {
+.code-issue-list > li:first-child,
+.code-issue-bar > li:first-child {
   padding-left: 0;
   border-left: none;
 }
 
-.code-issue-list > li:last-child {
+.code-issue-list > li:last-child,
+.code-issue-bar > li:last-child {
   padding-right: 0;
   border-right: none;
 }