ハートと目をアイコンフォント化

tatsumihiroki · May 22, 2013 · 6436baf · 6436baf
1 parent 5991002
commit 6436baf
Show file tree

Hide file tree

Showing 7 changed files with 1,489 additions and 63 deletions.
diff --git a/app/assets/stylesheets/fonts/typicons.css b/app/assets/stylesheets/fonts/typicons.css
diff --git a/app/assets/stylesheets/fonts/typicons.eot b/app/assets/stylesheets/fonts/typicons.eot
diff --git a/app/assets/stylesheets/fonts/typicons.svg b/app/assets/stylesheets/fonts/typicons.svg
diff --git a/app/assets/stylesheets/fonts/typicons.ttf b/app/assets/stylesheets/fonts/typicons.ttf
diff --git a/app/assets/stylesheets/fonts/typicons.woff b/app/assets/stylesheets/fonts/typicons.woff
diff --git a/app/assets/stylesheets/photos.css.scss b/app/assets/stylesheets/photos.css.scss
@@ -176,68 +176,59 @@ body{
 
 
 .piceyemenu{
-	width:90px;
-	height:22px;
-}
+	width: 100%;
+	height:28px;
 
-/**
- * pic-like menu
- */
 
-.picmenu{
-	float:left;
-	width:43px;
-	height:22px;
-	margin-bottom:8px;
-}
-.likenum{
-	color:#666;
-	width:20px;
-	height:20px;
-	float:right;
-	margin-bottom:2px;
-}
-.likephoto{
-	margin-top:4px;
-   float:left;
-   height:18px;
-   width:20px;
-	background-image: url("hert.png");
-	background-repeat: no-repeat;
-}
+	/**
+	 * pic-like menu
+	 */
 
-.disabled{
-	margin-top:4px;
-   float:left;
-   height:18px;
-   width:20px;
-	background-image: url("hertover.png");
-	background-repeat: no-repeat;
-}
-/**
- * pic-look menu
- */
-.lookmenu{
-	float:right;
-	width:46px;
-	height:22px;
-	margin-bottom:8px;
-}
-.looknum{
-	color:#666;
-	width:20px;
-	height:20px;
-	float:right;
-}
-.lookphoto{
-   margin-top:3px;
-   float:left;
-   height:16px;
-   width:22px;
-	background-image: url("eye.png");
-	background-repeat: no-repeat;
-}
+	.picmenu {
+		float: left;
+		height: 28px;
+		line-height: 28px;
+	}
+	.likephoto {
+		height: 24px;
+		width: 24px;
+		line-height: 24px;
+		color: #f3645c;
+		font-size: 1.25em;
+	}
+	.likenum{
+		color: #666;
+		height: 24px;
+		line-height: 24px;
+	}
+	.disabled {
+		height: 24px;
+		width: 24px;
+		line-height: 24px;
+		color: #3b3b3b;
+	}
 
+	/**
+	 * pic-look menu
+	 */
+	.lookmenu {
+		float: left;
+		height: 28px;
+		line-height: 28px;
+	}
+	.lookphoto {
+		height: 24px;
+		width: 24px;
+		line-height: 24px;
+		color: #f3645c;
+		font-size: 1.25em;
+	}
+	.looknum{
+		color: #666;
+		height: 24px;
+		line-height: 24px;
+	}
+}
 
 #menu h1{
 	margin-top:10px;

diff --git a/app/views/photos/index.html.erb b/app/views/photos/index.html.erb
@@ -165,12 +165,12 @@
         html += '<div class="menu">';
         html += '<div class="piceyemenu">';
         html += '<div class="picmenu">';
-        html +='<div class="likephoto" data-pos="'+image.id+'"></div>';
-        html += '<div class="likenum">'+image.like+'</div>';
+        html += '<span class="likephoto typcn" data-pos="'+image.id+'"></span>';
+        html += '<span class="likenum">'+image.like+'</span>';
         html += '</div>';
         html += '<div class="lookmenu">';
-        html +='<div class="lookphoto" data-pos="'+image.id+'"></div>';
-        html += '<div class="looknum">'+image.look+'</div>';
+        html += '<span class="lookphoto typcn" data-pos="'+image.id+'"></span>';
+        html += '<span class="looknum">'+image.look+'</span>';
         html += '</div>';
         html += '</div>';
         html += '</div>';
@@ -216,7 +216,7 @@
            clicklike(likeparams,$(this).next(),$(this))
 
 
-            $(this).attr('class','disabled');
+            $(this).addClass('disabled');
           // console.log($(this).next().text());
         })