Implémentation "HATEOAS" de l'interface pour HTMX et update des URLs qui fonctionne ! #57
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>
|
||||
|
florian_briand marked this conversation as resolved
Outdated
|
||||
</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))
|
||||
|
florian_briand marked this conversation as resolved
Outdated
kosssi
commented
micro typo micro typo `axum::routing` -> `routing`
|
||||
.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
Le fond de la
navest blanc ainsi que ce titre du coup il n'est pas visible ;)Bien vu ... ce code est totalement faussement compatible avec le mode sombre oO
C'était lié au CSS de Flowbite, qui "surchargeait" inutilement Tailwind tout en faisant bugguer le darkmode.
Corrigé par
d4e5656