New editor panel navigation

This commit is contained in:
Eduard Urbach 2018-04-07 16:32:37 +02:00
parent 62875b8dd4
commit baa0188c27
7 changed files with 71 additions and 49 deletions

View File

@ -1,56 +1,54 @@
component Editor(url string, score int, scoreTitle string, scoreTypes map[string]int, user *arn.User) component Editor(url string, score int, scoreTitle string, scoreTypes map[string]int, user *arn.User)
EditorTabs(url, user) h1.mountable What would you like to edit?
h1.mountable= "Welcome to the Editor Panel, " + user.Nick + "!"
.feature-cards .feature-cards
.feature-card.mountable(title=scoreTitle) a.feature-card.mountable(href="/editor/anime/all" + user.Settings().Editor.Filter.Suffix())
.feature-card-icon.editor-score= score .feature-card-icon.feature-card-color-anime
p.feature-card-text Your contribution score.
.feature-cards
a.feature-card.mountable(href="/editor/anime")
.feature-card-icon
RawIcon("tv") RawIcon("tv")
p.feature-card-text Anime .feature-card-text
p Anime
p.editor-score= arn.Plural(scoreTypes["Anime"], "contribution")
a.feature-card.mountable(href="/editor/tracks") a.feature-card.mountable(href="/editor/soundtracks/links")
.feature-card-icon .feature-card-icon.feature-card-color-soundtrack
RawIcon("music") RawIcon("music")
p.feature-card-text SoundTracks .feature-card-text
p SoundTracks
p.editor-score= arn.Plural(scoreTypes["SoundTrack"], "contribution")
a.feature-card.mountable(href="/editor/companies") a.feature-card.mountable(href="/editor/companies/description")
.feature-card-icon .feature-card-icon.feature-card-color-company
RawIcon("building-o") RawIcon("building-o")
p.feature-card-text Companies .feature-card-text
p Companies
p.editor-score= arn.Plural(scoreTypes["Company"], "contribution")
//- .footer .footer.mountable
//- for objectType, score := range scoreTypes a.footer-element(href="/editor/mal/diff/anime" + user.Settings().Editor.Filter.Suffix()) MALdiff
//- .mountable a.footer-element(href="/editor/kitsu/new/anime") Kitsu
//- span= objectType + ": "
//- span= score
//- .feature-cards.feature-cards-alternative-color
//- for objectType, score := range scoreTypes
//- .feature-card.mountable
//- .feature-card-icon.editor-score= score
//- p.feature-card-text= objectType
component EditorTabs(url string, user *arn.User) component EditorTabs(url string, user *arn.User)
.tabs //- .tabs
Tab("Editor", "pencil", "/editor") //- Tab("Editor", "pencil", "/editor")
Tab("MAL", "exchange", "/editor/mal/diff/anime" + user.Settings().Editor.Filter.Suffix()) //- Tab("MAL", "exchange", "/editor/mal/diff/anime" + user.Settings().Editor.Filter.Suffix())
Tab("Anime", "tv", "/editor/anime/mapping/mal" + user.Settings().Editor.Filter.Suffix()) //- Tab("Anime", "tv", "/editor/anime/mapping/mal" + user.Settings().Editor.Filter.Suffix())
Tab("Tracks", "music", "/editor/soundtracks/links") //- Tab("Tracks", "music", "/editor/soundtracks/links")
Tab("Companies", "building", "/editor/companies/description") //- Tab("Companies", "building", "/editor/companies/description")
Tab("Kitsu", "download", "/editor/kitsu/new/anime") //- Tab("Kitsu", "download", "/editor/kitsu/new/anime")
.corner-buttons-left
a.button(href="/editor")
Icon("arrow-left")
span Overview
if strings.Contains(url, "/editor/anime/") if strings.Contains(url, "/editor/anime/")
.tabs .tabs
Tab("All", "list", "/editor/anime/all" + user.Settings().Editor.Filter.Suffix())
Tab("Mappings", "arrows-h", "/editor/anime/mapping/mal" + user.Settings().Editor.Filter.Suffix()) Tab("Mappings", "arrows-h", "/editor/anime/mapping/mal" + user.Settings().Editor.Filter.Suffix())
Tab("Images", "image", "/editor/anime/image/lowres" + user.Settings().Editor.Filter.Suffix()) Tab("Images", "image", "/editor/anime/image/lowres" + user.Settings().Editor.Filter.Suffix())
Tab("Companies", "building", "/editor/anime/companies/studios" + user.Settings().Editor.Filter.Suffix()) Tab("Companies", "building", "/editor/anime/companies/studios" + user.Settings().Editor.Filter.Suffix())
Tab("Details", "search-plus", "/editor/anime/details/genres" + user.Settings().Editor.Filter.Suffix()) Tab("Details", "search-plus", "/editor/anime/details/genres" + user.Settings().Editor.Filter.Suffix())
Tab("TBA", "question-circle", "/editor/anime/tba" + user.Settings().Editor.Filter.Suffix())
if strings.Contains(url, "/editor/anime/details") if strings.Contains(url, "/editor/anime/details")
.tabs .tabs

