diff --git a/pages/editor/mal.pixy b/pages/editor/mal.pixy index ac737b64..b6dee149 100644 --- a/pages/editor/mal.pixy +++ b/pages/editor/mal.pixy @@ -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)) + + .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 - each difference in comparison.Differences - .comparison-difference - div= difference.String() + .data-comparison-differences + each difference in comparison.Differences + .data-comparison-difference + .data-comparison-difference-title= difference.String() - .comparison-difference-details - .comparison-difference-detail= difference.DetailsA() - .comparison-difference-detail= difference.DetailsB() + .data-comparison-difference-details + .data-comparison-difference-detail= difference.DetailsA() + .data-comparison-difference-detail= difference.DetailsB() diff --git a/pages/editor/mal.scarlet b/pages/editor/mal.scarlet index cf41a261..b534b558 100644 --- a/pages/editor/mal.scarlet +++ b/pages/editor/mal.scarlet @@ -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 - flex 1 \ No newline at end of file +.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