From c7b04841c0b742146d88c63b83f6ac4474e77e05 Mon Sep 17 00:00:00 2001
From: Connor Shea <connor.james.shea@gmail.com>
Date: Tue, 21 Jun 2016 10:24:00 -0600
Subject: [PATCH] Wrap images in divs with Banzai and limit max-height.
Add max-height to prevent images from displaying larger than the provided screen size.
Also fix a failing test and add a new one.
---
CHANGELOG | 1 +
app/assets/stylesheets/pages/help.scss | 1 +
app/assets/stylesheets/pages/issuable.scss | 1 +
app/assets/stylesheets/pages/notes.scss | 1 +
lib/banzai/filter/image_link_filter.rb | 10 +++++++++-
spec/features/atom/users_spec.rb | 2 +-
spec/lib/banzai/filter/image_link_filter_spec.rb | 5 +++++
7 files changed, 19 insertions(+), 2 deletions(-)
diff --git a/CHANGELOG b/CHANGELOG
index 4a8188ea060..b1417a33e00 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -4,6 +4,7 @@ v 8.10.0 (unreleased)
- Replace Haml with Hamlit to make view rendering faster. !3666
- Wrap code blocks on Activies and Todos page. !4783 (winniehell)
- Add Sidekiq queue duration to transaction metrics.
+ - Make images fit to the size of the viewport !4810
- Fix MR-auto-close text added to description. !4836
- Fix pagination when sorting by columns with lots of ties (like priority)
- Exclude email check from the standard health check
diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss
index 0b710ef168b..00ab42bec5c 100644
--- a/app/assets/stylesheets/pages/help.scss
+++ b/app/assets/stylesheets/pages/help.scss
@@ -63,5 +63,6 @@
border: 1px solid $table-border-gray;
padding: 5px;
margin: 5px;
+ max-height: calc(100vh - 100px);
}
}
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 21ff6ab71f0..542fa244689 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -10,6 +10,7 @@
border: 1px solid $table-border-gray;
padding: 5px;
margin: 5px;
+ max-height: calc(100vh - 100px);
}
}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index ffba3dc5bc6..ee7c98f805b 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -113,6 +113,7 @@ ul.notes {
border: 1px solid $table-border-gray;
padding: 5px;
margin: 5px 0;
+ max-height: calc(100vh - 100px);
}
}
}
diff --git a/lib/banzai/filter/image_link_filter.rb b/lib/banzai/filter/image_link_filter.rb
index ccd106860bd..8aa6f8f124a 100644
--- a/lib/banzai/filter/image_link_filter.rb
+++ b/lib/banzai/filter/image_link_filter.rb
@@ -9,6 +9,11 @@ module Banzai
def call
doc.xpath('descendant-or-self::img[not(ancestor::a)]').each do |img|
+ div = doc.document.create_element(
+ 'div',
+ class: 'image-container'
+ )
+
link = doc.document.create_element(
'a',
class: 'no-attachment-icon',
@@ -17,7 +22,10 @@ module Banzai
)
link.children = img.clone
- img.replace(link)
+
+ div.children = link
+
+ img.replace(div)
end
doc
diff --git a/spec/features/atom/users_spec.rb b/spec/features/atom/users_spec.rb
index de6aed74fb4..91704377a07 100644
--- a/spec/features/atom/users_spec.rb
+++ b/spec/features/atom/users_spec.rb
@@ -61,7 +61,7 @@ describe "User Feed", feature: true do
end
it 'should have XHTML summaries in merge request descriptions' do
- expect(body).to match /Here is the fix: <a[^>]*><img[^>]*\/><\/a>/
+ expect(body).to match /Here is the fix: <\/p><div[^>]*><a[^>]*><img[^>]*\/><\/a><\/div>/
end
end
end
diff --git a/spec/lib/banzai/filter/image_link_filter_spec.rb b/spec/lib/banzai/filter/image_link_filter_spec.rb
index dd5594750c8..a2a1ed58d1b 100644
--- a/spec/lib/banzai/filter/image_link_filter_spec.rb
+++ b/spec/lib/banzai/filter/image_link_filter_spec.rb
@@ -21,4 +21,9 @@ describe Banzai::Filter::ImageLinkFilter, lib: true do
doc = filter(image('https://i.imgur.com/DfssX9C.jpg'))
expect(doc.at_css('img')['src']).to eq doc.at_css('a')['href']
end
+
+ it 'wraps the image with a link and a div' do
+ doc = filter(image('/uploads/e90decf88d8f96fe9e1389afc2e4a91f/test.jpg'))
+ expect(doc.to_html).to include('<div class="image-container">')
+ end
end
--
GitLab