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

Compare commits

base: tandem:a7c1df20f0c2a08f25bde8e204f89b45e41926a4
Branches Tags
tandem:master
tandem:v1.1
tandem:v1
tandem:v0
...
compare: tandem:51c789ca13b5e99587eb9000d6f715426316c035
Branches Tags
tandem:master
tandem:v1.1
tandem:v1
tandem:v0

2 Commits
a7c1df20f0 ... 51c789ca13

Author SHA1 Message Date
jordi fita mas 51c789ca13 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.
 2023-07-14 10:44:38 +02:00
jordi fita mas ae1e294144 Fix body class to show the filters without JavaScript 
This class must match the one set by the “Filter” button so that when
there is no JavaScript filters forms are always visible.
 2023-07-14 10:25:39 +02:00
4 changed files with 115 additions and 94 deletions
Show Stats 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/static/numerus.js
View File

@ -712,7 +712,7 @@ htmx.on('closeModal', () => {
}); });
htmx.on(document, 'alpine:init', () => { htmx.on(document, 'alpine:init', () => {
document.body.classList.remove('show-filters'); document.body.classList.remove('filters-visible');
Alpine.data('snackbar', () => ({ Alpine.data('snackbar', () => ({
show: false, toast: "", toasts: [], timeoutId: null, init() { show: false, toast: "", toasts: [], timeoutId: null, init() {

2
web/template/app.gohtml
View File

@ -9,7 +9,7 @@
<script type="module" src="/static/numerus.js"></script> <script type="module" src="/static/numerus.js"></script>
<script defer src="/static/alpinejs@3.12.0.min.js"></script> <script defer src="/static/alpinejs@3.12.0.min.js"></script>
</head> </head>
<body class="show-filters"> <body class="filters-visible">
<header> <header>
<h1><img src="/static/numerus.svg" alt="Numerus" width="261" height="33"></h1> <h1><img src="/static/numerus.svg" alt="Numerus" width="261" height="33"></h1>
<details id="profile-menu" class="menu"> <details id="profile-menu" class="menu">

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 }}"