Improved editor list display

This commit is contained in:
Eduard Urbach 2018-03-22 20:15:21 +01:00
parent f7d58fd4e9
commit fca33e240c
16 changed files with 71 additions and 93 deletions

View File

@ -14,8 +14,8 @@
margin-top 0.8rem
#audio-player-anime-link
width 142px
height 142px
width anime-image-medium-width
height anime-image-medium-width
overflow-y hidden
border-radius 3px
opacity 0.75

View File

@ -1,15 +1,14 @@
component AnimeEditorListFull(title string, missing []*arn.Anime, count int, pageURI string, generateSearchLink func(*arn.Anime) string)
EditorTabs(pageURI)
h1.editor-list-title.mountable= title
h1.editor-list-page-title.mountable= title
.footer.editor-list-entry-count.mountable= strconv.Itoa(count) + " anime"
AnimeEditorList(missing, pageURI, generateSearchLink)
component AnimeEditorList(animes []*arn.Anime, pageURI string, generateSearchLink func(*arn.Anime) string)
table
table.editor-list
thead
tr.mountable
th(title="Popularity") Pop.
th Image
th Score
th Title
th Type
th Year
@ -19,15 +18,15 @@ component AnimeEditorList(animes []*arn.Anime, pageURI string, generateSearchLin
tbody
each anime in animes
tr.mountable
td= anime.Popularity.Total()
td= anime.ScoreHumanReadable()
td
img.anime-list-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.Canonical)
td
a(href=anime.Link(), target="_blank", rel="noopener")= anime.Title.Canonical
a(href=anime.Link(), target="_blank", rel="noopener")
img.anime-list-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.Canonical)
span= anime.Title.Canonical
td= anime.Type
td
if len(anime.StartDate) >= 4
a.ajax(href=pageURI + "/" + anime.StartDate[:4])= anime.StartDate[:4]
a.ajax(href=strings.TrimPrefix(pageURI, "/_") + "/" + anime.StartDate[:4])= anime.StartDate[:4]
if generateSearchLink != nil
td

View File

@ -24,7 +24,7 @@
.anime-list-item-image-container
padding 0
width 39px
width anime-image-tiny-width
.anime-list-item-image-link
display flex

View File

@ -1,6 +1,10 @@
.editor-list-title
.editor-list-page-title
margin-bottom 0
.editor-list
img
margin-right 1rem
.editor-list-entry-count
margin-top 0

View File

