From 6b0c3cfc7f99d658c1c37e9915f7f089feb5024e Mon Sep 17 00:00:00 2001
From: Eva
Date: Wed, 17 May 2023 08:30:32 +0200
Subject: client/html: allow mobile browsers to zoom in

---
 client/html/index.htm | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/html/index.htm b/client/html/index.htm
index 0072890..2f0f4e4 100644
--- a/client/html/index.htm
+++ b/client/html/index.htm
@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta charset='utf-8'/>
-    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'/>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <meta name='theme-color' content='#24aadd'/>
     <meta name='apple-mobile-web-app-capable' content='yes'/>
     <meta name='apple-mobile-web-app-status-bar-style' content='black'/>
-- 
cgit v1.3


From 4b6b231fc809b173f7f619563589e4eed77d35c2 Mon Sep 17 00:00:00 2001
From: Eva
Date: Sat, 20 May 2023 18:00:01 +0200
Subject: client/posts: reorder elements in mobile layout Navigation is always
 right below the image, and comments are always at the very bottom, to
 minimize scrolling for common actions.

---
 client/css/post-main-view.styl             | 49 ++++++++++++++++--------------
 client/html/post_main.tpl                  | 28 ++++++++---------
 client/js/controls/post_content_control.js | 24 +++++++++++++++
 3 files changed, 65 insertions(+), 36 deletions(-)

diff --git a/client/css/post-main-view.styl b/client/css/post-main-view.styl
index e643dfb..1183cce 100644
--- a/client/css/post-main-view.styl
+++ b/client/css/post-main-view.styl
@@ -15,38 +15,42 @@
             border: 0
             outline: 0
 
-        nav.buttons
-            margin-top: 0
-            display: flex
-            flex-wrap: wrap
-            article
-                flex: 1 0 33%
-                a
-                    display: inline-block
-                    width: 100%
-                    padding: 0.3em 0
-                    text-align: center
-                    vertical-align: middle
-                    transition: background 0.2s linear, box-shadow 0.2s linear
-                    &:not(.inactive):hover
-                        background: lighten($main-color, 90%)
-                i
-                    font-size: 140%
+    >.sidebar>nav.buttons, >.content nav.buttons
+        margin-top: 0
+        display: flex
+        flex-wrap: wrap
+        article
+            flex: 1 0 33%
+            a
+                display: inline-block
+                width: 100%
+                padding: 0.3em 0
                 text-align: center
-            @media (max-width: 800px)
-                margin-top: 2em
+                vertical-align: middle
+                transition: background 0.2s linear, box-shadow 0.2s linear
+                &:not(.inactive):hover
+                    background: lighten($main-color, 90%)
+            i
+                font-size: 140%
+            text-align: center
+        @media (max-width: 800px)
+            margin-top: 0.6em
+            margin-bottom: 0.6em
 
     >.content
         width: 100%
 
     .post-container
-        margin-bottom: 2em
+        margin-bottom: 0.6em
 
         .post-content
             margin: 0
 
+    .after-mobile-controls
+        width: 100%
+
 .darktheme .post-view
-    >.sidebar
+    >.sidebar, >.content
         nav.buttons
             article
                 a:not(.inactive):hover
@@ -56,6 +60,8 @@
 @media (max-width: 800px)
     .post-view
         flex-wrap: wrap
+        >.after-mobile-controls
+            order: 3
         >.sidebar
             order: 2
             min-width: 100%
@@ -113,7 +119,6 @@
         h1
             margin-bottom: 0.5em
         .thumbnail
-            background-position: 50% 30%
             width: 4em
             height: 3em
         li
diff --git a/client/html/post_main.tpl b/client/html/post_main.tpl
index 54c5733..84e48b1 100644
--- a/client/html/post_main.tpl
+++ b/client/html/post_main.tpl
@@ -29,6 +29,7 @@
                     <span class='vim-nav-hint'>Next post &gt;</span>
                 </a>
             </article>
