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

client/css: improve mobile styling

Browse source
This commit is contained in:
Michael Serajnik 2017-12-16 03:45:51 +01:00 committed by rr-
parent c770ad8f28
commit 26a1451ff6
18 changed files with 170 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
client/css/comment-control.styl
View file

@ -3,7 +3,6 @@ $comment-header-background-color = $top-navigation-color
$comment-border-color = #DDD
.comment-container
margin: 0 0 1em 0
padding: 0 0 0 60px
.avatar

5
client/css/comment-list-control.styl
View file

@ -2,3 +2,8 @@
list-style-type: none
margin: 0
padding: 0
>li
margin-bottom: 1em
&:last-child
margin-bottom: 0

18
client/css/comment-list-view.styl
View file

@ -1,15 +1,24 @@
@import colors
$comment-border-color = $top-navigation-color
.global-comment-list
text-align: left
&>ul
list-style-type: none
margin: 1em 0
margin: 1em 0 0
padding: 0
@media (max-width: 700px)
&>li
margin-bottom: 5em
padding: 1vw
margin-top: 2em
padding-top: 2em
border-top: 3px solid $comment-border-color
&:first-child
margin-top: 0
padding-top: 0
border-top: none
@media (max-width: 700px)
.post-thumbnail
margin-bottom: 1em
.thumbnail
@ -19,7 +28,6 @@
@media (min-width: 700px)
&>li
padding-left: 13em
margin-bottom: 2em
.post-thumbnail
float: left
margin: 0 0 1em -13em

16
client/css/core-forms.styl
View file

@ -31,13 +31,22 @@ form.horizontal
margin-bottom: 1em
.input, .buttons, ul
display: inline-block
vertical-align: middle
vertical-align: top
margin: 0
padding: 0
input
vertical-align: middle
vertical-align: top
.buttons
margin-right: 0.5em
@media (max-width: 1000px)
display: block
.input, .buttons, ul
display: block
margin-top: 0.5em
&:first-child
margin-top: 0
.buttons
margin-right: 0
@ -213,10 +222,13 @@ input[type=submit]
cursor: pointer
font-size: 100%
padding: 0.2em 0.7em
border-radius: 0
border: 2px solid $button-enabled-background-color
background: $button-enabled-background-color
color: $button-enabled-text-color
outline: 0 /* something on Chrome */
-moz-appearance: none
-webkit-appearance: none
&:disabled
cursor: default

36
client/css/core-general.styl
View file

