Skip to content

Commit b6ee8b2

Browse files
gvtuldergvtulder
committed
Reduce button margins on small portrait devices.
1 parent ed9f84f commit b6ee8b2

9 files changed

Lines changed: 133 additions & 99 deletions

File tree

‎style/components/atlas-picker.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@
1111
--grid-margin-width: 2vh;
1212
--grid-margin-height: 8vh;
1313
--grid-available-width: calc(
14-
100vw - var(--grid-margin-width) - #{sizes.$button-left} -
15-
#{sizes.$button-right}
14+
100vw - var(--grid-margin-width) - var(--button-left) - var(--button-right)
1615
);
1716
--grid-available-height: calc(
18-
100vh - var(--grid-margin-height) - #{sizes.$button-top} -
19-
#{sizes.$main-navbar-top}
17+
100vh - var(--grid-margin-height) - var(--button-top) - var(
18+
--main-navbar-top
19+
)
2020
);
2121
grid-template-columns: repeat(var(--grid-columns), min-content);
2222
}

‎style/components/buttons.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,15 +73,15 @@
7373
}
7474

7575
&.top {
76-
top: calc(sizes.$button-top - $clickable-margin);
76+
top: calc(var(--button-top) - $clickable-margin);
7777
}
7878
&.right {
79-
right: calc(sizes.$button-right - $clickable-margin);
79+
right: calc(var(--button-right) - $clickable-margin);
8080
}
8181
&.bottom {
82-
bottom: calc(sizes.$button-bottom - $clickable-margin);
82+
bottom: calc(var(--button-bottom) - $clickable-margin);
8383
}
8484
&.left {
85-
left: calc(sizes.$button-left - $clickable-margin);
85+
left: calc(var(--button-left) - $clickable-margin);
8686
}
8787
}

‎style/components/navbar.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -88,13 +88,13 @@
8888
position: absolute;
8989
width: 100%;
9090
left: 0;
91-
bottom: sizes.$main-navbar-bottom;
91+
bottom: var(--main-navbar-bottom);
9292
display: flex;
9393
flex-direction: row;
9494
justify-content: center;
9595
z-index: 100;
9696

