Fixed genre card hover

This commit is contained in:
Eduard Urbach 2016-11-21 12:45:52 +09:00
parent 7907a0f775
commit 4159525c25
5 changed files with 27 additions and 19 deletions

View File

@ -3,10 +3,11 @@ component Genres(genres []*arn.Genre)
.grid
each genre in genres
a.grid-cell.backside-card.ajax(href="/genres/" + genre.ID)
.grid-text.front
GridIcon(arn.GetGenreIcon(genre.Name))
span= genre.Name
a.grid-cell.ajax(href="/genres/" + genre.ID)
.backside-card.ui
.grid-text.front
GridIcon(arn.GetGenreIcon(genre.Name))
span= genre.Name
if len(genre.AnimeList) > 0
img.grid-image.back(src=genre.AnimeList[0].Image, alt=genre.AnimeList[0].Title.Romaji, title=genre.AnimeList[0].Title.Romaji)
if len(genre.AnimeList) > 0
img.grid-image.back(src=genre.AnimeList[0].Image, alt=genre.AnimeList[0].Title.Romaji, title=genre.AnimeList[0].Title.Romaji + "\n" + genre.Name + " #1")

View File

@ -14,6 +14,8 @@ profileBootDuration = 2s
animation-name appear
animation-duration transitionSpeed
overflow hidden
// &:hover
// .profile-cover
// filter brightness(28%)

View File

@ -19,6 +19,7 @@ contentPaddingMobile = 1rem
uiElement()
border uiBorder
background uiBackground
border-radius 3px
transition all transitionSpeed ease
&:hover

View File

@ -37,7 +37,7 @@ iframe
pre
border 1px solid rgb(128, 128, 128)
padding 1em
width calc(100% - 2em)
width 100%
box-shadow 1px 1px 16px rgba(0, 0, 0, 0.6)
color rgb(224, 224, 224)
background-color rgb(32, 32, 32)

View File

@ -5,8 +5,6 @@
float none !important
.grid-cell
uiElement()
position relative
flex-grow 0
@ -24,23 +22,29 @@
margin 0.5rem
&:hover
.backside-card
transform rotateY(180deg)
.front
opacity 0
.back
opacity 1
// .grid-icon
// transform scale(1.3)
.ui
uiElement()
.scale-out
&:hover
transform scale(1.02)
.backside-card
width 100%
height 100%
transition all transitionSpeed ease-in-out
&:hover
transform rotateY(180deg)
.front
opacity 0
.back
opacity 1
// .grid-icon
// transform scale(1.3)
.front
position absolute
left 0