Fix posts header markdown

2 files changed, 69 insertions, 61 deletions

diff --git a/client/css/post-list-view.styl b/client/css/post-list-view.styl
index b49eb5c..2d9f167 100644
--- a/client/css/post-list-view.styl
+++ b/client/css/post-list-view.styl
@@ -185,48 +185,48 @@
         vertical-align: middle
         font-size: 0.95em
         color: $inactive-link-color
-    .bulk-edit
-        &:not(.opened)
-            .close
-                display: none
-        &.opened
-            .open
+    .bulk-edit-block
+        display: contents
+        @media (max-width: 1000px)
+            form
+                &:not(.opened)
+                    display: inline-block
+                &.opened
+                    display: block
+            input[type=submit]
+                margin-right: 1em
+            .append
+                margin-left: 0
+                margin-right: 1em
+        .bulk-edit
+            &:not(.opened)
+                .close
+                    display: none
+            &.opened
+                .open
+                    display: none
+            &.hidden
                 display: none
-        &.hidden
-            display: none
-    .bulk-edit-tags
-        &.opened
-            .hint
+        .bulk-edit-tags
+            &.opened
+                .hint
+                    @media (max-width: 1000px)
+                        display: block
+                        margin-bottom: 0.5em
+            &:not(.opened)
+                [type=text],
+                .start
+                    display: none
+                .hint
+                    display: none
+            input[name=tag]
+                width: 12em
                 @media (max-width: 1000px)
                     display: block
+                    width: 100%
                     margin-bottom: 0.5em
-        &:not(.opened)
-            [type=text],
-            .start
-                display: none
             .hint
-                display: none
-        input[name=tag]
-            width: 12em
-            @media (max-width: 1000px)
-                display: block
-                width: 100%
-                margin-bottom: 0.5em
-        .append
-            &.open,
-            &.hint
-                @media (max-width: 1000px)
-                    margin-left: 0
-        .hint
-            margin-right: 1em
-    .bulk-edit-safety
-        .append
-            @media (max-width: 1000px)
-                margin-left: 0
-    .bulk-add-relations
-        .append
-            @media (max-width: 1000px)
-                margin-left: 0
+                margin-right: 1em
 
     .safety
         margin-right: 0.25em
@@ -245,3 +245,10 @@
             border-color: @background-color
             &.disabled
                 background-color: alpha(@background-color, 0.15)
+
+    .icon-button
+        padding: 0.2em
+        margin-right: 0.25em
+        margin-bottom: 0.25em
+        i
+            vertical-align: middle
diff --git a/client/html/posts_header.tpl b/client/html/posts_header.tpl
index 1c0a263..69bfc98 100644
--- a/client/html/posts_header.tpl
+++ b/client/html/posts_header.tpl
@@ -3,10 +3,9 @@
         %><%= ctx.makeTextInput({text: 'Search query', id: 'search-text', name: 'search-text', value: ctx.parameters.query}) %><%
         %><wbr/><%
         %><input class='mousetrap' type='submit' value='Search'/><%
-        %><wbr/><%
-        %><button id="randomize-button" style="padding:0.2em; margin-right:0.25em; margin-bottom:0.25em;"><%
-            %><i class="fa fa-random" style="vertical-align: middle"><%
-                %></button><%
+        %><button id='randomize-button' class='icon-button'><%
+            %><i class="fa fa-random"><%
+        %></button><%
         %><% if (ctx.enableSafety) { %><%
             %><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' %>'/><%
@@ -15,25 +14,27 @@
         %><wbr/><%
         %><a class='mousetrap button append' href='<%- ctx.formatClientLink('help', 'search', 'posts') %>'>Syntax help</a><%
     %></form><%
-    %><% if (ctx.canBulkEditTags) { %><%
-        %><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><%
-        %></form><%
-    %><% } %><%
-    %><% if (ctx.enableSafety && ctx.canBulkEditSafety) { %><%
-        %><form class='horizontal bulk-edit bulk-edit-safety'><%
-            %><a href class='mousetrap button append open'>Mass edit safety</a><%
-            %><a href class='mousetrap button append close'>Stop editing safety</a><%
+    %><div class='bulk-edit-block'><%
+        %><% if (ctx.canBulkEditTags) { %><%
+            %><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><%
+            %></form><%
+        %><% } %><%
+        %><% if (ctx.enableSafety && ctx.canBulkEditSafety) { %><%
+            %><form class='horizontal bulk-edit bulk-edit-safety'><%
+                %><a href class='mousetrap button append open'>Mass edit safety</a><%
+                %><a href class='mousetrap button append close'>Stop editing safety</a><%
+            %></form><%
+        %><% } %><%
+        %><!--TODO: create permission--><%
+        %><form class='horizontal bulk-edit bulk-add-relation'><%
+            %><a href class='mousetrap button append open'>Mass add relation</a><%
+            %><a href class='mousetrap button append close'>Stop adding relation</a><%
         %></form><%
-    %><% } %><%
-    %><!--TODO: create permission--><%
-    %><form class='horizontal bulk-edit bulk-add-relation'><%
-        %><a href class='mousetrap button append open'>Mass add relation</a><%
-        %><a href class='mousetrap button append close'>Stop adding relation</a><%
-    %></form><%
+    %></div><%
 %></div>