Skip to content

Commit 9613dcb

Browse files
anoekanoek
authored
Merge pull request #3556 from Seth-Rothschild/headers-mobile
Adjust header alignment on mobile
2 parents 20d2b65 + 1773ad8 commit 9613dcb

3 files changed

Lines changed: 106 additions & 72 deletions

File tree

‎src/global_styl/global.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,10 @@ a.primary:active, a.primary:hover, .primary.clickable:hover, .primary.fakelink:h
150150
margin-bottom: 2rem;
151151
width: 100%;
152152

153+
& h2 {
154+
white-space: nowrap;
155+
}
156+
153157
& .fa-search {
154158
margin-bottom: 2px;
155159
}
@@ -166,6 +170,26 @@ a.primary:active, a.primary:hover, .primary.clickable:hover, .primary.fakelink:h
166170
margin: 0 1rem;
167171
}
168172
}
173+
174+
@media (max-width: 600px) {
175+
flex-direction: column;
176+
177+
& h2 {
178+
margin-bottom: 0.5rem;
179+
}
180+
181+
& > div {
182+
padding-top: 0;
183+
display: flex;
184+
justify-content: space-between;
185+
align-items: center;
186+
187+
& > a {
188+
margin-left: 0;
189+
white-space: nowrap;
190+
}
191+
}
192+
}
169193
}
170194

171195
.fg-shade0 { color: var(--shade0); }

‎src/views/LadderList/LadderList.css‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,24 +16,28 @@
1616
*/
1717
.LadderList {
1818
/* here */
19-
display: flex;
20-
flex-wrap: wrap;
21-
align-items: center;
22-
justify-content: center;
19+
padding: 0 0.5rem;
2320

24-
.Card {
25-
width: 20rem;
26-
max-width: 100dvw;
27-
min-height: 30rem;
28-
text-align: center;
29-
}
21+
.ladder-list-container {
22+
display: flex;
23+
flex-wrap: wrap;
24+
align-items: center;
25+
justify-content: center;
3026

31-
button {
32-
margin-right: 0.5rem;
33-
}
27+
.Card {
28+
width: 20rem;
29+
max-width: 100dvw;
30+
min-height: 30rem;
31+
text-align: center;
32+
}
33+
34+
button {
35+
margin-right: 0.5rem;
36+
}
3437

35-
td.player-column {
36-
text-align: left;
38+
td.player-column {
39+
text-align: left;
40+
}
3741
}
3842
}
3943

‎src/views/LadderList/LadderList.tsx‎

Lines changed: 63 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -81,68 +81,74 @@ export function LadderList(): React.ReactElement {
8181

8282
return (
8383
<div className="page-width">
84-
<div className="page-nav">
85-
<h2 style={{ marginLeft: "1rem" }}>
86-
<i className="fa fa-list-ol"></i> {_("Ladders")}
87-
</h2>
88-
<div>
89-
{ladders.map((ladder, idx) => (
90-
<Link key={idx} to={`/ladder/${ladder.id}`}>
91-
{_(ladder.board_size + "x" + ladder.board_size)}
92-
</Link>
93-
))}
94-
</div>
95-
</div>
9684
<div className="LadderList">
97-
{ladders.map((ladder, idx) => (
98-
<Card key={idx}>
99-
<h2>{_(ladder.name)}</h2>
100-
{(ladder.player_rank < 0 || null) && (
101-
<button
102-
className="primary sm"
103-
disabled={user.anonymous}
104-
onClick={() => join(ladder.id)}
105-
>
106-
{_("Join")}
107-
</button>
108-
)}
109-
<Link className="btn primary sm" to={`/ladder/${ladder.id}`}>
110-
{_("Full View") /* translators: View details of the selected ladder */}
111-
</Link>
112-
113-
<h4>
114-
{interpolate(_("{{ladder_size}} players"), {
115-
ladder_size: ladder.size,
116-
})}
117-
</h4>
118-
119-
<LadderComponent ladderId={ladder.id} />
120-
</Card>
121-
))}
122-
</div>
123-
{joinedLadders.length > 0 && (
124-
<div className="MyLadders">
125-
<h2 style={{ marginLeft: "1rem" }}>
126-
<i className="fa fa-list-ol"></i> {_("My Ladders")}
85+
<div className="page-nav">
86+
<h2>
87+
<i className="fa fa-list-ol"></i> {_("Ladders")}
12788
</h2>
128-
{joinedLadders.map((ladder, idx) => (
129-
<div className="MyLadders-row" key={idx}>
130-
<span className="player-rank">#{ladder.player_rank}</span>
131-
{ladder.group?.icon ? (
132-
<img
133-
className="group-icon"
134-
src={user_uploads_url(ladder.group.icon, 16)}
135-
title={ladder.group.name}
136-
alt={ladder.group.name}
137-
/>
138-
) : (
139-
<i className="fa fa-list-ol"></i>
89+
<div>
90+
{ladders.map((ladder, idx) => (
91+
<Link key={idx} to={`/ladder/${ladder.id}`}>
92+
{_(ladder.board_size + "x" + ladder.board_size)}
93+
</Link>
94+
))}
95+
</div>
96+
</div>
97+
<div className="ladder-list-container">
98+
{ladders.map((ladder, idx) => (
99+
<Card key={idx}>
100+
<h2>{_(ladder.name)}</h2>
101+
{(ladder.player_rank < 0 || null) && (
102+
<button
103+
className="primary sm"
104+
disabled={user.anonymous}
105+
onClick={() => join(ladder.id)}
106+
>
107+
{_("Join")}
108+
</button>
140109
)}
141-
<Link to={`/ladder/${ladder.id}`}>{ladder.name}</Link>
142-
</div>
110+
<Link className="btn primary sm" to={`/ladder/${ladder.id}`}>
111+
{
112+
_(
113+
"Full View",
114+
) /* translators: View details of the selected ladder */
115+
}
116+
</Link>
117+
118+
<h4>
119+
{interpolate(_("{{ladder_size}} players"), {
120+
ladder_size: ladder.size,
121+
})}
122+
</h4>
123+
124+
<LadderComponent ladderId={ladder.id} />
125+
</Card>
143126
))}
144127
</div>
145-
)}
128+
{joinedLadders.length > 0 && (
129+
<div className="MyLadders">
130+
<h2 style={{ marginLeft: "1rem" }}>
131+
<i className="fa fa-list-ol"></i> {_("My Ladders")}
132+
</h2>
133+
{joinedLadders.map((ladder, idx) => (
134+
<div className="MyLadders-row" key={idx}>
135+
<span className="player-rank">#{ladder.player_rank}</span>
136+
{ladder.group?.icon ? (
137+
<img
138+
className="group-icon"
139+
src={user_uploads_url(ladder.group.icon, 16)}
140+
title={ladder.group.name}
141+
alt={ladder.group.name}
142+
/>
143+
) : (
144+
<i className="fa fa-list-ol"></i>
145+
)}
146+
<Link to={`/ladder/${ladder.id}`}>{ladder.name}</Link>
147+
</div>
148+
))}
149+
</div>
150+
)}
151+
</div>
146152
</div>
147153
);
148154
}

0 commit comments

Comments
 (0)