Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-02-13 14:16:25 +01:00
Code Issues Projects Releases Packages Wiki Activity

web/PickerDialog: align the grid perfectly, better scaling

Browse source
This commit is contained in:
wukko 2025-02-13 00:26:45 +06:00
parent c0b671e45f
commit 553b3f9091
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
2 changed files with 51 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
web/src/components/dialog/PickerDialog.svelte
View file

@ -65,6 +65,9 @@
<style>
.picker-dialog {
--picker-item-size: 120px;
--picker-item-gap: 4px;
--picker-item-area: calc(var(--picker-item-size) + var(--picker-item-gap));
gap: var(--padding);
max-height: calc(
90% - env(safe-area-inset-bottom) - env(safe-area-inset-top)
@ -77,7 +80,7 @@
flex-direction: column;
align-items: flex-start;
gap: 3px;
max-width: calc(var(--picker-item-size) * 4);
max-width: calc(var(--picker-item-area) * 4);
}
.popup-title-container {
@ -112,6 +115,7 @@
display: grid;
justify-items: center;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: var(--picker-item-gap);
}
.three-columns .picker-body {
@ -119,7 +123,7 @@
}
.three-columns .popup-header {
max-width: calc(var(--picker-item-size) * 3);
max-width: calc(var(--picker-item-area) * 3);
}
:global(.picker-item) {
@ -133,7 +137,19 @@
}
.popup-header {
max-width: calc(var(--picker-item-size) * 3);
max-width: calc(var(--picker-item-area) * 3);
}
}
@media screen and (max-width: 410px) {
.picker-dialog {
--picker-item-size: 118px;
}
}
@media screen and (max-width: 405px) {
.picker-dialog {
--picker-item-size: 116px;
}
}
@ -143,38 +159,62 @@
}
}
@media screen and (max-width: 380px) {
@media screen and (max-width: 395px) {
.picker-dialog {
--picker-item-size: 113px;
}
}
@media screen and (max-width: 388px) {
.picker-dialog {
--picker-item-size: 110px;
}
}
@media screen and (max-width: 365px) {
@media screen and (max-width: 378px) {
.picker-dialog {
--picker-item-size: 105px;
}
}
@media screen and (max-width: 350px) {
@media screen and (max-width: 365px) {
.picker-dialog {
--picker-item-size: 100px;
}
}
@media screen and (max-width: 335px) {
@media screen and (max-width: 352px) {
.picker-dialog {
--picker-item-size: 95px;
}
}
@media screen and (max-width: 334px) {
.picker-dialog {
--picker-item-size: 130px;
}
.picker-body,
.three-columns .picker-body {
grid-template-columns: 1fr 1fr;
}
}
.popup-header {
max-width: calc(var(--picker-item-size) * 3);
@media screen and (max-width: 300px) {
.picker-dialog {
--picker-item-size: 120px;
}
}
@media screen and (max-width: 280px) {
.picker-dialog {
--picker-item-size: 110px;
}
}
@media screen and (max-width: 255px) {
.picker-dialog {
--picker-item-size: 120px;
--picker-item-size: 140px;
}
.picker-body,

2
web/src/components/dialog/PickerItem.svelte
View file

@ -62,7 +62,7 @@
.picker-item {
position: relative;
background: none;
padding: 2px;
padding: 0;
box-shadow: none;
border-radius: calc(var(--border-radius) / 2 + 2px);
}