diff --git a/media/css/seahub.css b/media/css/seahub.css index 9a58a59563..58ac185c25 100644 --- a/media/css/seahub.css +++ b/media/css/seahub.css @@ -108,7 +108,8 @@ .icon-copy:before { content: "\f0c5"; } .icon-lightbulb:before { content: "\f0eb"; } .icon-chevron-left:before { content: "\f053"; } -.icon-question-sign:before { content: "\f059"; } +.icon-chevron-right:before { content: "\f054"; } +.icon-question-sign:before { content: "\f059"; } .icon-building:before { content: "\f0f7"; } .icon-phone:before { content: "\f095"; } .icon-magic:before { content: "\f0d0"; } @@ -2670,14 +2671,43 @@ button.sf-dropdown-toggle:focus { font-family: Consolas,"Liberation Mono",Courier,monospace;/*override .ace_editor*/ min-height: 200px; } -#img-prev-next { - font-size:1.1em; - margin-bottom:5px; +#img-prev { + position:absolute; + left:15px; +} +#img-next { + position:absolute; + right:15px; +} +#img-prev, +#img-next { + top:48%; + text-decoration:none; + color: #333; + width: 50px; + height: 50px; + background: #fff; + border-radius: 100%; + line-height: 50px; } #image-view { padding:1px; background:#fff; border:1px solid #eee; + width:auto; + height:auto; + max-width:100%; + max-height:calc(100% - 4px); + font-size:0; + line-height:0; +} +.image-file-view:before { + content:' '; + display:inline-block; + vertical-align:middle; + height:100%; + font-size:0; + line-height:0; } #docu-view, #svg-view, diff --git a/seahub/templates/snippets/file_content_html.html b/seahub/templates/snippets/file_content_html.html index 565446ffef..1476eca992 100644 --- a/seahub/templates/snippets/file_content_html.html +++ b/seahub/templates/snippets/file_content_html.html @@ -4,7 +4,7 @@ content of files that can be viewed online shows here. For details please refer to 'snippets/file_content_js.html'. {% endcomment %} -
+
{% include 'snippets/file_encoding.html' %} {% if not err %} {% if filetype == 'Text' or filetype == 'Markdown' %} @@ -20,20 +20,7 @@ For details please refer to 'snippets/file_content_js.html'. {% endif %} {% if filetype == 'Image' %} - {% if img_prev or img_next %} -
- {% if img_prev %} - {% trans "prev" %} - {% endif %} - {% if img_prev and img_next %} - / - {% endif %} - {% if img_next %} - {% trans "next" %} - {% endif %} -
- {% endif %} - {{ u_filename}} + {{ u_filename}} {% endif %} {% if filetype == 'Document' or filetype == 'PDF' and not use_pdfjs %} diff --git a/seahub/templates/snippets/file_content_js.html b/seahub/templates/snippets/file_content_js.html index 32868d91ce..6dc9053150 100644 --- a/seahub/templates/snippets/file_content_js.html +++ b/seahub/templates/snippets/file_content_js.html @@ -17,45 +17,11 @@ {% endif %} {% if filetype == 'Image' %} -window.onload = function () { - var img = $('#image-view'); - var img_h = img.outerHeight(); - var file_view_h = parseInt($('#file-view').css('min-height')); - {% if img_prev or img_next %} - var prev_next_h = $('#img-prev-next').outerHeight(true); - {% else %} - var prev_next_h = 0; - {% endif %} - if (img_h < file_view_h - prev_next_h) { - img.css({'margin-top':(file_view_h - img_h - prev_next_h)/2}); - } - if (img.width() > 946) { - img.width(946); - } - img.removeClass('vh'); +function setFileViewAreaHeight() { + var $fileView = $('#file-view'); + $fileView.outerHeight($(window).height() - $fileView.offset().top); } - {% if img_prev or img_next %} - var input_focus = false; - $('input, textarea').focus(function() { - input_focus = true; - }).blur(function() { - input_focus = false; - }); - $('body').bind('keydown', function(e) { - if (!input_focus) { // so cursor move in form input element can work normally - {% if img_prev %} - if (e.keyCode == 37) { // press '<-' - location.href = $('#img-prev').attr('href'); - } - {% endif %} - {% if img_next %} - if (e.keyCode == 39) { // press '->' - location.href = $('#img-next').attr('href'); - } - {% endif %} - } - }) - {% endif %} +$(window).load(setFileViewAreaHeight).resize(setFileViewAreaHeight); {% endif %} {% if filetype == 'SVG' %} diff --git a/seahub/templates/snippets/file_view_style.html b/seahub/templates/snippets/file_view_style.html index 4da983e60e..2b02b10b77 100644 --- a/seahub/templates/snippets/file_view_style.html +++ b/seahub/templates/snippets/file_view_style.html @@ -10,7 +10,8 @@ {% if filetype == 'Image' %} {% endif %} diff --git a/seahub/templates/view_file_base.html b/seahub/templates/view_file_base.html index 90da42e8f3..005b567f42 100644 --- a/seahub/templates/view_file_base.html +++ b/seahub/templates/view_file_base.html @@ -87,7 +87,7 @@
-
+
{% if err %}
{% if err != 'invalid extension' %} diff --git a/seahub/templates/view_file_image.html b/seahub/templates/view_file_image.html index 91b623253e..1c8c757369 100644 --- a/seahub/templates/view_file_image.html +++ b/seahub/templates/view_file_image.html @@ -4,26 +4,20 @@ {% block extra_style %}{{block.super}} {% endblock %} {% block file_view %} -{% if img_prev or img_next %} -
{% if img_prev %} - {% trans "prev" %} - {% endif %} - {% if img_prev and img_next %} - / + {% endif %} {% if img_next %} - {% trans "next" %} + {% endif %} -
-{% endif %} -{{ u_filename}} +{{ u_filename}} {% endblock %} {% block extra_script %}{{ block.super }} @@ -52,22 +46,10 @@ $('body').bind('keydown', function(e) { }) {% endif %} -window.onload = function () { - var img = $('#image-view'); - var img_h = img.outerHeight(); - var file_view_h = parseInt($('#file-view').css('min-height')); - {% if img_prev or img_next %} - var prev_next_h = $('#img-prev-next').outerHeight(true); - {% else %} - var prev_next_h = 0; - {% endif %} - if (img_h < file_view_h - prev_next_h) { - img.css({'margin-top':(file_view_h - img_h - prev_next_h)/2}); - } - if (img.width() > 946) { - img.width(946); - } - img.removeClass('vh'); +function setFileViewAreaHeight() { + var $fileView = $('#file-view'); + $fileView.outerHeight($(window).height() - $fileView.offset().top); } +$(window).load(setFileViewAreaHeight).resize(setFileViewAreaHeight); {% endblock %}