View File

@ -1,5 +1,6 @@
.editor-list-page-title .editor-list-page-title
margin-bottom 0 margin-bottom 0
margin-top 1rem
.editor-list .editor-list
img img
@ -7,6 +8,13 @@
.editor-list-entry-count .editor-list-entry-count
margin-top 0 margin-top 0
margin-bottom content-padding
.editor-score .editor-score
line-height 1em feature-card-footer
.feature-card-color-soundtrack
background hsl(200, feature-card-saturation, feature-card-lightness) !important
.feature-card-color-company
background hsl(150, feature-card-saturation, feature-card-lightness) !important

View File

@ -5,13 +5,13 @@ import (
"github.com/animenotifier/arn" "github.com/animenotifier/arn"
) )
// TBA ... // All ...
func TBA(ctx *aero.Context) string { func All(ctx *aero.Context) string {
return editorList( return editorList(
ctx, ctx,
"Anime to be announced", "All anime",
func(anime *arn.Anime) bool { func(anime *arn.Anime) bool {
return anime.Status == "tba" return true
}, },
func(anime *arn.Anime) string { func(anime *arn.Anime) string {
return "https://www.google.com/search?q=" + anime.Title.Canonical return "https://www.google.com/search?q=" + anime.Title.Canonical

View File

@ -291,7 +291,7 @@ func Configure(app *aero.Application) {
editorFilterable("/editor/anime/details/episodelength", filteranime.EpisodeLength) editorFilterable("/editor/anime/details/episodelength", filteranime.EpisodeLength)
editorFilterable("/editor/anime/details/source", filteranime.Source) editorFilterable("/editor/anime/details/source", filteranime.Source)
editorFilterable("/editor/anime/tba", filteranime.TBA) editorFilterable("/editor/anime/all", filteranime.All)
// Editor - MALdiff // Editor - MALdiff
editorFilterable("/editor/mal/diff/anime", editor.CompareMAL) editorFilterable("/editor/mal/diff/anime", editor.CompareMAL)

View File

@ -1,13 +1,11 @@
.feature-cards, mixin feature-cards
.payment-cards
horizontal-wrap horizontal-wrap
justify-content center justify-content center
width 100% width 100%
max-width 1200px max-width 1200px
margin content-padding auto margin content-padding auto
.feature-card, mixin feature-card
.payment-card
vertical vertical
flex-basis 240px flex-basis 240px
border-radius 5px border-radius 5px
@ -22,6 +20,14 @@
box-shadow shadow-medium box-shadow shadow-medium
text-shadow none text-shadow none
.feature-cards,
.payment-cards
feature-cards
.feature-card,
.payment-card
feature-card
.payment-card .payment-card
:hover :hover
cursor pointer cursor pointer

View File

@ -1,12 +1,19 @@
.corner-buttons mixin corner-buttons
display flex display flex
justify-content center justify-content center
margin-bottom content-padding margin-bottom content-padding
z-index 1
position absolute position absolute
top content-padding top content-padding
.corner-buttons
corner-buttons
right content-padding right content-padding
.corner-buttons-left
corner-buttons
left content-padding
.corner-buttons-hide-on-mobile .corner-buttons-hide-on-mobile
display flex display flex
position absolute position absolute

View File

@ -78,8 +78,11 @@ calendar-entry-seen-hover-background = ui-background
table-width-normal = 900px table-width-normal = 900px
// Feature cards // Feature cards
feature-card-color = hsl(348, 83%, 47%) const feature-card-saturation = 83%
feature-card-alternative-color = hsl(203, 83%, 47%) const feature-card-lightness = 47%
feature-card-color = hsl(348, feature-card-saturation, feature-card-lightness)
feature-card-alternative-color = hsl(203, feature-card-saturation, feature-card-lightness)
feature-card-icon-color = white feature-card-icon-color = white
// Loading animation // Loading animation