@ -1,8 +1,6 @@
package editor
package filteranime
import (
"sort"
"github.com/aerogo/aero"
"github.com/animenotifier/arn"
"github.com/animenotifier/notify.moe/components"
@ -27,19 +25,7 @@ func AniList(ctx *aero.Context) string {
return anime.GetMapping("anilist/anime") == ""
})
sort.Slice(missing, func(i, j int) bool {
a := missing[i]
b := missing[j]
aPop := a.Popularity.Total()
bPop := b.Popularity.Total()
if aPop == bPop {
return a.Title.Canonical < b.Title.Canonical
}
return aPop > bPop
})
arn.SortAnimeByQuality(missing)
count := len(missing)
@ -48,7 +34,7 @@ func AniList(ctx *aero.Context) string {
}
return ctx.HTML(components.AnimeEditorListFull(
"Anime without Anilist links",
"Anime without Anilist mappings",
missing,
count,
ctx.URI(),

View File

@ -1,8 +1,6 @@
package editor
package filteranime
import (
"sort"
"github.com/aerogo/aero"
"github.com/animenotifier/arn"
"github.com/animenotifier/notify.moe/components"
@ -27,19 +25,7 @@ func Genres(ctx *aero.Context) string {
return len(anime.Genres) == 0
})
sort.Slice(missing, func(i, j int) bool {
a := missing[i]
b := missing[j]
aPop := a.Popularity.Total()
bPop := b.Popularity.Total()
if aPop == bPop {
return a.Title.Canonical < b.Title.Canonical
}
return aPop > bPop
})
arn.SortAnimeByQuality(missing)
count := len(missing)

View File

@ -1,4 +1,4 @@
package editor
package filteranime
import (
"github.com/aerogo/aero"

View File

@ -1,8 +1,6 @@
package editor
package filteranime
import (
"sort"
"github.com/aerogo/aero"
"github.com/animenotifier/arn"
"github.com/animenotifier/notify.moe/components"
@ -27,19 +25,7 @@ func Shoboi(ctx *aero.Context) string {
return anime.GetMapping("shoboi/anime") == ""
})
sort.Slice(missing, func(i, j int) bool {
a := missing[i]
b := missing[j]
aPop := a.Popularity.Total()
bPop := b.Popularity.Total()
if aPop == bPop {
return a.Title.Canonical < b.Title.Canonical
}
return aPop > bPop
})
arn.SortAnimeByQuality(missing)
count := len(missing)
@ -48,7 +34,7 @@ func Shoboi(ctx *aero.Context) string {
}
return ctx.HTML(components.AnimeEditorListFull(
"Anime without Shoboi links",
"Anime without Shoboi mappings",
missing,
count,
ctx.URI(),

View File

@ -1,9 +1,9 @@
component CompaniesEditorList(companies []*arn.Company, count int, url string)
EditorTabs(url)
h1.editor-list-title.mountable Companies without a description
h1.editor-list-page-title.mountable Companies without a description
.footer.editor-list-entry-count.mountable= strconv.Itoa(count) + " companies"
table
table.editor-list
thead
tr.mountable
th Name

View File

@ -6,8 +6,8 @@
flip-card
.genre-squared
width 142px
height 142px
width anime-image-medium-width
height anime-image-medium-width
.genre-text
grid-text

View File

@ -22,6 +22,7 @@ import (
"github.com/animenotifier/notify.moe/pages/editanime"
"github.com/animenotifier/notify.moe/pages/editlog"
"github.com/animenotifier/notify.moe/pages/editor"
"github.com/animenotifier/notify.moe/pages/editor/filteranime"
"github.com/animenotifier/notify.moe/pages/editor/filtercompanies"
"github.com/animenotifier/notify.moe/pages/embed"
"github.com/animenotifier/notify.moe/pages/episode"
@ -248,21 +249,21 @@ func Configure(app *aero.Application) {
l.Page("/editor", editor.Get)
// Editor - Anime
l.Page("/editor/anime/missing/anilist", editor.AniList)
l.Page("/editor/anime/missing/anilist/:year", editor.AniList)
l.Page("/editor/anime/missing/anilist/:year/:type", editor.AniList)
l.Page("/editor/anime/missing/shoboi", editor.Shoboi)
l.Page("/editor/anime/missing/shoboi/:year", editor.Shoboi)
l.Page("/editor/anime/missing/shoboi/:year/:type", editor.Shoboi)
l.Page("/editor/anime/missing/genres", editor.Genres)
l.Page("/editor/anime/missing/genres/:year", editor.Genres)
l.Page("/editor/anime/missing/genres/:year/:type", editor.Genres)
l.Page("/editor/anime/lowresimage", editor.LowResolutionAnimeImages)
l.Page("/editor/anime/lowresimage/:year", editor.LowResolutionAnimeImages)
l.Page("/editor/anime/lowresimage/:year/:type", editor.LowResolutionAnimeImages)
l.Page("/editor/anime/ultralowresimage", editor.UltraLowResolutionAnimeImages)
l.Page("/editor/anime/ultralowresimage/:year", editor.UltraLowResolutionAnimeImages)
l.Page("/editor/anime/ultralowresimage/:year/:type", editor.UltraLowResolutionAnimeImages)
l.Page("/editor/anime/missing/anilist", filteranime.AniList)
l.Page("/editor/anime/missing/anilist/:year", filteranime.AniList)
l.Page("/editor/anime/missing/anilist/:year/:type", filteranime.AniList)
l.Page("/editor/anime/missing/shoboi", filteranime.Shoboi)
l.Page("/editor/anime/missing/shoboi/:year", filteranime.Shoboi)
l.Page("/editor/anime/missing/shoboi/:year/:type", filteranime.Shoboi)
l.Page("/editor/anime/missing/genres", filteranime.Genres)
l.Page("/editor/anime/missing/genres/:year", filteranime.Genres)
l.Page("/editor/anime/missing/genres/:year/:type", filteranime.Genres)
l.Page("/editor/anime/lowresimage", filteranime.LowResolutionAnimeImages)
l.Page("/editor/anime/lowresimage/:year", filteranime.LowResolutionAnimeImages)
l.Page("/editor/anime/lowresimage/:year/:type", filteranime.LowResolutionAnimeImages)
l.Page("/editor/anime/ultralowresimage", filteranime.UltraLowResolutionAnimeImages)
l.Page("/editor/anime/ultralowresimage/:year", filteranime.UltraLowResolutionAnimeImages)
l.Page("/editor/anime/ultralowresimage/:year/:type", filteranime.UltraLowResolutionAnimeImages)
// Editor - MALdiff
l.Page("/editor/anime/maldiff", editor.CompareMAL)

View File

@ -7,8 +7,8 @@
horizontal-wrap
.anime-search-result
width 55px !important
height 78px !important
width anime-image-small-width !important
height anime-image-small-height !important
.forum-search-results
horizontal-wrap

View File

@ -131,6 +131,6 @@ animation change-color
display block
.soundtrack-anime-image
width 142px
height 200px
width anime-image-medium-width
height anime-image-medium-height
object-fit cover

View File

@ -5,8 +5,9 @@ mixin grid
mixin grid-cell
position relative
width 142px
height 200px
width anime-image-medium-width
height anime-image-medium-height
max-width anime-image-medium-width
// min-width 90px
// min-height 127px
border-radius 3px

View File

@ -101,6 +101,15 @@ const content-line-height = 1.7em
const typography-margin = 0.4rem
// Sizes
const anime-image-tiny-width = 39px
const anime-image-tiny-height = 39px
const anime-image-small-width = 55px
const anime-image-small-height = 78px
const anime-image-medium-width = 142px
const anime-image-medium-height = 200px
const anime-image-large-width = 250px
const anime-image-large-height = 350px

View File

@ -63,16 +63,22 @@ mixin anime-generic-item-image
filter saturate(1.3)
mixin anime-mini-item-image
width 55px !important
height 78px !important
width anime-image-small-width !important
height anime-image-small-height !important
anime-generic-item-image
// Make it easier for the browser to layout by specifying max-width as well
max-width anime-image-small-width
mixin anime-list-item-image
width 39px
height 39px
width anime-image-tiny-width
height anime-image-tiny-height
border-radius 2px
object-fit cover
// Make it easier for the browser to layout by specifying max-width as well
max-width anime-image-tiny-width
mixin sidebar
vertical
margin-left 0