Improve layout on editor pages for small screens

This commit is contained in:
Eduard Urbach 2018-04-13 15:11:04 +02:00
parent 8710bffb0b
commit 36cf43f7b9
3 changed files with 16 additions and 10 deletions

View File

@ -30,8 +30,7 @@ component Editor(url string, score int, scoreTitle string, scoreTypes map[string
component EditorTabs(url string, user *arn.User)
.corner-buttons-left
a.button(href="/editor")
Icon("arrow-left")
span Overview
RawIcon("arrow-left")
if strings.Contains(url, "/editor/anime/")
.tabs
@ -74,15 +73,15 @@ component EditorTabs(url string, user *arn.User)
Tab("Low-Res", "image", "/editor/anime/image/lowres" + user.Settings().Editor.Filter.Suffix())
Tab("Ultra Low-Res", "image", "/editor/anime/image/ultralowres" + user.Settings().Editor.Filter.Suffix())
if strings.Contains(url, "/editor/anime/") || strings.Contains(url, "/editor/mal/diff/anime")
.corner-buttons.fixed
#filter-root(data-url=url)
ExploreFilters(user.Settings().Editor.Filter.Year, user.Settings().Editor.Filter.Status, user.Settings().Editor.Filter.Type, true)
if strings.Contains(url, "/editor/soundtracks/")
.tabs
Tab("Links", "external-link", "/editor/soundtracks/links")
Tab("Lyrics", "font", "/editor/soundtracks/lyrics")
Tab("Tags", "tag", "/editor/soundtracks/tags")
Tab("File", "volume-off", "/editor/soundtracks/file")
if strings.Contains(url, "/editor/anime/") || strings.Contains(url, "/editor/mal/diff/anime")
.editor-filters
#filter-root(data-url=url)
ExploreFilters(user.Settings().Editor.Filter.Year, user.Settings().Editor.Filter.Status, user.Settings().Editor.Filter.Type, true)

View File

@ -6,6 +6,9 @@
img
margin-right 1rem
.editor-filters
//
.editor-list-entry-count
margin-top 0
margin-bottom content-padding
@ -18,3 +21,10 @@
.feature-card-color-company
background hsl(150, feature-card-saturation, feature-card-lightness) !important
> 1550px
.editor-filters
position fixed
right content-padding
top content-padding
z-index 1

View File

@ -26,9 +26,6 @@ mixin corner-buttons
.button
margin-left 0.5rem
.fixed
position fixed
< 600px
.corner-buttons-hide-on-mobile
display none