diff options
| -rw-r--r-- | client/css/post-main-view.styl | 49 | ||||
| -rw-r--r-- | client/html/post_main.tpl | 28 | ||||
| -rw-r--r-- | 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 ></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(); } |