Using stylus now
This commit is contained in:
@ -22,11 +22,11 @@ component Anime(anime *arn.Anime)
|
||||
if anime.YoutubeID != ""
|
||||
h3.anime-header Video
|
||||
.anime-trailer.video-container
|
||||
iframe.video(src="https://www.youtube.com/embed/" + anime.YoutubeID + "?showinfo=0", frameborder="0", allowfullscreen="allowfullscreen")
|
||||
iframe.video(src="https://www.youtube.com/embed/" + anime.YoutubeID + "?showinfo=0", allowfullscreen="allowfullscreen")
|
||||
|
||||
if anime.Tracks != nil && anime.Tracks.Opening != nil
|
||||
h3.anime-header Tracks
|
||||
iframe(width="100%", height="150", scrolling="no", frameborder="no", src="https://w.soundcloud.com/player/?url=" + anime.Tracks.Opening.URI + "?auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&visual=true")
|
||||
iframe.anime-track(src="https://w.soundcloud.com/player/?url=" + anime.Tracks.Opening.URI + "?auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&visual=true")
|
||||
|
||||
//- if user && friendsWatching && friendsWatching.length > 0
|
||||
//- include ../messages/avatar.pug
|
||||
@ -42,7 +42,7 @@ component Anime(anime *arn.Anime)
|
||||
each genre in anime.Genres
|
||||
if genre != ""
|
||||
a.light-button.ajax(href="/genres/" + arn.FixGenre(genre))
|
||||
Icon(GenreIcons[genre])
|
||||
Icon(arn.GenreIcons[genre])
|
||||
span= genre
|
||||
|
||||
if len(anime.Studios) > 0
|
||||
167
components/anime/anime.styl
Normal file
167
components/anime/anime.styl
Normal file
@ -0,0 +1,167 @@
|
||||
.anime-container
|
||||
float left
|
||||
width 100%
|
||||
padding 0
|
||||
text-align left
|
||||
border-radius 3px
|
||||
box-sizing border-box
|
||||
|
||||
.anime-links
|
||||
float left
|
||||
width 100%
|
||||
display flex
|
||||
flex-flow row wrap
|
||||
|
||||
.anime-links-category
|
||||
flex 1
|
||||
flex-basis 100%
|
||||
// min-width 300px
|
||||
// max-width 100%
|
||||
|
||||
.anime-title-db
|
||||
text-align left
|
||||
width auto
|
||||
|
||||
.second-title-container
|
||||
float left
|
||||
width 100%
|
||||
text-align left
|
||||
margin-top -0.6em
|
||||
margin-bottom 0.6em
|
||||
|
||||
.second-title
|
||||
font-size 0.9em
|
||||
font-weight normal
|
||||
color rgba(60, 60, 60, 0.5) !important
|
||||
|
||||
.anime-summary-header
|
||||
display block
|
||||
|
||||
.anime-summary
|
||||
flex 1
|
||||
min-width 300px
|
||||
max-width 100%
|
||||
margin-left 0
|
||||
.anime-header
|
||||
margin-top 0
|
||||
|
||||
.anime-trailer
|
||||
width 100%
|
||||
|
||||
.genre-list
|
||||
list-style-type none
|
||||
margin-left 0.5em
|
||||
|
||||
.sources
|
||||
font-size 0.8em
|
||||
opacity 0.5
|
||||
|
||||
.anime-header
|
||||
display flex
|
||||
flex-flow row
|
||||
|
||||
.anime-image
|
||||
border-radius 3px
|
||||
box-shadow 4px 4px 8px rgba(0, 0, 0, 0.12)
|
||||
filter saturate(100%)
|
||||
transition all 290ms ease
|
||||
&:hover
|
||||
filter saturate(130%)
|
||||
box-shadow 6px 6px 12px rgba(0, 0, 0, 0.2)
|
||||
|
||||
.anime-image-container
|
||||
flex-shrink 0
|
||||
text-align center
|
||||
margin-bottom 1rem
|
||||
.anime-image
|
||||
margin 0 !important
|
||||
margin-right 1.5rem !important
|
||||
width 225px
|
||||
|
||||
.anime-track
|
||||
width 100%
|
||||
height 150px
|
||||
|
||||
.info-column
|
||||
flex-grow 1
|
||||
display flex
|
||||
flex-flow column
|
||||
|
||||
.users-count
|
||||
opacity 0.5
|
||||
font-size 0.9em
|
||||
|
||||
.anime-frontpage
|
||||
h2, h3
|
||||
text-align center
|
||||
|
||||
.popular-anime-list
|
||||
width 100%
|
||||
display flex
|
||||
flex-flow row wrap
|
||||
justify-content center
|
||||
|
||||
.popular-anime
|
||||
padding 0.5em
|
||||
display block
|
||||
|
||||
.popular-anime-image
|
||||
width 100px !important
|
||||
height 141px !important
|
||||
|
||||
.light-button-group
|
||||
float left
|
||||
width 100%
|
||||
margin 0
|
||||
width auto
|
||||
display flex
|
||||
flex-flow row wrap
|
||||
justify-content flex-start
|
||||
font-size 0.9em
|
||||
|
||||
.light-button
|
||||
display inline-block
|
||||
padding 0.5em 1em
|
||||
border-radius 3px
|
||||
&:hover
|
||||
color white !important
|
||||
background-color linkHoverColor
|
||||
|
||||
.entry-error
|
||||
color red !important
|
||||
|
||||
.entry-ok
|
||||
color green !important
|
||||
|
||||
#search
|
||||
float none
|
||||
|
||||
#search-results
|
||||
width 100%
|
||||
max-width 560px
|
||||
text-align left
|
||||
margin 0 auto
|
||||
|
||||
.search-performance, .anime-count
|
||||
opacity 0.25
|
||||
text-align center !important
|
||||
|
||||
.search-result
|
||||
float left
|
||||
width 100%
|
||||
padding 0.25em 0.5em
|
||||
border-radius 3px
|
||||
box-sizing border-box
|
||||
&:focus
|
||||
background-color rgb(32, 32, 32) !important
|
||||
color rgb(232, 232, 232) !important
|
||||
|
||||
@media only screen and (max-width: 800px)
|
||||
.anime-header
|
||||
flex-flow row wrap
|
||||
|
||||
.anime-title-db
|
||||
.second-title-container
|
||||
.anime-image-container
|
||||
text-align center
|
||||
flex-grow 1
|
||||
1
components/anime/anime.ts
Normal file
1
components/anime/anime.ts
Normal file
@ -0,0 +1 @@
|
||||
console.log("Hello Typescript")
|
||||
@ -1,5 +0,0 @@
|
||||
h2
|
||||
text-align center
|
||||
|
||||
.light-button
|
||||
display inline-block
|
||||
@ -1,14 +1,14 @@
|
||||
component GenreOverview
|
||||
h2 Genres
|
||||
h2.genre-header Genres
|
||||
|
||||
div
|
||||
each genre in Genres
|
||||
each genre in arn.Genres
|
||||
a.light-button.ajax(href="/genres/" + arn.FixGenre(genre))
|
||||
Icon(GenreIcons[genre])
|
||||
Icon(arn.GenreIcons[genre])
|
||||
span= genre
|
||||
|
||||
component AnimeInGenre(genre string, animeList []*arn.Anime)
|
||||
h2= "#" + genre
|
||||
h2.genre-header= arn.Capitalize(genre)
|
||||
.genre-anime-list
|
||||
each anime in animeList
|
||||
a.genre-anime-link.ajax(href="/anime/" + s(anime.ID))
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
h2
|
||||
.genre-header
|
||||
text-align center
|
||||
|
||||
.genre-anime-list
|
||||
Reference in New Issue
Block a user