Improved character page design

This commit is contained in:
Eduard Urbach 2018-04-24 04:16:11 +02:00
parent 07ab02fbd1
commit c7f482c525
4 changed files with 27 additions and 16 deletions

View File

@ -32,8 +32,7 @@
> 800px > 800px
.anime-header .anime-header
horizontal horizontal
padding-bottom content-padding page-header
border-bottom 1px solid rgba(0, 0, 0, 0.05)
.anime-title .anime-title
text-align left text-align left

View File

@ -37,21 +37,24 @@ component CharacterDetails(character *arn.Character, characterAnime []*arn.Anime
.character-description.mountable!= markdown.Render(character.Description) .character-description.mountable!= markdown.Render(character.Description)
h3.mountable Anime .character-main-column
if len(characterAnime) > 0
.character-section
h3.character-section-name.mountable Anime
.character-anime.mountable .character-anime.mountable
each anime in characterAnime each anime in characterAnime
a.character-anime-item.tip.mountable(href=anime.Link(), aria-label=anime.Title.ByUser(user), data-mountable-type="anime") a.character-anime-item.tip.mountable(href=anime.Link(), aria-label=anime.Title.ByUser(user), data-mountable-type="anime")
img.character-anime-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user)) img.character-anime-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))
if len(quotes) > 0 && (len(quotes) > 1 || mainQuote != quotes[0]) if len(quotes) > 0 && (len(quotes) > 1 || mainQuote != quotes[0])
h3.mountable Quotes .character-section
h3.character-section-name.mountable Quotes
.character-quotes.mountable .quotes.character-quotes.mountable
each quote in quotes each quote in quotes
if mainQuote == nil || quote.ID != mainQuote.ID if mainQuote == nil || quote.ID != mainQuote.ID
.character-quote Quote(quote, user)
Quote(quote, user)
.character-sidebar .character-sidebar
if len(character.Attributes) > 0 if len(character.Attributes) > 0

View File

@ -16,7 +16,6 @@
vertical vertical
justify-content flex-start justify-content flex-start
align-items center align-items center
margin-bottom 1rem
.character-image-large .character-image-large
width 219px width 219px
@ -50,9 +49,9 @@
anime-mini-item-image anime-mini-item-image
.character-quotes .character-quotes
vertical justify-content flex-start
.character-quote .character-quotes
footer, footer,
.quote-footer .quote-footer
display none display none
@ -64,12 +63,19 @@
.relevant-characters .relevant-characters
horizontal-wrap horizontal-wrap
.character-section
margin-top 1rem
.character-section-name
font-weight bold
> 1250px > 1250px
.character-page .character-page
horizontal horizontal
.character-header .character-header
horizontal horizontal
page-header
.character-name .character-name
text-align left text-align left

View File

@ -0,0 +1,3 @@
mixin page-header
padding-bottom content-padding
border-bottom 1px solid rgba(0, 0, 0, 0.05)