97-
--navbar-size: calc(#{sizes.$main-navbar-height} / 2.5);
97+
--navbar-size: calc(var(--main-navbar-height) / 2.5);
9898

9999
.game-button {
100100
padding: calc(0.25 * var(--navbar-size)) calc(0.125 * var(--navbar-size));
@@ -104,7 +104,7 @@
104104
.small-navbar {
105105
position: absolute;
106106
width: 100%;
107-
top: sizes.$button-top;
107+
top: var(--button-top);
108108
left: 0;
109109
display: flex;
110110
flex-direction: row;

‎style/components/screens.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444

4545
.settings-navbar-sticky {
4646
position: absolute;
47-
top: sizes.$button-top;
47+
top: var(--button-top);
4848

4949
.small-navbar {
5050
position: sticky;
@@ -64,7 +64,7 @@
6464
display: flex;
6565
justify-content: center;
6666
align-items: center;
67-
padding-bottom: sizes.$main-navbar-top;
67+
padding-bottom: var(--main-navbar-top);
6868
}
6969

7070
@keyframes screen-animate-appear {

‎style/screens/screen-game.scss‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@ $score-font-size: min(4vw, 5vh);
4242
/* floating controls */
4343
.floating-controls {
4444
position: absolute;
45-
top: calc(sizes.$button-top + 0.25 * sizes.$button-scale);
46-
left: sizes.$button-left;
45+
top: calc(var(--button-top) + 0.25 * sizes.$button-scale);
46+
left: var(--button-left);
4747
flex-direction: column;
4848
justify-content: flex-start;
4949
align-items: center;
@@ -91,9 +91,9 @@ $score-font-size: min(4vw, 5vh);
9191

9292
/* sidebar container with tile stack */
9393
.side-panel {
94-
width: sizes.$stack-width;
94+
width: var(--stack-width);
9595
box-sizing: content-box;
96-
padding-right: calc(sizes.$stack-margin-right + sizes.$inset-right);
96+
padding-right: calc(var(--stack-margin-right) + var(--inset-right));
9797
flex-grow: 0;
9898
flex-shrink: 0;
9999
background: var(--panel-bg-color);
@@ -109,11 +109,11 @@ $score-font-size: min(4vw, 5vh);
109109
". score-display score-display ."
110110
". . . .";
111111
grid-template-rows:
112-
calc(sizes.$button-top + 1.25 * sizes.$button-scale)
112+
calc(var(--button-top) + 1.25 * sizes.$button-scale)
113113
5fr min-content 1fr min-content
114-
calc(0.1 * sizes.$stack-width + sizes.$inset-bottom);
115-
grid-template-columns: calc(0.1 * sizes.$stack-width) 1fr 1fr calc(
116-
0.1 * sizes.$stack-width
114+
calc(0.1 * var(--stack-width) + var(--inset-bottom));
115+
grid-template-columns: calc(0.1 * var(--stack-width)) 1fr 1fr calc(
116+
0.1 * var(--stack-width)
117117
);
118118

119119
.tile-stack {
@@ -212,8 +212,8 @@ $dropout-outer-border-radius: calc(0.5 * sizes.$button-scale);
212212

213213
.dropout-menu {
214214
position: absolute;
215-
right: sizes.$button-right;
216-
top: sizes.$button-top;
215+
right: var(--button-right);
216+
top: var(--button-top);
217217
display: flex;
218218
flex-direction: column;
219219
align-items: flex-end;
@@ -499,19 +499,21 @@ $dropout-outer-border-radius: calc(0.5 * sizes.$button-scale);
499499
.side-panel {
500500
width: 100%;
501501
padding-right: 0;
502-
padding-bottom: calc(sizes.$stack-margin-bottom + sizes.$inset-bottom);
502+
padding-bottom: calc(var(--stack-margin-bottom) + var(--inset-bottom));
503503

504504
grid-template-areas:
505505
". tile-stack . . . ."
506506
". tile-stack tile-counter refreshtiles score-display ."
507507
". tile-stack undo redo score-display ."
508508
". tile-stack . . . .";
509-
grid-template-columns: sizes.$inset-left 5fr min-content min-content min-content calc(
510-
sizes.$inset-right + 0.15 * var(--button-scale)
509+
grid-template-columns:
510+
var(--inset-left)
511+
5fr min-content min-content min-content calc(
512+
var(--inset-right) + 0.15 * var(--button-scale)
511513
);
512514
grid-template-rows:
513-
calc(0.05 * sizes.$stack-width) 1fr 1fr
514-
calc(0.15 * sizes.$stack-width);
515+
calc(0.05 * var(--stack-width)) 1fr 1fr
516+
calc(0.15 * var(--stack-width));
515517

516518
.tile-stack {
517519
flex-direction: row;
@@ -539,7 +541,7 @@ $dropout-outer-border-radius: calc(0.5 * sizes.$button-scale);
539541
}
540542

541543
.floating-controls {
542-
top: sizes.$button-top;
544+
top: var(--button-top);
543545
height: sizes.$button-scale;
544546
flex-direction: row;
545547

@@ -601,8 +603,8 @@ $dropout-outer-border-radius: calc(0.5 * sizes.$button-scale);
601603
". tile-stack tile-counter ."
602604
". tile-stack refreshtiles ."
603605
". tile-stack . .";
604-
grid-template-columns: sizes.$inset-left 1fr min-content calc(
605-
sizes.$inset-right + 0.3 * var(--button-scale)
606+
grid-template-columns: var(--inset-left) 1fr min-content calc(
607+
var(--inset-right) + 0.3 * var(--button-scale)
606608
);
607609

608610
.game-button.undo,
@@ -643,7 +645,7 @@ $dropout-outer-border-radius: calc(0.5 * sizes.$button-scale);
643645
". tile-counter refreshtiles ."
644646
". . . .";
645647
grid-template-rows:
646-
calc(sizes.$button-top + 1.25 * sizes.$button-scale)
648+
calc(var(--button-top) + 1.25 * sizes.$button-scale)
647649
7fr min-content
648650
1fr;
649651

‎style/screens/screen-paint.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
@include sizes.disable-select;
66

77
display: grid;
8-
grid-template-columns: 1fr sizes.$stack-width calc(
9-
sizes.$stack-margin-right + sizes.$inset-right
8+
grid-template-columns: 1fr var(--stack-width) calc(
9+
var(--stack-margin-right) + var(--inset-right)
1010
);
1111
grid-template-rows: 1fr;
1212
grid-template-areas: "paint-grid color-stack fill-end";
@@ -30,12 +30,12 @@
3030
@include sizes.disable-select;
3131

3232
position: absolute;
33-
top: sizes.$button-top;
34-
right: sizes.$button-right;
33+
top: var(--button-top);
34+
right: var(--button-right);
3535
}
3636

3737
$swatch-scale: min(
38-
calc((100vh - sizes.$button-top - sizes.$button-bottom) / 11),
38+
calc((100vh - var(--button-top) - var(--button-bottom)) / 11),
3939
calc(sizes.$button-scale)
4040
);
4141

@@ -46,7 +46,7 @@ $swatch-scale: min(
4646
width: 100%;
4747
box-sizing: border-box;
4848
justify-content: flex-end;
49-
padding-bottom: sizes.$button-bottom;
49+
padding-bottom: var(--button-bottom);
5050
align-items: center;
5151
}
5252

@@ -91,13 +91,13 @@ $swatch-scale: min(
9191
}
9292

9393
@media screen and (orientation: portrait) {
94-
$swatch-scale: calc((100vw - sizes.$inset-left - sizes.$inset-right) / 10);
94+
$swatch-scale: calc((100vw - var(--inset-left) - var(--inset-right)) / 10);
9595

9696
.screen.paint-display {
9797
display: grid;
9898
grid-template-columns: auto;
9999
grid-template-rows: 1fr max(20vw, 40px) calc(
100-
sizes.$stack-margin-bottom + sizes.$inset-bottom
100+
var(--stack-margin-bottom) + var(--inset-bottom)
101101
);
102102
grid-template-areas:
103103
"paint-grid"

‎style/screens/screen-settings.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@
88
height: 100%;
99
display: grid;
1010
// compute left margin for stable centering with or without scrollbar
11-
--column-width: #{calc(
12-
min(25rem, max(90vw, 100vw - sizes.$button-left - sizes.$button-right))
13-
)};
11+
--column-width: calc(
12+
min(25rem, max(90vw, 100vw - var(--button-left) - var(--button-right)))
13+
);
1414
grid-template-columns:
1515
calc((100vw - var(--column-width)) / 2)
1616
var(--column-width)
1717
1fr;
1818
grid-template-rows:
19-
sizes.$button-top
19+
var(--button-top)
2020
var(--small-navbar-height) min-content 1.2em;
2121
grid-template-areas: ". . ." ". navbar ." ". article ." ". . .";
2222
overflow-y: auto;

‎style/screens/screen-setup.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
grid-template-areas: "example heading" "example settings";
1414
grid-template-columns: 1fr 1fr;
1515
grid-template-rows:
16-
calc(sizes.$button-top + sizes.$button-scale + 1.2rem)
16+
calc(var(--button-top) + sizes.$button-scale + 1.2rem)
1717
1fr;
1818
}
1919

@@ -57,16 +57,16 @@
5757

5858
.screen.game-setup .game-button.exit {
5959
position: absolute;
60-
left: sizes.$button-left;
61-
top: sizes.$button-top;
60+
left: var(--button-left);
61+
top: var(--button-top);
6262
margin: calc(-0.25 * sizes.$button-scale);
6363
padding: calc(0.25 * sizes.$button-scale);
6464
}
6565

6666
.screen.game-setup .game-button.regenerate {
6767
position: absolute;
68-
left: sizes.$button-left;
69-
bottom: sizes.$button-margin-height;
68+
left: var(--button-left);
69+
bottom: var(--button-margin-height);
7070
margin: calc(-0.25 * sizes.$button-scale);
7171
padding: calc(0.25 * sizes.$button-scale);
7272
}
@@ -113,9 +113,9 @@
113113
position: relative;
114114
grid-area: settings;
115115
padding-right: calc(
116-
2 * min(3vw, 2vh) + sizes.$stack-margin-right + sizes.$inset-right
116+
2 * min(3vw, 2vh) + var(--stack-margin-right) + var(--inset-right)
117117
);
118-
padding-bottom: calc(sizes.$stack-margin-bottom + sizes.$inset-bottom);
118+
padding-bottom: calc(var(--stack-margin-bottom) + var(--inset-bottom));
119119
padding-left: min(3vw, 2vh);
120120
display: grid;
121121
grid-template-columns: 1fr 1fr;
@@ -194,10 +194,10 @@
194194
.screen.game-setup .settings {
195195
min-height: max(40vh, calc(8 * sizes.$setting-row-option-height));
196196
padding-left: calc(
197-
min(3vw, 3vh) + sizes.$stack-margin-left + sizes.$inset-left
197+
min(3vw, 3vh) + var(--stack-margin-left) + var(--inset-left)
198198
);
199199
padding-right: calc(
200-
min(3vw, 3vh) + sizes.$stack-margin-right + sizes.$inset-right
200+
min(3vw, 3vh) + var(--stack-margin-right) + var(--inset-right)
201201
);
202202
}
203203

0 commit comments

Comments
 (0)