Various design improvements
This commit is contained in:
@ -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
16
pages/anime/amvs.pixy
Normal 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
2
pages/anime/amvs.scarlet
Normal file
@ -0,0 +1,2 @@
|
||||
.anime-amvs
|
||||
horizontal-wrap
|
@ -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)
|
||||
|
@ -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
|
||||
|
@ -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
|
@ -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
|
@ -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
|
@ -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)
|
@ -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")
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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%
|
||||
|
Reference in New Issue
Block a user