Skip to content

Commit 962fb7d

Browse files
daveverwerdaveverwer
authored
Merge pull request #3807 from SwiftPackageIndex/matrix-redesign
Compatibility matrix redesign for new platforms
2 parents 29fc6c3 + 202caf5 commit 962fb7d

25 files changed

+998
-1657
lines changed

‎FrontEnd/main.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ $mobile-breakpoint: 740px;
2222
@import 'styles/breadcrumbs';
2323
@import 'styles/build_logs';
2424
@import 'styles/build_monitor';
25+
@import 'styles/build_results';
2526
@import 'styles/copyable_input';
2627
@import 'styles/error';
2728
@import 'styles/github_highlighting';

‎FrontEnd/styles/build_results.scss

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
// Copyright Dave Verwer, Sven A. Schmidt, and other contributors.
2+
//
3+
// Licensed under the Apache License, Version 2.0 (the "License");
4+
// you may not use this file except in compliance with the License.
5+
// You may obtain a copy of the License at
6+
//
7+
// http://www.apache.org/licenses/LICENSE-2.0
8+
//
9+
// Unless required by applicable law or agreed to in writing, software
10+
// distributed under the License is distributed on an "AS IS" BASIS,
11+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
// See the License for the specific language governing permissions and
13+
// limitations under the License.
14+
15+
// -------------------------------------------------------------------------
16+
// Build results page, showing all builds for a package.
17+
// -------------------------------------------------------------------------
18+
19+
.build-results {
20+
margin: 0;
21+
padding: 0;
22+
23+
li {
24+
margin: 5px 0;
25+
26+
@media screen and (max-width: $mobile-breakpoint) {
27+
margin: 20px 0;
28+
}
29+
}
30+
31+
.row {
32+
display: grid;
33+
grid-template-columns: 3fr 7fr;
34+
35+
.row-labels {
36+
display: flex;
37+
grid-row: 2;
38+
flex-direction: column;
39+
justify-content: center;
40+
41+
p {
42+
margin: 0;
43+
}
44+
}
45+
46+
.column-labels {
47+
display: flex;
48+
grid-column: 2;
49+
flex-direction: row;
50+
}
51+
52+
.results {
53+
display: flex;
54+
grid-column: 2;
55+
flex-direction: row;
56+
}
57+
58+
&:not(:first-child) {
59+
.row-labels {
60+
grid-row: unset;
61+
}
62+
63+
.column-labels {
64+
display: none;
65+
}
66+
67+
@media (max-width: $mobile-breakpoint) {
68+
.column-labels {
69+
display: flex;
70+
}
71+
}
72+
}
73+
74+
@media (max-width: $mobile-breakpoint) {
75+
grid-template-columns: 1fr;
76+
77+
.row-labels,
78+
.column-labels,
79+
.results {
80+
grid-column: unset;
81+
grid-row: unset;
82+
}
83+
}
84+
}
85+
86+
.column-labels > div {
87+
display: flex;
88+
flex-direction: column;
89+
flex-basis: 0;
90+
flex-grow: 1;
91+
align-items: center;
92+
justify-content: flex-start;
93+
padding: 5px 0;
94+
font-size: 14px;
95+
font-weight: 600;
96+
97+
small {
98+
font-weight: normal;
99+
}
100+
}
101+
102+
.results > div {
103+
position: relative;
104+
display: flex;
105+
flex-basis: 0;
106+
flex-grow: 1;
107+
align-items: center;
108+
justify-content: center;
109+
height: 35px;
110+
margin: 0 3px;
111+
background-color: var(--grid-default-background);
112+
113+
&.succeeded > a,
114+
&.failed > a {
115+
padding-left: 25px;
116+
background-position: left center;
117+
background-repeat: no-repeat;
118+
background-size: 18px;
119+
}
120+
121+
&.succeeded {
122+
background-color: var(--grid-succeeded-background);
123+
124+
a {
125+
background-image: var(--image-build-succeeded);
126+
}
127+
}
128+
129+
&.failed {
130+
background-color: var(--grid-failed-background);
131+
132+
a {
133+
background-image: var(--image-build-failed);
134+
}
135+
}
136+
137+
> .generated-docs {
138+
position: absolute;
139+
right: 5px;
140+
display: inline-block;
141+
width: 25px;
142+
height: 25px;
143+
background-position: center;
144+
background-repeat: no-repeat;
145+
background-size: 15px;
146+
background-color: var(--grid-callout-background);
147+
background-image: var(--image-documentation);
148+
border-radius: 50%;
149+
}
150+
}
151+
152+
.column-labels > div > span {
153+
font-size: 16px;
154+
background-position: top 4px right;
155+
}
156+
}

‎FrontEnd/styles/colors.scss

Lines changed: 8 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);
@@ -126,9 +128,12 @@
126128
--branch-text: var(--dark-green);
127129

128130
--grid-default-background: var(--very-very-light-grey);
131+
--grid-default-text: var(--light-grey);
129132
--grid-default-border: var(--very-light-grey);
130133
--grid-compatible-background: var(--light-green);
134+
--grid-compatible-text: var(--white);
131135
--grid-incompatible-background: var(--light-grey);
136+
--grid-incompatible-text: var(--grey);
132137
--grid-succeeded-background: var(--very-light-grey);
133138
--grid-failed-background: var(--very-light-grey);
134139
--grid-callout-background: var(--white);
@@ -250,6 +255,8 @@
250255

251256
--breadcrumb: var(--dark-grey);
252257

258+
--separator-text: var(--dark-grey);
259+
253260
--announcement-background: var(--very-dark-grey);
254261

255262
--bordered-button-background: var(--very-very-dark-grey);
@@ -272,6 +279,7 @@
272279
--rule-thin-background: var(--dark-grey);
273280

274281
--grid-default-background: var(--very-very-dark-grey);
282+
--grid-default-text: var(--dark-grey);
275283
--grid-default-border: var(--very-dark-grey);
276284
--grid-compatible-background: var(--mid-green);
277285
--grid-incompatible-background: var(--very-dark-grey);

‎FrontEnd/styles/layout.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ main > .inner {
2727

2828
.two-column {
2929
display: grid;
30-
grid-template-columns: 3fr 1fr;
30+
grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
3131
gap: 60px;
3232

3333
> :last-child {

0 commit comments

Comments
 (0)