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)
EditorTabs(url, user)
h1.mountable= "Welcome to the Editor Panel, " + user.Nick + "!"
h1.mountable What would you like to edit?
.feature-cards
.feature-card.mountable(title=scoreTitle)
.feature-card-icon.editor-score= score
p.feature-card-text Your contribution score.
.feature-cards
a.feature-card.mountable(href="/editor/anime")
.feature-card-icon
a.feature-card.mountable(href="/editor/anime/all" + user.Settings().Editor.Filter.Suffix())
.feature-card-icon.feature-card-color-anime
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")
.feature-card-icon
a.feature-card.mountable(href="/editor/soundtracks/links")
.feature-card-icon.feature-card-color-soundtrack
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")
.feature-card-icon
a.feature-card.mountable(href="/editor/companies/description")
.feature-card-icon.feature-card-color-company
RawIcon("building-o")
p.feature-card-text Companies
.feature-card-text
p Companies
p.editor-score= arn.Plural(scoreTypes["Company"], "contribution")
//- .footer
//- for objectType, score := range scoreTypes
//- .mountable
//- span= objectType + ": "
//- span= score
.footer.mountable
a.footer-element(href="/editor/mal/diff/anime" + user.Settings().Editor.Filter.Suffix()) MALdiff
a.footer-element(href="/editor/kitsu/new/anime") Kitsu
//- .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)
.tabs
Tab("Editor", "pencil", "/editor")
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("Tracks", "music", "/editor/soundtracks/links")
Tab("Companies", "building", "/editor/companies/description")
Tab("Kitsu", "download", "/editor/kitsu/new/anime")
//- .tabs
//- Tab("Editor", "pencil", "/editor")
//- 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("Tracks", "music", "/editor/soundtracks/links")
//- Tab("Companies", "building", "/editor/companies/description")
//- 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/")
.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("Images", "image", "/editor/anime/image/lowres" + 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("TBA", "question-circle", "/editor/anime/tba" + user.Settings().Editor.Filter.Suffix())
if strings.Contains(url, "/editor/anime/details")
.tabs

View File

@ -1,5 +1,6 @@
.editor-list-page-title
margin-bottom 0
margin-top 1rem
.editor-list
img
@ -7,6 +8,13 @@
.editor-list-entry-count
margin-top 0
margin-bottom content-padding
.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"
)
// TBA ...
func TBA(ctx *aero.Context) string {
// All ...
func All(ctx *aero.Context) string {
return editorList(
ctx,
"Anime to be announced",
"All anime",
func(anime *arn.Anime) bool {
return anime.Status == "tba"
return true
},
func(anime *arn.Anime) string {
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/source", filteranime.Source)
editorFilterable("/editor/anime/tba", filteranime.TBA)
editorFilterable("/editor/anime/all", filteranime.All)
// Editor - MALdiff
editorFilterable("/editor/mal/diff/anime", editor.CompareMAL)

View File

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

View File

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

View File

@ -78,8 +78,11 @@ calendar-entry-seen-hover-background = ui-background
table-width-normal = 900px
// Feature cards
feature-card-color = hsl(348, 83%, 47%)
feature-card-alternative-color = hsl(203, 83%, 47%)
const feature-card-saturation = 83%
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
// Loading animation