Skip to content

Commit e9251bc

Browse files
daveverwerdaveverwer
committed
Matrix re-design to cope with new platforms.
1 parent 458a472 commit e9251bc

File tree

4 files changed

+73
-164
lines changed

4 files changed

+73
-164
lines changed

‎FrontEnd/styles/colors.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,8 @@
9696
--breadcrumb: var(--light-grey);
9797
--breadcrumb-header: var(--grey);
9898

99+
--separator-text: var(--light-grey);
100+
99101
--announcement-background: var(--very-light-grey);
100102

101103
--bordered-button-background: var(--very-very-light-grey);
@@ -250,6 +252,8 @@
250252

251253
--breadcrumb: var(--dark-grey);
252254

255+
--separator-text: var(--dark-grey);
256+
253257
--announcement-background: var(--very-dark-grey);
254258

255259
--bordered-button-background: var(--very-very-dark-grey);

‎FrontEnd/styles/matrix.scss‎

Lines changed: 48 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -18,178 +18,82 @@
1818
// -------------------------------------------------------------------------
1919

2020
.matrices {
21-
display: grid;
22-
gap: 20px;
21+
display: flex;
22+
flex-direction: column;
2323

2424
a {
2525
color: var(--page-text);
2626
}
2727
}
2828

2929
.matrix {
30+
display: flex;
31+
flex-direction: column;
32+
gap: 20px;
3033
margin: 0;
31-
padding: 0;
34+
padding: 20px 0;
35+
list-style: none;
3236

33-
li {
34-
margin: 5px 0;
35-
36-
@media screen and (max-width: $mobile-breakpoint) {
37-
margin: 20px 0;
38-
}
39-
}
40-
41-
.row {
42-
display: grid;
43-
grid-template-columns: 3fr 7fr;
37+
.version {
38+
display: flex;
39+
flex-direction: column;
40+
gap: 5px;
4441

45-
.row-labels {
42+
.label {
4643
display: flex;
47-
grid-row: 2;
48-
flex-direction: column;
49-
justify-content: center;
50-
51-
p {
52-
margin: 0;
44+
gap: 0.5ch;
45+
46+
span {
47+
overflow: hidden;
48+
flex-basis: 0;
49+
flex-grow: 1;
50+
max-width: fit-content;
51+
white-space: nowrap;
52+
text-overflow: ellipsis;
5353
}
54-
}
5554

56-
.column-labels {
57-
display: flex;
58-
grid-column: 2;
59-
flex-direction: row;
60-
}
61-
62-
.results {
63-
display: flex;
64-
grid-column: 2;
65-
flex-direction: row;
66-
}
67-
68-
// Show the column labels only for the first row on desktop.
69-
// Note: This is a *desktop only* media query.
70-
@media not all and (max-width: $mobile-breakpoint) {
71-
&:not(:first-child) {
72-
.row-labels {
73-
grid-row: unset;
74-
}
75-
76-
.column-labels {
77-
display: none;
78-
}
55+
.separator {
56+
font-size: 14px;
57+
font-weight: 600;
58+
color: var(--separator-text);
7959
}
8060
}
8161

82-
@media (max-width: $mobile-breakpoint) {
83-
grid-template-columns: 1fr;
84-
85-
.row-labels,
86-
.column-labels,
87-
.results {
88-
grid-column: unset;
89-
grid-row: unset;
62+
.results {
63+
display: grid;
64+
grid-template-columns: repeat(var(--items-per-row), 1fr);
65+
gap: 5px;
66+
67+
.result-label {
68+
font-size: 14px;
69+
font-weight: 600;
70+
text-align: center;
9071
}
91-
}
92-
}
93-
94-
.column-labels > div {
95-
display: flex;
96-
flex-direction: column;
97-
flex-basis: 0;
98-
flex-grow: 1;
99-
align-items: center;
100-
justify-content: flex-start;
101-
padding: 5px 0;
102-
font-size: 14px;
103-
font-weight: 600;
10472

105-
small {
106-
font-weight: normal;
107-
}
108-
}
109-
110-
.results > div {
111-
display: flex;
112-
flex-basis: 0;
113-
flex-grow: 1;
114-
align-items: center;
115-
justify-content: center;
116-
height: 35px;
117-
margin: 0 3px;
118-
}
119-
120-
&.compatibility {
121-
.results {
122-
& > div {
73+
.result {
74+
min-height: 30px;
12375
background-position: center center;
12476
background-repeat: no-repeat;
12577
background-size: 20px;
126-
}
127-
128-
& > .pending,
129-
& > .unknown {
130-
background-color: var(--grid-default-background);
131-
background-image: var(--image-compatibility-unknown);
132-
}
13378

134-
& > .compatible {
135-
background-color: var(--grid-compatible-background);
136-
background-image: var(--image-compatible);
137-
}
138-
139-
& > .incompatible {
140-
background-color: var(--grid-incompatible-background);
141-
background-image: var(--image-incompatible);
142-
}
143-
}
144-
}
145-
146-
&.builds {
147-
.column-labels > div > span {
148-
font-size: 16px;
149-
background-position: top 4px right;
150-
}
151-
152-
.results > div {
153-
position: relative;
154-
background-color: var(--grid-default-background);
155-
156-
&.succeeded > a,
157-
&.failed > a {
158-
padding-left: 25px;
159-
background-position: left center;
160-
background-repeat: no-repeat;
161-
background-size: 18px;
162-
}
163-
164-
&.succeeded {
165-
background-color: var(--grid-succeeded-background);
166-
167-
a {
168-
background-image: var(--image-build-succeeded);
79+
&.pending,
80+
&.unknown {
81+
background-color: var(--grid-default-background);
82+
background-image: var(--image-compatibility-unknown);
16983
}
170-
}
17184

172-
&.failed {
173-
background-color: var(--grid-failed-background);
85+
&.compatible {
86+
background-color: var(--grid-compatible-background);
87+
background-image: var(--image-compatible);
88+
}
17489

175-
a {
176-
background-image: var(--image-build-failed);
90+
&.incompatible {
91+
background-color: var(--grid-incompatible-background);
92+
background-image: var(--image-incompatible);
17793
}
17894
}
17995

180-
> .generated-docs {
181-
position: absolute;
182-
right: 5px;
183-
display: inline-block;
184-
width: 25px;
185-
height: 25px;
186-
background-position: center;
187-
background-repeat: no-repeat;
188-
background-size: 15px;
189-
background-color: var(--grid-callout-background);
190-
background-image: var(--image-documentation);
191-
border-radius: 50%;
192-
}
96+
// TODO: The content of this grid's children need to be flexed for when we have a `small` beta label.
19397
}
19498
}
19599
}

‎Sources/App/Views/PackageController/GetRoute.Model+ext.swift‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -578,8 +578,8 @@ extension API.PackageController.GetRoute.Model {
578578
return .a(
579579
.href(SiteURL.package(.value(repositoryOwner), .value(repositoryName), .builds).relativeURL()),
580580
.ul(
581-
.class("matrix compatibility"),
582-
.forEach(rows) { compatibilityListItem($0.labelParagraphNode, cells: $0.results.all) }
581+
.class("matrix"),
582+
.forEach(rows) { compatibilityListItem($0.labelNode, cells: $0.results.all) }
583583
)
584584
)
585585
}
@@ -590,29 +590,26 @@ extension API.PackageController.GetRoute.Model {
590590
return .a(
591591
.href(SiteURL.package(.value(repositoryOwner), .value(repositoryName), .builds).relativeURL()),
592592
.ul(
593-
.class("matrix compatibility"),
594-
.forEach(rows) { compatibilityListItem($0.labelParagraphNode, cells: $0.results.all) }
593+
.class("matrix"),
594+
.forEach(rows) { compatibilityListItem($0.labelNode, cells: $0.results.all) }
595595
)
596596
)
597597
}
598598

599599
func compatibilityListItem<T: BuildResultPresentable>(
600-
_ labelParagraphNode: Node<HTML.BodyContext>,
600+
_ labelNode: Node<HTML.BodyContext>,
601601
cells: [CompatibilityMatrix.BuildResult<T>]
602602
) -> Node<HTML.ListContext> {
603603
return .li(
604-
.class("row"),
605-
.div(
606-
.class("row-labels"),
607-
labelParagraphNode
608-
),
609-
// Matrix CSS should include *both* the column labels, and the column values status boxes in *every* row.
604+
.class("version"),
610605
.div(
611-
.class("column-labels"),
612-
.forEach(cells) { $0.headerNode }
606+
.class("label"),
607+
labelNode
613608
),
614609
.div(
615610
.class("results"),
611+
.style("--items-per-row: \(cells.count)"),
612+
.forEach(cells) { $0.headerNode },
616613
.forEach(cells) { $0.cellNode }
617614
)
618615
)
@@ -683,14 +680,15 @@ private extension License.Kind {
683680
private extension CompatibilityMatrix.BuildResult where T: BuildResultPresentable {
684681
var headerNode: Node<HTML.BodyContext> {
685682
.div(
683+
.class("result-label"),
686684
.text(parameter.displayName),
687685
.unwrap(parameter.note) { .small(.text("(\($0))")) }
688686
)
689687
}
690688

691689
var cellNode: Node<HTML.BodyContext> {
692690
.div(
693-
.class("\(status.cssClass)"),
691+
.class("result \(status.cssClass)"),
694692
.title(title)
695693
)
696694
}

‎Sources/App/Views/PackageController/PackageShow.swift‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,16 @@ enum PackageShow {
5050
self.results = namedResult.results
5151
}
5252

53-
var labelParagraphNode: Node<HTML.BodyContext> {
53+
var labelNode: Node<HTML.BodyContext> {
5454
guard !references.isEmpty else { return .empty }
55-
return .p(
56-
.group(
57-
listPhrase(nodes: references.map(\.node))
58-
)
59-
)
55+
56+
var versionsAndSeparators = references.flatMap { reference -> [Node<HTML.BodyContext>] in
57+
[reference.node, .span(.class("separator"), .text("/"))]
58+
}
59+
if versionsAndSeparators.isEmpty == false {
60+
versionsAndSeparators.removeLast()
61+
}
62+
return .group(versionsAndSeparators)
6063
}
6164
}
6265
}

0 commit comments

Comments
 (0)