From fd332346038fd0535370afb980450c8854954e0a Mon Sep 17 00:00:00 2001 From: Dave Verwer Date: Wed, 21 May 2025 14:34:19 +0100 Subject: [PATCH 01/14] Matrix re-design to cope with new platforms. --- FrontEnd/styles/colors.scss | 4 + FrontEnd/styles/matrix.scss | 192 +++++------------- .../GetRoute.Model+ext.swift | 26 ++- .../Views/PackageController/PackageShow.swift | 15 +- 4 files changed, 73 insertions(+), 164 deletions(-) diff --git a/FrontEnd/styles/colors.scss b/FrontEnd/styles/colors.scss index 938669322..03f47fced 100644 --- a/FrontEnd/styles/colors.scss +++ b/FrontEnd/styles/colors.scss @@ -96,6 +96,8 @@ --breadcrumb: var(--light-grey); --breadcrumb-header: var(--grey); + --separator-text: var(--light-grey); + --announcement-background: var(--very-light-grey); --bordered-button-background: var(--very-very-light-grey); @@ -250,6 +252,8 @@ --breadcrumb: var(--dark-grey); + --separator-text: var(--dark-grey); + --announcement-background: var(--very-dark-grey); --bordered-button-background: var(--very-very-dark-grey); diff --git a/FrontEnd/styles/matrix.scss b/FrontEnd/styles/matrix.scss index 8bea5fb01..4d2847a4e 100644 --- a/FrontEnd/styles/matrix.scss +++ b/FrontEnd/styles/matrix.scss @@ -18,8 +18,8 @@ // ------------------------------------------------------------------------- .matrices { - display: grid; - gap: 20px; + display: flex; + flex-direction: column; a { color: var(--page-text); @@ -27,169 +27,73 @@ } .matrix { + display: flex; + flex-direction: column; + gap: 20px; margin: 0; - padding: 0; + padding: 20px 0; + list-style: none; - li { - margin: 5px 0; - - @media screen and (max-width: $mobile-breakpoint) { - margin: 20px 0; - } - } - - .row { - display: grid; - grid-template-columns: 3fr 7fr; + .version { + display: flex; + flex-direction: column; + gap: 5px; - .row-labels { + .label { display: flex; - grid-row: 2; - flex-direction: column; - justify-content: center; - - p { - margin: 0; + gap: 0.5ch; + + span { + overflow: hidden; + flex-basis: 0; + flex-grow: 1; + max-width: fit-content; + white-space: nowrap; + text-overflow: ellipsis; } - } - .column-labels { - display: flex; - grid-column: 2; - flex-direction: row; - } - - .results { - display: flex; - grid-column: 2; - flex-direction: row; - } - - // Show the column labels only for the first row on desktop. - // Note: This is a *desktop only* media query. - @media not all and (max-width: $mobile-breakpoint) { - &:not(:first-child) { - .row-labels { - grid-row: unset; - } - - .column-labels { - display: none; - } + .separator { + font-size: 14px; + font-weight: 600; + color: var(--separator-text); } } - @media (max-width: $mobile-breakpoint) { - grid-template-columns: 1fr; - - .row-labels, - .column-labels, - .results { - grid-column: unset; - grid-row: unset; + .results { + display: grid; + grid-template-columns: repeat(var(--items-per-row), 1fr); + gap: 5px; + + .result-label { + font-size: 14px; + font-weight: 600; + text-align: center; } - } - } - - .column-labels > div { - display: flex; - flex-direction: column; - flex-basis: 0; - flex-grow: 1; - align-items: center; - justify-content: flex-start; - padding: 5px 0; - font-size: 14px; - font-weight: 600; - small { - font-weight: normal; - } - } - - .results > div { - display: flex; - flex-basis: 0; - flex-grow: 1; - align-items: center; - justify-content: center; - height: 35px; - margin: 0 3px; - } - - &.compatibility { - .results { - & > div { + .result { + min-height: 30px; background-position: center center; background-repeat: no-repeat; background-size: 20px; - } - - & > .pending, - & > .unknown { - background-color: var(--grid-default-background); - background-image: var(--image-compatibility-unknown); - } - & > .compatible { - background-color: var(--grid-compatible-background); - background-image: var(--image-compatible); - } - - & > .incompatible { - background-color: var(--grid-incompatible-background); - background-image: var(--image-incompatible); - } - } - } - - &.builds { - .column-labels > div > span { - font-size: 16px; - background-position: top 4px right; - } - - .results > div { - position: relative; - background-color: var(--grid-default-background); - - &.succeeded > a, - &.failed > a { - padding-left: 25px; - background-position: left center; - background-repeat: no-repeat; - background-size: 18px; - } - - &.succeeded { - background-color: var(--grid-succeeded-background); - - a { - background-image: var(--image-build-succeeded); + &.pending, + &.unknown { + background-color: var(--grid-default-background); + background-image: var(--image-compatibility-unknown); } - } - &.failed { - background-color: var(--grid-failed-background); + &.compatible { + background-color: var(--grid-compatible-background); + background-image: var(--image-compatible); + } - a { - background-image: var(--image-build-failed); + &.incompatible { + background-color: var(--grid-incompatible-background); + background-image: var(--image-incompatible); } } - > .generated-docs { - position: absolute; - right: 5px; - display: inline-block; - width: 25px; - height: 25px; - background-position: center; - background-repeat: no-repeat; - background-size: 15px; - background-color: var(--grid-callout-background); - background-image: var(--image-documentation); - border-radius: 50%; - } + // TODO: The content of this grid's children need to be flexed for when we have a `small` beta label. } } } diff --git a/Sources/App/Views/PackageController/GetRoute.Model+ext.swift b/Sources/App/Views/PackageController/GetRoute.Model+ext.swift index fd199650e..b8fb9466e 100644 --- a/Sources/App/Views/PackageController/GetRoute.Model+ext.swift +++ b/Sources/App/Views/PackageController/GetRoute.Model+ext.swift @@ -578,8 +578,8 @@ extension API.PackageController.GetRoute.Model { return .a( .href(SiteURL.package(.value(repositoryOwner), .value(repositoryName), .builds).relativeURL()), .ul( - .class("matrix compatibility"), - .forEach(rows) { compatibilityListItem($0.labelParagraphNode, cells: $0.results.all) } + .class("matrix"), + .forEach(rows) { compatibilityListItem($0.labelNode, cells: $0.results.all) } ) ) } @@ -590,29 +590,26 @@ extension API.PackageController.GetRoute.Model { return .a( .href(SiteURL.package(.value(repositoryOwner), .value(repositoryName), .builds).relativeURL()), .ul( - .class("matrix compatibility"), - .forEach(rows) { compatibilityListItem($0.labelParagraphNode, cells: $0.results.all) } + .class("matrix"), + .forEach(rows) { compatibilityListItem($0.labelNode, cells: $0.results.all) } ) ) } func compatibilityListItem( - _ labelParagraphNode: Node, + _ labelNode: Node, cells: [CompatibilityMatrix.BuildResult] ) -> Node { return .li( - .class("row"), - .div( - .class("row-labels"), - labelParagraphNode - ), - // Matrix CSS should include *both* the column labels, and the column values status boxes in *every* row. + .class("version"), .div( - .class("column-labels"), - .forEach(cells) { $0.headerNode } + .class("label"), + labelNode ), .div( .class("results"), + .style("--items-per-row: \(cells.count)"), + .forEach(cells) { $0.headerNode }, .forEach(cells) { $0.cellNode } ) ) @@ -683,6 +680,7 @@ private extension License.Kind { private extension CompatibilityMatrix.BuildResult where T: BuildResultPresentable { var headerNode: Node { .div( + .class("result-label"), .text(parameter.displayName), .unwrap(parameter.note) { .small(.text("(\($0))")) } ) @@ -690,7 +688,7 @@ private extension CompatibilityMatrix.BuildResult where T: BuildResultPresentabl var cellNode: Node { .div( - .class("\(status.cssClass)"), + .class("result \(status.cssClass)"), .title(title) ) } diff --git a/Sources/App/Views/PackageController/PackageShow.swift b/Sources/App/Views/PackageController/PackageShow.swift index 5520178a2..d4d1248ab 100644 --- a/Sources/App/Views/PackageController/PackageShow.swift +++ b/Sources/App/Views/PackageController/PackageShow.swift @@ -50,13 +50,16 @@ enum PackageShow { self.results = namedResult.results } - var labelParagraphNode: Node { + var labelNode: Node { guard !references.isEmpty else { return .empty } - return .p( - .group( - listPhrase(nodes: references.map(\.node)) - ) - ) + + var versionsAndSeparators = references.flatMap { reference -> [Node] in + [reference.node, .span(.class("separator"), .text("/"))] + } + if versionsAndSeparators.isEmpty == false { + versionsAndSeparators.removeLast() + } + return .group(versionsAndSeparators) } } } From 535669ff8328ecaeec5a0b0d7767df1dcf65d763 Mon Sep 17 00:00:00 2001 From: Dave Verwer Date: Wed, 21 May 2025 18:14:40 +0100 Subject: [PATCH 02/14] Build results page restoration. --- FrontEnd/main.scss | 1 + FrontEnd/styles/build_results.scss | 154 ++++++++++++++++++ .../Builds/BuildIndex+View.swift | 2 +- 3 files changed, 156 insertions(+), 1 deletion(-) create mode 100644 FrontEnd/styles/build_results.scss diff --git a/FrontEnd/main.scss b/FrontEnd/main.scss index a3f98f559..82db2417c 100644 --- a/FrontEnd/main.scss +++ b/FrontEnd/main.scss @@ -22,6 +22,7 @@ $mobile-breakpoint: 740px; @import 'styles/breadcrumbs'; @import 'styles/build_logs'; @import 'styles/build_monitor'; +@import 'styles/build_results'; @import 'styles/copyable_input'; @import 'styles/error'; @import 'styles/github_highlighting'; diff --git a/FrontEnd/styles/build_results.scss b/FrontEnd/styles/build_results.scss new file mode 100644 index 000000000..3c49965c0 --- /dev/null +++ b/FrontEnd/styles/build_results.scss @@ -0,0 +1,154 @@ +// Copyright Dave Verwer, Sven A. Schmidt, and other contributors. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +// ------------------------------------------------------------------------- +// Build results page, showing all builds for a package. +// ------------------------------------------------------------------------- + +.build-results { + margin: 0; + padding: 0; + + li { + margin: 5px 0; + + @media screen and (max-width: $mobile-breakpoint) { + margin: 20px 0; + } + } + + .row { + display: grid; + grid-template-columns: 3fr 7fr; + + .row-labels { + display: flex; + grid-row: 2; + flex-direction: column; + justify-content: center; + + p { + margin: 0; + } + } + + .column-labels { + display: flex; + grid-column: 2; + flex-direction: row; + } + + .results { + display: flex; + grid-column: 2; + flex-direction: row; + } + + &:not(:first-child) { + .row-labels { + grid-row: unset; + } + + .column-labels { + display: none; + } + } + + @media (max-width: $mobile-breakpoint) { + grid-template-columns: 1fr; + + .row-labels, + .column-labels, + .results { + grid-column: unset; + grid-row: unset; + } + + .column-labels { + display: flex; + } + } + } + + .column-labels > div { + display: flex; + flex-direction: column; + flex-basis: 0; + flex-grow: 1; + align-items: center; + justify-content: flex-start; + padding: 5px 0; + font-size: 14px; + font-weight: 600; + + small { + font-weight: normal; + } + } + + .results > div { + position: relative; + display: flex; + flex-basis: 0; + flex-grow: 1; + align-items: center; + justify-content: center; + height: 35px; + margin: 0 3px; + background-color: var(--grid-default-background); + + &.succeeded > a, + &.failed > a { + padding-left: 25px; + background-position: left center; + background-repeat: no-repeat; + background-size: 18px; + } + + &.succeeded { + background-color: var(--grid-succeeded-background); + + a { + background-image: var(--image-build-succeeded); + } + } + + &.failed { + background-color: var(--grid-failed-background); + + a { + background-image: var(--image-build-failed); + } + } + + > .generated-docs { + position: absolute; + right: 5px; + display: inline-block; + width: 25px; + height: 25px; + background-position: center; + background-repeat: no-repeat; + background-size: 15px; + background-color: var(--grid-callout-background); + background-image: var(--image-documentation); + border-radius: 50%; + } + } + + .column-labels > div > span { + font-size: 16px; + background-position: top 4px right; + } +} diff --git a/Sources/App/Views/PackageController/Builds/BuildIndex+View.swift b/Sources/App/Views/PackageController/Builds/BuildIndex+View.swift index 8ba3a36da..cc3bda51a 100644 --- a/Sources/App/Views/PackageController/Builds/BuildIndex+View.swift +++ b/Sources/App/Views/PackageController/Builds/BuildIndex+View.swift @@ -87,7 +87,7 @@ enum BuildIndex { }) ), .ul( - .class("matrix builds"), + .class("build-results"), .group(model.buildMatrix[swiftVersion].map(\.node)) ) ) From 95cff9c0c20d9840e3b3c946693e9ca12d75785b Mon Sep 17 00:00:00 2001 From: Dave Verwer Date: Thu, 22 May 2025 10:15:07 +0100 Subject: [PATCH 03/14] Snapshots. --- .../BuildIndex_document.1.html | 8 +- .../PackageShow_document.1.html | 195 ++++++++---------- ...ment_app_store_incompatible_license.1.html | 195 ++++++++---------- ...PackageShow_document_binary_targets.1.html | 195 ++++++++---------- ...ument_canonicalURL_noImageSnapshots.1.html | 195 ++++++++---------- ...ckageShow_document_customCollection.1.html | 195 ++++++++---------- .../PackageShow_document_emoji_summary.1.html | 195 ++++++++---------- .../PackageShow_document_few_keywords.1.html | 195 ++++++++---------- .../PackageShow_document_many_keywords.1.html | 195 ++++++++---------- ...geShow_document_no_authors_activity.1.html | 195 ++++++++---------- .../PackageShow_document_no_license.1.html | 195 ++++++++---------- ...geShow_document_open_source_license.1.html | 195 ++++++++---------- .../PackageShow_document_other_license.1.html | 195 ++++++++---------- ...kageShow_document_single_row_tables.1.html | 88 ++++---- ...ow_document_withPackageFundingLinks.1.html | 195 ++++++++---------- ...ow_document_with_documentation_link.1.html | 195 ++++++++---------- 16 files changed, 1278 insertions(+), 1548 deletions(-) diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/BuildIndex_document.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/BuildIndex_document.1.html index 4934741af..05d76d736 100644 --- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/BuildIndex_document.1.html +++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/BuildIndex_document.1.html @@ -105,7 +105,7 @@

