]> source.dussan.org Git - sonarqube.git/commitdiff
SONAR-10863 Tweak styling of embedded documentation markdown
authorGrégoire Aubert <gregoire.aubert@sonarsource.com>
Thu, 14 Jun 2018 15:12:46 +0000 (17:12 +0200)
committersonartech <sonartech@sonarsource.com>
Tue, 19 Jun 2018 16:34:24 +0000 (18:34 +0200)
server/sonar-docs/src/pages/branches/short-lived-branches.md
server/sonar-docs/src/pages/fixing-the-water-leak.md
server/sonar-web/src/main/js/app/styles/init/misc.css
server/sonar-web/src/main/js/apps/documentation/styles.css
server/sonar-web/src/main/js/components/docs/DocLink.tsx
server/sonar-web/src/main/js/components/docs/DocTooltipLink.tsx
server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocLink-test.tsx.snap
server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocTooltipLink-test.tsx.snap

index 25ebadbe4ea1ef417b1fc7148a1c1376b99888e9..1fecddd78c9f7f2630e59bad753384b63e05e488 100644 (file)
@@ -14,7 +14,6 @@ For short-lived branches, there is a kind of hard-coded quality gate focusing on
 
 * status: green / OK or red / ERROR
 * error conditions:
-
   * new open bugs > 0
   * new open vulnerabilities > 0
   * new open code smells > 0
index d4057c3470ed6e0dc78518f13bd307836febcc0a..c56699733f7e5e028019bc7b414a76228aa4da4f 100644 (file)
@@ -13,23 +13,16 @@ So why do anything different with code quality? When you analyze an application
 Typically in this traditional approach, just before release a periodic code quality audit result in findings the developers should act on before releasing. This approach might work in the short term, especially with strong management backing, but it consistently fails in the mid to long run, because:
 
 * The code review comes too late in the process, and no stakeholder is keen to get the problems fixed; everyone wants the new version to ship.
-
 * Developers typically push back on the recommendations made by an external team that doesn't know the context of the project. And by the way the code under review is obsolete already.
-
 * There is a clear lack of ownership for code quality with this approach. Who owns quality? No one!
-
 * What gets reviewed is the entire application before it goes to production and it is obviously not possible to apply the same criteria to all applications. A negotiation will happen for each project, which will drain all credibility from the process
 
 Instead, why not apply the same simple logic you use at home to the way you manage code quality? Fixing the leak means putting the focus on the “new” code, i.e. the code that was added or changed since the last release. Then things get much easier:
 
 * The [Quality Gate](/quality-gates) can be run every day, and passing it is achievable. There are no surprises at release time.
-
 * It's pretty difficult for developers to push back on problems they introduced the previous day. Instead, they're generally happy to fix the problems while the code is still fresh.
-
 * There is a clear ownership of code quality
-
 * The criteria for go/no-go are consistent across applications, and are shared among teams. Indeed new code is new code, regardless of which application it is done in
-
 * The cost is insignificant because it is part of the development process
 
 As a bonus, the code that gets changed the most has the highest maintainability, and the code that doesn't get changed has the lowest, which makes a lot of sense. Because of the nature of software, and the fact that we keep making changes to it, the debt will naturally be reduced. Where it isn’t is where it doesn't need to be.
@@ -39,7 +32,5 @@ As a bonus, the code that gets changed the most has the highest maintainability,
 SonarQube offers two main tools to help you find your leaks:
 
 * Leak Period metrics show the variance in your measures between the current code and a specific point you choose in its history, typically the `previous_version`
-
 * New Code is primarily detected based on SCM "blame" data (starting from the first analysis within your Leak Period), with fallback mechanisms when needed. See SCM integration for more details.
-
 * [Quality Gates](/quality-gates) allow you to set boolean thresholds against which your code is measured. Use them with differential metrics to ensure that your code quality moves in the right direction over time.
index 4da47ab79f65ca9caef92accee0300bde2a7c501..16e78425e0a6f68bbf9bb039ee4d5390278a4f78 100644 (file)
   vertical-align: text-top !important;
 }
 
+.vertical-baseline {
+  vertical-align: baseline !important;
+}
+
 .nowrap {
   white-space: nowrap !important;
 }
index 3b0071d3f25e58acb23b41baffcf4ef22bb683c4..65a0053399084a9b4d448392dd9bed3accc8aac6 100644 (file)
   max-width: 740px;
 }
 
-.documentation-content > h1 {
-  margin-bottom: calc(4 * var(--gridSize));
-  font-size: 20px;
-}
-
 .documentation-footer div,
 .documentation-footer .page-footer-menu {
   max-width: 740px;
 }
