From 6b0c3cfc7f99d658c1c37e9915f7f089feb5024e Mon Sep 17 00:00:00 2001 From: Eva Date: Wed, 17 May 2023 08:30:32 +0200 Subject: [PATCH 1/3] 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 007289030..2f0f4e400 100644 --- a/client/html/index.htm +++ b/client/html/index.htm @@ -2,7 +2,7 @@ - + From 4b6b231fc809b173f7f619563589e4eed77d35c2 Mon Sep 17 00:00:00 2001 From: Eva Date: Sat, 20 May 2023 18:00:01 +0200 Subject: [PATCH 2/3] 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 e643dfbde..1183cce27 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 54c573330..84e48b1c8 100644 --- a/client/html/post_main.tpl +++ b/client/html/post_main.tpl @@ -29,6 +29,7 @@ Next post > + <% if (ctx.canEditPosts || ctx.canDeletePosts || ctx.canFeaturePosts) { %> + <% } %>
@@ -54,13 +52,15 @@
- <% if (ctx.canListComments) { %> -
- <% } %> +
+ <% if (ctx.canCreateComments) { %> +

Add comment

+
+ <% } %> - <% if (ctx.canCreateComments) { %> -

Add comment

-
- <% } %> + <% if (ctx.canListComments) { %> +
+ <% } %> +
diff --git a/client/js/controls/post_content_control.js b/client/js/controls/post_content_control.js index 55daca763..8cbd5d89e 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(); } From c1c695f082f53819f092a535aa08125e3f3f48bb Mon Sep 17 00:00:00 2001 From: Eva Date: Sun, 21 May 2023 20:00:37 +0200 Subject: [PATCH 3/3] 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 7f6aa80c8..e4f75d5d6 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 d1422d2c6..77d16ed74 100644 --- a/client/html/posts_header.tpl +++ b/client/html/posts_header.tpl @@ -16,7 +16,6 @@ %>
<% %>Tagging with:<% %>Mass tag<% - %><% %><%= ctx.makeTextInput({name: 'tag', value: ctx.parameters.tag}) %><% %><% %>Stop tagging<%