SONAR-5820 Improve the rule description formatting

4 files changed, 86 insertions, 51 deletions

diff --git a/server/sonar-web/src/main/less/components.less b/server/sonar-web/src/main/less/components.less
index 622c74d61df..0bffbeeaac9 100644
--- a/server/sonar-web/src/main/less/components.less
+++ b/server/sonar-web/src/main/less/components.less
@@ -6,3 +6,4 @@
 @import "components/measures";
 @import "components/rules";
 @import "components/search-navigator";
+@import "components/typography";
diff --git a/server/sonar-web/src/main/less/components/typography.less b/server/sonar-web/src/main/less/components/typography.less
new file mode 100644
index 00000000000..5495763c42d
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/typography.less
@@ -0,0 +1,77 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../ui";
+
+.formatted() {
+  max-width: 1020px;
+  line-height: 1.5;
+
+  p, ul, ol, pre, blockquote, table, h2, h3, h4, h5, h6 {
+    margin: 1em 0;
+  }
+
+  h2 {
+    font-size: @bigFontSize;
+    font-weight: 400;
+  }
+
+  h3, h4, h5, h6 {
+    font-size: @baseFontSize;
+    font-weight: 500;
+  }
+
+  pre, code {
+    font-family: @monoFontFamily;
+    font-size: @smallFontSize;
+  }
+
+  pre {
+    max-width: 1020px;
+    padding: 10px;
+    border-top: 1px solid @barBorderColor;
+    border-bottom: 1px solid @barBorderColor;
+    line-height: 18px;
+    overflow: auto;
+  }
+
+  code {
+    color: saturate(@darkBlue, 50%);
+    font-weight: 600;
+  }
+
+  blockquote {
+    line-height: 1.5;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+  ul {
+    padding-left: 40px;
+    list-style: disc;
+  }
+
+  ol {
+    padding-left: 40px;
+    list-style: decimal;
+  }
+
+  table {
+    min-width: 50%;
+    border-collapse: collapse;
+    border: 1px solid @barBorderColor;
+  }
+
+  th {
+    padding: 5px 10px;
+    border: 1px solid @barBorderColor;
+    background-color: @barBackgroundColor;
+    font-weight: 500;
+    text-align: center;
+  }
+
+  td {
+    padding: 5px 10px;
+    border: 1px solid @barBorderColor;
+  }
+
+}
diff --git a/server/sonar-web/src/main/less/style.less b/server/sonar-web/src/main/less/style.less
index 133af558e28..ccf473e6e89 100644
--- a/server/sonar-web/src/main/less/style.less
+++ b/server/sonar-web/src/main/less/style.less
@@ -1,6 +1,7 @@
 @import (reference) "mixins";
 @import (reference) "variables";
 @import (reference) "ui";
+@import (reference) "components/typography";
 
 /*
  * SonarQube, open source software quality management tool.
@@ -1723,26 +1724,15 @@ ul.bullet li {
 
 
 /* API for Rule and Property Descriptions  */
-.rule-desc h2 {
-  margin-top: 16px;
-  font-size: 16px;
-  line-height: 1.5;
-  color: @baseFontColor;
-}
-
-.rule-desc h3 {
-  margin-top: 16px;
-  font-size: 12px;
-  line-height: 1.5;
-  color: @baseFontColor;
-  font-weight: bold;
+.rule-desc {
+  .formatted;
 }
 
-.rule-desc p, .property p {
+.property p {
   margin-top: 10px;
 }
 
-.rule-desc pre, .property pre, .bubble-popup pre, .coding-rules-detail-parameter pre {
+.property pre, .bubble-popup pre, .coding-rules-detail-parameter pre {
   display: inline-block;
   min-width: 100%;
   margin: 10px 0 !important;
@@ -1753,39 +1743,22 @@ ul.bullet li {
   font-family: @monoFontFamily;
 }
 
-.rule-desc blockquote, .property blockquote, .bubble-popup blockquote, .coding-rules-detail-parameter blockquote {
+.property blockquote, .bubble-popup blockquote, .coding-rules-detail-parameter blockquote {
   margin-top: 10px;
   padding: 10px;
 }
 
-.rule-desc ul, .property ul {
+.property ul {
   list-style-type: disc;
   list-style-position: inside;
   margin: 10px;
 }
 
-.rule-desc ol, .property ol {
+.property ol {
   list-style-type: decimal;
   list-style-position: inside;
   margin: 10px;
 }
-
-.rule-table {
-  margin-top: 10px;
-  overflow-x: auto;
-  border-collapse: collapse;
-}
-.rule-table th {
-  background: none no-repeat scroll right center #EFEFEF;
-  border: 1px solid #DDD;
-  padding: 5px 10px;
-  font-weight: bold;
-}
-.rule-table td {
-  background: none no-repeat scroll right center transparent;
-  border: 1px solid #DDD;
-  padding: 5px 10px;
-}
 /* End of API for Rule Descriptions */
 
 
diff --git a/server/sonar-web/src/main/less/ui.less b/server/sonar-web/src/main/less/ui.less
index 77321ea0e5a..f12a4f536e7 100644
--- a/server/sonar-web/src/main/less/ui.less
+++ b/server/sonar-web/src/main/less/ui.less
@@ -343,22 +343,6 @@ input[type=button] {
 }
 
 
-.markdown {
-
-  table {
-    margin: 10px 0;
-  }
-
-  th {
-    padding-bottom: 5px;
-    border-bottom: 1px solid @barBackgroundColor;
-    font-weight: 500;
-    text-transform: uppercase;
-  }
-
-  td { padding: 0 5px; }
-}
-
 
 /*
  * Display SQALE Rating (also used by the SQALE plugin)