+
+.documentation-content.markdown {
+  font-size: 14px;
+}
+
+.documentation-content.markdown > h1 {
+  font-size: 24px;
+  padding-top: var(--gridSize);
+  margin-bottom: 2em;
+}
+
+.documentation-content.markdown h2 {
+  font-weight: 800;
+  margin-top: 3em;
+}
+
+.documentation-content.markdown h3 {
+  font-size: 14px;
+  margin-bottom: 0.8em;
+}
+
+.documentation-content.markdown pre {
+  border: 1px solid #e6e6e6;
+  border-radius: 3px;
+  background-color: rgba(0, 0, 0, 0.06);
+}
+
+.documentation-content.markdown p,
+.documentation-content.markdown pre,
+.documentation-content.markdown table {
+  margin: 0.8em 0 2em;
+}
+
+.documentation-content.markdown p + ul,
+.documentation-content.markdown p + ol,
+.documentation-content.markdown p + pre {
+  margin: -1em 0 2em;
+}
+
+.documentation-content.markdown li > p {
+  margin: 0;
+}
+
+.documentation-content.markdown li > p + ul,
+.documentation-content.markdown li > p + ol {
+  margin: 0;
+}
index 647256b3743d807ecc89478e0fe5614672e7f1f5..e4feddec31205deed643123f0da4c458f92bd027 100644 (file)
@@ -38,11 +38,14 @@ export default function DocLink(props: React.AnchorHTMLAttributes<HTMLAnchorElem
   }
 
   return (
-    <span className="display-inline-flex-center">
+    <>
       <a href={href} rel="noopener noreferrer" target="_blank" {...other}>
         {children}
       </a>
-      <DetachIcon className="text-muted little-spacer-left little-spacer-right" size={12} />
-    </span>
+      <DetachIcon
+        className="text-muted little-spacer-left little-spacer-right vertical-baseline"
+        size={12}
+      />
+    </>
   );
 }
index e539615e60031cdc3ac8ea6ca3d2ace9e96dbe20..897b3568e89073b68e7ebb1f1f6b5306e60dc504 100644 (file)
@@ -24,7 +24,7 @@ import DetachIcon from '../../components/icons-components/DetachIcon';
 export default function DocTooltipLink(props: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
   const { children, href, ...other } = props;
   return (
-    <span className="display-inline-flex-center">
+    <>
       {href && href.startsWith('/') ? (
         <Link
           rel="noopener noreferrer"
@@ -38,7 +38,7 @@ export default function DocTooltipLink(props: React.AnchorHTMLAttributes<HTMLAnc
           {children}
         </a>
       )}
-      <DetachIcon className="little-spacer-left little-spacer-right" size={12} />
-    </span>
+      <DetachIcon className="little-spacer-left little-spacer-right vertical-baseline" size={12} />
+    </>
   );
 }
index 264acc8a5b4ad82d192979ef241dca51568c3891..4d443347a2e7bf295c26ed0f44cbd6bf431ee1f5 100644 (file)
@@ -9,19 +9,17 @@ exports[`should render documentation link 1`] = `
 `;
 
 exports[`should render simple link 1`] = `
-<span
-  className="display-inline-flex-center"
->
+<React.Fragment>
   <a
     href="http://sample.com"
     rel="noopener noreferrer"
     target="_blank"
   />
   <DetachIcon
-    className="text-muted little-spacer-left little-spacer-right"
+    className="text-muted little-spacer-left little-spacer-right vertical-baseline"
     size={12}
   />
-</span>
+</React.Fragment>
 `;
 
 exports[`should render sonarcloud link 1`] = `
index 6d7183987910b6d4fc40348eebf5d79411682777..efb4518b4ae7882c68778a52f7e146191d1bee4d 100644 (file)
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render internal link 1`] = `
-<span
-  className="display-inline-flex-center"
->
+<React.Fragment>
   <Link
     onlyActiveOnIndex={false}
     rel="noopener noreferrer"
@@ -12,24 +10,22 @@ exports[`should render internal link 1`] = `
     to="/documentation/foo/bar"
   />
   <DetachIcon
-    className="little-spacer-left little-spacer-right"
+    className="little-spacer-left little-spacer-right vertical-baseline"
     size={12}
   />
-</span>
+</React.Fragment>
 `;
 
 exports[`should render simple link 1`] = `
-<span
-  className="display-inline-flex-center"
->
+<React.Fragment>
   <a
     href="http://sample.com"
     rel="noopener noreferrer"
     target="_blank"
   />
   <DetachIcon
-    className="little-spacer-left little-spacer-right"
+    className="little-spacer-left little-spacer-right vertical-baseline"
     size={12}
   />
-</span>
+</React.Fragment>
 `;