Only show logo of buttons when screen size is too small

3 files changed, 18 insertions, 6 deletions

diff --git a/server/src/routes/ui/layout.rs b/server/src/routes/ui/layout.rs
index 32d67da..c98c8ec 100644
--- a/server/src/routes/ui/layout.rs
+++ b/server/src/routes/ui/layout.rs
@@ -47,13 +47,13 @@ markup::define! {
                         @if let Some(session) = session {
                             span { "Logged in as " } span.username { @session.user.display_name } " "
                             @if session.user.admin {
-                                a.admin[href=uri!(r_admin_dashboard())] { "Administration" } " "
+                                a.admin.hybrid_button[href=uri!(r_admin_dashboard())] { p {"Administration"} } " "
                             }
-                            a.settings[href=uri!(r_account_settings())] { "Settings" } " "
-                            a.logout[href=uri!(r_account_logout())] { "Log out" }
+                            a.settings.hybrid_button[href=uri!(r_account_settings())] { p {"Settings"} } " "
+                            a.logout.hybrid_button[href=uri!(r_account_logout())] { p {"Log out"} }
                         } else {
-                            a.register[href=uri!(r_account_register())] { "Register" } " "
-                            a.login[href=uri!(r_account_login())] { "Log in" }
+                            a.register.hybrid_button[href=uri!(r_account_register())] { p {"Register"} } " "
+                            a.login.hybrid_button[href=uri!(r_account_login())] { p {"Log in"} }
                         }
                     }
                 }
diff --git a/web/script/backbutton.ts b/web/script/backbutton.ts
index c1da03a..4bd73c0 100644
--- a/web/script/backbutton.ts
+++ b/web/script/backbutton.ts
@@ -7,7 +7,7 @@ import { e } from "./jshelper/mod.ts";
 
 globalThis.addEventListener("DOMContentLoaded", () => {
     document.getElementsByTagName("nav").item(0)?.prepend(
-        e("a", "Back", { class: "back", onclick() { history.back() } })
+        e("a", e("p", "Back"), { class: ["back", "hybrid_button"], onclick() { history.back() } })
     )
 })
 
diff --git a/web/style/navbar.css b/web/style/navbar.css
index 9619532..3ccd838 100644
--- a/web/style/navbar.css
+++ b/web/style/navbar.css
@@ -75,3 +75,15 @@ nav .login::before {
 nav .back::before {
     content: "arrow_back";
 }
+
+.hybrid_button p {
+    display: inline;
+}
+@media (max-width: 1000px) {
+    .hybrid_button p {
+        display: none;
+    }
+    *::before {
+        margin-right: 0px;
+    }
+}
\ No newline at end of file