From e084372b447711ac31dd4b830926c9df497cae2b Mon Sep 17 00:00:00 2001 From: Florian Briand Date: Tue, 6 Aug 2024 00:18:09 +0200 Subject: [PATCH] feat: add page system behing navbar items and skeletons for loading --- crates/app/assets/css/style.css | 205 ++++++++++++++++++ crates/app/src/lib.rs | 2 + crates/app/src/pages/cps.rs | 10 + crates/app/src/pages/home.rs | 10 + crates/app/src/pages/mod.rs | 10 + crates/app/src/templates/nav.rs | 13 +- crates/app/templates/base.html | 2 + crates/app/templates/index.html | 17 +- .../layout/nav/desktop/menu-items.html | 2 +- .../templates/layout/nav/nav-menu-items.html | 6 +- crates/app/templates/pages/cps.html | 52 +++++ crates/app/templates/pages/home.html | 52 +++++ crates/app/templates/skeletons/card.html | 22 ++ .../app/templates/skeletons/menu-items.html | 4 + .../app/templates/skeletons/page-title.html | 1 + 15 files changed, 392 insertions(+), 16 deletions(-) create mode 100644 crates/app/src/pages/cps.rs create mode 100644 crates/app/src/pages/home.rs create mode 100644 crates/app/src/pages/mod.rs create mode 100644 crates/app/templates/pages/cps.html create mode 100644 crates/app/templates/pages/home.html create mode 100644 crates/app/templates/skeletons/card.html create mode 100644 crates/app/templates/skeletons/menu-items.html create mode 100644 crates/app/templates/skeletons/page-title.html diff --git a/crates/app/assets/css/style.css b/crates/app/assets/css/style.css index c7c4c04..94031fb 100644 --- a/crates/app/assets/css/style.css +++ b/crates/app/assets/css/style.css @@ -615,6 +615,30 @@ video { margin-top: 0.75rem; } +.mb-4 { + margin-bottom: 1rem; +} + +.mt-4 { + margin-top: 1rem; +} + +.mt-6 { + margin-top: 1.5rem; +} + +.mb-2 { + margin-bottom: 0.5rem; +} + +.mb-2\.5 { + margin-bottom: 0.625rem; +} + +.me-3 { + margin-inline-end: 0.75rem; +} + .block { display: block; } @@ -627,6 +651,10 @@ video { display: inline-flex; } +.grid { + display: grid; +} + .hidden { display: none; } @@ -651,6 +679,38 @@ video { height: 100%; } +.h-32 { + height: 8rem; +} + +.h-48 { + height: 12rem; +} + +.h-96 { + height: 24rem; +} + +.h-2\.5 { + height: 0.625rem; +} + +.h-9 { + height: 2.25rem; +} + +.h-7 { + height: 1.75rem; +} + +.h-2 { + height: 0.5rem; +} + +.h-4 { + height: 1rem; +} + .min-h-full { min-height: 100%; } @@ -675,6 +735,22 @@ video { width: auto; } +.w-32 { + width: 8rem; +} + +.w-20 { + width: 5rem; +} + +.w-24 { + width: 6rem; +} + +.w-28 { + width: 7rem; +} + .max-w-7xl { max-width: 80rem; } @@ -683,6 +759,10 @@ video { max-width: 20rem; } +.max-w-sm { + max-width: 24rem; +} + .flex-shrink-0 { flex-shrink: 0; } @@ -691,6 +771,24 @@ video { transform-origin: top right; } +@keyframes pulse { + 50% { + opacity: .5; + } +} + +.animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +.grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + .items-center { align-items: center; } @@ -703,6 +801,10 @@ video { justify-content: space-between; } +.gap-4 { + 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))); @@ -717,6 +819,22 @@ video { border-radius: 0.375rem; } +.rounded-lg { + border-radius: 0.5rem; +} + +.rounded { + border-radius: 0.25rem; +} + +.border-2 { + border-width: 2px; +} + +.border { + border-width: 1px; +} + .border-b { border-bottom-width: 1px; } @@ -725,16 +843,35 @@ video { border-top-width: 1px; } +.border-dashed { + border-style: dashed; +} + .border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); } +.border-gray-300 { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.bg-gray-200 { + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity)); +} + +.bg-gray-300 { + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity)); +} + .p-1 { padding: 0.25rem; } @@ -743,6 +880,10 @@ video { padding: 0.5rem; } +.p-4 { + padding: 1rem; +} + .px-4 { padding-left: 1rem; padding-right: 1rem; @@ -826,12 +967,27 @@ video { color: rgb(17 24 39 / var(--tw-text-opacity)); } +.text-gray-200 { + --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); } +.shadow { + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + 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); @@ -895,6 +1051,10 @@ video { display: none; } + .sm\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .sm\:items-center { align-items: center; } @@ -911,6 +1071,20 @@ video { } } +@media (min-width: 768px) { + .md\:h-64 { + height: 16rem; + } + + .md\:h-72 { + height: 18rem; + } + + .md\:p-6 { + padding: 1.5rem; + } +} + @media (min-width: 1024px) { .lg\:block { display: block; @@ -920,8 +1094,39 @@ video { display: none; } + .lg\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; } } + +@media (prefers-color-scheme: dark) { + .dark\:border-gray-600 { + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity)); + } + + .dark\:border-gray-700 { + --tw-border-opacity: 1; + border-color: rgb(55 65 81 / var(--tw-border-opacity)); + } + + .dark\:bg-gray-700 { + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); + } + + .dark\:text-gray-600 { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); + } + + .dark\:text-gray-700 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); + } +} diff --git a/crates/app/src/lib.rs b/crates/app/src/lib.rs index e7ac668..1757b88 100644 --- a/crates/app/src/lib.rs +++ b/crates/app/src/lib.rs @@ -1,3 +1,4 @@ +mod pages; mod templates; use std::path::Path; @@ -23,6 +24,7 @@ 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()) .fallback(fallback) } diff --git a/crates/app/src/pages/cps.rs b/crates/app/src/pages/cps.rs new file mode 100644 index 0000000..a4f378f --- /dev/null +++ b/crates/app/src/pages/cps.rs @@ -0,0 +1,10 @@ +use askama::Template; +use askama_axum::IntoResponse; + +#[derive(Template)] +#[template(path = "pages/cps.html")] +struct CpsResponse; + +pub async fn cps() -> impl IntoResponse { + CpsResponse.into_response() +} \ No newline at end of file diff --git a/crates/app/src/pages/home.rs b/crates/app/src/pages/home.rs new file mode 100644 index 0000000..4dd44e4 --- /dev/null +++ b/crates/app/src/pages/home.rs @@ -0,0 +1,10 @@ +use askama::Template; +use askama_axum::IntoResponse; + +#[derive(Template)] +#[template(path = "pages/home.html")] +struct HomeResponse; + +pub async fn home() -> impl IntoResponse { + HomeResponse.into_response() +} \ No newline at end of file diff --git a/crates/app/src/pages/mod.rs b/crates/app/src/pages/mod.rs new file mode 100644 index 0000000..8113e8f --- /dev/null +++ b/crates/app/src/pages/mod.rs @@ -0,0 +1,10 @@ +use axum::{routing, Router}; + +mod cps; +mod home; + +pub fn get_routes() -> Router { + Router::new() + .route("/home", routing::get(home::home)) + .route("/cps", routing::get(cps::cps)) +} \ No newline at end of file diff --git a/crates/app/src/templates/nav.rs b/crates/app/src/templates/nav.rs index 5675ec7..8de2c76 100644 --- a/crates/app/src/templates/nav.rs +++ b/crates/app/src/templates/nav.rs @@ -5,7 +5,7 @@ use serde::Deserialize; struct MenuItem { label: String, - id: String, + href: String, current: bool, } @@ -42,17 +42,12 @@ async fn menu(Query(params): Query) -> impl IntoResponse { items: vec![ MenuItem { label: "Accueil".to_string(), - id: "home".to_string(), + href: "/pages/home".to_string(), current: true, }, MenuItem { - label: "À propos".to_string(), - id: "about".to_string(), - current: false, - }, - MenuItem { - label: "Contact".to_string(), - id: "contact".to_string(), + label: "CPS".to_string(), + href: "/pages/cps".to_string(), current: false, }, ], diff --git a/crates/app/templates/base.html b/crates/app/templates/base.html index 3a67442..a1c6997 100644 --- a/crates/app/templates/base.html +++ b/crates/app/templates/base.html @@ -6,6 +6,8 @@ + + {% block head %}{% endblock %} diff --git a/crates/app/templates/index.html b/crates/app/templates/index.html index 427de19..9d69e52 100644 --- a/crates/app/templates/index.html +++ b/crates/app/templates/index.html @@ -6,20 +6,27 @@
-

