From 4159525c25cd98933a37b97f3bc15dff87ae08a8 Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Mon, 21 Nov 2016 12:45:52 +0900
Subject: [PATCH] Fixed genre card hover

---
 pages/genres/genres.pixy   | 13 +++++++------
 pages/profile/profile.styl |  2 ++
 styles/config.styl         |  1 +
 styles/elements.styl       |  2 +-
 styles/grid.styl           | 28 ++++++++++++++++------------
 5 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/pages/genres/genres.pixy b/pages/genres/genres.pixy
index 44a716d5..c2927ced 100644
--- a/pages/genres/genres.pixy
+++ b/pages/genres/genres.pixy
@@ -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)
\ No newline at end of file
+					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")
\ No newline at end of file
diff --git a/pages/profile/profile.styl b/pages/profile/profile.styl
index accc776a..38b9e12c 100644
--- a/pages/profile/profile.styl
+++ b/pages/profile/profile.styl
@@ -14,6 +14,8 @@ profileBootDuration = 2s
 	animation-name appear
 	animation-duration transitionSpeed
 
+	overflow hidden
+
 	// &:hover
 	// 	.profile-cover
 	// 		filter brightness(28%)
diff --git a/styles/config.styl b/styles/config.styl
index 0fc1463a..757635fa 100644
--- a/styles/config.styl
+++ b/styles/config.styl
@@ -19,6 +19,7 @@ contentPaddingMobile = 1rem
 uiElement()
 	border uiBorder
 	background uiBackground
+	border-radius 3px
 	transition all transitionSpeed ease
 
 	&:hover
diff --git a/styles/elements.styl b/styles/elements.styl
index 6d593720..fbdad48c 100644
--- a/styles/elements.styl
+++ b/styles/elements.styl
@@ -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)
diff --git a/styles/grid.styl b/styles/grid.styl
index 332ca427..6fe4522e 100644
--- a/styles/grid.styl
+++ b/styles/grid.styl
@@ -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