@ -125,6 +125,37 @@ nav
li
display: inline-block
float: left
#mobile-navigation-toggle
display: none
width: 100%
padding: 0 1.5vw
line-height: 2.3em
font-family: inherit
border: none
background: none
color: $active-tab-text-color
.site-name
display: block
float: left
max-width: 50vw
overflow: hidden
text-overflow: ellipsis
.toggle-icon
display: block
float: right
@media (max-width: 1000px)
text-align: left
li
display: none
float: none
a
display: block
padding: 0 1.5vw
#mobile-navigation-toggle
display: block
&.opened
li
display: block
ul li[data-name=account],
ul li[data-name=register],
ul li[data-name=login],
@ -141,6 +172,8 @@ nav
margin-right: 0.6em
margin-left: calc(0.6em - 1.2em)
float: left
@media (max-width: 1000px)
display: none
a .access-key
text-decoration: underline
@ -194,6 +227,9 @@ a .access-key
margin-top: 0 !important
margin-bottom: 0 !important
.table-wrap
overflow-x: scroll
/* hack to prevent text from being copied */
[data-pseudo-content]:before {
content: attr(data-pseudo-content)

3
client/css/home-view.styl
View file

@ -15,6 +15,7 @@
margin: 0 auto 2em auto
form
display: inline-block
width: auto
vertical-align: middle
margin: 0 0 2em 0
@ -52,6 +53,8 @@
li
display: inline
white-space: nowrap
@media (max-width: 800px)
display: block
.sep
word-spacing: 1.1em
background-repeat: no-repeat

2
client/css/pager.styl
View file

@ -8,7 +8,7 @@
.page
position: relative
.page-header
margin: 0.5em 0.5em 0.5em 0
margin: 0.5em 0
position: relative
&:before
display: block

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

@ -145,12 +145,19 @@
margin-bottom: 0.75em
*
vertical-align: top
@media (max-width: 1000px)
display: block
input
margin-bottom: 0.25em
margin-right: 0.25em
input[name=search-text]
width: 25em
@media (max-width: 1000px)
display: block
width: 100%
margin-bottom: 0.5em
.append
vertical-align: middle
font-size: 0.95em
color: $inactive-link-color
.bulk-edit
@ -163,6 +170,11 @@
&.hidden
display: none
.bulk-edit-tags
&.opened
.hint
@media (max-width: 1000px)
display: block
margin-bottom: 0.5em
&:not(.opened)
[type=text],
.start
@ -171,8 +183,21 @@
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
.safety
margin-right: 0.25em

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

@ -138,6 +138,9 @@
margin: 0
padding: 0
form
width: auto
label:not(.file-dropper)
margin-bottom: 0.3em
display: block

8
client/css/snapshots-list-view.styl
View file

@ -8,11 +8,16 @@ $snapshot-merged-background-color = #FEC
ul
margin: 0 auto
padding: 0
width: 100%
max-width: 35em
list-style-type: none
li
margin-bottom: 1em
&:last-child
margin-bottom: 0
.time
float: right
@ -39,6 +44,3 @@ $snapshot-merged-background-color = #FEC
background: $snapshot-merged-background-color
&+.details
background: lighten($snapshot-merged-background-color, 50%)
div.details
margin-bottom: 2em

6
client/css/tag-categories-view.styl
View file

@ -17,6 +17,12 @@
text-align: center
&.remove, &.set-default
white-space: pre
th
white-space: nowrap
&:first-child
padding-left: 0
&:last-child
padding-right: 0
tfoot
display: none
form

4
client/css/tag-list-view.styl
View file

@ -11,6 +11,7 @@
th, td
padding: 0.1em 0.5em
th
white-space: nowrap
background: $top-navigation-color
.names
width: 28%
@ -47,6 +48,9 @@
width: auto
input[name=search-text]
width: 25em
@media (max-width: 1000px)
width: 100%
.append
vertical-align: middle
font-size: 0.95em
color: $inactive-link-color

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

@ -34,6 +34,9 @@
width: auto
input[name=search-text]
width: 25em
@media (max-width: 1000px)
width: 100%
.append
vertical-align: middle
font-size: 0.95em
color: $inactive-link-color

2
client/html/tag_categories.tpl
View file

@ -1,6 +1,7 @@
<div class='content-wrapper tag-categories'>
<form>
<h1>Tag categories</h1>
<div class="table-wrap">
<table>
<thead>
<tr>
@ -12,6 +13,7 @@
<tbody>
</tbody>
</table>
</div>
<% if (ctx.canCreate) { %>
<p><a href class='add'>Add new category</a></p>

2
client/html/tags_page.tpl
View file

@ -1,4 +1,4 @@
<div class='tag-list'>
<div class='tag-list table-wrap'>
<% if (ctx.response.results.length) { %>
<table>
<thead>

4
client/html/top_navigation.tpl
View file

@ -1,5 +1,9 @@
<nav id='top-navigation' class='buttons'><!--
--><ul><!--
--><button id="mobile-navigation-toggle"><!--
--><span class="site-name"><%- ctx.name %></span><!--
--><span class="toggle-icon"><i class="fa fa-bars"></i></span><!--
--></button><!--
--><% for (let item of ctx.items) { %><!--
--><% if (item.available) { %><!--
--><li data-name='<%- item.key %>'><!--

2
client/js/controllers/top_navigation_controller.js
View file

@ -1,6 +1,7 @@
'use strict';
const api = require('../api.js');
const config = require('../config.js');
const topNavigation = require('../models/top_navigation.js');
const TopNavigationView = require('../views/top_navigation_view.js');
@ -64,6 +65,7 @@ class TopNavigationController {
this._updateNavigationFromPrivileges();
this._topNavigationView.render({
items: topNavigation.getAll(),
name: config.name
});
this._topNavigationView.activate(
topNavigation.activeItem ? topNavigation.activeItem.key : '');

32
client/js/views/top_navigation_view.js
View file

@ -9,8 +9,22 @@ class TopNavigationView {
this._hostNode = document.getElementById('top-navigation-holder');
}
get _mobileNavigationToggleNode() {
return this._hostNode.querySelector('#mobile-navigation-toggle');
}
get _navigationListNode() {
return this._hostNode.querySelector('nav > ul');
}
get _navigationLinkNodes() {
return this._navigationListNode.querySelectorAll('li > a');
}
render(ctx) {
views.replaceContent(this._hostNode, template(ctx));
this._bindMobileNavigationEvents();
}
activate(key) {
@ -19,6 +33,24 @@ class TopNavigationView {
'active', itemNode.getAttribute('data-name') === key);
}
}
_bindMobileNavigationEvents() {
this._mobileNavigationToggleNode.addEventListener(
'click', e => this._mobileNavigationToggleClick(e));
for (let navigationLinkNode of this._navigationLinkNodes) {
navigationLinkNode.addEventListener(
'click', e => this._navigationLinkClick(e));
}
}
_mobileNavigationToggleClick(e) {
this._navigationListNode.classList.toggle('opened');
}
_navigationLinkClick(e) {
this._navigationListNode.classList.remove('opened');
}
}
module.exports = TopNavigationView;