From: Grégoire Aubert Date: Thu, 14 Jun 2018 15:12:46 +0000 (+0200) Subject: SONAR-10863 Tweak styling of embedded documentation markdown X-Git-Tag: 7.5~968 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=6834c9f826ed3901d981763cae93eaf816bd25fd;p=sonarqube.git SONAR-10863 Tweak styling of embedded documentation markdown --- diff --git a/server/sonar-docs/src/pages/branches/short-lived-branches.md b/server/sonar-docs/src/pages/branches/short-lived-branches.md index 25ebadbe4ea..1fecddd78c9 100644 --- a/server/sonar-docs/src/pages/branches/short-lived-branches.md +++ b/server/sonar-docs/src/pages/branches/short-lived-branches.md @@ -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 diff --git a/server/sonar-docs/src/pages/fixing-the-water-leak.md b/server/sonar-docs/src/pages/fixing-the-water-leak.md index d4057c3470e..c56699733f7 100644 --- a/server/sonar-docs/src/pages/fixing-the-water-leak.md +++ b/server/sonar-docs/src/pages/fixing-the-water-leak.md @@ -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. diff --git a/server/sonar-web/src/main/js/app/styles/init/misc.css b/server/sonar-web/src/main/js/app/styles/init/misc.css index 4da47ab79f6..16e78425e0a 100644 --- a/server/sonar-web/src/main/js/app/styles/init/misc.css +++ b/server/sonar-web/src/main/js/app/styles/init/misc.css @@ -33,6 +33,10 @@ vertical-align: text-top !important; } +.vertical-baseline { + vertical-align: baseline !important; +} + .nowrap { white-space: nowrap !important; } diff --git a/server/sonar-web/src/main/js/apps/documentation/styles.css b/server/sonar-web/src/main/js/apps/documentation/styles.css index 3b0071d3f25..65a00533990 100644 --- a/server/sonar-web/src/main/js/apps/documentation/styles.css +++ b/server/sonar-web/src/main/js/apps/documentation/styles.css @@ -21,12 +21,54 @@ 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; +} diff --git a/server/sonar-web/src/main/js/components/docs/DocLink.tsx b/server/sonar-web/src/main/js/components/docs/DocLink.tsx index 647256b3743..e4feddec312 100644 --- a/server/sonar-web/src/main/js/components/docs/DocLink.tsx +++ b/server/sonar-web/src/main/js/components/docs/DocLink.tsx @@ -38,11 +38,14 @@ export default function DocLink(props: React.AnchorHTMLAttributes + <> {children} - - + + ); } diff --git a/server/sonar-web/src/main/js/components/docs/DocTooltipLink.tsx b/server/sonar-web/src/main/js/components/docs/DocTooltipLink.tsx index e539615e600..897b3568e89 100644 --- a/server/sonar-web/src/main/js/components/docs/DocTooltipLink.tsx +++ b/server/sonar-web/src/main/js/components/docs/DocTooltipLink.tsx @@ -24,7 +24,7 @@ import DetachIcon from '../../components/icons-components/DetachIcon'; export default function DocTooltipLink(props: React.AnchorHTMLAttributes) { const { children, href, ...other } = props; return ( - + <> {href && href.startsWith('/') ? ( )} - - + + ); } diff --git a/server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocLink-test.tsx.snap b/server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocLink-test.tsx.snap index 264acc8a5b4..4d443347a2e 100644 --- a/server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocLink-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocLink-test.tsx.snap @@ -9,19 +9,17 @@ exports[`should render documentation link 1`] = ` `; exports[`should render simple link 1`] = ` - + - + `; exports[`should render sonarcloud link 1`] = ` diff --git a/server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocTooltipLink-test.tsx.snap b/server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocTooltipLink-test.tsx.snap index 6d718398791..efb4518b4ae 100644 --- a/server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocTooltipLink-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocTooltipLink-test.tsx.snap @@ -1,9 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`should render internal link 1`] = ` - + - + `; exports[`should render simple link 1`] = ` - + - + `;