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 .grid
each genre in genres each genre in genres
a.grid-cell.backside-card.ajax(href="/genres/" + genre.ID) a.grid-cell.ajax(href="/genres/" + genre.ID)
.backside-card.ui
.grid-text.front .grid-text.front
GridIcon(arn.GetGenreIcon(genre.Name)) GridIcon(arn.GetGenreIcon(genre.Name))
span= genre.Name span= genre.Name
if len(genre.AnimeList) > 0 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) 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-name appear
animation-duration transitionSpeed animation-duration transitionSpeed
overflow hidden
// &:hover // &:hover
// .profile-cover // .profile-cover
// filter brightness(28%) // filter brightness(28%)

View File

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

View File

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

View File

@ -5,8 +5,6 @@
float none !important float none !important
.grid-cell .grid-cell
uiElement()
position relative position relative
flex-grow 0 flex-grow 0
@ -24,14 +22,8 @@
margin 0.5rem margin 0.5rem
.scale-out
&:hover
transform scale(1.02)
.backside-card
transition all transitionSpeed ease-in-out
&:hover &:hover
.backside-card
transform rotateY(180deg) transform rotateY(180deg)
.front .front
@ -41,6 +33,18 @@
// .grid-icon // .grid-icon
// transform scale(1.3) // 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
.front .front
position absolute position absolute
left 0 left 0