From 3e91fa14b1f87ee915902cefe8c1a1d776f23fd1 Mon Sep 17 00:00:00 2001 From: Zbynek Konecny Date: Sun, 1 Nov 2020 01:58:10 +0100 Subject: [PATCH 1/3] Move information to the sidebar, enforce max width --- src/components/LineChart.jsx | 17 ++---- src/components/PluginLastReleased.jsx | 6 +- src/components/PluginReadableInstalls.jsx | 2 +- src/styles/base.css | 57 +++++++++++++------ src/templates/plugin.jsx | 69 ++++++++++------------- 5 files changed, 80 insertions(+), 71 deletions(-) diff --git a/src/components/LineChart.jsx b/src/components/LineChart.jsx index 46160d610..c252af3fc 100644 --- a/src/components/LineChart.jsx +++ b/src/components/LineChart.jsx @@ -3,22 +3,13 @@ import PropTypes from 'prop-types'; import {Line} from 'react-chartjs-2'; import moment from 'moment'; -const calculateHeight = (total) => { - if (total > 100000) return 275; - if (total > 50000) return 250; - if (total > 25000) return 225; - if (total > 10000) return 200; - if (total > 5000) return 175; - return 150; -}; - const calculateMinMax = (data) => { const maxValue = Math.max(...data); // calculate a dynamic value to center the graph const scaleDifference = Math.pow(10, maxValue.toString().length-1); return { min: 0, - max: parseInt((maxValue/scaleDifference)+1)*scaleDifference // plus 1 to add more space in the top + max: Math.ceil((maxValue/scaleDifference) + 0.25)*scaleDifference // plus 0.25 to add more space in the top }; }; @@ -61,6 +52,7 @@ const options = (data) => { } }], yAxes: [{ + display: false, ticks: { min, max, @@ -77,13 +69,13 @@ const styles = { } }; -function LineChart({installations, total}) { +function LineChart({installations}) { if (!installations) { return null; } const labels = []; const data = []; - const height = calculateHeight(total); + const height = 80; const length = installations.length; installations.slice(length > 12 ? length - 12 : 0, length).forEach((installation) => { labels.push(moment.utc(installation.timestamp).format('MMM')); @@ -101,7 +93,6 @@ function LineChart({installations, total}) { } LineChart.propTypes = { - total: PropTypes.number.isRequired, installations: PropTypes.arrayOf(PropTypes.shape({ timestamp: PropTypes.number, total: PropTypes.number diff --git a/src/components/PluginLastReleased.jsx b/src/components/PluginLastReleased.jsx index ca704fd2e..7191a983d 100644 --- a/src/components/PluginLastReleased.jsx +++ b/src/components/PluginLastReleased.jsx @@ -17,10 +17,10 @@ const getTime = (plugin) => { function PluginLastReleased({plugin}) { const time = getTime(plugin); return ( -
- {'Last released: '} + + {'Released: '} -
+ ); } diff --git a/src/components/PluginReadableInstalls.jsx b/src/components/PluginReadableInstalls.jsx index 6260e8d5f..4a8e86b7c 100644 --- a/src/components/PluginReadableInstalls.jsx +++ b/src/components/PluginReadableInstalls.jsx @@ -5,7 +5,7 @@ function PluginReadableInstalls({currentInstalls}) { if (!currentInstalls) { return <>No usage data available; } - return <>{currentInstalls}; + return <>{new Intl.NumberFormat('en-US').format(currentInstalls)}; } PluginReadableInstalls.propTypes = { diff --git a/src/styles/base.css b/src/styles/base.css index 674516c37..4114ce4d7 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -66,20 +66,21 @@ body a:active {color:#c00} .NoLabels > .Categories label > span {margin-left:0 !important; color:#0275d8; cursor:pointer} h1.title { - margin-top: 1rem; + margin-top: 1rem; } body #grid-box .NoLabels {padding: 2rem 0; background:#e5f8ff} -body #grid-box .NoLabels .Cols3 {font-size:.85rem} +body #grid-box .NoLabels .Cols3 {font-size:.875rem} body #grid-box .NoLabels .Cols3 label > span {margin-left:.5rem} -body #grid-box .NoLabels .Entry-box {display:block; padding: 0.25rem 0; - line-height: 1rem; font-size:.85rem} +body #grid-box .NoLabels .Entry-box { + display: block; + padding: 0.25rem 0; + line-height: 1rem; + font-size:.875rem +} body #grid-box .NoLabels .Entry-box a {cursor:pointer} body #grid-box .NoLabels legend {font-size:1.1rem; } -.update-link {margin:4rem 0;} -.update-link h6 {margin-bottom:.25rem} - #cb-item-finder-grid-box > .grid > .no-results {padding:.5rem; color:rgba(0,0,0,.667); display:block;} .not-found-box {text-align:center;} .not-found {margin:6rem 0; padding:1.5rem 0 1.5rem 8rem; position:relative; display:inline-block; text-align:left;} @@ -222,19 +223,27 @@ transform: scale(-1, 1); .maintainers > .maintainer {display:block;} .container-fluid.padded {padding:3rem 4rem} -#pluginPage #grid-box {font-size:.85rem;} -#pluginPage #grid-box .gutter {background:#eee; padding:2rem } +#pluginPage #grid-box {font-size:.875rem;} +#pluginPage #grid-box .gutter {padding:2rem } #pluginPage #grid-box .gutter > .btn { display:block; text-align:left; padding:.5rem 1rem .75rem 3.5rem; position:relative; margin-bottom:1rem} #pluginPage #grid-box .gutter > .btn i {font-size:2.25rem; position:absolute; left:.75rem; top:.5rem} #pluginPage #grid-box .gutter > .btn > span {font-size:1.1rem; line-height:1.3rem; font-weight:500} #pluginPage #grid-box .gutter > .btn > .v {display:block; font-weight:200; font-size:.75rem; white-space:normal} #pluginPage #grid-box .gutter .lbl {display:inline-block; margin-right:.5rem} ##pluginPage #grid-box .gutter .label-link a{display:block; line-height: 1.5rem; padding: 4px 0;} -#pluginPage #grid-box .gutter .chart {margin:1rem 0 2rem} +#pluginPage #grid-box .gutter .chart {margin:1rem 0 0} + +.gutter .sidebarSection { + margin-top: 1rem; + padding-top:.5rem; + border-top: 1px #AAA solid; +} + #pluginPage #grid-box { margin-left: 15px; margin-right: 15px; } + #pluginPage #grid-box .download {margin:2rem 0 2rem -.5rem;} #pluginPage #grid-box .alert > .alert-icon { background-repeat: no-repeat; @@ -249,6 +258,11 @@ transform: scale(-1, 1); opacity: .54; } +#grid-box .pluginContainer { + max-width: 72rem; + margin: auto; +} + .alert-warning .alert-icon .main-path { fill: #856404 } @@ -274,8 +288,18 @@ transform: scale(-1, 1); } .row.flex {display:flex} -div.title-details .sub {display:block; font-weight:normal; font-size:.85rem; color:#999; margin-top:.25rem} -div.title-details .version {display:block; font-weight:normal; font-size:.85rem; color:#999; margin-top:.25rem} +div.title-details { + display: flex; + padding-top: 1rem; + padding-bottom: 1rem; + flex-wrap: wrap; + font-weight: normal; + font-size: 1rem; +} + +div.title-details time { + white-space: nowrap; +} .markdown-body .anchor {display:none} .markdown-body h1 {font-size:2rem; margin:4rem 0 1rem;} @@ -315,7 +339,7 @@ body .item-finder.Tiles a.item, .Tile { display: block; border: .1rem solid #ccc; - font-size: .85rem; + font-size: .875rem; height: 16.5rem; width:13rem; box-sizing: border-box; @@ -553,11 +577,11 @@ body .item-finder.Table .Entry-box:nth-child(odd) > .Entry > div.Excerpt{box-sha */ body .item-finder.Table a.Entry > div, .tbody > .Row > .Tile > div {display:table-cell; max-height:3.3rem; height:auto; padding:.25rem; border-bottom:1px solid #eee} -body .item-finder.Table a.Entry > div.Score {margin:0; font-size:.85rem; position:static} +body .item-finder.Table a.Entry > div.Score {margin:0; font-size:.875rem; position:static} body .item-finder.Table a.Entry > div.Wiki {display:none} body .item-finder.Table a.Entry > div.Title, .tbody > .Row > .Tile > div.Title{width:20%} -body .item-finder.Table a.Entry > div.Title > h4 {font-size:.85rem; color:#369; font-weight:bold;} +body .item-finder.Table a.Entry > div.Title > h4 {font-size:.875rem; color:#369; font-weight:bold;} body .item-finder.Table a.Entry > div.Icon, .tbody > .Row > .Tile > div.Icon {display:none} body .item-finder.Table a.Entry > div.Authors > div, @@ -620,7 +644,7 @@ nav .nav-item.active {box-shadow:inset #D33833 0 -2px} color:#999; padding:1px 2px; - font-size:.85rem; + font-size:.875rem; display:block; width:auto; position:relative; @@ -884,6 +908,7 @@ a.card:hover { /* From atlassian batch.css - https://wiki.jenkins.io/s/f68dfafb2b4588f7b31742327b4469ae-CDN/en_GB/6441/82994790ee2f720a5ec8daf4850ac5b7b34d2194/be65c4ed0984ca532b26983f5fc1813e/_/download/contextbatch/css/_super/batch.css?atlassian.aui.raphael.disabled=true */ .confluenceTable{border-collapse:collapse}.confluenceTh,.confluenceTd{border:1px solid #c1c7d0;padding:7px 10px;vertical-align:top;text-align:left;min-width:8px}.confluenceTable ol,.confluenceTable ul{margin-left:0;padding-left:22px}.confluenceTable,.table-wrap{margin:10px 0 0 0;overflow-x:auto}.confluenceTable:first-child,.table-wrap:first-child{margin-top:0}table.confluenceTable th.confluenceTh,table.confluenceTable th.confluenceTh>p,table.confluenceTable td.confluenceTd.highlight,table.confluenceTable td.confluenceTd.highlight>p,table.confluenceTable th.confluenceTh.highlight-grey,table.confluenceTable th.confluenceTh.highlight-grey>p,table.confluenceTable td.confluenceTd.highlight-grey,table.confluenceTable td.confluenceTd.highlight-grey>p{background-color:#f4f5f7}table.confluenceTable th.confluenceTh.info,table.confluenceTable th.confluenceTh.info>p,table.confluenceTable td.confluenceTd.highlight.info,table.confluenceTable td.confluenceTd.highlight.info>p,table.confluenceTable th.confluenceTh.highlight-blue,table.confluenceTable th.confluenceTh.highlight-blue>p,table.confluenceTable td.confluenceTd.highlight-blue,table.confluenceTable td.confluenceTd.highlight-blue>p{background-color:#deebff}table.confluenceTable th.confluenceTh.success,table.confluenceTable th.confluenceTh.success>p,table.confluenceTable td.confluenceTd.highlight.success,table.confluenceTable td.confluenceTd.highlight.success>p,table.confluenceTable th.confluenceTh.highlight-green,table.confluenceTable th.confluenceTh.highlight-green>p,table.confluenceTable td.confluenceTd.highlight-green,table.confluenceTable td.confluenceTd.highlight-green>p{background-color:#e3fcef}table.confluenceTable th.confluenceTh.warning,table.confluenceTable th.confluenceTh.warning>p,table.confluenceTable td.confluenceTd.highlight.warning,table.confluenceTable td.confluenceTd.highlight.warning>p,table.confluenceTable th.confluenceTh.highlight-red,table.confluenceTable th.confluenceTh.highlight-red>p,table.confluenceTable td.confluenceTd.highlight-red,table.confluenceTable td.confluenceTd.highlight-red>p{background-color:#ffebe5}table.confluenceTable th.confluenceTh.note,table.confluenceTable th.confluenceTh.note>p,table.confluenceTable td.confluenceTd.highlight.note,table.confluenceTable td.confluenceTd.highlight.note>p,table.confluenceTable th.confluenceTh.highlight-yellow,table.confluenceTable th.confluenceTh.highlight-yellow>p,table.confluenceTable td.confluenceTd.highlight-yellow,table.confluenceTable td.confluenceTd.highlight-yellow>p{background-color:#fffae5}table.confluenceTable th.confluenceTh,table.confluenceTable th.confluenceTh>p{font-weight:bold}table.confluenceTable th.confluenceTh.nohighlight,table.confluenceTable th.confluenceTh.nohighlight>p{font-weight:normal;background-color:transparent}table.confluenceTable td.confluenceTd img,table.confluenceTable td.confluenceTd .confluence-embedded-file-wrapper img,table.confluenceTable th.confluenceTh .confluence-embedded-file-wrapper img{max-width:none}table.confluenceTable td.numberingColumn{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default} + #grid-box .content { word-break: break-word; } diff --git a/src/templates/plugin.jsx b/src/templates/plugin.jsx index e7939e331..b624ac9d0 100644 --- a/src/templates/plugin.jsx +++ b/src/templates/plugin.jsx @@ -49,7 +49,7 @@ function PluginPage({data: {jenkinsPlugin: plugin, reverseDependencies: reverseD -
+

{cleanTitle(plugin.title)} @@ -66,34 +66,20 @@ function PluginPage({data: {jenkinsPlugin: plugin, reverseDependencies: reverseD
{state.selectedTab === 'documentation' && (<>
- + {'Version: '} {plugin.version} - - {'Minimum Jenkins requirement: '} + + + {'Requires Jenkins '} {plugin.requiredCore} - + {'ID: '} {plugin.name}
-
-
- {plugin.stats &&
- {'Installs: '} - -
} - {plugin.scm && plugin.scm.link && } - -
-
-
Maintainers
- -
-
- {plugin.wiki.content &&
} )} {state.selectedTab === 'releases' && } @@ -108,23 +94,31 @@ function PluginPage({data: {jenkinsPlugin: plugin, reverseDependencies: reverseD Archives Get past versions + {plugin.stats &&
+ {'Installs: '} + +
}
- -
Links
- {plugin.scm && plugin.scm.link && } - - -
Labels
- -
+
+
Links
+ {plugin.scm && plugin.scm.link && } + +
+
+
Labels
+ +
+
+
Maintainers
+ +
{shouldShowWikiUrl(plugin.wiki) && -
-
Help us to improve this page!
+
+
Help us improve this page!
{'This content is served from the '} Jenkins Wiki {' the '} @@ -135,17 +129,16 @@ function PluginPage({data: {jenkinsPlugin: plugin, reverseDependencies: reverseD
} {shouldShowGitHubUrl(plugin.wiki) && -
-
Help us to improve this page!
+
+
Help us improve this page!
{'To propose a change submit a pull request to '} the plugin page - {' on GitHub. Read more about GitHub support on the plugin site in the '} - Jenkins developer documentation - {'.'} + {' on GitHub.'}
} - - +
+ +
From e980ce1fbe9b8627b53e06b8f1fcb1290780a4af Mon Sep 17 00:00:00 2001 From: Zbynek Konecny Date: Sun, 8 Nov 2020 11:54:21 +0100 Subject: [PATCH 2/3] Move version to sidebar, ID to header --- src/components/PluginLastReleased.jsx | 4 +- src/styles/base.css | 18 ++++---- src/templates/plugin.jsx | 59 ++++++++++++++------------- 3 files changed, 41 insertions(+), 40 deletions(-) diff --git a/src/components/PluginLastReleased.jsx b/src/components/PluginLastReleased.jsx index 7191a983d..a4b247489 100644 --- a/src/components/PluginLastReleased.jsx +++ b/src/components/PluginLastReleased.jsx @@ -17,10 +17,10 @@ const getTime = (plugin) => { function PluginLastReleased({plugin}) { const time = getTime(plugin); return ( - +
{'Released: '} - +
); } diff --git a/src/styles/base.css b/src/styles/base.css index 4114ce4d7..0d337611d 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -66,7 +66,7 @@ body a:active {color:#c00} .NoLabels > .Categories label > span {margin-left:0 !important; color:#0275d8; cursor:pointer} h1.title { - margin-top: 1rem; + margin-right: 2rem; } body #grid-box .NoLabels {padding: 2rem 0; background:#e5f8ff} @@ -288,17 +288,17 @@ transform: scale(-1, 1); } .row.flex {display:flex} -div.title-details { - display: flex; - padding-top: 1rem; - padding-bottom: 1rem; +.title-wrapper { + display:flex; flex-wrap: wrap; - font-weight: normal; - font-size: 1rem; + justify-content: space-between; + align-items: center; + margin-top: 1rem; } -div.title-details time { - white-space: nowrap; +.plugin-id { + opacity: .7; + margin-bottom: .5rem; } .markdown-body .anchor {display:none} diff --git a/src/templates/plugin.jsx b/src/templates/plugin.jsx index b624ac9d0..c080b812b 100644 --- a/src/templates/plugin.jsx +++ b/src/templates/plugin.jsx @@ -51,9 +51,15 @@ function PluginPage({data: {jenkinsPlugin: plugin, reverseDependencies: reverseD
-

- {cleanTitle(plugin.title)} -

+
+

+ {cleanTitle(plugin.title)} +

+
+ {'ID: '} + {plugin.name} +
+
    @@ -65,21 +71,6 @@ function PluginPage({data: {jenkinsPlugin: plugin, reverseDependencies: reverseD
{state.selectedTab === 'documentation' && (<> -
- - {'Version: '} - {plugin.version} - - - - {'Requires Jenkins '} - {plugin.requiredCore} - - - {'ID: '} - {plugin.name} - -
{plugin.wiki.content &&
} )} {state.selectedTab === 'releases' && } @@ -94,14 +85,22 @@ function PluginPage({data: {jenkinsPlugin: plugin, reverseDependencies: reverseD Archives Get past versions - {plugin.stats &&
- {'Installs: '} - -
} -
- +
{`Version: ${plugin.version}`}
+ +
+ {'Requires Jenkins '} + {plugin.requiredCore} +
+
+ {plugin.stats &&
+ {'Installs: '} + +
} +
+ +
Links
@@ -136,9 +135,11 @@ function PluginPage({data: {jenkinsPlugin: plugin, reverseDependencies: reverseD {' on GitHub.'}
} -
- -
+ {plugin.securityWarnings && +
+ +
+ }
From 56adb99fbf1ae99e756d5ed28ffe64d69445cb5f Mon Sep 17 00:00:00 2001 From: Zbynek Konecny Date: Mon, 9 Nov 2020 00:18:56 +0100 Subject: [PATCH 3/3] Simplify formula for y-axis max --- src/components/LineChart.jsx | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/src/components/LineChart.jsx b/src/components/LineChart.jsx index c252af3fc..65306e80d 100644 --- a/src/components/LineChart.jsx +++ b/src/components/LineChart.jsx @@ -3,14 +3,8 @@ import PropTypes from 'prop-types'; import {Line} from 'react-chartjs-2'; import moment from 'moment'; -const calculateMinMax = (data) => { - const maxValue = Math.max(...data); - // calculate a dynamic value to center the graph - const scaleDifference = Math.pow(10, maxValue.toString().length-1); - return { - min: 0, - max: Math.ceil((maxValue/scaleDifference) + 0.25)*scaleDifference // plus 0.25 to add more space in the top - }; +const calculateMax = (data) => { + return 1.2 * Math.max(...data); }; const chartData = (labels, data) => { @@ -30,7 +24,6 @@ const chartData = (labels, data) => { }; const options = (data) => { - const {min, max} = calculateMinMax(data); return { responsive: true, maintainAspectRatio: false, @@ -54,8 +47,8 @@ const options = (data) => { yAxes: [{ display: false, ticks: { - min, - max, + min: 0, + max: calculateMax(data), fontSize: 9, } }]