client/css: improve appearance on small screens

client/build.js

@@ -29,7 +29,9 @@ function writeFile(path, content) {
 }
 
 function getVersion() {
-    return execSync('git describe --always --dirty --long --tags').toString();
+    return execSync('git describe --always --dirty --long --tags')
+        .toString()
+        .trim();
 }
 
 function getConfig() {

client/css/comment-control.styl

@@ -37,12 +37,12 @@
 
     nav
         vertical-align: middle !important
-        margin: 0 0.3em 0.5em 0 !important
         &.buttons
+            margin: 0 0.3em 0.5em 0 !important
             float: left
         &.actions
             float: left
-            margin-top: 0.3em !important
+            margin: 0.3em 0 0.5em 0 !important
 
 
 .comment
@@ -64,17 +64,18 @@
             display: inline-block
 
     .body
-        width: 100%
-
+        flex-grow: 1
         header
+            white-space: nowrap
             line-height: 16pt
             vertical-align: middle
             margin-bottom: 0.5em
             background: $top-navigation-color
             padding: 0.2em 0.5em
 
+            .nickname, .date, .score-container, .edit
+                margin-right: 2em
             .date, .score-container, .edit, .delete
-                margin-left: 2em
                 font-size: 95%
             .edit, .delete, .score-container a, .nickname a
                 &:not(.inactive)

client/css/comment-list-view.styl

@@ -6,19 +6,31 @@
         margin: 1em 0
         padding: 0
 
-        &>li
-            display: flex
-            margin-bottom: 2em
+        @media (max-width: 700px)
+            &>li
+                margin-bottom: 5em
+                padding: 1vw
+            .post-thumbnail
+                margin-bottom: 1em
+                .thumbnail
+                    width: 50vw
+                    height: 33vw
 
+        @media (min-width: 700px)
+            &>li
+                display: flex
+                margin-bottom: 2em
             .post-thumbnail
                 float: left
-                vertical-align: top
-                margin-right: 1em
                 .thumbnail
                     width: 12em
                     height: 8em
-                a
-                    display: inline-block
 
-            .comments-container
-                width: 100%
+        .post-thumbnail
+            vertical-align: top
+            margin-right: 1em
+            a
+                display: inline-block
+
+        .comments-container
+            width: 100%

client/css/core-general.styl

@@ -147,8 +147,8 @@ a .access-key
 
 .messages
     margin: 0 auto
-    width: 30em
-    max-width: 100%
+    width: 100%
+    max-width: 30em
     .message
         margin: 0 0 1em 0
         display: inline-block

client/css/home-view.styl

@@ -1,5 +1,6 @@
 #home
     text-align: center !important
+    max-width: 100%
 
     header
         margin-bottom: 1em
@@ -21,6 +22,9 @@
             width: auto
         .sep
             margin: 0 0.75em
+        @media (max-width: 500px)
+            .sep, a
+                display: none
 
     .post-container
         margin-bottom: 2em
@@ -35,11 +39,22 @@
     aside
         margin-bottom: 0.3em
         font-size: 90%
+        white-space: nowrap
 
     footer
-        line-height: 100%
+        line-height: 150%
         font-size: 80%
-        .sep
-            margin: 0 0.25em
+        ul
+            padding: 0
+            text-align: center
+            li
+                display: inline
+                white-space: nowrap
+            .sep
+                word-spacing: 1.1em
+                background-repeat: no-repeat
+                background-position: 50% 50%
+                background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><circle cx='6' cy='6' r='2' fill='%23000000'/></svg>")
+
     .thumbnail
         margin-right: 0.4em

client/css/post-list-view.styl

@@ -99,19 +99,25 @@
                     outline: 3px solid $main-color
 
 .post-list-header
+    white-space: nowrap
+    text-align: left
+
     label
         display: none
-    text-align: left
     form
         width: auto
+        margin-bottom: 0.75em
         *
             vertical-align: top
+    input
+        margin-bottom: 0.25em
+        margin-right: 0.25em
     input[name=search-text]
         width: 25em
-        max-width: 90vw
     input[name=masstag]
-        width: 15em
-        margin-left: 1em
+        width: 12em
+    .masstag-hint
+        margin-right: 1em
     .append
         font-size: 0.95em
         color: $inactive-link-color
@@ -123,6 +129,7 @@
                 display: none
 
     .safety
+        margin-right: 0.25em
         &.safety-safe
             background-color: $safety-safe
             border-color: @background-color

client/css/post-view.styl

@@ -4,10 +4,11 @@
     width: 100%
     display: flex !important
     flex-direction: row
+
     >.sidebar
         margin-right: 1em
-        max-width: 20em
         min-width: 20em
+        max-width: 20em
         line-height: 160%
 
         a:active
@@ -42,6 +43,16 @@
         .post-content
             margin: 0
 
+@media (max-width: 800px)
+    .post-view
+        flex-wrap: wrap
+        >.sidebar
+            order: 2
+            min-width: 100%
+            max-width: 0
+        >.content
+            order: 1
+
 
 .post-view .readonly-sidebar
     .details

client/css/user-registration.styl

@@ -1,13 +1,16 @@
 @import colors
 
 #user-registration
+    padding-bottom: calc(2vw - 1em) !important
     form
         float: left
+        margin-right: 3em
+        margin-bottom: 1em
     .info
         float: left
-        margin-left: 3em
         border-radius: 0.2em
         width: 20em
+        margin-bottom: 1em
         ul
             line-height: 1.8em
             list-style-type: none
@@ -22,3 +25,5 @@
             color: $main-color
         p:first-child
             margin: 0 0 0.5em 0
+        p:last-child
+            margin-bottom: 0

client/html/comment.tpl

@@ -12,37 +12,45 @@
     </div>
 
     <div class='body'>
-        <header><!--
-            --><span class='nickname'><!--
-                --><% if (ctx.comment.user && ctx.comment.user.name && ctx.canViewUsers) { %><!--
-                    --><a href='/user/<%- encodeURIComponent(ctx.comment.user.name) %>'><!--
-                --><% } %><!--
+        <header><%
+            %><span class='nickname'><%
+                %><% if (ctx.comment.user && ctx.comment.user.name && ctx.canViewUsers) { %><%
+                    %><a href='/user/<%- encodeURIComponent(ctx.comment.user.name) %>'><%
+                %><% } %><%
 
-                --><%- ctx.comment.user ? ctx.comment.user.name : 'Deleted user' %><!--
+                %><%- ctx.comment.user ? ctx.comment.user.name : 'Deleted user' %><%
 
-                --><% if (ctx.comment.user && ctx.comment.user.name && ctx.canViewUsers) { %><!--
-                    --></a><!--
-                --><% } %><!--
-            --></span><!--
+                %><% if (ctx.comment.user && ctx.comment.user.name && ctx.canViewUsers) { %><%
+                    %></a><%
+                %><% } %><%
+            %></span><%
 
-            --><span class='date'><!--
-                --><%= ctx.makeRelativeTime(ctx.comment.creationTime) %><!--
-            --></span><!--
+            %><wbr><%
 
-            --><span class='score-container'></span><!--
+            %><span class='date'><%
+                %><%= ctx.makeRelativeTime(ctx.comment.creationTime) %><%
+            %></span><%
 
-            --><% if (ctx.canEditComment) { %><!--
-                --><a href class='edit'><!--
-                    --><i class='fa fa-pencil'></i> edit<!--
-                --></a><!--
-            --><% } %><!--
+            %><wbr><%
 
-            --><% if (ctx.canDeleteComment) { %><!--
-                --><a href class='delete'><!--
-                    --><i class='fa fa-remove'></i> delete<!--
-                --></a><!--
-            --><% } %><!--
-        --></header>
+            %><span class='score-container'></span><%
+
+            %><wbr><%
+
+            %><% if (ctx.canEditComment) { %><%
+                %><a href class='edit'><%
+                    %><i class='fa fa-pencil'></i> edit<%
+                %></a><%
+            %><% } %><%
+
+            %><wbr><%
+
+            %><% if (ctx.canDeleteComment) { %><%
+                %><a href class='delete'><%
+                    %><i class='fa fa-remove'></i> delete<%
+                %></a><%
+            %><% } %><%
+        %></header>
 
         <div class='comment-form-container'></div>
     </div>

client/html/home_featured_post.tpl

@@ -1,10 +1,7 @@
 <div class='post-container'></div>
 <% if (ctx.featuredPost) { %>
     <aside>
-        Featured post: <%= ctx.makePostLink(ctx.featuredPost.id, true) %>,
-        posted
-        <%= ctx.makeRelativeTime(ctx.featuredPost.creationTime) %>
-        by
-        <%= ctx.makeUserLink(ctx.featuredPost.user) %>
+        Featured&nbsp;post:&nbsp;<%= ctx.makePostLink(ctx.featuredPost.id, true) %>,<wbr>
+        posted&nbsp;<%= ctx.makeRelativeTime(ctx.featuredPost.creationTime) %>&nbsp;by&nbsp;<%= ctx.makeUserLink(ctx.featuredPost.user) %>
     </aside>
 <% } %>

client/html/home_footer.tpl

@@ -1,10 +1,7 @@
-<%- ctx.postCount %> posts
-<span class=sep>&bull;</span>
-<%= ctx.makeFileSize(ctx.diskUsage) %>
-<span class=sep>&bull;</span>
-Build <a class='version' href='https://github.com/rr-/szurubooru/commits/master'><%- ctx.version %></a>
-from <%= ctx.makeRelativeTime(ctx.buildDate) %>
-<% if (ctx.canListSnapshots) { %>
-    <span class=sep>&bull;</span>
-    <a href='/history'>History</a>
-<% } %>
+<ul>
+    <li><%- ctx.postCount %> posts</li><span class='sep'>
+    </span><li><%= ctx.makeFileSize(ctx.diskUsage) %></li><span class='sep'>
+    </span><li>Build <a class='version' href='https://github.com/rr-/szurubooru/commits/master'><%- ctx.version %></a> from <%= ctx.makeRelativeTime(ctx.buildDate) %></li><span class='sep'>
+    </span><% if (ctx.canListSnapshots) { %><li><a href='/history'>History</a></li><span class='sep'>
+    </span><% } %>
+</ul>

client/html/posts_header.tpl

@@ -1,22 +1,27 @@
-<div class='post-list-header'>
-    <form class='horizontal search'>
-        <%= ctx.makeTextInput({text: 'Search query', id: 'search-text', name: 'search-text', value: ctx.parameters.query}) %>
-        <input class='mousetrap' type='submit' value='Search'/>
-        <input data-safety=safe type='button' class='mousetrap safety safety-safe <%- ctx.settings.listPosts.safe ? '' : 'disabled' %>'/>
-        <input data-safety=sketchy type='button' class='mousetrap safety safety-sketchy <%- ctx.settings.listPosts.sketchy ? '' : 'disabled' %>'/>
-        <input data-safety=unsafe type='button' class='mousetrap safety safety-unsafe <%- ctx.settings.listPosts.unsafe ? '' : 'disabled' %>'/>
-        <a class='mousetrap button append' href='/help/search/posts'>Syntax help</a>
-    </form>
-    <% if (ctx.canMassTag) { %>
-        <form class='masstag horizontal'>
-            <% if (ctx.parameters.tag) { %>
-                <span class='append'>Tagging with:</span>
-            <% } else { %>
-                <a href class='mousetrap button append open-masstag'>Mass tag</a>
-            <% } %>
-            <%= ctx.makeTextInput({name: 'masstag', value: ctx.parameters.tag}) %>
-            <input class='mousetrap start-tagging' type='submit' value='Start tagging'/>
-            <a href class='mousetrap button append stop-tagging'>Stop tagging</a>
-        </form>
-    <% } %>
-</div>
+<div class='post-list-header'><%
+    %><form class='horizontal'><%
+        %><%= ctx.makeTextInput({text: 'Search query', id: 'search-text', name: 'search-text', value: ctx.parameters.query}) %><%
+        %><wbr/><%
+        %><input class='mousetrap' type='submit' value='Search'/><%
+        %><wbr/><%
+        %><input data-safety=safe type='button' class='mousetrap safety safety-safe <%- ctx.settings.listPosts.safe ? '' : 'disabled' %>'/><%
+        %><input data-safety=sketchy type='button' class='mousetrap safety safety-sketchy <%- ctx.settings.listPosts.sketchy ? '' : 'disabled' %>'/><%
+        %><input data-safety=unsafe type='button' class='mousetrap safety safety-unsafe <%- ctx.settings.listPosts.unsafe ? '' : 'disabled' %>'/><%
+        %><wbr/><%
+        %><a class='mousetrap button append' href='/help/search/posts'>Syntax help</a><%
+        %><% if (ctx.canMassTag) { %><%
+            %><wbr/><%
+            %><span class='masstag'><%
+                %><% if (ctx.parameters.tag) { %><%
+                    %><span class='append masstag-hint'>Tagging with:</span><%
+                %><% } else { %><%
+                    %><a href class='mousetrap button append open-masstag'>Mass tag</a><%
+                %><% } %><%
+                %><wbr/><%
+                %><%= ctx.makeTextInput({name: 'masstag', value: ctx.parameters.tag}) %><%
+                %><input class='mousetrap start-tagging' type='submit' value='Start tagging'/><%
+                %><a href class='mousetrap button append stop-tagging'>Stop tagging</a><%
+            %></span><%
+        %><% } %><%
+    %></form><%
+%></div>

client/js/views/posts_header_view.js

@@ -26,7 +26,7 @@ class PostsHeaderView {
         }
 
         keyboard.bind('q', () => {
-            this._searchFormNode.querySelector('input').focus();
+            this._formNode.querySelector('input:first-of-type').focus();
         });
 
         keyboard.bind('p', () => {
@@ -41,52 +41,49 @@ class PostsHeaderView {
             safetyButtonNode.addEventListener(
                 'click', e => this._evtSafetyButtonClick(e));
         }
-        this._searchFormNode.addEventListener(
-            'submit', e => this._evtSearchFormSubmit(e));
+        this._formNode.addEventListener(
+            'submit', e => this._evtFormSubmit(e));
 
-        if (this._massTagFormNode) {
+        if (this._massTagInputNode) {
             if (this._openMassTagLinkNode) {
                 this._openMassTagLinkNode.addEventListener(
                     'click', e => this._evtMassTagClick(e));
             }
             this._stopMassTagLinkNode.addEventListener(
                 'click', e => this._evtStopTaggingClick(e));
-            this._massTagFormNode.addEventListener(
-                'submit', e => this._evtMassTagFormSubmit(e));
+            // this._massTagFormNode.addEventListener(
+            //     'submit', e => this._evtMassTagFormSubmit(e));
             this._toggleMassTagVisibility(!!ctx.parameters.tag);
         }
     }
 
     _toggleMassTagVisibility(state) {
-        this._massTagFormNode.classList.toggle('active', state);
+        this._formNode.querySelector('.masstag')
+            .classList.toggle('active', state);
     }
 
-    get _searchFormNode() {
-        return this._hostNode.querySelector('form.search');
-    }
-
-    get _massTagFormNode() {
-        return this._hostNode.querySelector('form.masstag');
+    get _formNode() {
+        return this._hostNode.querySelector('form');
     }
 
     get _safetyButtonNodes() {
-        return this._hostNode.querySelectorAll('form.search .safety');
+        return this._hostNode.querySelectorAll('form .safety');
     }
 
     get _queryInputNode() {
-        return this._hostNode.querySelector('form.search [name=search-text]');
+        return this._hostNode.querySelector('form [name=search-text]');
     }
 
     get _massTagInputNode() {
-        return this._hostNode.querySelector('form.masstag [type=text]');
+        return this._hostNode.querySelector('form [name=masstag]');
     }
 
     get _openMassTagLinkNode() {
-        return this._hostNode.querySelector('form.masstag .open-masstag');
+        return this._hostNode.querySelector('form .open-masstag');
     }
 
     get _stopMassTagLinkNode() {
-        return this._hostNode.querySelector('form.masstag .stop-tagging');
+        return this._hostNode.querySelector('form .stop-tagging');
     }
 
     _evtMassTagClick(e) {
@@ -113,23 +110,17 @@ class PostsHeaderView {
         router.show(router.url);
     }
 
-    _evtSearchFormSubmit(e) {
+    _evtFormSubmit(e) {
         e.preventDefault();
-        const text = this._queryInputNode.value;
-        this._queryInputNode.blur();
-        router.show('/posts/' + misc.formatUrlParameters({query: text}));
-    }
-
-    _evtMassTagFormSubmit(e) {
-        e.preventDefault();
-        const text = this._queryInputNode.value;
-        const tag = this._massTagInputNode.value;
-        this._massTagInputNode.blur();
-        router.show('/posts/' + misc.formatUrlParameters({
-            query: text,
-            tag: tag,
+        let params = {
+            query: this._queryInputNode.value,
             page: this._ctx.parameters.page,
-        }));
+        };
+        if (this._massTagInputNode) {
+            params.tag = this._massTagInputNode.value;
+            this._massTagInputNode.blur();
+        }
+        router.show('/posts/' + misc.formatUrlParameters(params));
     }
 }