Add the minimal CSS for the admin section from Numerus

Basically: menus, tables, snack bar, and input fields.
This commit is contained in:
jordi fita mas 2023-09-28 02:23:25 +02:00
parent e584e29f46
commit 2d209c8128
21 changed files with 412 additions and 19 deletions

View File

@ -11,21 +11,166 @@
margin: 0; margin: 0;
} }
html, body { @font-face {
height: 100%; font-family: 'JetBrains Mono';
font-style: italic;
font-weight: 100;
font-display: swap;
src: local('JetBrains Mono Thin'), url('./fonts/JetBrainsMono-ThinItalic.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: italic;
font-weight: 200;
font-display: swap;
src: local('JetBrains Mono ExtraLight'), url('./fonts/JetBrainsMono-ExtraLightItalic.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: italic;
font-weight: 300;
font-display: swap;
src: local('JetBrains Mono Light'), url('./fonts/JetBrainsMono-LightItalic.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: italic;
font-weight: 400;
font-display: swap;
src: local('JetBrains Mono'), url('./fonts/JetBrainsMono-Italic.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: italic;
font-weight: 500;
font-display: swap;
src: local('JetBrains Mono Medium'), url('./fonts/JetBrainsMono-MediumItalic.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: italic;
font-weight: 600;
font-display: swap;
src: local('JetBrains Mono SemiBoldItalic'), url('./fonts/JetBrainsMono-SemiBoldItalic.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: italic;
font-weight: 700;
font-display: swap;
src: local('JetBrains Mono Bold'), url('./fonts/JetBrainsMono-BoldItalic.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: italic;
font-weight: 800;
font-display: swap;
src: local('JetBrains Mono ExtraBold'), url('./fonts/JetBrainsMono-ExtraBoldItalic.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 100;
font-display: swap;
src: local('JetBrains Mono Thin'), url('./fonts/JetBrainsMono-Thin.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 200;
font-display: swap;
src: local('JetBrains Mono ExtraLight'), url('./fonts/JetBrainsMono-ExtraLight.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 300;
font-display: swap;
src: local('JetBrains Mono Light'), url('./fonts/JetBrainsMono-Light.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('JetBrains Mono'), url('./fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: local('JetBrains Mono Medium'), url('./fonts/JetBrainsMono-Medium.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: local('JetBrains Mono SemiBold'), url('./fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('JetBrains Mono Bold'), url('./fonts/JetBrainsMono-Bold.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 800;
font-display: swap;
src: local('JetBrains Mono ExtraBold'), url('./fonts/JetBrainsMono-ExtraBold.woff2') format('woff2');
} }
html { html {
font-family: monospace; font-family: 'JetBrains Mono', monospace;
font-size: 62.5%; font-size: 62.5%;
--camper--color--black: #3f3b37;
--camper--color--dark-gray: #8a8885;
--camper--color--light-gray: #e1dbd6;
--camper--color--white: #ffffff;
--camper--color--yellow: #ffd200;
--camper--color--red: #ff7a53;
--camper--color--rosy: #ffbaa6;
--camper--color--green: #5ae487;
--camper--color--light-green: #9fefb9;
--camper--color--blue: #55bfff;
--camper--color--light-blue: #cbebff;
--camper--color--hay: #ffe673;
--camper--text-color: var(--camper--color--black);
--camper--background-color: var(--camper--color--white);
--camper--header--background-color: #ede9e5;
} }
body { body {
font-size: 1.6rem; font-size: 1.6rem;
line-height: 1.5; line-height: 1.5;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
background-color: white; }
color: #3f3b37;
body, dialog, .media-picker header, .media-picker footer {
background-color: var(--camper--background-color);
color: var(--camper--text-color);
} }
img, picture, video, canvas, svg { img, picture, video, canvas, svg {
@ -49,6 +194,232 @@ a.missing-translation {
color: #ff0000; color: #ff0000;
} }
body > a[href="#content"], .sr-only {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
body > a[href="#content"]:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 1.4rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
/* header */
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--camper--header--background-color);
}
header, body > nav a {
padding: 0 3rem;
}
body > nav {
border-bottom: 1px solid var(--camper--color--light-gray);
}
body > nav ul {
display: flex;
list-style: none;
padding: 0;
}
body > nav li {
flex: 1;
}
body > nav a {
text-decoration: none;
color: inherit;
min-height: 8rem;
display: flex;
align-items: center;
}
main {
padding: 2rem 3rem;
}
table:not(.month) {
width: 100%;
border-collapse: collapse;
margin: 2rem 0 0 0;
}
/* user menu */
nav details {
position: relative;
}
nav details summary {
background-color: var(--camper--background-color);
display: flex;
cursor: pointer;
justify-content: center;
align-items: center;
width: 7rem;
height: 7rem;
margin: 1rem 0;
border-radius: 50%;
border: none;
}
nav details summary:hover,
nav details summary:focus,
nav details a:hover,
nav details button:hover {
background-color: var(--camper--color--light-gray);
}
nav details summary img {
width: 4.8rem;
object-fit: contain;
}
nav details summary span {
display: none;
}
nav details summary::-webkit-details-marker {
display: none;
}
nav details[open] summary::before {
background-color: var(--camper--header--background-color);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: "";
cursor: default;
z-index: 10;
mix-blend-mode: multiply;
}
nav details ul {
position: absolute;
padding: 1rem 2rem;
list-style: none;
background-color: var(--camper--background-color);
z-index: 20;
right: -1.875em;
}
nav details a:any-link, nav details button {
color: var(--camper--text-color);
font-size: 2rem;
font-style: italic;
height: 5.5rem;
width: 46rem;
padding-left: 2rem;
display: flex;
align-items: center;
border: 0;
text-decoration: none;
text-transform: initial;
cursor: pointer;
}
nav details li + li {
border-top: 1px solid var(--camper--color--dark-gray);
}
/* form */
fieldset {
border: none;
padding: 0;
}
form h2 {
margin-bottom: 1em;
}
label, legend {
display: block;
font-style: italic;
}
fieldset + label, label + label {
margin-top: 1rem;
}
label input, label textarea, label select {
font-style: normal;
}
form fieldset + footer {
margin-top: 3rem;
}
input[type="submit"], button, .button {
min-width: 34rem;
background-color: var(--camper--color--white);
border: 2px solid var(--camper--color--black);
text-transform: uppercase;
display: inline-block;
text-align: center;
padding: 1rem;
}
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
select,
textarea {
background-color: var(--camper--background-color);
border: 1px solid var(--camper--color--black);
border-radius: 0;
padding: .5rem 1rem;
height: 3.5rem;
}
/* login */
#login-form {
background-color: var(--camper--color--hay);
padding: 1.25em;
}
#login-form fieldset {
display: flex;
gap: 2rem;
}
#login-form label {
margin: 0;
}
/* media */
.media-grid { .media-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
@ -64,6 +435,12 @@ a.missing-translation {
max-height: 26rem; max-height: 26rem;
} }
.media-grid button {
min-width: 0;
border: none;
padding: 0;
}
.media-grid img { .media-grid img {
object-fit: cover; object-fit: cover;
} }
@ -72,10 +449,6 @@ a.missing-translation {
min-width: 75vw; min-width: 75vw;
} }
.media-picker, .media-picker header, .media-picker footer {
background-color: white;
}
.media-picker header, .media-picker footer { .media-picker header, .media-picker footer {
position: sticky; position: sticky;
padding-top: 1rem; padding-top: 1rem;
@ -95,7 +468,7 @@ a.missing-translation {
} }
#campground-map a:hover { #campground-map a:hover {
fill: #ffeeaa; fill: var(--camper--color--hay);
} }
[class^="icon_"] { [class^="icon_"] {
@ -159,7 +532,7 @@ a.missing-translation {
} }
.season-calendar [aria-checked] { .season-calendar [aria-checked] {
border: 2px solid black; border: 2px solid var(--camper--color--black);
position: relative; position: relative;
} }
@ -170,7 +543,7 @@ a.missing-translation {
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
display: block; display: block;
background-color: black; background-color: var(--camper--color--black);
border-radius: 50%; border-radius: 50%;
width: .8rem; width: .8rem;
height: .8rem; height: .8rem;
@ -185,3 +558,23 @@ a.missing-translation {
gap: 1em; gap: 1em;
} }
/* snack bar */
#snackbar [role="alert"] {
cursor: pointer;
background-color: var(--camper--color--black);
color: var(--camper--color--white);
padding: 2rem;
min-width: 28.8rem;
max-width: 56.8rem;
border-radius: 2px;
position: fixed;
translate: -50% 100%;
left: 50%;
bottom: 0;
transition: translate;
transition-duration: 300ms;
}
#snackbar [role="alert"].open {
translate: -50%;
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -15,8 +15,8 @@
{{ block "head" . }}{{ end }} {{ block "head" . }}{{ end }}
</head> </head>
<body> <body>
<a href="#content">{{( gettext "Skip to main content" )}}</a>
<header> <header>
<a href="#main">{{( gettext "Skip to main content" )}}</a>
<h1>camper _ws</h1> <h1>camper _ws</h1>
{{ if isLoggedIn -}} {{ if isLoggedIn -}}
<nav> <nav>
@ -73,7 +73,7 @@
</ul> </ul>
</nav> </nav>
{{- end }} {{- end }}
<main id="main"> <main id="content">
{{- template "content" . }} {{- template "content" . }}
</main> </main>
</body> </body>

View File

@ -8,7 +8,7 @@
{{ define "content" -}} {{ define "content" -}}
{{- /*gotype: dev.tandem.ws/tandem/camper/pkg/app.loginForm */ -}} {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/app.loginForm */ -}}
<form method="post" action="/login"> <form id="login-form" method="post" action="/login">
<input type="hidden" name="{{ .Redirect.Name}}" value="{{ .Redirect.Val }}"> <input type="hidden" name="{{ .Redirect.Name}}" value="{{ .Redirect.Val }}">
<h2>{{( pgettext "Login" "title" )}}</h2> <h2>{{( pgettext "Login" "title" )}}</h2>
{{ if .Error -}} {{ if .Error -}}

View File

@ -1,7 +1,7 @@
<div class="season-calendar" data-hx-target="this" data-hx-swap="outerHTML"> <div class="season-calendar" data-hx-target="this" data-hx-swap="outerHTML">
{{- /*gotype: dev.tandem.ws/tandem/camper/pkg/season.seasonCalendar*/ -}} {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/season.seasonCalendar*/ -}}
{{ range .Months -}} {{ range .Months -}}
<table> <table class="month">
<caption>{{ pgettext .Name "month" }}</caption> <caption>{{ pgettext .Name "month" }}</caption>
<thead> <thead>
<tr> <tr>

View File

@ -14,20 +14,20 @@
<table> <table>
<thead> <thead>
<tr> <tr>
<th scope="col">{{( pgettext "Name" "header" )}}</th>
<th scope="col">{{( pgettext "Color" "header" )}}</th> <th scope="col">{{( pgettext "Color" "header" )}}</th>
<th scope="col">{{( pgettext "Name" "header" )}}</th>
<th scope="col">{{( pgettext "Active" "season" )}}</th> <th scope="col">{{( pgettext "Active" "season" )}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{{ range .Seasons -}} {{ range .Seasons -}}
<tr> <tr>
<td><a href="/admin/seasons/{{ .Slug }}">{{ .Name }}</a></td>
<td> <td>
<svg width="20px" height="20px"> <svg width="20px" height="20px">
<circle cx="50%" cy="50%" r="49%" fill="{{ .Color }}" stroke="#000" stroke-width=".5"/> <circle cx="50%" cy="50%" r="49%" fill="{{ .Color }}" stroke="#000" stroke-width=".5"/>
</svg> </svg>
</td> </td>
<td><a href="/admin/seasons/{{ .Slug }}">{{ .Name }}</a></td>
<td>{{ if .Active }}{{( gettext "Yes" )}}{{ else }}{{( gettext "No" )}}{{ end }}</td> <td>{{ if .Active }}{{( gettext "Yes" )}}{{ else }}{{( gettext "No" )}}{{ end }}</td>
</tr> </tr>
{{- end }} {{- end }}