Various design improvements

This commit is contained in:
2018-04-19 15:04:25 +02:00
parent 0a83c00c78
commit fc493fc567
20 changed files with 153 additions and 61 deletions

View File

@ -2,10 +2,10 @@ const amv-large-width = 854px
.amvs
vertical
margin-top 1rem
.amv
width 100%
margin calc(content-padding / 2) 0
.video-container
box-shadow shadow-medium

16
pages/anime/amvs.pixy Normal file
View File

@ -0,0 +1,16 @@
component AnimeAMVs(anime *arn.Anime, amvs []*arn.AMV, amvAppearances []*arn.AMV, user *arn.User)
if len(amvs) > 0
section.anime-section.mountable
h3.anime-section-name AMVs
.anime-amvs
each amv in amvs
AMVMini(amv, user)
if len(amvAppearances) > 0
section.anime-section.mountable
h3.anime-section-name Appears in AMVs
.anime-amvs
each amv in amvAppearances
AMVMini(amv, user)

2
pages/anime/amvs.scarlet Normal file
View File

@ -0,0 +1,2 @@
.anime-amvs
horizontal-wrap

View File

@ -31,23 +31,6 @@ component AnimeMainColumn(anime *arn.Anime, listItem *arn.AnimeListItem, tracks
AnimeAMVs(anime, amvs, amvAppearances, user)
AnimeEpisodes(anime, episodes, user, false)
component AnimeAMVs(anime *arn.Anime, amvs []*arn.AMV, amvAppearances []*arn.AMV, user *arn.User)
if len(amvs) > 0
section.anime-section.mountable
h3.anime-section-name AMVs
.amvs
each amv in amvs
AMV(amv, user)
if len(amvAppearances) > 0
section.anime-section.mountable
h3.anime-section-name Appears in AMVs
.amvs
each amv in amvAppearances
AMV(amv, user)
component AnimeSideColumn(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User)
AnimeTrailer(anime)
AnimeInformation(anime)

View File

@ -72,10 +72,10 @@
.anime-soundtracks
vertical
margin-top 1rem
.soundtrack
flex-basis auto
.soundtrack-content
border-bottom-left-radius ui-element-border-radius !important
border-top-left-radius ui-element-border-radius !important
.soundtrack-anime-image
display none
@ -84,10 +84,10 @@
.anime-soundtracks
horizontal-wrap
justify-content flex-start
margin-top 0
.soundtrack
max-width 200px
padding 0.5rem
.soundtrack-content
min-height 112px

View File

@ -19,12 +19,6 @@
width 112px
height 112px
// .character-name
// font-size 0.75rem
// color text-color
// opacity 0.5
// transition opacity transition-speed ease
.character-image-small
width 56px
height 56px

View File

@ -1,21 +1,16 @@
const episode-margin = 0.5rem
.episodes
vertical
> 700px
.episodes
horizontal-wrap
justify-content flex-start
.episode
flex-basis 190px
horizontal-wrap
justify-content space-evenly
.episode
vertical
ui-element
button-hover
flex 0
margin 0.5rem
margin episode-margin
padding 0.5rem
flex-basis calc(50% - episode-margin * 2)
overflow hidden
color text-color
box-shadow shadow-light
@ -28,6 +23,13 @@
&.mounted
opacity 0.25 !important
> 700px
.episodes
justify-content flex-start
.episode
flex-basis 190px
.episode-number
display flex
justify-content center

View File

@ -1,10 +1,12 @@
.anime-genres
horizontal-wrap
justify-content center
margin-bottom typography-margin
.anime-genre
genre-tag
> 800px
.anime-genres
justify-content flex-start
justify-content flex-start
margin-bottom 0

View File

@ -10,4 +10,4 @@ component AnimeTracks(anime *arn.Anime, tracks []*arn.SoundTrack, user *arn.User
.soundtracks.anime-soundtracks
each track in tracks
SoundTrack(track)
SoundTrackMini(track)

View File

@ -26,7 +26,7 @@ component EditLog(entries []*arn.EditLogEntry, user *arn.User)
component EditLogScrollable(entries []*arn.EditLogEntry, user *arn.User)
each entry in entries
.edit-log-entry.mountable
.edit-log-icon(title=entry.Action)
.edit-log-icon.tip(aria-label=entry.ActionHumanReadable())
if entry.Action == "create"
.edit-log-create
RawIcon("plus")

View File

@ -23,7 +23,7 @@ component Quotes(quotes []*arn.Quote, nextIndex int, user *arn.User)
component QuotesScrollable(quotes []*arn.Quote, user *arn.User)
each quote in quotes
Quote(quote)
QuotePreview(quote)
component QuotesTabs
.tabs

View File

@ -1,3 +1,5 @@
const quote-margin = 1rem
.quotes
horizontal-wrap
justify-content space-around
@ -6,7 +8,11 @@
vertical
flex 1
flex-basis 500px
padding 1rem
margin quote-margin 0
> 500px
.quote
margin quote-margin
.quote-content
vertical
@ -14,6 +20,9 @@
border-left 5px solid quote-side-border-color !important
box-shadow shadow-light
.quote-line
// ...
.quote-character
horizontal
align-self flex-end

View File

@ -1,3 +1,5 @@
const soundtrack-margin = 1rem
.soundtracks
horizontal-wrap
justify-content space-around
@ -6,13 +8,18 @@
vertical
flex 1
flex-basis 500px
padding 1rem
margin soundtrack-margin 0
> 500px
.soundtrack
margin soundtrack-margin
.soundtrack-content
horizontal
border-radius ui-element-border-radius
box-shadow shadow-light
min-height 200px
overflow hidden
iframe
width 100%