From b68e481b3fece6cae9de6b459d40d50d4df7eeed Mon Sep 17 00:00:00 2001 From: Bat Date: Sat, 12 May 2018 18:59:38 +0100 Subject: [PATCH] Make the website more mobile-friendly --- src/routes/blogs.rs | 2 +- src/routes/instance.rs | 2 +- src/routes/user.rs | 2 +- static/main.css | 33 +++++++++++++++++++++++++++++++++ templates/base.tera | 2 ++ 5 files changed, 38 insertions(+), 3 deletions(-) diff --git a/src/routes/blogs.rs b/src/routes/blogs.rs index 83b3c33f..b81d2bef 100644 --- a/src/routes/blogs.rs +++ b/src/routes/blogs.rs @@ -26,7 +26,7 @@ fn details(name: String, conn: DbConn, user: Option) -> Template { json!({ "post": p, "author": p.get_authors(&*conn)[0], - "url": p.compute_id(&*conn), + "url": format!("/~/{}/{}/", p.get_blog(&*conn).actor_id, p.slug), "date": p.creation_date.timestamp() }) }).collect::>() diff --git a/src/routes/instance.rs b/src/routes/instance.rs index aaa38e5d..8925fc7c 100644 --- a/src/routes/instance.rs +++ b/src/routes/instance.rs @@ -23,7 +23,7 @@ fn index(conn: DbConn, user: Option) -> Template { json!({ "post": p, "author": p.get_authors(&*conn)[0], - "url": p.compute_id(&*conn), + "url": format!("/~/{}/{}/", p.get_blog(&*conn).actor_id, p.slug), "date": p.creation_date.timestamp() }) }).collect::>() diff --git a/src/routes/user.rs b/src/routes/user.rs index 6907bd76..1b31b314 100644 --- a/src/routes/user.rs +++ b/src/routes/user.rs @@ -32,7 +32,7 @@ fn details(name: String, conn: DbConn, account: Option) -> Template { json!({ "post": p, "author": p.get_authors(&*conn)[0], - "url": p.compute_id(&*conn), + "url": format!("/~/{}/{}/", p.get_blog(&*conn).actor_id, p.slug), "date": p.creation_date.timestamp() }) }).collect::>(), diff --git a/static/main.css b/static/main.css index 9b5f9ee9..68403226 100644 --- a/static/main.css +++ b/static/main.css @@ -21,6 +21,10 @@ header { justify-content: space-between; } +header #menu { + display: none; +} + header nav a { margin: 0px 20px; } @@ -101,3 +105,32 @@ textarea { padding: 5px 10px; margin: 0px 10px; } + +@media screen and (max-width: 500px) { + header { + padding: 20px 0px; + flex-direction: column; + } + + header #menu { + display: flex; + } + + header > nav { + display: none; + text-align: center; + } + + header nav a { + padding: 10px; + } + + header:focus-within > nav { + display: flex; + flex-direction: column; + } + + input { + width: 100%; + } +} diff --git a/templates/base.tera b/templates/base.tera index 766c76bd..768242c1 100644 --- a/templates/base.tera +++ b/templates/base.tera @@ -3,10 +3,12 @@ {% block title %}{% endblock title %} ⋅ Plume +
+