Let pagination always be visible (#29395).

Patch by Felix Gliesche.


git-svn-id: http://svn.redmine.org/redmine/trunk@17570 e93f8b46-1217-0410-a6f0-8f06a7374b81

app/views/layouts/_file.html.erb

@@ -10,7 +10,9 @@
 <p><%= "#{@attachment.description} - " unless @attachment.description.blank? %>
    <span class="author"><%= link_to_user(@attachment.author) %>, <%= format_time(@attachment.created_on) %></span></p>
 </div>
-<%= yield %>
+<div class="filecontent-container">
+  <%= yield %>
+</div>
 
 <span class="pagination filepreview">
   <%= render_pagination %>

public/javascripts/application.js

@@ -904,9 +904,29 @@ $(function ($) {
   }).change();
 });
 
+function setFilecontentContainerHeight() {
+  var $filecontainer = $('.filecontent-container');
+  var fileTypeSelectors = ['.image', 'video'];
+  
+  if($filecontainer.length > 0 && $filecontainer.find(fileTypeSelectors.join(',')).length === 1) {
+    var containerOffsetTop = $filecontainer.offset().top;
+    var containerMarginBottom = parseInt($filecontainer.css('marginBottom'));
+    var paginationHeight = $filecontainer.next('.pagination').height();
+    var diff = containerOffsetTop + containerMarginBottom + paginationHeight;
+
+    $filecontainer.css('height', 'calc(100vh - ' + diff + 'px)')
+  }
+}
+
+function setupAttachmentDetail() {
+  setFilecontentContainerHeight();
+  $(window).resize(setFilecontentContainerHeight);
+}
+
 $(document).ready(setupAjaxIndicator);
 $(document).ready(hideOnLoad);
 $(document).ready(addFormObserversForDoubleSubmit);
 $(document).ready(defaultFocus);
+$(document).ready(setupAttachmentDetail);
 $(document).ready(setupTabs);
 $(document).ready(setupFilePreviewNavigation);

public/stylesheets/application.css

@@ -1507,3 +1507,14 @@ img.filecontent.image {background-image: url(../images/transparent.png);}
 img {
   image-orientation: from-image;
 }
+
+.filecontent-container {
+  position: relative;
+  margin-bottom: 20px;
+  min-height: 200px;
+}
+.filecontent-container > .filecontent {
+  position: absolute;
+  max-height: 100%;
+  max-width: 100%;
+}