Improved AMV design & layout

This commit is contained in:
Eduard Urbach 2018-04-16 19:02:40 +02:00
parent d28d1b37db
commit ac0daaeee6
2 changed files with 50 additions and 24 deletions

View File

@ -1,33 +1,44 @@
component AMVPage(amv *arn.AMV, user *arn.User)
AMVTabs(amv, user)
.amv-page
.widget-form.amv-page
if amv.Title.String() == ""
h1.mountable untitled
h1.amv-page-title.mountable untitled
else
h1.mountable= amv.Title.ByUser(user)
h1.amv-page-title.mountable= amv.Title.ByUser(user)
if amv.File != ""
AMV(amv, user)
if amv.MainAnimeID != "" || len(amv.ExtraAnimeIDs) > 0
h3.mountable Anime
.widget
h3.widget-title.mountable Anime
if amv.MainAnimeID != ""
.amv-main-anime.mountable
AnimeGrid([]*arn.Anime{amv.MainAnime()}, user)
if amv.MainAnimeID != ""
.amv-main-anime.mountable
AnimeGrid([]*arn.Anime{amv.MainAnime()}, user)
if len(amv.ExtraAnimeIDs) > 0
.amv-extra-anime.mountable
AnimeGridSmall(amv.ExtraAnime(), user)
if len(amv.ExtraAnimeIDs) > 0
.amv-extra-anime.mountable
AnimeGridSmall(amv.ExtraAnime(), user)
if len(amv.Links) > 0
//- h3.mountable Links
.widget
h3.widget-title.mountable Links
ul.amv-links
each link in amv.Links
li.amv-link.mountable
a(href=link.URL)= link.Title
.light-button-group.amv-links
each link in amv.Links
a.light-button.amv-link.mountable(href=link.URL)
Icon("external-link")
span= link.Title
if len(amv.Tags) > 0
.widget
h3.widget-title.mountable Tags
.tags.mountable
each tag in amv.Tags
.tag.mountable= tag
component AnimeGridSmall(animes []*arn.Anime, user *arn.User)
each anime in animes

View File

@ -13,14 +13,23 @@
.amv-page
vertical
align-items center
align-items flex-start
.widget
justify-content flex-start
width 100%
.amv-page-title
width 100%
text-align center
.amv-main-anime
display flex
margin-bottom 1rem
.amv-extra-anime
horizontal-wrap
justify-content center
justify-content left
a
display block
@ -30,12 +39,10 @@
border-radius ui-element-border-radius
.amv-links
margin-top 1rem
//
.amv-link
list-style none
margin-left 0
text-align center
//
> 500px
.amvs
@ -44,5 +51,13 @@
margin-top 0
.amv
max-width 380px
max-width 200px
margin calc(content-padding / 2)
.amvs
.amv
max-width 520px
.amv-page
.amv
max-width 854px