Merge pull request 'Implémentation "HATEOAS" de l'interface pour HTMX et update des URLs qui fonctionne !' (#57) from feat/54_update_url_on_navbar_navigation into main
Reviewed-on: #57 Reviewed-by: kosssi <simon@p4pillon.org> Implémente une approche plus respectueuse de "HATEOAS" comme nécessité par HTMX. Dans cette approche, les routes des pages, comme /index ou /cps, ont, par défaut, un rendu "complet", comme cela serait si l'on n'utilisait pas HTMX. Certains helpers sont utilisés pour éviter la duplication de code (entre particulier une "macro" Jinja pour la navbar). Un "Extractor" issu de axum-htmx permet d'identifier quand une requête sur ces pages est issue d'un appel htmx, et permet de générer un rendu "simplifié", ne contenant (quasiment) que les éléments HTML ayant leur contenu qui change. Par exemple, la page /cps, dans le cadre d'une requête htmx (hx-request=true), ne retourne que : une nouvelle balise <title>, la navbar (pour changer le design de l'élément "courant") et le contenu de la page. Tout le contenu de <head> ou les div qui encapsulent l'ensemble de la page ne sont pas re-envoyé. Cela permet de mettre à jour les URLs dans la barre du navigateur, sans provoquer les problèmes de rechargement de page identifié dans le ticket #54. Au passage, cette PR organise les templates d'une manière qui me parait un peu plus "claire" qu'avant : - Les "pages", correspondant à des routes réelles, sont définies dans app/src/pages - Les "composants", comme la navbar, qui ont vocation à être "inséré" (plutôt par des includes ou des appels de fonctions), sont définis dans app/src/components L'avantage de leur présence dans le dossier src est qu'on peut sans problème mettre à côté les fichiers .rs qui leur correspondent. La PR #53 et le ticket #54 avaient éclairé un problème lorsqu'on souhaitait pouvoir refléter la navigation dans l'URL du navigateur. Cette PR corrige ce problème en adoptant une approche plus respectueuse de la philosophie de HTMX. - La nouvelle librairie axum-htmx qui offre des helpers pour faire du HTMX dans Axum - Un repo' d'exemple intéressant, du même auteur, qui propose certaines approches pour gérer les "partials" (le rendu différentiel selon qu'on a une requête HTMX ou pas) Closes #46 Closes #54
This commit is contained in:
commit
90ff593438
30
Cargo.lock
generated
30
Cargo.lock
generated
@ -87,6 +87,7 @@ dependencies = [
|
||||
"askama",
|
||||
"askama_axum",
|
||||
"axum",
|
||||
"axum-htmx",
|
||||
"cargo-watch",
|
||||
"listenfd",
|
||||
"notify 6.1.1",
|
||||
@ -398,6 +399,20 @@ dependencies = [
|
||||
"tracing",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "axum-htmx"
|
||||
version = "0.6.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "36cdb6062317f732ed3acf4e9c28c3824092e226726616f46ebdd8cd32c82a41"
|
||||
dependencies = [
|
||||
"async-trait",
|
||||
"axum-core",
|
||||
"futures",
|
||||
"http",
|
||||
"tokio",
|
||||
"tower",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "backtrace"
|
||||
version = "0.3.73"
|
||||
@ -1470,6 +1485,20 @@ dependencies = [
|
||||
"new_debug_unreachable",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "futures"
|
||||
version = "0.3.30"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "645c6916888f6cb6350d2550b80fb63e734897a8498abe35cfb732b6487804b0"
|
||||
dependencies = [
|
||||
"futures-channel",
|
||||
"futures-core",
|
||||
"futures-io",
|
||||
"futures-sink",
|
||||
"futures-task",
|
||||
"futures-util",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "futures-channel"
|
||||
version = "0.3.30"
|
||||
@ -1477,6 +1506,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "eac8f7d7865dcb88bd4373ab671c8cf4508703796caa2b1985a9ca867b3fcb78"
|
||||
dependencies = [
|
||||
"futures-core",
|
||||
"futures-sink",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
|
||||
@ -7,6 +7,7 @@ edition = "2021"
|
||||
askama = "0.12.1"
|
||||
askama_axum = "0.4.0"
|
||||
axum = "0.7.5"
|
||||
axum-htmx = { version = "0.6", features = ["auto-vary"] }
|
||||
listenfd = "1.0.1"
|
||||
notify = "6.1.1"
|
||||
serde = { version = "1.0.204", features = ["derive"] }
|
||||
|
||||
6
crates/app/askama.toml
Normal file
6
crates/app/askama.toml
Normal file
@ -0,0 +1,6 @@
|
||||
[general]
|
||||
# Directories to search for templates, relative to the crate root.
|
||||
dirs = [
|
||||
"src/pages",
|
||||
"src/components",
|
||||
]
|
||||
1
crates/app/assets/css/flowbite@2.5.1.min.css
vendored
1
crates/app/assets/css/flowbite@2.5.1.min.css
vendored
File diff suppressed because one or more lines are too long
@ -566,28 +566,8 @@ video {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.-inset-0\.5 {
|
||||
inset: -0.125rem;
|
||||
}
|
||||
|
||||
.-inset-1\.5 {
|
||||
inset: -0.375rem;
|
||||
}
|
||||
|
||||
.right-0 {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.z-10 {
|
||||
z-index: 10;
|
||||
.z-50 {
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
@ -595,36 +575,9 @@ video {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.-mr-2 {
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
|
||||
.ml-3 {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.ml-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mt-3 {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
.my-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mt-6 {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
@ -635,10 +588,22 @@ video {
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.me-3 {
|
||||
margin-inline-end: 0.75rem;
|
||||
}
|
||||
|
||||
.mt-3 {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
@ -663,52 +628,44 @@ video {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.h-16 {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.h-6 {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.h-8 {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-32 {
|
||||
height: 8rem;
|
||||
}
|
||||
|
||||
.h-48 {
|
||||
height: 12rem;
|
||||
}
|
||||
|
||||
.h-96 {
|
||||
height: 24rem;
|
||||
.h-2 {
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
.h-2\.5 {
|
||||
height: 0.625rem;
|
||||
}
|
||||
|
||||
.h-9 {
|
||||
height: 2.25rem;
|
||||
.h-32 {
|
||||
height: 8rem;
|
||||
}
|
||||
|
||||
.h-4 {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.h-48 {
|
||||
height: 12rem;
|
||||
}
|
||||
|
||||
.h-5 {
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.h-7 {
|
||||
height: 1.75rem;
|
||||
}
|
||||
|
||||
.h-2 {
|
||||
height: 0.5rem;
|
||||
.h-8 {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.h-4 {
|
||||
height: 1rem;
|
||||
.h-96 {
|
||||
height: 24rem;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.min-h-full {
|
||||
@ -719,58 +676,38 @@ video {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.w-32 {
|
||||
width: 8rem;
|
||||
}
|
||||
|
||||
.w-48 {
|
||||
width: 12rem;
|
||||
}
|
||||
|
||||
.w-6 {
|
||||
width: 1.5rem;
|
||||
.w-5 {
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
.w-8 {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.w-32 {
|
||||
width: 8rem;
|
||||
}
|
||||
|
||||
.w-20 {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.w-24 {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.w-28 {
|
||||
width: 7rem;
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.max-w-7xl {
|
||||
max-width: 80rem;
|
||||
}
|
||||
|
||||
.max-w-xs {
|
||||
max-width: 20rem;
|
||||
.max-w-screen-xl {
|
||||
max-width: 1280px;
|
||||
}
|
||||
|
||||
.max-w-sm {
|
||||
max-width: 24rem;
|
||||
}
|
||||
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.origin-top-right {
|
||||
transform-origin: top right;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
opacity: .5;
|
||||
@ -781,12 +718,20 @@ video {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
.list-none {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
@ -805,48 +750,66 @@ video {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
|
||||
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(0.75rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.rounded-full {
|
||||
border-radius: 9999px;
|
||||
.divide-y > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-y-reverse: 0;
|
||||
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
||||
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
|
||||
}
|
||||
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-opacity: 1;
|
||||
border-color: rgb(243 244 246 / var(--tw-divide-opacity));
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
.self-center {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.border-2 {
|
||||
border-width: 2px;
|
||||
.rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.border-b {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.border-t {
|
||||
border-top-width: 1px;
|
||||
.border-2 {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.border-dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.border-gray-100 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(243 244 246 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-gray-200 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(229 231 235 / var(--tw-border-opacity));
|
||||
@ -857,9 +820,9 @@ video {
|
||||
border-color: rgb(209 213 219 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
.bg-blue-700 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
background-color: rgb(29 78 216 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-gray-200 {
|
||||
@ -872,8 +835,19 @@ video {
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
.bg-gray-50 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-gray-800 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
@ -884,36 +858,39 @@ video {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.px-3 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.py-1 {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.py-10 {
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.py-3 {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.py-8 {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.pb-3 {
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.pt-2 {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.pt-4 {
|
||||
padding-top: 1rem;
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.text-3xl {
|
||||
@ -939,6 +916,10 @@ video {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.leading-tight {
|
||||
line-height: 1.25;
|
||||
}
|
||||
@ -947,9 +928,9 @@ video {
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.text-gray-400 {
|
||||
.text-gray-200 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
color: rgb(229 231 235 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
@ -957,9 +938,9 @@ video {
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-gray-800 {
|
||||
.text-gray-700 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(31 41 55 / var(--tw-text-opacity));
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-gray-900 {
|
||||
@ -967,19 +948,9 @@ video {
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-gray-200 {
|
||||
.text-white {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 231 235 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.opacity-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.shadow-lg {
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.shadow {
|
||||
@ -988,31 +959,11 @@ video {
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.ring-1 {
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
}
|
||||
|
||||
.ring-black {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
|
||||
}
|
||||
|
||||
.ring-opacity-5 {
|
||||
--tw-ring-opacity: 0.05;
|
||||
}
|
||||
|
||||
.hover\:bg-gray-100:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-gray-500:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.focus\:outline-none:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
@ -1024,47 +975,27 @@ video {
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
}
|
||||
|
||||
.focus\:ring-indigo-500:focus {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
|
||||
.focus\:ring-4:focus {
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
}
|
||||
|
||||
.focus\:ring-offset-2:focus {
|
||||
--tw-ring-offset-width: 2px;
|
||||
.focus\:ring-gray-200:focus {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
|
||||
}
|
||||
|
||||
.focus\:ring-gray-300:focus {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.sm\:-my-px {
|
||||
margin-top: -1px;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.sm\:ml-6 {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.sm\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sm\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sm\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.sm\:items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(2rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.sm\:px-6 {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
@ -1072,28 +1003,91 @@ video {
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:order-1 {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.md\:order-2 {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.md\:me-0 {
|
||||
margin-inline-end: 0px;
|
||||
}
|
||||
|
||||
.md\:mt-0 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.md\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.md\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.md\:h-64 {
|
||||
height: 16rem;
|
||||
}
|
||||
|
||||
.md\:h-72 {
|
||||
height: 18rem;
|
||||
.md\:w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.md\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.md\:space-x-0 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(0px * var(--tw-space-x-reverse));
|
||||
margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(2rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.md\:border-0 {
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.md\:bg-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.md\:bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.md\:p-0 {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.md\:p-6 {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.md\:text-blue-700 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(29 78 216 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.md\:hover\:bg-transparent:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.md\:hover\:text-blue-700:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(29 78 216 / var(--tw-text-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.lg\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lg\:grid-cols-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
@ -1104,7 +1098,16 @@ video {
|
||||
}
|
||||
}
|
||||
|
||||
.rtl\:space-x-reverse:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 1;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:divide-gray-600 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-opacity: 1;
|
||||
border-color: rgb(75 85 99 / var(--tw-divide-opacity));
|
||||
}
|
||||
|
||||
.dark\:border-gray-600 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(75 85 99 / var(--tw-border-opacity));
|
||||
@ -1120,6 +1123,26 @@ video {
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark\:bg-gray-800 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark\:bg-gray-900 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-gray-200 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 231 235 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-gray-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-gray-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity));
|
||||
@ -1129,4 +1152,52 @@ video {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-white {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:bg-gray-600:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:bg-gray-700:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-white:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:focus\:ring-gray-600:focus {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.md\:dark\:bg-gray-900 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.md\:dark\:text-blue-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.md\:dark\:hover\:bg-transparent:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.md\:dark\:hover\:text-blue-500:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246 / var(--tw-text-opacity));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
{% if hx_request %}
|
||||
<title>{% block title %}{{ title }}{% endblock %}</title>
|
||||
{% block body %}{% endblock %}
|
||||
{% else %}
|
||||
<!doctype html>
|
||||
<html lang="fr" class="h-full">
|
||||
<head>
|
||||
@ -5,19 +9,15 @@
|
||||
|
||||
<script src="/assets/js/htmx@2.0.1.min.js"></script>
|
||||
<script src="/assets/js/alpinejs@3.14.1.min.js" defer></script>
|
||||
<link href="/assets/css/style.css" rel="stylesheet">
|
||||
<link href="/assets/css/flowbite@2.5.1.min.css" rel="stylesheet" />
|
||||
<script src="/assets/js/flowbite@2.5.1.min.js"></script>
|
||||
<link href="/assets/css/style.css" rel="stylesheet">
|
||||
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body class="h-full">
|
||||
<div class="min-h-full">
|
||||
{% block nav %}
|
||||
{% include "layout/nav.html" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}{% endblock %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
{% endif %}
|
||||
18
crates/app/src/components/navbar/menu-item.html
Normal file
18
crates/app/src/components/navbar/menu-item.html
Normal file
@ -0,0 +1,18 @@
|
||||
{% set selected = item.id == current %}
|
||||
<li>
|
||||
<a
|
||||
href="{{ item.href }}"
|
||||
{% if selected -%}
|
||||
class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
|
||||
aria-current="page"
|
||||
{% else -%}
|
||||
class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
{% endif -%}
|
||||
hx-get="{{ item.href }}"
|
||||
hx-push-url="true"
|
||||
hx-swap="outerHTML"
|
||||
hx-select-oob="#menu-items,#page-header,#page-main"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a>
|
||||
</li>
|
||||
50
crates/app/src/components/navbar/navbar.html
Normal file
50
crates/app/src/components/navbar/navbar.html
Normal file
@ -0,0 +1,50 @@
|
||||
{% macro navbar(current) %}
|
||||
|
||||
{% let items=crate::menu::get_menu_items() %}
|
||||
|
||||
<nav class="bg-white border-gray-200 dark:bg-gray-900">
|
||||
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
|
||||
<a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
|
||||
<img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
|
||||
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Krys4lide</span>
|
||||
</a>
|
||||
<div class="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
|
||||
<button type="button" class="flex text-sm bg-gray-800 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600" id="user-menu-button" aria-expanded="false" data-dropdown-toggle="user-dropdown" data-dropdown-placement="bottom">
|
||||
<span class="sr-only">Ouvrir le menu de profil</span>
|
||||
<img class="w-8 h-8 rounded-full" src="https://flowbite.com/docs/images/people/profile-picture-3.jpg" alt="user photo">
|
||||
</button>
|
||||
<!-- Dropdown menu -->
|
||||
<div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" id="user-dropdown">
|
||||
<div class="px-4 py-3">
|
||||
<span class="block text-sm text-gray-900 dark:text-white">Bonnie Green</span>
|
||||
<span class="block text-sm text-gray-500 truncate dark:text-gray-400">name@flowbite.com</span>
|
||||
</div>
|
||||
<ul class="py-2" aria-labelledby="user-menu-button">
|
||||
<li>
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Profile</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Settings</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Sign out</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button data-collapse-toggle="navbar-user" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-user" aria-expanded="false">
|
||||
<span class="sr-only">Ouvrir le menu de navigation</span>
|
||||
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
|
||||
<ul id="menu-items" class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
|
||||
{% for item in items %}
|
||||
{% include "navbar/menu-item.html" %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endmacro %}
|
||||
@ -1,29 +1,21 @@
|
||||
mod pages;
|
||||
mod templates;
|
||||
|
||||
use std::path::Path;
|
||||
|
||||
use askama_axum::Template;
|
||||
use axum::http::{StatusCode, Uri};
|
||||
use axum_htmx::AutoVaryLayer;
|
||||
use tower_http::services::ServeDir;
|
||||
|
||||
mod menu;
|
||||
mod pages;
|
||||
|
||||
async fn fallback(uri: Uri) -> (StatusCode, String) {
|
||||
(StatusCode::NOT_FOUND, format!("No route for {uri}"))
|
||||
}
|
||||
|
||||
#[derive(Template)]
|
||||
#[template(path = "index.html")]
|
||||
pub struct GetIndexTemplate;
|
||||
|
||||
async fn root() -> GetIndexTemplate {
|
||||
GetIndexTemplate {}
|
||||
}
|
||||
|
||||
pub fn get_router(assets_path: &Path) -> axum::Router {
|
||||
axum::Router::new()
|
||||
.nest_service("/assets", ServeDir::new(assets_path))
|
||||
.route("/", axum::routing::get(root))
|
||||
.nest("/pages", pages::get_routes())
|
||||
.merge(templates::get_routes())
|
||||
.merge(pages::get_routes())
|
||||
.fallback(fallback)
|
||||
// The AutoVaryLayer is used to avoid cache issues with htmx (cf: https://github.com/robertwayne/axum-htmx?tab=readme-ov-file#auto-caching-management)
|
||||
.layer(AutoVaryLayer)
|
||||
}
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
use ::app::get_router;
|
||||
use std::path::{Path, PathBuf};
|
||||
use std::{env, io};
|
||||
|
||||
use axum::body::Body;
|
||||
use axum::http::Request;
|
||||
use listenfd::ListenFd;
|
||||
use notify::Watcher;
|
||||
use std::path::Path;
|
||||
use std::{env, io};
|
||||
use thiserror::Error;
|
||||
use tokio::net::TcpListener;
|
||||
use tower_livereload::predicate::Predicate;
|
||||
use tower_livereload::LiveReloadLayer;
|
||||
|
||||
use ::app::get_router;
|
||||
|
||||
#[derive(Error, Debug)]
|
||||
pub enum AppError {
|
||||
#[error("Unable to bind to TCP listener")]
|
||||
@ -46,12 +48,14 @@ async fn get_tcp_listener() -> Result<TcpListener, io::Error> {
|
||||
}
|
||||
|
||||
fn get_livereload_layer(
|
||||
templates_path: &Path,
|
||||
templates_paths: Vec<PathBuf>,
|
||||
) -> Result<LiveReloadLayer<NotHtmxPredicate>, notify::Error> {
|
||||
let livereload = LiveReloadLayer::new();
|
||||
let reloader = livereload.reloader();
|
||||
let mut watcher = notify::recommended_watcher(move |_| reloader.reload())?;
|
||||
watcher.watch(templates_path, notify::RecursiveMode::Recursive)?;
|
||||
for templates_path in templates_paths {
|
||||
watcher.watch(templates_path.as_path(), notify::RecursiveMode::Recursive)?;
|
||||
}
|
||||
Ok(livereload.request_predicate::<Body, NotHtmxPredicate>(NotHtmxPredicate))
|
||||
}
|
||||
|
||||
@ -61,10 +65,13 @@ async fn main() -> Result<(), AppError> {
|
||||
var: "CARGO_MANIFEST_DIR",
|
||||
})?;
|
||||
let assets_path = Path::new(&manifest_dir).join("assets");
|
||||
let templates_path = Path::new(&manifest_dir).join("templates");
|
||||
let templates_paths = vec![
|
||||
Path::new(&manifest_dir).join("src/pages"),
|
||||
Path::new(&manifest_dir).join("src/components"),
|
||||
];
|
||||
|
||||
let livereload_layer =
|
||||
get_livereload_layer(&templates_path).map_err(AppError::NotifyWatcher)?;
|
||||
get_livereload_layer(templates_paths).map_err(AppError::NotifyWatcher)?;
|
||||
let router = get_router(assets_path.as_path()).layer(livereload_layer);
|
||||
|
||||
let listener: TcpListener = get_tcp_listener().await.map_err(AppError::TCPListener)?;
|
||||
|
||||
23
crates/app/src/menu.rs
Normal file
23
crates/app/src/menu.rs
Normal file
@ -0,0 +1,23 @@
|
||||
pub struct MenuItem {
|
||||
pub id: String,
|
||||
pub label: String,
|
||||
pub href: String,
|
||||
}
|
||||
|
||||
/// Get the menu items
|
||||
/// This function is the central place to define the menu items
|
||||
/// It can be used directly in templates, for example in the `navbar` component to render the menu
|
||||
pub fn get_menu_items() -> Vec<MenuItem> {
|
||||
vec![
|
||||
MenuItem {
|
||||
id: "home".to_string(),
|
||||
label: "Accueil".to_string(),
|
||||
href: "/".to_string(),
|
||||
},
|
||||
MenuItem {
|
||||
id: "cps".to_string(),
|
||||
label: "CPS".to_string(),
|
||||
href: "/cps".to_string(),
|
||||
},
|
||||
]
|
||||
}
|
||||
43
crates/app/src/pages/cps.html
Normal file
43
crates/app/src/pages/cps.html
Normal file
@ -0,0 +1,43 @@
|
||||
{% extends "base.html" %}
|
||||
{% import "navbar/navbar.html" as navbar -%}
|
||||
|
||||
{% block title %}Pharma Libre - CPS{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
{% call navbar::navbar(current="cps") %}
|
||||
<div class="py-10">
|
||||
<header id="page-header">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<h1
|
||||
id="page-title"
|
||||
class="text-3xl font-bold leading-tight tracking-tight text-gray-900"
|
||||
>
|
||||
CPS
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
<main id="page-main">
|
||||
<div
|
||||
class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8"
|
||||
>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-96 mb-4"
|
||||
>A</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
|
||||
<div
|
||||
class="border-2 border-dashed border-gray-300 rounded-lg dark:border-gray-600 h-32 md:h-64"
|
||||
>B</div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
|
||||
>C</div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
|
||||
>D</div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
|
||||
>E</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@ -1,9 +1,12 @@
|
||||
use askama_axum::Template;
|
||||
use axum_htmx::HxRequest;
|
||||
|
||||
#[derive(Template)]
|
||||
#[template(path = "pages/cps.html")]
|
||||
pub struct CpsTemplate;
|
||||
|
||||
pub async fn cps() -> CpsTemplate {
|
||||
CpsTemplate
|
||||
#[template(path = "cps.html")]
|
||||
pub struct CpsTemplate {
|
||||
hx_request: bool,
|
||||
}
|
||||
|
||||
pub async fn cps(HxRequest(hx_request): HxRequest) -> CpsTemplate {
|
||||
CpsTemplate { hx_request }
|
||||
}
|
||||
|
||||
43
crates/app/src/pages/home.html
Normal file
43
crates/app/src/pages/home.html
Normal file
@ -0,0 +1,43 @@
|
||||
{% extends "base.html" %}
|
||||
{% import "navbar/navbar.html" as navbar -%}
|
||||
|
||||
{% block title %}Pharma Libre - Accueil{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
{% call navbar::navbar(current="home") %}
|
||||
<div class="py-10">
|
||||
<header id="page-header">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<h1
|
||||
id="page-title"
|
||||
class="text-3xl font-bold leading-tight tracking-tight text-gray-900"
|
||||
>
|
||||
Accueil
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
<main id="page-main">
|
||||
<div
|
||||
class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8"
|
||||
>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
|
||||
<div
|
||||
class="border-2 border-dashed border-gray-300 rounded-lg dark:border-gray-600 h-32 md:h-64"
|
||||
>A</div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
|
||||
>B</div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
|
||||
>C</div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
|
||||
>D</div>
|
||||
</div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-96 mb-4"
|
||||
>E</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@ -1,9 +1,12 @@
|
||||
use askama_axum::Template;
|
||||
use axum_htmx::HxRequest;
|
||||
|
||||
#[derive(Template)]
|
||||
#[template(path = "pages/home.html")]
|
||||
pub struct HomeTemplate;
|
||||
|
||||
pub async fn home() -> HomeTemplate {
|
||||
HomeTemplate
|
||||
#[template(path = "home.html")]
|
||||
pub struct GetHomeTemplate {
|
||||
hx_request: bool,
|
||||
}
|
||||
|
||||
pub async fn home(HxRequest(hx_request): HxRequest) -> GetHomeTemplate {
|
||||
GetHomeTemplate { hx_request }
|
||||
}
|
||||
|
||||
@ -5,6 +5,6 @@ mod home;
|
||||
|
||||
pub fn get_routes() -> Router {
|
||||
Router::new()
|
||||
.route("/home", routing::get(home::home))
|
||||
.route("/", routing::get(home::home))
|
||||
.route("/cps", routing::get(cps::cps))
|
||||
}
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
use askama_axum::Template;
|
||||
use axum::{routing, Router};
|
||||
|
||||
#[derive(Template)]
|
||||
#[template(path = "hello.html")]
|
||||
struct HelloTemplate {
|
||||
pub name: String,
|
||||
}
|
||||
|
||||
async fn hello() -> HelloTemplate {
|
||||
HelloTemplate {
|
||||
name: "Theo".to_string(),
|
||||
}
|
||||
}
|
||||
|
||||
pub fn get_routes() -> Router {
|
||||
Router::new().route("/", routing::get(hello))
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
use axum::Router;
|
||||
|
||||
mod hello;
|
||||
mod nav;
|
||||
mod profile;
|
||||
|
||||
pub fn get_routes() -> Router {
|
||||
Router::new()
|
||||
.nest("/hello", hello::get_routes())
|
||||
.nest("/nav", nav::get_routes())
|
||||
.nest("/profile", profile::get_routes())
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
use askama_axum::Template;
|
||||
use axum::{extract::Query, routing, Router};
|
||||
use serde::Deserialize;
|
||||
|
||||
struct MenuItem {
|
||||
label: String,
|
||||
href: String,
|
||||
current: bool,
|
||||
}
|
||||
|
||||
#[derive(Deserialize)]
|
||||
struct MenuParameters {
|
||||
mobile: bool,
|
||||
}
|
||||
|
||||
#[derive(Template)]
|
||||
#[template(path = "layout/nav/nav-menu-items.html")]
|
||||
struct MenuTemplate {
|
||||
mobile: bool,
|
||||
items: Vec<MenuItem>,
|
||||
}
|
||||
|
||||
impl MenuTemplate {
|
||||
fn get_classes(&self, is_current_item: &bool) -> String {
|
||||
let common_classes = match self.mobile {
|
||||
true => "block border-l-4 py-2 pl-3 pr-4 text-base font-medium".to_string(),
|
||||
false => {
|
||||
"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium".to_string()
|
||||
}
|
||||
};
|
||||
match (self.mobile, is_current_item) {
|
||||
(true, true) => common_classes + " border-indigo-500 bg-indigo-50 text-indigo-700",
|
||||
(true, false) => common_classes + " border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800",
|
||||
(false, true) => common_classes + " border-indigo-500 text-gray-900",
|
||||
(false, false) => common_classes + " border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async fn menu(Query(params): Query<MenuParameters>) -> MenuTemplate {
|
||||
MenuTemplate {
|
||||
mobile: params.mobile,
|
||||
items: vec![
|
||||
MenuItem {
|
||||
label: "Accueil".to_string(),
|
||||
href: "/pages/home".to_string(),
|
||||
current: true,
|
||||
},
|
||||
MenuItem {
|
||||
label: "CPS".to_string(),
|
||||
href: "/pages/cps".to_string(),
|
||||
current: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
pub fn get_routes() -> Router {
|
||||
Router::new().route("/menu", routing::get(menu))
|
||||
}
|
||||
@ -1,63 +0,0 @@
|
||||
use askama_axum::Template;
|
||||
use axum::{extract::Query, routing, Router};
|
||||
use serde::Deserialize;
|
||||
|
||||
struct MenuItem {
|
||||
label: String,
|
||||
id: String,
|
||||
current: bool,
|
||||
}
|
||||
|
||||
#[derive(Deserialize)]
|
||||
struct MenuParameters {
|
||||
mobile: bool,
|
||||
}
|
||||
|
||||
#[derive(Template)]
|
||||
#[template(path = "layout/nav/profile-menu-items.html")]
|
||||
struct MenuTemplate {
|
||||
mobile: bool,
|
||||
items: Vec<MenuItem>,
|
||||
}
|
||||
|
||||
impl MenuTemplate {
|
||||
fn get_classes(&self, is_current_item: &bool) -> String {
|
||||
let common_classes = match self.mobile {
|
||||
true => "block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800".to_string(),
|
||||
false => "block px-4 py-2 text-sm text-gray-700".to_string(),
|
||||
};
|
||||
match (self.mobile, is_current_item) {
|
||||
(true, true) => common_classes + "", // ???
|
||||
(true, false) => common_classes + "",
|
||||
(false, true) => common_classes + " bg-gray-100",
|
||||
(false, false) => common_classes + "",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async fn menu(Query(params): Query<MenuParameters>) -> MenuTemplate {
|
||||
MenuTemplate {
|
||||
mobile: params.mobile,
|
||||
items: vec![
|
||||
MenuItem {
|
||||
label: "Votre profil".to_string(),
|
||||
id: "profile".to_string(),
|
||||
current: false,
|
||||
},
|
||||
MenuItem {
|
||||
label: "Paramètres".to_string(),
|
||||
id: "settings".to_string(),
|
||||
current: false,
|
||||
},
|
||||
MenuItem {
|
||||
label: "Déconnexion".to_string(),
|
||||
id: "logout".to_string(),
|
||||
current: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
pub fn get_routes() -> Router {
|
||||
Router::new().route("/menu", routing::get(menu))
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
'./templates/**/*.html',
|
||||
'./src/**/*.html',
|
||||
'./css/**/*.css',
|
||||
],
|
||||
theme: {
|
||||
|
||||
@ -1 +0,0 @@
|
||||
<div>Hello {{name}}!</div>
|
||||
@ -1,34 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Pharma Libre{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="py-10">
|
||||
<header>
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<h1
|
||||
id="page-title"
|
||||
class="text-3xl font-bold leading-tight tracking-tight text-gray-900"
|
||||
>
|
||||
{% include "skeletons/page-title.html" %}
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div
|
||||
id="main-container"
|
||||
class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8"
|
||||
>
|
||||
<!-- Your content -->
|
||||
<div
|
||||
hx-get="/pages/home"
|
||||
hx-target="this"
|
||||
hx-trigger="load"
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
{% include "skeletons/card.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@ -1,41 +0,0 @@
|
||||
<nav
|
||||
class="border-b border-gray-200 bg-white"
|
||||
x-data="{ menuOpen: false }"
|
||||
>
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex h-16 justify-between">
|
||||
<div class="flex">
|
||||
{% include "layout/nav/logo.html" %}
|
||||
<div class="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
|
||||
{% include "layout/nav/desktop/menu-items.html" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:flex sm:items-center">
|
||||
{% include "layout/nav/desktop/notifications-button.html" %}
|
||||
{% include "layout/nav/desktop/profile.html" %}
|
||||
</div>
|
||||
<div class="-mr-2 flex items-center sm:hidden">
|
||||
{% include "layout/nav/mobile/menu-button.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile menu, show/hide based on menu state. -->
|
||||
<div
|
||||
class="sm:hidden" id="mobile-menu"
|
||||
x-show="menuOpen"
|
||||
x-cloak
|
||||
>
|
||||
<div class="space-y-1 pb-3 pt-2">
|
||||
{% include "layout/nav/mobile/menu-items.html" %}
|
||||
</div>
|
||||
<div class="border-t border-gray-200 pb-3 pt-4">
|
||||
<div class="flex items-center px-4">
|
||||
{% include "layout/nav/mobile/profile.html" %}
|
||||
{% include "layout/nav/mobile/notifications-button.html" %}
|
||||
</div>
|
||||
<div class="mt-3 space-y-1">
|
||||
{% include "layout/nav/mobile/profile-items.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -1,9 +0,0 @@
|
||||
<div
|
||||
id="nav-menu-desktop"
|
||||
hx-get="/nav/menu?mobile=false"
|
||||
hx-target="this"
|
||||
hx-trigger="load"
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
{% include "skeletons/menu-items.html" %}
|
||||
</div>
|
||||
@ -1,6 +0,0 @@
|
||||
<button
|
||||
type="button"
|
||||
class="relative rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
>
|
||||
{% include "layout/nav/notifications-icon.html" %}
|
||||
</button>
|
||||
@ -1,22 +0,0 @@
|
||||
<div
|
||||
class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
role="menu"
|
||||
id="profile-dropdown"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="user-menu-button"
|
||||
tabindex="-1"
|
||||
x-show="profileOpen"
|
||||
x-on:click.outside="profileOpen = false"
|
||||
x-cloak
|
||||
x-transition
|
||||
>
|
||||
<div
|
||||
id="profile-menu-desktop"
|
||||
hx-get="/profile/menu?mobile=false"
|
||||
hx-target="this"
|
||||
hx-trigger="load"
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
Chargement ...
|
||||
</div>
|
||||
</div>
|
||||
@ -1,27 +0,0 @@
|
||||
<!-- Profile dropdown -->
|
||||
<div
|
||||
class="relative ml-3"
|
||||
x-data="{ profileOpen: false }"
|
||||
>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
id="user-menu-button"
|
||||
aria-controls="profile-dropdown"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="menu"
|
||||
x-on:click="profileOpen = ! profileOpen"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% include "layout/nav/desktop/profile-dropdown.html" %}
|
||||
</div>
|
||||
@ -1,4 +0,0 @@
|
||||
<div class="flex flex-shrink-0 items-center">
|
||||
<img class="block h-8 w-auto lg:hidden" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company">
|
||||
<img class="hidden h-8 w-auto lg:block" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company">
|
||||
</div>
|
||||
@ -1,43 +0,0 @@
|
||||
<!-- Mobile menu button -->
|
||||
<button
|
||||
type="button"
|
||||
class="relative inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
aria-controls="mobile-menu"
|
||||
x-on:click="menuOpen = ! menuOpen"
|
||||
x-bind:aria-expanded="menuOpen"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<!-- Menu open: "hidden", Menu closed: "block" -->
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
x-bind:class="menuOpen ? 'hidden' : 'block'"
|
||||
x-bind:aria-hidden="menuOpen"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
/>
|
||||
</svg>
|
||||
<!-- Menu open: "block", Menu closed: "hidden" -->
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
x-bind:class="menuOpen ? 'block' : 'hidden'"
|
||||
x-bind:aria-hidden="! menuOpen"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
@ -1,9 +0,0 @@
|
||||
<div
|
||||
id="nav-menu-mobile"
|
||||
hx-get="/nav/menu?mobile=true"
|
||||
hx-target="this"
|
||||
hx-trigger="load"
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
Chargement ...
|
||||
</div>
|
||||
@ -1,6 +0,0 @@
|
||||
<button
|
||||
type="button"
|
||||
class="relative ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
>
|
||||
{% include "layout/nav/notifications-icon.html" %}
|
||||
</button>
|
||||
@ -1,9 +0,0 @@
|
||||
<div
|
||||
id="profile-menu-mobile"
|
||||
hx-get="/profile/menu?mobile=true"
|
||||
hx-target="this"
|
||||
hx-trigger="load"
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
Chargement ...
|
||||
</div>
|
||||
@ -1,11 +0,0 @@
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium text-gray-800">Tom Cook</div>
|
||||
<div class="text-sm font-medium text-gray-500">tom@example.com</div>
|
||||
</div>
|
||||
@ -1,13 +0,0 @@
|
||||
{% for item in items %}
|
||||
<a
|
||||
href=""
|
||||
hx-get="{{ item.href }}"
|
||||
hx-trigger="click"
|
||||
hx-target="#main-container"
|
||||
hx-swap="innerHTML"
|
||||
class="{{ Self::get_classes(self, item.current) }}"
|
||||
aria-current="{% if item.current %}page{% endif %}"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
@ -1,16 +0,0 @@
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
|
||||
/>
|
||||
</svg>
|
||||
@ -1,11 +0,0 @@
|
||||
{% for item in items %}
|
||||
<a
|
||||
href="#{{ item.id }}"
|
||||
class="{{ Self::get_classes(self, item.current) }}"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="{{ item.id }}"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
@ -1,52 +0,0 @@
|
||||
<h3 id="page-title" hx-swap-oob="textContent">
|
||||
CPS
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
|
||||
<div
|
||||
class="border-2 border-dashed border-gray-300 rounded-lg dark:border-gray-600 h-32 md:h-64"
|
||||
></div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
|
||||
></div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
|
||||
></div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-96 mb-4"
|
||||
></div>
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72"
|
||||
></div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72"
|
||||
></div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72"
|
||||
></div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-96 mb-4"
|
||||
></div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72"
|
||||
></div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72"
|
||||
></div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72"
|
||||
></div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72"
|
||||
></div>
|
||||
</div>
|
||||
@ -1,52 +0,0 @@
|
||||
<h3 id="page-title" hx-swap-oob="textContent">
|
||||
Accueil
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
|
||||
<div
|
||||
class="border-2 border-dashed border-gray-300 rounded-lg dark:border-gray-600 h-32 md:h-64"
|
||||
></div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
|
||||
></div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
|
||||
></div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-96 mb-4"
|
||||
></div>
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72"
|
||||
></div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72"
|
||||
></div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72"
|
||||
></div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-96 mb-4"
|
||||
></div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72"
|
||||
></div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72"
|
||||
></div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72"
|
||||
></div>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72"
|
||||
></div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user