web/notify.moe
Code Issues Pull Requests Activity

Improved formatting for MAL comparison

Browse Source
This commit is contained in:
Eduard Urbach 2018-03-09 04:27:23 +01:00
parent 98c9278e24
commit 4c29afa84f
2 changed files with 50 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
pages/editor/mal.pixy
View File

@ -2,16 +2,22 @@ component CompareMAL(comparisons []*utils.MALComparison, user *arn.User)
EditorTabs
h1.mountable MAL Comparison
.mal-comparisons
.data-comparisons
each comparison in comparisons
.mal-comparison.mountable
a(href=comparison.Anime.Link(), target="_blank")= comparison.Anime.Title.ByUser(user)
a(href=comparison.MALAnime.URL, target="_blank")= comparison.MALAnime.Title
.data-comparison.mountable
.data-comparison-header
.data-comparison-image-container
img.data-comparison-image.lazy(data-src=comparison.Anime.Image("small"), data-webp="true", alt=comparison.Anime.Title.ByUser(user))
each difference in comparison.Differences
.comparison-difference
div= difference.String()
.data-comparison-titles
a.data-comparison-title(href=comparison.Anime.Link(), target="_blank")= comparison.Anime.Title.Canonical
a.data-comparison-title(href=comparison.MALAnime.URL, target="_blank")= comparison.MALAnime.Title
.comparison-difference-details
.comparison-difference-detail= difference.DetailsA()
.comparison-difference-detail= difference.DetailsB()
.data-comparison-differences
each difference in comparison.Differences
.data-comparison-difference
.data-comparison-difference-title= difference.String()
.data-comparison-difference-details
.data-comparison-difference-detail= difference.DetailsA()
.data-comparison-difference-detail= difference.DetailsB()

44
pages/editor/mal.scarlet
View File

@ -1,21 +1,43 @@
.mal-comparisons
.data-comparisons
vertical
width 100%
max-width 1100px
max-width 1200px
margin 0 auto
.mal-comparison
.data-comparison
vertical
ui-element
padding 0.5rem 1rem
padding 0.5rem 0.75rem
margin 0.5rem
.comparison-difference
vertical
font-weight bold
.comparison-difference-details
.data-comparison-header
horizontal
.comparison-difference-detail
.data-comparison-image-container
margin-right 0.75rem
.data-comparison-image
anime-list-item-image
.data-comparison-titles
vertical
.data-comparison-title
line-height 1.5em
.data-comparison-differences
vertical
.data-comparison-difference
vertical
ui-element
padding 0.5rem 0.75rem
margin 0.5rem 0
.data-comparison-difference-title
font-weight bold
.data-comparison-difference-details
horizontal
.data-comparison-difference-detail
flex 1