Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-02-13 22:26:28 +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> <style>
.picker-dialog { .picker-dialog {
--picker-item-size: 120px; --picker-item-size: 120px;
--picker-item-gap: 4px;
--picker-item-area: calc(var(--picker-item-size) + var(--picker-item-gap));
gap: var(--padding); gap: var(--padding);
max-height: calc( max-height: calc(
90% - env(safe-area-inset-bottom) - env(safe-area-inset-top) 90% - env(safe-area-inset-bottom) - env(safe-area-inset-top)
@ -77,7 +80,7 @@
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 3px; gap: 3px;
max-width: calc(var(--picker-item-size) * 4); max-width: calc(var(--picker-item-area) * 4);
} }
.popup-title-container { .popup-title-container {
@ -112,6 +115,7 @@
display: grid; display: grid;
justify-items: center; justify-items: center;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
gap: var(--picker-item-gap);
} }
.three-columns .picker-body { .three-columns .picker-body {
@ -119,7 +123,7 @@
} }
.three-columns .popup-header { .three-columns .popup-header {
max-width: calc(var(--picker-item-size) * 3); max-width: calc(var(--picker-item-area) * 3);
} }
:global(.picker-item) { :global(.picker-item) {
@ -133,7 +137,19 @@
} }
.popup-header { .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-dialog {
--picker-item-size: 110px; --picker-item-size: 110px;
} }
} }
@media screen and (max-width: 365px) { @media screen and (max-width: 378px) {
.picker-dialog { .picker-dialog {
--picker-item-size: 105px; --picker-item-size: 105px;
} }
} }
@media screen and (max-width: 350px) { @media screen and (max-width: 365px) {
.picker-dialog { .picker-dialog {
--picker-item-size: 100px; --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, .picker-body,
.three-columns .picker-body { .three-columns .picker-body {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
}
.popup-header { @media screen and (max-width: 300px) {
max-width: calc(var(--picker-item-size) * 3); .picker-dialog {
--picker-item-size: 120px;
}
}
@media screen and (max-width: 280px) {
.picker-dialog {
--picker-item-size: 110px;
} }
} }
@media screen and (max-width: 255px) { @media screen and (max-width: 255px) {
.picker-dialog { .picker-dialog {
--picker-item-size: 120px; --picker-item-size: 140px;
} }
.picker-body, .picker-body,

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

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