snuffster/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #641 from po5/mobile

Browse source 
Mobile improvements
This commit is contained in:
Neo 2024-04-26 22:56:58 +02:00 • committed by GitHub
commit 6edb25d87b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 69 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
client/css/post-list-view.styl
View file

@ -187,6 +187,9 @@
vertical-align: top vertical-align: top
@media (max-width: 1000px) @media (max-width: 1000px)
display: block display: block
&.bulk-edit-tags:not(.opened), &.bulk-edit-safety:not(.opened)
float: left
margin-right: 1em
input input
margin-bottom: 0.25em margin-bottom: 0.25em
margin-right: 0.25em margin-right: 0.25em

49
client/css/post-main-view.styl
View file

@ -15,38 +15,42 @@
border: 0 border: 0
outline: 0 outline: 0
nav.buttons >.sidebar>nav.buttons, >.content nav.buttons
margin-top: 0 margin-top: 0
display: flex display: flex
flex-wrap: wrap flex-wrap: wrap
article article
flex: 1 0 33% flex: 1 0 33%
a a
display: inline-block display: inline-block
width: 100% width: 100%
padding: 0.3em 0 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%
text-align: center text-align: center
@media (max-width: 800px) vertical-align: middle
margin-top: 2em 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 >.content
width: 100% width: 100%
.post-container .post-container
margin-bottom: 2em margin-bottom: 0.6em
.post-content .post-content
margin: 0 margin: 0
.after-mobile-controls
width: 100%
.darktheme .post-view .darktheme .post-view
>.sidebar >.sidebar, >.content
nav.buttons nav.buttons
article article
a:not(.inactive):hover a:not(.inactive):hover
@ -56,6 +60,8 @@
@media (max-width: 800px) @media (max-width: 800px)
.post-view .post-view
flex-wrap: wrap flex-wrap: wrap
>.after-mobile-controls
order: 3
>.sidebar >.sidebar
order: 2 order: 2
min-width: 100% min-width: 100%
@ -113,7 +119,6 @@
h1 h1
margin-bottom: 0.5em margin-bottom: 0.5em
.thumbnail .thumbnail
background-position: 50% 30%
width: 4em width: 4em
height: 3em height: 3em
li li

2
client/html/index.htm
View file

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset='utf-8'/> <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='theme-color' content='#24aadd'/>
<meta name='apple-mobile-web-app-capable' content='yes'/> <meta name='apple-mobile-web-app-capable' content='yes'/>
<meta name='apple-mobile-web-app-status-bar-style' content='black'/> <meta name='apple-mobile-web-app-status-bar-style' content='black'/>

28
client/html/post_main.tpl
View file

@ -29,6 +29,7 @@
<span class='vim-nav-hint'>Next post &gt;</span> <span class='vim-nav-hint'>Next post &gt;</span>
</a> </a>
</article> </article>
<% if (ctx.canEditPosts || ctx.canDeletePosts || ctx.canFeaturePosts) { %>
<article class='edit-post'> <article class='edit-post'>
<% if (ctx.editMode) { %> <% if (ctx.editMode) { %>
<a href='<%= ctx.getPostUrl(ctx.post.id, ctx.parameters) %>'> <a href='<%= ctx.getPostUrl(ctx.post.id, ctx.parameters) %>'>
@ -36,16 +37,13 @@
<span class='vim-nav-hint'>Back to view mode</span> <span class='vim-nav-hint'>Back to view mode</span>
</a> </a>
<% } else { %> <% } else { %>
<% if (ctx.canEditPosts || ctx.canDeletePosts || ctx.canFeaturePosts) { %> <a href='<%= ctx.getPostEditUrl(ctx.post.id, ctx.parameters) %>'>
<a href='<%= ctx.getPostEditUrl(ctx.post.id, ctx.parameters) %>'> <i class='fa fa-pencil'></i>
<% } else { %> <span class='vim-nav-hint'>Edit post</span>
<a class='inactive'>
<% } %>
<i class='fa fa-pencil'></i>
<span class='vim-nav-hint'>Edit post</span>
</a> </a>
<% } %> <% } %>
</article> </article>
<% } %>
</nav> </nav>
<div class='sidebar-container'></div> <div class='sidebar-container'></div>
@ -54,13 +52,15 @@
<div class='content'> <div class='content'>
<div class='post-container'></div> <div class='post-container'></div>
<% if (ctx.canListComments) { %> <div class='after-mobile-controls'>
<div class='comments-container'></div> <% if (ctx.canCreateComments) { %>
<% } %> <h2>Add comment</h2>
<div class='comment-form-container'></div>
<% } %>
<% if (ctx.canCreateComments) { %> <% if (ctx.canListComments) { %>
<h2>Add comment</h2> <div class='comments-container'></div>
<div class='comment-form-container'></div> <% } %>
<% } %> </div>
</div> </div>
</div> </div>

1
client/html/posts_header.tpl
View file

@ -16,7 +16,6 @@
%><form class='horizontal bulk-edit bulk-edit-tags'><% %><form class='horizontal bulk-edit bulk-edit-tags'><%
%><span class='append hint'>Tagging with:</span><% %><span class='append hint'>Tagging with:</span><%
%><a href class='mousetrap button append open'>Mass tag</a><% %><a href class='mousetrap button append open'>Mass tag</a><%
%><wbr/><%
%><%= ctx.makeTextInput({name: 'tag', value: ctx.parameters.tag}) %><% %><%= ctx.makeTextInput({name: 'tag', value: ctx.parameters.tag}) %><%
%><input class='mousetrap start' type='submit' value='Start tagging'/><% %><input class='mousetrap start' type='submit' value='Start tagging'/><%
%><a href class='mousetrap button append close'>Stop tagging</a><% %><a href class='mousetrap button append close'>Stop tagging</a><%

24
client/js/controls/post_content_control.js
View file

@ -103,6 +103,30 @@ class PostContentControl {
} }
_refreshSize() { _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(); this._currentFitFunction();
} }