scl/szurubooru
1
0
Fork 0
mirror of https://github.com/rr-/szurubooru.git synced 2025-07-17 08:26:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

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
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
&>li
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)
&>li
margin-bottom: 5em
padding: 1vw
.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