Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-23 06:09:21 +01:00
Code Issues Projects Releases Packages Wiki Activity

Make settings page work for very small viewports or super large text sizes

Browse source
This commit is contained in:
Lim Chee Aun 2023-11-27 19:01:39 +08:00
parent cbf4ea5060
commit 910b72ba8c
2 changed files with 32 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/pages/settings.css
View file

@ -66,15 +66,17 @@
#settings-container section select { #settings-container section select {
padding: 4px; padding: 4px;
width: 100%;
} }
#settings-container .radio-group { #settings-container .radio-group {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
border-radius: 999px; border-radius: 1.1em;
border: 1px solid var(--button-bg-color); border: 1px solid var(--button-bg-color);
overflow: hidden; overflow: hidden;
padding: 1px; padding: 1px;
flex-wrap: wrap;
} }
#settings-container .radio-group input[type='radio'] { #settings-container .radio-group input[type='radio'] {
opacity: 0; opacity: 0;
@ -85,6 +87,8 @@
display: inline-block; display: inline-block;
padding: 6px 12px; padding: 6px 12px;
cursor: pointer; cursor: pointer;
flex-grow: 1;
text-align: center;
} }
#settings-container .radio-group label input:checked + span { #settings-container .radio-group label input:checked + span {
color: var(--link-color); color: var(--link-color);
@ -94,7 +98,7 @@
color: var(--button-bg-color); color: var(--button-bg-color);
} }
#settings-container .radio-group label:has(input:checked) { #settings-container .radio-group label:has(input:checked) {
border-radius: 999px; border-radius: 1.1em;
color: var(--button-text-color); color: var(--button-text-color);
background-color: var(--button-bg-color); background-color: var(--button-bg-color);
} }
@ -105,10 +109,34 @@
#settings-container .range-group { #settings-container .range-group {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 4px;
@media (width < 320px) {
display: grid;
gap: 0;
column-gap: 4px;
grid-template-areas:
'label1 label2'
'input input';
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
> span:first-child {
text-align: left;
}
> span:last-child {
text-align: right;
}
}
} }
#settings-container .range-group input[type='range'] { #settings-container .range-group input[type='range'] {
flex-grow: 1; flex-grow: 1;
width: 100%;
@media (width < 320px) {
grid-area: input;
}
} }
#settings-container .checkbox-fields { #settings-container .checkbox-fields {

1
src/pages/settings.jsx
View file

@ -429,6 +429,7 @@ function Settings({ onClose }) {
<div <div
style={{ style={{
display: 'flex', display: 'flex',
flexWrap: 'wrap',
gap: 8, gap: 8,
lineHeight: 1.25, lineHeight: 1.25,
alignItems: 'center', alignItems: 'center',