Skip to content

Commit 9f8af62

Browse files
RoyEJohnsonRoyEJohnson
authored
Adjust partner page styling (#2712)
* Keep partner cards the same size, reduce startup sidebar width * Refine spacing, sidebar sizing * Add max-widths for sidebar * SIdebar heading colors * Update version, upgrade packages * Restyle headings * Make the tile counts explicit per width
1 parent e002380 commit 9f8af62

File tree

4 files changed

+902
-821
lines changed

4 files changed

+902
-821
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@openstax/os-webview",
3-
"version": "2.138.0",
3+
"version": "2.140.0",
44
"description": "OpenStax webview",
55
"scripts": {
66
"test": "jest --coverage ./test/src",

‎src/app/pages/partners/results/results.scss

+66-23
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@import 'mixins/placeholder-selectors';
33

44
.partners .results {
5-
padding: 2rem $normal-margin 20rem;
5+
padding: 2rem 0 20rem;
66

77
@include width-up-to($phone-max) {
88
padding: 0 $normal-margin 6rem;
@@ -24,14 +24,47 @@
2424

2525
h2 {
2626
margin: 0;
27+
width: 100%;
28+
text-align: center;
29+
background-color: ui-color(form-border);
30+
padding: $normal-margin 0;
31+
border: thin solid ui-color(black);
2732
}
2833

34+
/*
35+
We want to make breakpoints for each possible number of cards
36+
on a row, from 2 to 5, such that the row with a sidebar has one
37+
fewer cards per row.
38+
first: 2 cards on top, 1 on bottom
39+
second: 3/2
40+
third: 4/3
41+
above: 5/4
42+
These values are found experimentally using the grid-template-columns
43+
on .grid above. If that changes, they need to be refigured.
44+
There is some chance that different browsers will differ.
45+
*/
46+
$first-break: 68.9em * $scale-factor;
47+
$second-break: 91.9em * $scale-factor;
48+
$third-break: 114.9em * $scale-factor;
49+
2950
@mixin partner-grid {
3051
display: grid;
31-
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
3252
grid-auto-rows: minmax(min-content, 100%);
3353
padding: 0;
3454

55+
@include width-between($phone-max, $first-break) {
56+
grid-template-columns: repeat(2, 1fr);
57+
}
58+
@include width-between($first-break, $second-break) {
59+
grid-template-columns: repeat(3, 1fr);
60+
}
61+
@include width-between($second-break, $third-break) {
62+
grid-template-columns: repeat(4, 1fr);
63+
}
64+
@include wider-than($third-break) {
65+
grid-template-columns: repeat(5, 1fr);
66+
}
67+
3568
@include width-up-to($phone-max) {
3669
grid-gap: 1.5rem;
3770
justify-content: center;
@@ -123,17 +156,28 @@
123156

124157
.boxed {
125158
gap: 3rem;
159+
padding: 0;
126160

127161
@include width-up-to($phone-max) {
128162
gap: $normal-margin;
129-
padding: 0;
130163
}
131164
}
132165

133166
.with-sidebar {
134-
h2 {
135-
text-align: center;
136-
}
167+
.grid {
168+
@include width-between($phone-max, $first-break) {
169+
grid-template-columns: repeat(1, 1fr);
170+
}
171+
@include width-between($first-break, $second-break) {
172+
grid-template-columns: repeat(2, 1fr);
173+
}
174+
@include width-between($second-break, $third-break) {
175+
grid-template-columns: repeat(3, 1fr);
176+
}
177+
@include wider-than($third-break) {
178+
grid-template-columns: repeat(4, 1fr);
179+
}
180+
}
137181

138182
@include width-up-to($phone-max) {
139183
> .boxed {
@@ -159,19 +203,18 @@
159203
@include wider-than($phone-max) {
160204
display: flex;
161205
flex-direction: row;
162-
gap: $normal-margin;
206+
gap: 3rem;
163207
max-width: 120rem;
164-
margin: 0 auto;
165-
padding-right: $normal-margin;
208+
margin: 0 auto 3rem;
166209

167210
.grid {
168211
max-width: unset;
169212
}
170213

171214
> .sidebar {
172-
border: thin solid black;
215+
outline: thin solid black;
173216
height: max-content;
174-
217+
175218
.sidebar-content {
176219
background-color: ui-color(white);
177220

@@ -186,11 +229,7 @@
186229
}
187230

188231
h2 {
189-
@include set-font(h3);
190-
191-
background-color: os-color(gray);
192-
color: ui-color(white);
193-
padding: $normal-margin;
232+
border: 0;
194233
}
195234

196235
.grid {
@@ -205,14 +244,18 @@
205244
}
206245
}
207246
}
208-
@include width-between($phone-max, $tablet-max) {
209-
> .sidebar {
210-
min-width: calc(50% - 3rem);
247+
> .sidebar {
248+
@include width-between($phone-max, $first-break) {
249+
min-width: calc(50% - 1.5rem);
250+
max-width: calc(50% - 1.5rem);
211251
}
212-
}
213-
@include wider-than($tablet-max) {
214-
> .sidebar {
215-
min-width: calc(25% + 12rem);
252+
@include width-between($first-break, $second-break) {
253+
min-width: calc(33.3% - 3rem);
254+
max-width: calc(33.3% - 3rem);
255+
}
256+
@include wider-than($second-break) {
257+
min-width: calc(25% - 4.5rem);
258+
max-width: calc(25% + 1.5rem);
216259
}
217260
}
218261
}

‎src/app/pages/partners/results/results.tsx

+19-14
Original file line numberDiff line numberDiff line change
@@ -257,10 +257,10 @@ function HeadingAndResultGrid({
257257
entries: PartnerEntry[];
258258
}) {
259259
return (
260-
<React.Fragment>
260+
<div className="boxed">
261261
<h2>{headings[age as Ages]}</h2>
262262
<ResultGrid entries={entries} />
263-
</React.Fragment>
263+
</div>
264264
);
265265
}
266266

@@ -310,30 +310,35 @@ function ResultGridLoader({
310310

311311
return (
312312
<section className="results">
313-
<div className="boxed">
314-
<HeadingAndResultGrid
315-
age={firstAge}
316-
entries={partnersByAge[firstAge]}
317-
/>
318-
</div>
313+
<HeadingAndResultGrid
314+
age={firstAge}
315+
entries={partnersByAge[firstAge]}
316+
/>
319317
<SelectedPartnerDialog
320318
linkTexts={linkTexts}
321319
entries={filteredEntries}
322320
/>
323321
{
324322
otherAges.length > 0
325-
? <div className="with-sidebar">
326-
<div className="boxed">
327-
{otherAges.map((age) => (
323+
? <React.Fragment>
324+
<div className="with-sidebar">
325+
{otherAges.slice(0, 1).map((age) => (
328326
<HeadingAndResultGrid
329327
key={age}
330328
age={age}
331329
entries={partnersByAge[age]}
332330
/>
333331
))}
332+
<Sidebar entries={startups} />
334333
</div>
335-
<Sidebar entries={startups} />
336-
</div>
334+
{otherAges.slice(1).map((age) => (
335+
<HeadingAndResultGrid
336+
key={age}
337+
age={age}
338+
entries={partnersByAge[age]}
339+
/>
340+
))}
341+
</React.Fragment>
337342
: <div className="boxed">
338343
<h2>Startups</h2>
339344
<ResultGrid entries={startups} />
@@ -343,7 +348,7 @@ function ResultGridLoader({
343348
);
344349
}
345350
return (
346-
<section className="results boxed">
351+
<section className="results">
347352
{foundAges.map((age) => (
348353
<HeadingAndResultGrid
349354
key={age}

0 commit comments

Comments
 (0)