Build Results

Swift 6.1

- diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/PackageShow_document_single_row_tables.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/PackageShow_document_single_row_tables.1.html index a22c67b33..a4907f3a0 100644 --- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/PackageShow_document_single_row_tables.1.html +++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/PackageShow_document_single_row_tables.1.html @@ -216,12 +216,8 @@

Compatibility

watchOS
tvOS
Linux
-
Wasm - (Pending) -
-
Android - (Pending) -
+
Wasm
+
Android
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/PackageShow_document_withPackageFundingLinks.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/PackageShow_document_withPackageFundingLinks.1.html index 84c44d0e4..8e98cd2fe 100644 --- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/PackageShow_document_withPackageFundingLinks.1.html +++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/PackageShow_document_withPackageFundingLinks.1.html @@ -198,9 +198,7 @@

Compatibility

6.1
-
6.0 - (Pending) -
+
6.0
5.10
5.9
@@ -226,27 +224,13 @@

Compatibility

iOS
-
macOS - (Pending) -
-
visionOS - (Pending) -
-
watchOS - (Pending) -
-
tvOS - (Pending) -
-
Linux - (Pending) -
-
Wasm - (Pending) -
-
Android - (Pending) -
+
macOS
+
visionOS
+
watchOS
+
tvOS
+
Linux
+
Wasm
+
Android
  • @@ -257,17 +241,11 @@

    Compatibility

    iOS
    macOS
    visionOS
    -
    watchOS - (Pending) -
    +
    watchOS
    tvOS
    Linux
    -
    Wasm - (Pending) -
    -
    Android - (Pending) -
    +
    Wasm
    +
    Android
  • @@ -281,12 +259,8 @@

    Compatibility

    watchOS
    tvOS
    Linux
    -
    Wasm - (Pending) -
    -
    Android - (Pending) -
    +
    Wasm
    +
    Android
    • diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/PackageShow_document_with_documentation_link.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/PackageShow_document_with_documentation_link.1.html index 4cad113d5..505c33b54 100644 --- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/PackageShow_document_with_documentation_link.1.html +++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/PackageShow_document_with_documentation_link.1.html @@ -190,9 +190,7 @@

    Compatibility

    6.1
    -
    6.0 - (Pending) -
    +
    6.0
    5.10
    5.9
    @@ -218,27 +216,13 @@

    Compatibility

    iOS
    -
    macOS - (Pending) -
    -
    visionOS - (Pending) -
    -
    watchOS - (Pending) -
    -
    tvOS - (Pending) -
    -
    Linux - (Pending) -
    -
    Wasm - (Pending) -
    -
    Android - (Pending) -
    +
    macOS
    +
    visionOS
    +
    watchOS
    +
    tvOS
    +
    Linux
    +
    Wasm
    +
    Android
  • @@ -249,17 +233,11 @@

    Compatibility

    iOS
    macOS
    visionOS
    -
    watchOS - (Pending) -
    +
    watchOS
    tvOS
    Linux
    -
    Wasm - (Pending) -
    -
    Android - (Pending) -
    +
    Wasm
    +
    Android
  • @@ -273,12 +251,8 @@

    Compatibility

    watchOS
    tvOS
    Linux
    -
    Wasm - (Pending) -
    -
    Android - (Pending) -
    +
    Wasm
    +
    Android
    • From 05b38d715285dea443963dc34889b0612d454fdc Mon Sep 17 00:00:00 2001 From: Dave Verwer Date: Fri, 23 May 2025 09:02:05 +0100 Subject: [PATCH 11/14] Dark mode colour fix. --- FrontEnd/styles/colors.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/FrontEnd/styles/colors.scss b/FrontEnd/styles/colors.scss index cde795d0f..6a00ce32e 100644 --- a/FrontEnd/styles/colors.scss +++ b/FrontEnd/styles/colors.scss @@ -279,6 +279,7 @@ --rule-thin-background: var(--dark-grey); --grid-default-background: var(--very-very-dark-grey); + --grid-default-text: var(--dark-grey); --grid-default-border: var(--very-dark-grey); --grid-compatible-background: var(--mid-green); --grid-incompatible-background: var(--very-dark-grey); From 930edf275327093c9b31a512b7f0e56b29dc3cf6 Mon Sep 17 00:00:00 2001 From: Dave Verwer Date: Mon, 26 May 2025 12:14:45 +0100 Subject: [PATCH 12/14] Fixed up the heart clipping on the home page use of `two-column`. --- FrontEnd/styles/layout.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/FrontEnd/styles/layout.scss b/FrontEnd/styles/layout.scss index 2a73a5c4c..4c6960706 100644 --- a/FrontEnd/styles/layout.scss +++ b/FrontEnd/styles/layout.scss @@ -27,14 +27,11 @@ main > .inner { .two-column { display: grid; - overflow: hidden; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 60px; - min-width: 0; > :last-child { justify-self: end; - min-width: 0; } &.even { From 9a98141d448db01363c65a80e6c23d788c2dfbf9 Mon Sep 17 00:00:00 2001 From: Dave Verwer Date: Mon, 26 May 2025 13:46:21 +0100 Subject: [PATCH 13/14] Responsive style for new matrix. --- FrontEnd/styles/matrix.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/FrontEnd/styles/matrix.scss b/FrontEnd/styles/matrix.scss index d48fdcef0..c162935d3 100644 --- a/FrontEnd/styles/matrix.scss +++ b/FrontEnd/styles/matrix.scss @@ -95,6 +95,11 @@ font-size: 9px; } } + + @media screen and (max-width: $mobile-breakpoint) { + grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); + grid-auto-rows: 1fr; + } } } } From 202caf50dcc5181da51c48274f4ed7a601ea6c85 Mon Sep 17 00:00:00 2001 From: Dave Verwer Date: Mon, 26 May 2025 14:03:58 +0100 Subject: [PATCH 14/14] Fixed mobile issue with the full build results page. --- FrontEnd/styles/build_results.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/FrontEnd/styles/build_results.scss b/FrontEnd/styles/build_results.scss index 3c49965c0..c51aebd4a 100644 --- a/FrontEnd/styles/build_results.scss +++ b/FrontEnd/styles/build_results.scss @@ -63,6 +63,12 @@ .column-labels { display: none; } + + @media (max-width: $mobile-breakpoint) { + .column-labels { + display: flex; + } + } } @media (max-width: $mobile-breakpoint) { @@ -74,10 +80,6 @@ grid-column: unset; grid-row: unset; } - - .column-labels { - display: flex; - } } }