Merge pull request #1093 from ZogStriP/soften-the-lightbox-overlay

soften the lightbox overlay

app/assets/stylesheets/application/lightbox.css.scss

@@ -2,24 +2,31 @@
 @import "foundation/mixins";
 
 .lightbox {
-  display: inline-block;
   position: relative;
-  background: black;
+  display: inline-block;
 
-  img {
+  &:hover .meta {
+    background: rgba(0, 0, 0, .5);
     opacity: 1;
-    @include transition(opacity .2s);
+    @include transition(opacity .5s);
   }
+}
+
+.meta {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  color: white;
+  background: black;
+  opacity: 0;
+  @include transition(opacity .2s);
 
   span {
-    color: white;
-    position: absolute;
-    display: none;
-    font-size: 18px;
+    float: left;
+  }
 
-    &.filename {
-      top: 0;
-      left: 0;
+  .filename {
+    margin: 5px;
     &:before {
       font-family: "FontAwesome";
       content: "\F03E";
@@ -27,31 +34,25 @@
     }
   }
 
-    &.informations {
+  .informations {
+    margin: 6px;
+    padding-right: 20px;
     color: $dark_gray;
-      top: 20px;
-      left: 0;
     font-size: 14px;
   }
 
-    &.expand {
-      top: 0;
-      right: 0;
+  .expand {
+    position: absolute;
+    bottom: 4px;
+    right: 7px;
     &:before {
       font-family: "FontAwesome";
       content: "\F065";
     }
   }
-  }
-
-  @include hover {
-    img {
-      opacity: .2;
-    }
-
-    span {
-      display: inline;
-      margin: 10px;
-    }
-  }
+}
+
+// this should be removed once all the posts have been rebaked with the new lightboxes overlays
+.lightbox > span {
+  display: none;
 }

lib/cooked_post_processor.rb

@@ -126,21 +126,28 @@ class CookedPostProcessor
 
     # not a hyperlink so we can apply
     img['src'] = upload.thumbnail_url if (upload && upload.thumbnail_url.present?)
-
+    # first, create a div to hold our lightbox
+    lightbox = Nokogiri::XML::Node.new "div", @doc
+    img.add_next_sibling lightbox
+    lightbox.add_child img
+    # then, the link to our larger image
     a = Nokogiri::XML::Node.new "a", @doc
     img.add_next_sibling(a)
     a["href"] = src
     a["class"] = "lightbox"
     a.add_child(img)
+    # then, some overlay informations
+    meta = Nokogiri::XML::Node.new "div", @doc
+    meta["class"] = "meta"
+    img.add_next_sibling meta
 
-    # some overlay informations
     filename = upload ? upload.original_filename : File.basename(src)
     informations = "#{original_width}x#{original_height}"
     informations << " | #{number_to_human_size(upload.filesize)}" if upload
 
-    a.add_child create_span_node("filename", filename)
-    a.add_child create_span_node("informations", informations)
-    a.add_child create_span_node("expand")
+    meta.add_child create_span_node("filename", filename)
+    meta.add_child create_span_node("informations", informations)
+    meta.add_child create_span_node("expand")
     # TODO: download
     # TODO: views-count
 

spec/components/cooked_post_processor_spec.rb

@@ -126,6 +126,28 @@ describe CookedPostProcessor do
       end
     end
 
+    context "with a large image" do
+
+      let(:user) { Fabricate(:user) }
+      let(:topic) { Fabricate(:topic, user: user) }
+      let(:post) { Fabricate.build(:post_with_uploads, topic: topic, user: user) }
+      let(:processor) { CookedPostProcessor.new(post) }
+
+      before do
+        FastImage.stubs(:size).returns([1000, 1000])
+        processor.post_process_images
+      end
+
+      it "generates overlay information" do
+        processor.html.should =~ /class="lightbox"/
+        processor.html.should =~ /class="meta"/
+        processor.html.should =~ /class="filename"/
+        processor.html.should =~ /class="informations"/
+        processor.html.should =~ /class="expand"/
+      end
+
+    end
+
   end
 
   context 'link convertor' do