Improved episode prev/next button design

This commit is contained in:
Eduard Urbach 2018-07-07 16:18:00 +09:00
parent ccfdd36ce4
commit 9c198dc1f7
3 changed files with 16 additions and 9 deletions

View File

@ -5,18 +5,16 @@ component AnimeEpisode(anime *arn.Anime, episode *arn.AnimeEpisode, user *arn.Us
.episode-view-image-container .episode-view-image-container
if episodeIndex > 0 if episodeIndex > 0
.episode-arrow.episode-arrow-previous .episode-arrow.episode-arrow-previous
a.button.tip(href=anime.Link() + "/episode/" + strconv.Itoa(anime.Episodes().Items[episodeIndex - 1].Number), aria-label="Previous episode") a.light-button(href=anime.Link() + "/episode/" + strconv.Itoa(anime.Episodes().Items[episodeIndex - 1].Number), title="Previous episode")
Icon("chevron-left") RawIcon("chevron-left")
span= anime.Episodes().Items[episodeIndex - 1].Number
a(href=anime.Link(), title=anime.Title.ByUser(user)) a(href=anime.Link(), title=anime.Title.ByUser(user))
img.anime-cover-image.lazy(data-src=anime.ImageLink("large"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user)) img.anime-cover-image.lazy(data-src=anime.ImageLink("large"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))
if episodeIndex < len(anime.Episodes().Items) - 1 if episodeIndex < len(anime.Episodes().Items) - 1
.episode-arrow.episode-arrow-next .episode-arrow.episode-arrow-next
a.button.tip(href=anime.Link() + "/episode/" + strconv.Itoa(anime.Episodes().Items[episodeIndex + 1].Number), aria-label="Next episode") a.light-button(href=anime.Link() + "/episode/" + strconv.Itoa(anime.Episodes().Items[episodeIndex + 1].Number), title="Next episode")
Icon("chevron-right") RawIcon("chevron-right")
span= anime.Episodes().Items[episodeIndex + 1].Number
h3.episode-view-number= "Episode " + strconv.Itoa(episode.Number) h3.episode-view-number= "Episode " + strconv.Itoa(episode.Number)

View File

@ -22,9 +22,17 @@
.episode-arrow .episode-arrow
position absolute position absolute
top 50% top 50%
z-index 1
.episode-arrow-previous .episode-arrow-previous
left 0 left calc(content-padding * -1 + 3px)
.episode-arrow-next .episode-arrow-next
right calc(content-padding * -1 + 3px)
> 500px
.episode-arrow-previous
left 0
.episode-arrow-next
right 0 right 0

View File

@ -4,7 +4,8 @@
.light-button .light-button
horizontal horizontal
display inline-block justify-content center
align-items center
padding 0.5rem 1rem padding 0.5rem 1rem
border-radius ui-element-border-radius border-radius ui-element-border-radius
font-size 0.9rem font-size 0.9rem