From fca33e240c4532288e4486a0452740b396a0bb04 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Thu, 22 Mar 2018 20:15:21 +0100 Subject: [PATCH] Improved editor list display --- layout/sidebar/audioplayer.scarlet | 4 +-- mixins/AnimeEditorList.pixy | 17 +++++----- pages/animelist/animelist.scarlet | 2 +- pages/editor/editor.scarlet | 6 +++- pages/editor/{ => filteranime}/anilist.go | 20 ++---------- pages/editor/{ => filteranime}/genres.go | 18 ++--------- .../editor/{ => filteranime}/lowresimages.go | 2 +- pages/editor/{ => filteranime}/shoboi.go | 20 ++---------- .../filtercompanies/filtercompanies.pixy | 4 +-- pages/genres/genres.scarlet | 4 +-- pages/index.go | 31 ++++++++++--------- pages/search/search.scarlet | 4 +-- pages/soundtracks/soundtracks.scarlet | 4 +-- styles/grid.scarlet | 5 +-- styles/include/config.scarlet | 9 ++++++ styles/include/mixins.scarlet | 14 ++++++--- 16 files changed, 71 insertions(+), 93 deletions(-) rename pages/editor/{ => filteranime}/anilist.go (73%) rename pages/editor/{ => filteranime}/genres.go (73%) rename pages/editor/{ => filteranime}/lowresimages.go (99%) rename pages/editor/{ => filteranime}/shoboi.go (73%) diff --git a/layout/sidebar/audioplayer.scarlet b/layout/sidebar/audioplayer.scarlet index 81bd23e2..64df4e94 100644 --- a/layout/sidebar/audioplayer.scarlet +++ b/layout/sidebar/audioplayer.scarlet @@ -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 diff --git a/mixins/AnimeEditorList.pixy b/mixins/AnimeEditorList.pixy index 5ce6134f..7e992238 100644 --- a/mixins/AnimeEditorList.pixy +++ b/mixins/AnimeEditorList.pixy @@ -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 diff --git a/pages/animelist/animelist.scarlet b/pages/animelist/animelist.scarlet index 0c539bdb..9f15b1f6 100644 --- a/pages/animelist/animelist.scarlet +++ b/pages/animelist/animelist.scarlet @@ -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 diff --git a/pages/editor/editor.scarlet b/pages/editor/editor.scarlet index f3725953..4b90a326 100644 --- a/pages/editor/editor.scarlet +++ b/pages/editor/editor.scarlet @@ -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 diff --git a/pages/editor/anilist.go b/pages/editor/filteranime/anilist.go similarity index 73% rename from pages/editor/anilist.go rename to pages/editor/filteranime/anilist.go index 38a76689..fb8cf998 100644 --- a/pages/editor/anilist.go +++ b/pages/editor/filteranime/anilist.go @@ -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(), diff --git a/pages/editor/genres.go b/pages/editor/filteranime/genres.go similarity index 73% rename from pages/editor/genres.go rename to pages/editor/filteranime/genres.go index d03453fa..68727ce7 100644 --- a/pages/editor/genres.go +++ b/pages/editor/filteranime/genres.go @@ -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) diff --git a/pages/editor/lowresimages.go b/pages/editor/filteranime/lowresimages.go similarity index 99% rename from pages/editor/lowresimages.go rename to pages/editor/filteranime/lowresimages.go index 42688cdc..415a96fb 100644 --- a/pages/editor/lowresimages.go +++ b/pages/editor/filteranime/lowresimages.go @@ -1,4 +1,4 @@ -package editor +package filteranime import ( "github.com/aerogo/aero" diff --git a/pages/editor/shoboi.go b/pages/editor/filteranime/shoboi.go similarity index 73% rename from pages/editor/shoboi.go rename to pages/editor/filteranime/shoboi.go index 105d2633..ea68d555 100644 --- a/pages/editor/shoboi.go +++ b/pages/editor/filteranime/shoboi.go @@ -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(), diff --git a/pages/editor/filtercompanies/filtercompanies.pixy b/pages/editor/filtercompanies/filtercompanies.pixy index b1f455d1..2489c8c0 100644 --- a/pages/editor/filtercompanies/filtercompanies.pixy +++ b/pages/editor/filtercompanies/filtercompanies.pixy @@ -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 diff --git a/pages/genres/genres.scarlet b/pages/genres/genres.scarlet index 000db77c..632277f9 100644 --- a/pages/genres/genres.scarlet +++ b/pages/genres/genres.scarlet @@ -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 diff --git a/pages/index.go b/pages/index.go index 819a39fb..d759a101 100644 --- a/pages/index.go +++ b/pages/index.go @@ -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) diff --git a/pages/search/search.scarlet b/pages/search/search.scarlet index b0b74304..0eaf4694 100644 --- a/pages/search/search.scarlet +++ b/pages/search/search.scarlet @@ -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 diff --git a/pages/soundtracks/soundtracks.scarlet b/pages/soundtracks/soundtracks.scarlet index cdae5190..38fd2531 100644 --- a/pages/soundtracks/soundtracks.scarlet +++ b/pages/soundtracks/soundtracks.scarlet @@ -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 \ No newline at end of file diff --git a/styles/grid.scarlet b/styles/grid.scarlet index b32790d6..4ed0c15f 100644 --- a/styles/grid.scarlet +++ b/styles/grid.scarlet @@ -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 diff --git a/styles/include/config.scarlet b/styles/include/config.scarlet index 9bf2cb67..0eeb2e8f 100644 --- a/styles/include/config.scarlet +++ b/styles/include/config.scarlet @@ -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 diff --git a/styles/include/mixins.scarlet b/styles/include/mixins.scarlet index a860007d..c2b10f46 100644 --- a/styles/include/mixins.scarlet +++ b/styles/include/mixins.scarlet @@ -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