jeff/umap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

switch to grid layout for multiple choice buttons

Browse source 
to allow multi-line texts in translations
This commit is contained in:
Joachim Schleicher 2023-10-04 09:02:31 +02:00
parent 81a9a5416f
commit 79a1ea232a
1 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
umap/static/umap/base.css
View file

@ -342,19 +342,24 @@ input.switch:checked ~ label:before {
input.switch:checked ~ label:after { input.switch:checked ~ label:after {
margin-left: 3em; margin-left: 3em;
} }
.button-bar { .button-bar, .umap-multiplechoice {
margin-top: 5px; margin-top: 5px;
text-align: center; text-align: center;
display: grid; display: grid;
grid-gap: 7px;
width: 100% width: 100%
} }
.button-bar {
grid-gap: 7px;
}
.button-bar.half { .button-bar.half {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.button-bar.third { .button-bar.third, .umap-multiplechoice.by3 {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
} }
.umap-multiplechoice.by4 {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.button-bar .button { .button-bar .button {
display: inline-block; display: inline-block;
} }
@ -365,15 +370,12 @@ input.switch:checked ~ label:after {
border: 1px solid #374E75; border: 1px solid #374E75;
cursor: pointer; cursor: pointer;
background-color: #c9c9c7; background-color: #c9c9c7;
height: 30px; min-height: 30px;
line-height: 30px; line-height: 30px;
text-align: center; text-align: center;
width: calc(100% / 3); width: 100%;
display: inline-block; display: inline-block;
} }
.umap-multiplechoice.by4 label {
width: calc(100% / 4);
}
.dark .umap-multiplechoice label { .dark .umap-multiplechoice label {
border: 1px solid black; border: 1px solid black;
background-color: #2c3233; background-color: #2c3233;