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

203
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); background-color: var(--numerus--header--background-color);
} }
.filters .toggle label {
white-space: nowrap;
}
/* Dashboard */ /* Dashboard */
#dashboard-filters { #dashboard-filters {
display: flex; display: flex;
@ -10241,7 +10245,6 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
/* web */ /* web */
.web { .web {
margin: 3rem; margin: 3rem;
background-color: var(--numerus--header--background-color); background-color: var(--numerus--header--background-color);
@ -10262,18 +10265,18 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
} }
.contenidor { .contenidor {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
padding: 5rem 0; padding: 5rem 0;
border-bottom: 1px solid var(--numerus--color--black); border-bottom: 1px solid var(--numerus--color--black);
} }
.graella { .graella {
display: grid; display: grid;
grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px; grid-column-gap: 0px;
grid-row-gap: 0px; grid-row-gap: 0px;
} }
.caixa { .caixa {
@ -10281,61 +10284,69 @@ grid-row-gap: 0px;
} }
.caixa-1 { .caixa-1 {
grid-area: 1 / 1 / 2 / 3; grid-area: 1 / 1 / 2 / 3;
background: var(--numerus--color--yellow); background: var(--numerus--color--yellow);
font-size: calc(16px + 5vw); font-size: calc(16px + 5vw);
display: grid; display: grid;
align-content: center; align-content: center;
justify-content: start; justify-content: start;
border-bottom: 1px solid var(--numerus--color--black); border-bottom: 1px solid var(--numerus--color--black);
} }
.caixa-2 { .caixa-2 {
grid-area: 1 / 3 / 2 / 6; grid-area: 1 / 3 / 2 / 6;
padding: 1rem; padding: 1rem;
border-bottom: 1px solid var(--numerus--color--black); border-bottom: 1px solid var(--numerus--color--black);
} }
.caixa-3 { .caixa-3 {
grid-area: 1 / 6 / 2 / 7; grid-area: 1 / 6 / 2 / 7;
background: var(--numerus--color--white); background: var(--numerus--color--white);
border-bottom: 1px solid var(--numerus--color--black); border-bottom: 1px solid var(--numerus--color--black);
} }
.caixa-4 { .caixa-4 {
grid-area: 2 / 1 / 3 / 3; grid-area: 2 / 1 / 3 / 3;
border-bottom: 1px solid var(--numerus--color--black); border-bottom: 1px solid var(--numerus--color--black);
} }
.caixa-5 { .caixa-5 {
grid-area: 2 / 3 / 3 / 4; grid-area: 2 / 3 / 3 / 4;
background: var(--numerus--color--red); background: var(--numerus--color--red);
padding: 1rem; padding: 1rem;
border-bottom: 1px solid var(--numerus--color--black); border-bottom: 1px solid var(--numerus--color--black);
} }
.caixa-6 { .caixa-6 {
grid-area: 2 / 4 / 3 / 5; grid-area: 2 / 4 / 3 / 5;
border-bottom: 1px solid var(--numerus--color--black); border-bottom: 1px solid var(--numerus--color--black);
} }
.caixa-7 { .caixa-7 {
grid-area: 2 / 5 / 3 / 7; grid-area: 2 / 5 / 3 / 7;
background: var(--numerus--color--green); background: var(--numerus--color--green);
font-size: calc(16px + 5vw); font-size: calc(16px + 5vw);
display: grid; display: grid;
align-content: center; align-content: center;
justify-content: end; justify-content: end;
border-bottom: 1px solid var(--numerus--color--black); border-bottom: 1px solid var(--numerus--color--black);
} }
.caixa-8 { .caixa-8 {
grid-area: 3 / 1 / 4 / 2; grid-area: 3 / 1 / 4 / 2;
background: var(--numerus--color--black); background: var(--numerus--color--black);
color: var(--numerus--color--white); color: var(--numerus--color--white);
padding: 1rem; padding: 1rem;
border-bottom: 1px solid var(--numerus--color--black); border-bottom: 1px solid var(--numerus--color--black);
} }
.caixa-9 { .caixa-9 {
grid-area: 3 / 2 / 4 / 7; grid-area: 3 / 2 / 4 / 7;
font-size: calc(16px + 5vw); font-size: calc(16px + 5vw);
display: grid; display: grid;
align-content: center; align-content: center;
justify-content: end; justify-content: end;
border-bottom: 1px solid var(--numerus--color--black); border-bottom: 1px solid var(--numerus--color--black);
} }
@ -10343,47 +10354,57 @@ grid-row-gap: 0px;
@media screen and (max-width: 992px) { @media screen and (max-width: 992px) {
.contenidor { .contenidor {
display: grid; display: grid;
grid-template-columns: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr);
} }
.graella {
display: grid; .graella {
grid-template-columns: repeat(2, 1fr); display: grid;
grid-template-rows: repeat(5, 1fr); grid-template-columns: repeat(2, 1fr);
grid-column-gap: 0px; grid-template-rows: repeat(5, 1fr);
grid-row-gap: 0px; grid-column-gap: 0px;
} grid-row-gap: 0px;
.caixa-1 { }
grid-area: 1 / 1 / 2 / 2; /* posició 1*/
} .caixa-1 {
.caixa-2 { grid-area: 1 / 1 / 2 / 2; /* posició 1*/
grid-area: 1 / 2 / 2 / 3; /* posició 2*/ }
}
.caixa-3 { .caixa-2 {
grid-area: 2 / 1 / 3 / 2; /* posició 3*/ grid-area: 1 / 2 / 2 / 3; /* posició 2*/
} }
.caixa-4 {
grid-area: 5 / 1 / 6 / 2; /* posició 7*/ .caixa-3 {
display: none; grid-area: 2 / 1 / 3 / 2; /* posició 3*/
} }
.caixa-5 {
grid-area: 2 / 2 / 3 / 3; /*posició 4*/ .caixa-4 {
} grid-area: 5 / 1 / 6 / 2; /* posició 7*/
.caixa-6 { display: none;
grid-area: 5 / 2 / 6 / 3; /* posició 8*/ }
display: none;
} .caixa-5 {
.caixa-7 { grid-area: 2 / 2 / 3 / 3; /*posició 4*/
grid-area: 3 / 1 / 4 / 2; /* posició 5*/ }
justify-content: start;
} .caixa-6 {
.caixa-8 { grid-area: 5 / 2 / 6 / 3; /* posició 8*/
grid-area: 3 / 2 / 4 / 3; /* posició 6*/ display: none;
} }
.caixa-9 {
grid-area: 4 / 1 / 5 / 3; /* posició 9*/ .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" -}} {{ define "toggle-field" -}}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.ToggleField*/ -}} {{- /*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> <legend>{{ .Label }}</legend>
<label title="{{.FirstOption.Description }}"> <label title="{{.FirstOption.Description }}">
<input type="radio" name="{{ .Name }}" value="{{ .FirstOption.Value }}" <input type="radio" name="{{ .Name }}" value="{{ .FirstOption.Value }}"