From 1e9c7e40d9ce8c03556d51822e3c1aacdee2d4ae Mon Sep 17 00:00:00 2001
From: YOSHIDA Hiroki <hyoshida@appirits.com>
Date: Fri, 22 Nov 2013 00:41:54 +0900
Subject: [PATCH] =?UTF-8?q?refs=20#20=20=E3=82=BF=E3=82=B0=E4=B8=80?=
 =?UTF-8?q?=E8=A6=A7:=20=E7=94=BB=E5=83=8F=E3=81=AE=E3=82=A2=E3=82=B9?=
 =?UTF-8?q?=E3=83=9A=E3=82=AF=E3=83=88=E6=AF=94=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/assets/stylesheets/tags.css.scss.erb | 41 ++++++++++++++++++------
 app/models/clip.rb                       |  4 +--
 app/models/image.rb                      | 39 ++++++++++++++++++----
 app/views/base/_tag_wall.html.slim       | 14 +++++---
 4 files changed, 75 insertions(+), 23 deletions(-)

diff --git a/app/assets/stylesheets/tags.css.scss.erb b/app/assets/stylesheets/tags.css.scss.erb
index e695e3b..cacc56d 100644
--- a/app/assets/stylesheets/tags.css.scss.erb
+++ b/app/assets/stylesheets/tags.css.scss.erb
@@ -48,38 +48,59 @@ li.group_box {
       cursor: pointer;
 
       img {
-        height: 100%;
+        max-width: none;
       }
     }
   }
 
   .sub_image_boxes {
+    $width: $group_box_width;
+    $height: $group_box_height / 3 - 1;
+
     display: inline-block;
-    width: $group_box_width;
-    height: $group_box_height / 3 - 1;
+    width: $width;
+    height: $height;
     overflow: hidden;
-    background-color: #ccc;
     border-top: 1px solid #aaa;
-    position: relative;
-    bottom: $group_box_width / 3;
+    position: absolute;
+    top: $width - $height;
 
-    a {
+    li {
       display: inline-block;
       width: $group_box_width / 3;
       height: 100%;
-      position: relative;
-      cursor: pointer;
+      overflow: hidden;
+
+      &:first-child {
+        @include border-bottom-left-radius(5px);
+      }
+
+      &:last-child {
+        @include border-bottom-right-radius(5px);
+      }
 
       &:nth-child(even) {
         width: $group_box_width / 3 - 2;
         border-left: 1px solid #aaa;
         border-right: 1px solid #aaa;
       }
+    }
+
+    a {
+      display: block;
+      width: $group_box_width / 3;
+      height: 100%;
+      cursor: pointer;
+      background-color: #fff;
 
       img {
-        width: 100%;
+        max-width: none;
         @include border-radius(0);
       }
+
+      &:hover {
+        background-color: #fff;
+      }
     }
   }
 }
diff --git a/app/models/clip.rb b/app/models/clip.rb
index 0503121..bd91388 100644
--- a/app/models/clip.rb
+++ b/app/models/clip.rb
@@ -84,9 +84,7 @@ def url
     self.image.try(:url) || @url
   end
 
-  def thumb_size_for_style_sheet
-    self.image.thumb_size_for_style_sheet
-  end
+  delegate :thumb_size_for_style_sheet, to: :image
 
   def create_html_only_images
     images = [ @url ] if @url
diff --git a/app/models/image.rb b/app/models/image.rb
index 77a38a9..bec4c8a 100644
--- a/app/models/image.rb
+++ b/app/models/image.rb
@@ -25,17 +25,44 @@ def create_thumb_cache_file
     image.write self.thumb_path
   end
 
-  def thumb_width
-    Settings.thumb_width
+  def thumb_width(size_type=nil)
+    case size_type
+    when :tag
+      return Settings.thumb_width if self.thumb_width < self.thumb_height
+      (self.width * (Settings.thumb_width / self.height.to_f)).floor
+    else
+      Settings.thumb_width
+    end
   end
 
-  def thumb_height
+  def thumb_height(size_type=nil)
     return 0 if self.width.zero? || self.height.zero? # for 下位互換
-    (self.height * (self.thumb_width / self.width.to_f)).floor
+    case size_type
+    when :tag
+      return self.thumb_height if self.thumb_width < self.thumb_height
+      Settings.thumb_width
+    else
+      (self.height * (self.thumb_width / self.width.to_f)).floor
+    end
   end
 
-  def thumb_size_for_style_sheet
+  def thumb_size_for_style_sheet(size_type=nil)
     return "width: #{self.thumb_width}px;" if self.thumb_height.zero? # for 下位互換
-    "width: #{self.thumb_width}px; height: #{self.thumb_height}px;"
+    case size_type
+    when :tag, :tag_small
+      width = self.thumb_width(:tag)
+      height = self.thumb_height(:tag)
+      box_size = Settings.thumb_width
+      if size_type == :tag_small
+        width = (width / 3.0).floor
+        height = (height / 3.0).floor
+        box_size = (box_size / 3.0).floor
+      end
+      width_offset = width - box_size
+      height_offset = height - box_size
+      "width: #{width}px; height: #{height}px; margin-left: -#{width_offset / 2}px; margin-top: -#{height_offset / 2}px;"
+    else
+      "width: #{self.thumb_width}px; height: #{self.thumb_height}px;"
+    end
   end
 end
diff --git a/app/views/base/_tag_wall.html.slim b/app/views/base/_tag_wall.html.slim
index 8fe25e6..08725b8 100644
--- a/app/views/base/_tag_wall.html.slim
+++ b/app/views/base/_tag_wall.html.slim
@@ -12,11 +12,17 @@
             | クリップ
         .image_box
           - clip = tags.shift.clip
-          = link_to image_tag(image_path(clip.image), alt: clip.title), tag_path(user_id: @user, name: tag_name)
+          = link_to image_tag(image_path(clip.image), alt: clip.title, style: clip.thumb_size_for_style_sheet(:tag)), tag_path(user_id: @user, name: tag_name)
           - if tags.size.nonzero?
-            .sub_image_boxes
-              - tags.take(3).map(&:clip).each do |clip|
-                = link_to image_tag(image_path(clip.image), alt: clip.title), tag_path(user_id: @user, name: tag_name)
+            ul.sub_image_boxes
+              - clips = tags.take(3).map(&:clip)
+              - clips += [ nil ] * 3
+              - clips.take(3).each do |clip|
+                li
+                  - if clip
+                    = link_to image_tag(image_path(clip.image), alt: clip.title, style: clip.thumb_size_for_style_sheet(:tag_small)), tag_path(user_id: @user, name: tag_name)
+                  - else
+                    = link_to '', tag_path(user_id: @user, name: tag_name)
 
   #page-nav
     = link_to 'next', page: @tags.next_page if @tags.respond_to?(:next_page) && @tags.next_page.present?