Dashboard

+

+ {% include "skeletons/page-title.html" %} +

-
+
- Chargement ... + {% include "skeletons/card.html" %}
diff --git a/crates/app/templates/layout/nav/desktop/menu-items.html b/crates/app/templates/layout/nav/desktop/menu-items.html index 6fb9e25..51a8e6b 100644 --- a/crates/app/templates/layout/nav/desktop/menu-items.html +++ b/crates/app/templates/layout/nav/desktop/menu-items.html @@ -5,5 +5,5 @@ hx-trigger="load" hx-swap="outerHTML" > - Chargement ... + {% include "skeletons/menu-items.html" %}
diff --git a/crates/app/templates/layout/nav/nav-menu-items.html b/crates/app/templates/layout/nav/nav-menu-items.html index 92bb706..9320312 100644 --- a/crates/app/templates/layout/nav/nav-menu-items.html +++ b/crates/app/templates/layout/nav/nav-menu-items.html @@ -1,6 +1,10 @@ {% for item in items %} diff --git a/crates/app/templates/pages/cps.html b/crates/app/templates/pages/cps.html new file mode 100644 index 0000000..3df33d7 --- /dev/null +++ b/crates/app/templates/pages/cps.html @@ -0,0 +1,52 @@ +

+ CPS +

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/crates/app/templates/pages/home.html b/crates/app/templates/pages/home.html new file mode 100644 index 0000000..c7cf418 --- /dev/null +++ b/crates/app/templates/pages/home.html @@ -0,0 +1,52 @@ +

+ Accueil +

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/crates/app/templates/skeletons/card.html b/crates/app/templates/skeletons/card.html new file mode 100644 index 0000000..79178da --- /dev/null +++ b/crates/app/templates/skeletons/card.html @@ -0,0 +1,22 @@ +
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+ Loading... +
diff --git a/crates/app/templates/skeletons/menu-items.html b/crates/app/templates/skeletons/menu-items.html new file mode 100644 index 0000000..b4fc630 --- /dev/null +++ b/crates/app/templates/skeletons/menu-items.html @@ -0,0 +1,4 @@ +
+
+
+
\ No newline at end of file diff --git a/crates/app/templates/skeletons/page-title.html b/crates/app/templates/skeletons/page-title.html new file mode 100644 index 0000000..0ced82c --- /dev/null +++ b/crates/app/templates/skeletons/page-title.html @@ -0,0 +1 @@ +