From 02d631a65d1680d6f49c69be8e667485cbe298b4 Mon Sep 17 00:00:00 2001 From: rr- Date: Sat, 27 Aug 2016 20:08:58 +0200 Subject: [PATCH] client/css: improve appearance on small screens --- client/build.js | 4 +- client/css/comment-control.styl | 11 +++--- client/css/comment-list-view.styl | 30 +++++++++----- client/css/core-general.styl | 4 +- client/css/home-view.styl | 21 ++++++++-- client/css/post-list-view.styl | 15 +++++-- client/css/post-view.styl | 13 ++++++- client/css/user-registration.styl | 7 +++- client/html/comment.tpl | 58 ++++++++++++++++------------ client/html/home_featured_post.tpl | 7 +--- client/html/home_footer.tpl | 17 ++++---- client/html/posts_header.tpl | 49 ++++++++++++----------- client/js/views/posts_header_view.js | 57 ++++++++++++--------------- 13 files changed, 172 insertions(+), 121 deletions(-) diff --git a/client/build.js b/client/build.js index 02273090..74655055 100644 --- a/client/build.js +++ b/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() { diff --git a/client/css/comment-control.styl b/client/css/comment-control.styl index aa12f111..4d203faf 100644 --- a/client/css/comment-control.styl +++ b/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) diff --git a/client/css/comment-list-view.styl b/client/css/comment-list-view.styl index da29a768..9e93809a 100644 --- a/client/css/comment-list-view.styl +++ b/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% diff --git a/client/css/core-general.styl b/client/css/core-general.styl index 65397123..de8a7faa 100644 --- a/client/css/core-general.styl +++ b/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 diff --git a/client/css/home-view.styl b/client/css/home-view.styl index f56d1d8e..e17e4bb5 100644 --- a/client/css/home-view.styl +++ b/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,") + .thumbnail margin-right: 0.4em diff --git a/client/css/post-list-view.styl b/client/css/post-list-view.styl index 04724e99..02e0ef6a 100644 --- a/client/css/post-list-view.styl +++ b/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 diff --git a/client/css/post-view.styl b/client/css/post-view.styl index 9f92bb61..11c66d1a 100644 --- a/client/css/post-view.styl +++ b/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 diff --git a/client/css/user-registration.styl b/client/css/user-registration.styl index a8642f1a..8e1ef8d2 100644 --- a/client/css/user-registration.styl +++ b/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 diff --git a/client/html/comment.tpl b/client/html/comment.tpl index 2142ae07..0002d633 100644 --- a/client/html/comment.tpl +++ b/client/html/comment.tpl @@ -12,37 +12,45 @@
-
<% if (ctx.comment.user && ctx.comment.user.name && ctx.canViewUsers) { %><% } %><%- ctx.comment.user ? ctx.comment.user.name : 'Deleted user' %><% if (ctx.comment.user && ctx.comment.user.name && ctx.canViewUsers) { %><% } %><%= ctx.makeRelativeTime(ctx.comment.creationTime) %><% if (ctx.canEditComment) { %> edit<% } %><% if (ctx.canDeleteComment) { %> delete<% } %>
+ %><% + + %><% + + %><% if (ctx.canEditComment) { %><% + %><% + %> edit<% + %><% + %><% } %><% + + %><% + + %><% if (ctx.canDeleteComment) { %><% + %><% + %> delete<% + %><% + %><% } %><% + %>
diff --git a/client/html/home_featured_post.tpl b/client/html/home_featured_post.tpl index 33b9c3c8..4e9be4a7 100644 --- a/client/html/home_featured_post.tpl +++ b/client/html/home_featured_post.tpl @@ -1,10 +1,7 @@
<% if (ctx.featuredPost) { %> <% } %> diff --git a/client/html/home_footer.tpl b/client/html/home_footer.tpl index 80baccbc..9ab9cd0c 100644 --- a/client/html/home_footer.tpl +++ b/client/html/home_footer.tpl @@ -1,10 +1,7 @@ -<%- ctx.postCount %> posts -• -<%= ctx.makeFileSize(ctx.diskUsage) %> -• -Build <%- ctx.version %> -from <%= ctx.makeRelativeTime(ctx.buildDate) %> -<% if (ctx.canListSnapshots) { %> - • - History -<% } %> + diff --git a/client/html/posts_header.tpl b/client/html/posts_header.tpl index ea6b97d5..5b4f1d4f 100644 --- a/client/html/posts_header.tpl +++ b/client/html/posts_header.tpl @@ -1,22 +1,27 @@ -
-
- <%= ctx.makeTextInput({text: 'Search query', id: 'search-text', name: 'search-text', value: ctx.parameters.query}) %> - - '/> - '/> - '/> - Syntax help -
- <% if (ctx.canMassTag) { %> -
- <% if (ctx.parameters.tag) { %> - Tagging with: - <% } else { %> - Mass tag - <% } %> - <%= ctx.makeTextInput({name: 'masstag', value: ctx.parameters.tag}) %> - - Stop tagging -
- <% } %> -
+
<% + %>
<% + %><%= ctx.makeTextInput({text: 'Search query', id: 'search-text', name: 'search-text', value: ctx.parameters.query}) %><% + %><% + %><% + %><% + %>'/><% + %>'/><% + %>'/><% + %><% + %>Syntax help<% + %><% if (ctx.canMassTag) { %><% + %><% + %><% + %><% if (ctx.parameters.tag) { %><% + %>Tagging with:<% + %><% } else { %><% + %>Mass tag<% + %><% } %><% + %><% + %><%= ctx.makeTextInput({name: 'masstag', value: ctx.parameters.tag}) %><% + %><% + %>Stop tagging<% + %><% + %><% } %><% + %>
<% +%>
diff --git a/client/js/views/posts_header_view.js b/client/js/views/posts_header_view.js index ef0000c5..649ed46a 100644 --- a/client/js/views/posts_header_view.js +++ b/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)); } }