+            <% if (ctx.canEditPosts || ctx.canDeletePosts || ctx.canFeaturePosts) { %>
             <article class='edit-post'>
                 <% if (ctx.editMode) { %>
                     <a href='<%= ctx.getPostUrl(ctx.post.id, ctx.parameters) %>'>
@@ -36,16 +37,13 @@
                         <span class='vim-nav-hint'>Back to view mode</span>
                     </a>
                 <% } else { %>
-                    <% if (ctx.canEditPosts || ctx.canDeletePosts || ctx.canFeaturePosts) { %>
-                        <a href='<%= ctx.getPostEditUrl(ctx.post.id, ctx.parameters) %>'>
-                    <% } else { %>
-                        <a class='inactive'>
-                    <% } %>
-                        <i class='fa fa-pencil'></i>
-                        <span class='vim-nav-hint'>Edit post</span>
+                    <a href='<%= ctx.getPostEditUrl(ctx.post.id, ctx.parameters) %>'>
+                    <i class='fa fa-pencil'></i>
+                    <span class='vim-nav-hint'>Edit post</span>
                     </a>
                 <% } %>
             </article>
+            <% } %>
         </nav>
 
         <div class='sidebar-container'></div>
@@ -54,13 +52,15 @@
     <div class='content'>
         <div class='post-container'></div>
 
-        <% if (ctx.canListComments) { %>
-            <div class='comments-container'></div>
-        <% } %>
+        <div class='after-mobile-controls'>
+            <% if (ctx.canCreateComments) { %>
+                <h2>Add comment</h2>
+                <div class='comment-form-container'></div>
+            <% } %>
 
-        <% if (ctx.canCreateComments) { %>
-            <h2>Add comment</h2>
-            <div class='comment-form-container'></div>
-        <% } %>
+            <% if (ctx.canListComments) { %>
+                <div class='comments-container'></div>
+            <% } %>
+        </div>
     </div>
 </div>
diff --git a/client/js/controls/post_content_control.js b/client/js/controls/post_content_control.js
index 55daca7..8cbd5d8 100644
--- a/client/js/controls/post_content_control.js
+++ b/client/js/controls/post_content_control.js
@@ -103,6 +103,30 @@ class PostContentControl {
     }
 
     _refreshSize() {
+        if (window.innerWidth <= 800) {
+            const buttons = document.querySelector(".sidebar > .buttons");
+            if (buttons) {
+                const content = document.querySelector(".content");
+                content.insertBefore(buttons, content.querySelector(".post-container + *"));
+
+                const afterControls = document.querySelector(".content > .after-mobile-controls");
+                if (afterControls) {
+                    afterControls.parentElement.parentElement.appendChild(afterControls);
+                }
+            }
+        } else {
+            const buttons = document.querySelector(".content > .buttons");
+            if (buttons) {
+                const sidebar = document.querySelector(".sidebar");
+                sidebar.insertBefore(buttons, sidebar.firstElementChild);
+            }
+
+            const afterControls = document.querySelector(".content + .after-mobile-controls");
+            if (afterControls) {
+                document.querySelector(".content").appendChild(afterControls);
+            }
+        }
+
         this._currentFitFunction();
     }
 
-- 
cgit v1.3


From c1c695f082f53819f092a535aa08125e3f3f48bb Mon Sep 17 00:00:00 2001
From: Eva
Date: Sun, 21 May 2023 20:00:37 +0200
Subject: client/css: stack bulk tagging toggles horizontally on mobile

---
 client/css/post-list-view.styl | 3 +++
 client/html/posts_header.tpl   | 1 -
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/css/post-list-view.styl b/client/css/post-list-view.styl
index 7f6aa80..e4f75d5 100644
--- a/client/css/post-list-view.styl
+++ b/client/css/post-list-view.styl
@@ -187,6 +187,9 @@
             vertical-align: top
         @media (max-width: 1000px)
             display: block
+            &.bulk-edit-tags:not(.opened), &.bulk-edit-safety:not(.opened)
+                float: left
+                margin-right: 1em
     input
         margin-bottom: 0.25em
         margin-right: 0.25em
diff --git a/client/html/posts_header.tpl b/client/html/posts_header.tpl
index d1422d2..77d16ed 100644
--- a/client/html/posts_header.tpl
+++ b/client/html/posts_header.tpl
@@ -16,7 +16,6 @@
         %><form class='horizontal bulk-edit bulk-edit-tags'><%
             %><span class='append hint'>Tagging with:</span><%
             %><a href class='mousetrap button append open'>Mass tag</a><%
-            %><wbr/><%
             %><%= ctx.makeTextInput({name: 'tag', value: ctx.parameters.tag}) %><%
             %><input class='mousetrap start' type='submit' value='Start tagging'/><%
             %><a href class='mousetrap button append close'>Stop tagging</a><%
-- 
cgit v1.3