Add prettier pre-commit hook

This commit is contained in:
Edgar P. Burkhart 2023-04-18 19:51:15 +02:00
parent 044a7f1c06
commit 71269377b4
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
7 changed files with 235 additions and 167 deletions

View file

@ -13,3 +13,9 @@ repos:
hooks: hooks:
- id: djlint-django - id: djlint-django
args: ["--reformat"] args: ["--reformat"]
- repo: https://github.com/pre-commit/mirrors-prettier
rev: "v3.0.0-alpha.6"
hooks:
- id: prettier
types_or: ["css", "javascript"]
exclude: "fontawesome/"

View file

@ -5,7 +5,7 @@ form ul.errorlist {
margin: 0; margin: 0;
} }
form>table>tbody>tr>th { form > table > tbody > tr > th {
background: var(--bg-01); background: var(--bg-01);
background-clip: padding-box; background-clip: padding-box;
} }
@ -19,11 +19,21 @@ form tbody textarea {
height: 100%; height: 100%;
line-height: 1.5; line-height: 1.5;
} }
form input[type="checkbox"] {width: initial} form input[type="checkbox"] {
table.file-input tr {border: none} width: initial;
table.file-input th {text-align: left} }
table.file-input tr :first-child {padding-left: 0} table.file-input tr {
table.file-input tr :last-child {padding-right: 0} border: none;
}
table.file-input th {
text-align: left;
}
table.file-input tr :first-child {
padding-left: 0;
}
table.file-input tr :last-child {
padding-right: 0;
}
.buttons { .buttons {
text-align: right; text-align: right;
@ -40,11 +50,11 @@ table.file-input tr :last-child {padding-right: 0}
text-decoration: underline; text-decoration: underline;
} }
.buttons input[type="submit"] { .buttons input[type="submit"] {
border: .1rem solid var(--green); border: 0.1rem solid var(--green);
background: var(--green-1); background: var(--green-1);
} }
.buttons input[type="reset"] { .buttons input[type="reset"] {
border: .1rem solid var(--red); border: 0.1rem solid var(--red);
background: var(--red-1); background: var(--red-1);
} }
.buttons a.del { .buttons a.del {

View file

@ -2,5 +2,5 @@ a.big-link {
margin-right: 1em; margin-right: 1em;
} }
a.big-link > i { a.big-link > i {
margin-right: .5rem; margin-right: 0.5rem;
} }

View file

@ -1,6 +1,8 @@
@import "https://rsms.me/inter/inter.css"; @import "https://rsms.me/inter/inter.css";
*, *::before, *::after { *,
*::before,
*::after {
box-sizing: border-box; box-sizing: border-box;
} }
@ -34,8 +36,8 @@
--red-1: var(--theme-4); --red-1: var(--theme-4);
--green-1: var(--theme); --green-1: var(--theme);
--border: .5em; --border: 0.5em;
--radius: .25em; --radius: 0.25em;
--num: "tnum", "ss01", "ss02", "case"; --num: "tnum", "ss01", "ss02", "case";
} }
@ -63,10 +65,16 @@ a:hover {
text-decoration: underline; text-decoration: underline;
} }
.red {color: var(--red)} .red {
.green {color: var(--text-green)} color: var(--red);
}
.green {
color: var(--text-green);
}
main, nav, footer { main,
nav,
footer {
padding: 2rem; padding: 2rem;
} }
main { main {
@ -100,7 +108,7 @@ nav ul {
position: relative; position: relative;
} }
nav .skip-link { nav .skip-link {
opacity: .1; opacity: 0.1;
} }
nav .skip-link:active, nav .skip-link:active,
nav .skip-link:focus { nav .skip-link:focus {
@ -128,15 +136,21 @@ footer {
text-align: center; text-align: center;
font-feature-settings: var(--num); font-feature-settings: var(--num);
} }
#pagination a {width: 2rem} #pagination a {
width: 2rem;
}
#pagination a.cur { #pagination a.cur {
font-weight: 650; font-weight: 650;
text-decoration: underline dotted; text-decoration: underline dotted;
} }
@media (width < 1024px) { @media (width < 1024px) {
body {grid-template-columns: 1fr} body {
nav, main, footer { grid-template-columns: 1fr;
}
nav,
main,
footer {
grid-column: 1; grid-column: 1;
grid-row: auto; grid-row: auto;
position: relative; position: relative;

View file

@ -1,5 +1,9 @@
table.full-width col.bar {width: auto} table.full-width col.bar {
.plot {overflow-x: auto} width: auto;
}
.plot {
overflow-x: auto;
}
.plot td.bar { .plot td.bar {
position: relative; position: relative;
@ -7,7 +11,7 @@ table.full-width col.bar {width: auto}
} }
.plot td.bar div { .plot td.bar div {
position: absolute; position: absolute;
height: .5rem; height: 0.5rem;
top: 0; top: 0;
} }
@ -25,29 +29,44 @@ table.full-width col.bar {width: auto}
right: 0; right: 0;
border-radius: var(--radius) 0 0 var(--radius); border-radius: var(--radius) 0 0 var(--radius);
} }
.plot td.bar.m div {background: var(--red-1)} .plot td.bar.m div {
.plot td.bar.p div {background: var(--green-1)} background: var(--red-1);
}
.plot td.bar.p div {
background: var(--green-1);
}
.plot td.bar div.tot { .plot td.bar div.tot {
z-index: 10; z-index: 10;
height: .5rem; height: 0.5rem;
}
.plot td.bar.m div.tot {
background: var(--red);
}
.plot td.bar.p div.tot {
background: var(--green);
} }
.plot td.bar.m div.tot {background: var(--red)}
.plot td.bar.p div.tot {background: var(--green)}
.plot td.bar div.tot span { .plot td.bar div.tot span {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
margin: 0 var(--gap); margin: 0 var(--gap);
font-weight: 650; font-weight: 650;
top: .5rem; top: 0.5rem;
line-height: 1.5rem; line-height: 1.5rem;
height: 1.5rem; height: 1.5rem;
font-feature-settings: var(--num); font-feature-settings: var(--num);
} }
.plot td.bar.p div.tot span {left: 0} .plot td.bar.p div.tot span {
.plot td.bar.m div.tot span {right: 0} left: 0;
}
.plot td.bar.m div.tot span {
right: 0;
}
@media (width < 720px) { @media (width < 720px) {
.plot .bar {width: 0;overflow: hidden} .plot .bar {
width: 0;
overflow: hidden;
}
} }

View file

@ -1,7 +1,12 @@
.table, form {overflow-x: auto} .table,
table {border-collapse: collapse} form {
overflow-x: auto;
}
table {
border-collapse: collapse;
}
table.more tbody:last-child tr:last-child { table.more tbody:last-child tr:last-child {
border-bottom: .1rem dashed var(--gray); border-bottom: 0.1rem dashed var(--gray);
} }
table.full-width { table.full-width {
width: 100%; width: 100%;
@ -9,22 +14,36 @@ table.full-width {
thead { thead {
background: var(--bg-01); background: var(--bg-01);
} }
table.full-width col {width: 8rem} table.full-width col {
table col.icon {width: 1ch} width: 8rem;
}
table col.icon {
width: 1ch;
}
tr { tr {
border: .1rem solid var(--gray); border: 0.1rem solid var(--gray);
height: 2rem; height: 2rem;
line-height: 2rem; line-height: 2rem;
} }
td, th { td,
th {
padding: 0 var(--gap); padding: 0 var(--gap);
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.date, .value { .date,
.value {
font-feature-settings: var(--num); font-feature-settings: var(--num);
} }
.l {text-align: left} .l {
.r, .value {text-align: right} text-align: left;
.c, .date {text-align: center} }
.r,
.value {
text-align: right;
}
.c,
.date {
text-align: center;
}