404: make page responsive and make partial system for it

src/templates/notfound.rs

@@ -1,10 +1,34 @@
+use std::sync::Arc;
+
 use askama::Template;
-use axum::response::{Html, IntoResponse};
+use axum::{
+    extract::State,
+    http::HeaderMap,
+    response::{Html, IntoResponse},
+};
+
+use crate::domain::AppState;
 
 #[derive(Template)]
 #[template(path = "notfound.html")]
-struct NotfoundTemplate;
-
-pub async fn notfound() -> impl IntoResponse {
-    Html(NotfoundTemplate.render().unwrap())
+struct NotfoundTemplate {
+    tracks: Vec<crate::domain::Track>,
+}
+
+#[derive(Template)]
+#[template(path = "partials/notfound.html")]
+struct NotfoundPartialTemplate;
+
+pub async fn notfound(headers: HeaderMap, state: State<Arc<AppState>>) -> impl IntoResponse {
+    if headers.contains_key("hx-request") {
+        Html(NotfoundPartialTemplate.render().unwrap())
+    } else {
+        Html(
+            NotfoundTemplate {
+                tracks: state.mp_tracks.clone(),
+            }
+            .render()
+            .unwrap(),
+        )
+    }
 }

static/style.css

@@ -175,8 +175,14 @@ katcenkat {
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
+  min-height: 100svh;
+  padding: 1rem;
+  gap: 1rem;
 
   img {
+    max-width: 100svw;
+    height: auto;
+    object-fit: contain;
     transition: opacity 5s ease, transform 5s ease-out;
     opacity: 1;
     transform: translateY(0px);

templates/notfound.html

@@ -2,8 +2,5 @@
 
 
 {% block content %}
-<katcenkat>
-  <img src="/static/assets/images/notfound.webp" />
-  <img src="/static/assets/images/leuf.webp" />
-</katcenkat>
+{% include "partials/notfound.html" %}
 {% endblock %}

templates/partials/notfound.html

@@ -0,0 +1,4 @@
+<katcenkat>
+  <img src="/static/assets/images/notfound.webp" />
+  <img src="/static/assets/images/leuf.webp" />
+</katcenkat>