Started working on new episodes

This commit is contained in:
Eduard Urbach 2017-12-04 15:32:59 +01:00
parent 35d4849932
commit 8556714228
3 changed files with 79 additions and 38 deletions

View File

@ -1,19 +1,40 @@
.episodes
max-width 100%
vertical
> 700px
.episodes
horizontal-wrap
.episode
horizontal
ui-element
vertical
button-hover
flex 0
flex-basis 150px
margin 0.5rem
padding 0.5rem
// :hover
// background-color table-row-hover-background
.episode-number
flex-basis 3.2rem
// text-align right
display flex
justify-content center
align-items center
font-size 2rem
line-height 1.7em
.episode-title
flex 1
text-align center
font-size 0.7rem
opacity 0.8
clip-long-text
.episode-airing-date-start
flex-basis 150px
text-align right
display flex
justify-content center
font-size 0.8rem
opacity 0.6
< 800px
.episode-airing-date-start

View File

@ -2,26 +2,43 @@ component AnimeEpisodes(episodes []*arn.AnimeEpisode, user *arn.User)
if len(episodes) > 0
.anime-section.mountable
h3.anime-section-name Episodes
table.episodes
tbody
.episodes
each episode in episodes
tr.episode.mountable(data-mountable-type="episode")
td.episode-number
.episode.mountable(data-mountable-type="episode")
.episode-number
if episode.Number != -1
span= episode.Number
td.episode-title
if episode.Title.Japanese != ""
Japanese(episode.Title.Japanese)
else
span -
if user != nil && user.Location.CountryName != "Japan"
td.episode-actions
for name, link := range episode.Links
a(href=link, target="_blank", rel="noopener", title="Watch episode " + toString(episode.Number) + " on " + name)
RawIcon("eye")
//- a(href="https://translate.google.com/#ja/en/" + episode.Title.Japanese, target="_blank", rel="noopener")
//- RawIcon("google")
.episode-title= episode.Title.Japanese
//- if episode.Title.Japanese != ""
//- Japanese(episode.Title.Japanese)
//- else
//- span -
if validator.IsValidDate(episode.AiringDate.Start)
td.episode-airing-date-start.utc-airing-date(data-start-date=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
else
td.episode-airing-date-start
.episode-airing-date-start.utc-airing-date(data-start-date=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
//- table.episodes
//- tbody
//- each episode in episodes
//- tr.episode.mountable(data-mountable-type="episode")
//- td.episode-number
//- if episode.Number != -1
//- span= episode.Number
//- td.episode-title
//- if episode.Title.Japanese != ""
//- Japanese(episode.Title.Japanese)
//- else
//- span -
//- if user != nil && user.Location.CountryName != "Japan"
//- td.episode-actions
//- for name, link := range episode.Links
//- a(href=link, target="_blank", rel="noopener", title="Watch episode " + toString(episode.Number) + " on " + name)
//- RawIcon("eye")
//- //- a(href="https://translate.google.com/#ja/en/" + episode.Title.Japanese, target="_blank", rel="noopener")
//- //- RawIcon("google")
//- if validator.IsValidDate(episode.AiringDate.Start)
//- td.episode-airing-date-start.utc-airing-date(data-start-date=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
//- else
//- td.episode-airing-date-start

View File

@ -4,6 +4,16 @@ mixin input-focus
// TODO: Replace with alpha(main-color, 20%) function
box-shadow 0 0 6px rgba(248, 165, 130, 0.2) !important
mixin button-hover
:hover,
&.active
cursor pointer
color button-hover-color
background button-hover-background
:active
transform translateY(3px)
input, textarea, button, .button, select
ui-element
font-family inherit
@ -34,14 +44,7 @@ button, .button
color link-color
align-items center
:hover,
&.active
cursor pointer
color button-hover-color
background button-hover-background
:active
transform translateY(3px)
button-hover
select
appearance none