tandem
/
numerus
2
0
Fork 0
Code Issues 39 Pull Requests Packages Projects 1 Releases 1 Wiki Activity

Add nowrap to toggle’s labels 

Sometimes, if the space is tight, the browser may break the radio button
and the single-word label for the toggle, which looks very weird.

I did not set nowrap to all radio button because the no wrap would
prevent long labels to break, and i am not sure if there is any such
radio option.  I know that for the toggle there is not any.
This commit is contained in:
jordi fita mas 2023-07-14 10:44:38 +02:00
parent ae1e294144
commit 51c789ca13
2 changed files with 113 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web/static/numerus.css
View File

@ -966,6 +966,10 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
background-color: var(--numerus--header--background-color);
}
.filters .toggle label {
white-space: nowrap;
}
/* Dashboard */
#dashboard-filters {
display: flex;
@ -10241,7 +10245,6 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
/* web */
.web {
margin: 3rem;
background-color: var(--numerus--header--background-color);
@ -10269,11 +10272,11 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
}
.graella {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.caixa {
@ -10289,30 +10292,36 @@ grid-row-gap: 0px;
justify-content: start;
border-bottom: 1px solid var(--numerus--color--black);
}
.caixa-2 {
grid-area: 1 / 3 / 2 / 6;
padding: 1rem;
border-bottom: 1px solid var(--numerus--color--black);
}
.caixa-3 {
grid-area: 1 / 6 / 2 / 7;
background: var(--numerus--color--white);
border-bottom: 1px solid var(--numerus--color--black);
}
.caixa-4 {
grid-area: 2 / 1 / 3 / 3;
border-bottom: 1px solid var(--numerus--color--black);
}
.caixa-5 {
grid-area: 2 / 3 / 3 / 4;
background: var(--numerus--color--red);
padding: 1rem;
border-bottom: 1px solid var(--numerus--color--black);
}
}
.caixa-6 {
grid-area: 2 / 4 / 3 / 5;
border-bottom: 1px solid var(--numerus--color--black);
}
.caixa-7 {
grid-area: 2 / 5 / 3 / 7;
background: var(--numerus--color--green);
@ -10322,6 +10331,7 @@ grid-row-gap: 0px;
justify-content: end;
border-bottom: 1px solid var(--numerus--color--black);
}
.caixa-8 {
grid-area: 3 / 1 / 4 / 2;
background: var(--numerus--color--black);
@ -10329,6 +10339,7 @@ grid-row-gap: 0px;
padding: 1rem;
border-bottom: 1px solid var(--numerus--color--black);
}
.caixa-9 {
grid-area: 3 / 2 / 4 / 7;
font-size: calc(16px + 5vw);
@ -10347,6 +10358,7 @@ grid-row-gap: 0px;
display: grid;
grid-template-columns: repeat(1, 1fr);
}
.graella {
display: grid;
grid-template-columns: repeat(2, 1fr);
@ -10354,33 +10366,42 @@ grid-row-gap: 0px;
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.caixa-1 {
grid-area: 1 / 1 / 2 / 2; /* posició 1*/
}
.caixa-2 {
grid-area: 1 / 2 / 2 / 3; /* posició 2*/
}
.caixa-3 {
grid-area: 2 / 1 / 3 / 2; /* posició 3*/
}
.caixa-4 {
grid-area: 5 / 1 / 6 / 2; /* posició 7*/
display: none;
}
.caixa-5 {
grid-area: 2 / 2 / 3 / 3; /*posició 4*/
}
.caixa-6 {
grid-area: 5 / 2 / 6 / 3; /* posició 8*/
display: none;
}
.caixa-7 {
grid-area: 3 / 1 / 4 / 2; /* posició 5*/
justify-content: start;
}
.caixa-8 {
grid-area: 3 / 2 / 4 / 3; /* posició 6*/
}
.caixa-9 {
grid-area: 4 / 1 / 5 / 3; /* posició 9*/
}

2
web/template/form.gohtml
View File

@ -110,7 +110,7 @@
{{ define "toggle-field" -}}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.ToggleField*/ -}}
<fieldset id="{{ .Name}}-field" class="input{{ if .Errors }} has-errors{{ end }}" is="numerus-toggle">
<fieldset id="{{ .Name}}-field" class="input toggle{{ if .Errors }} has-errors{{ end }}" is="numerus-toggle">
<legend>{{ .Label }}</legend>
<label title="{{.FirstOption.Description }}">
<input type="radio" name="{{ .Name }}" value="{{ .FirstOption.Value }}"