From d02fea28ea48defd9729a4d5811c4cd41627205a Mon Sep 17 00:00:00 2001
From: Matthias Mees <mm@yellowled.de>
Date: Mon, 3 Jun 2013 13:20:41 +0200
Subject: [PATCH] A more usable overlay for media files; fixed duplicate ids.

This looks about the same as @onli's solution, but more usable on
smaller and/or touch devices since it's triggered by a button which
also makes sense if JS is deactivated. Has a no-js fallback, too.
---
 templates/2k11/admin/media_items.tpl          | 56 +++++++++----------
 .../2k11/admin/serendipity_editor.js.tpl      |  6 ++
 templates/2k11/admin/style.css                | 42 ++++++--------
 3 files changed, 51 insertions(+), 53 deletions(-)

diff --git a/templates/2k11/admin/media_items.tpl b/templates/2k11/admin/media_items.tpl
index ccfda04b..c3b29cc7 100644
--- a/templates/2k11/admin/media_items.tpl
+++ b/templates/2k11/admin/media_items.tpl
@@ -69,44 +69,44 @@
                         </a>
                         {/if}
                     {/if}
+                    <footer id="media_file_meta_{$file.id}" class="media_file_meta additional_info">
+                        <ul class="plainList">
+                        {if $file.hotlink}
+                            <li>{$file.nice_hotlink}</li>
+                            <li>{$CONST.MEDIA_HOTLINKED}</li>
+                        {else}
+                            {if $file.realname != $file.diskname}
+                            <li title="{$file.diskname}">{$file.diskname|truncate:30:"&hellip;"}</li>
+                            {/if}
+                            {if $file.mime}
+                            <li><b>Mime-Type:</b> {$file.mime}</li> {* i18n *}
+                            {/if}
+                            {if $file.is_image}
+                            <li><b>{$CONST.ORIGINAL_SHORT}:</b> {$file.dimensions_width}x{$file.dimensions_height}</li>
+                            <li><b>{$CONST.THUMBNAIL_SHORT}:</b> {$file.dim.0}x{$file.dim.1}</li>
+                            {/if}
+                            <li><b>{$CONST.IMAGE_SIZE}:</b> {$file.nice_size} KB</li>
+                        {/if}
+                        </ul>
+                    </footer>
                 </div>
-
-                <footer class="media_file_meta">
-                    <ul class="plainList">
-                {if $file.hotlink}
-                        <li>{$file.nice_hotlink}</li>
-                        <li>{$CONST.MEDIA_HOTLINKED}</li>
-                {else}
-                    {if $file.realname != $file.diskname}
-                        <li title="{$file.diskname}">{$file.diskname|truncate:30:"&hellip;"}</li>
-                    {/if}
-                    {if $file.mime}
-                        <li><b>Mime-Type:</b> {$file.mime}</li> {* i18n *}
-                    {/if}
-                    {if $file.is_image}
-                        <li><b>{$CONST.ORIGINAL_SHORT}:</b> {$file.dimensions_width}x{$file.dimensions_height}</li>
-                        <li><b>{$CONST.THUMBNAIL_SHORT}:</b> {$file.dim.0}x{$file.dim.1}</li>
-                    {/if}
-                        <li><b>{$CONST.IMAGE_SIZE}:</b> {$file.nice_size} KB</li>
-                {/if}
-                    </ul>
-                </footer>
             </div>
         {if $file.is_editable}
             <ul class="media_file_actions actions plainList clearfix">
-                <li><a id="media_fullsize" class="button_link" href="#" title="{$CONST.MEDIA_FULLSIZE}" onclick="F1 = window.open('{if $file.hotlink}{$file.path}{else}{$file.full_file}{/if}', 'Zoom', 'height={$file.popupHeight},width={$file.popupWidth},top='+ (screen.height-{$file.popupHeight})/2 +',left='+ (screen.width-{$file.popupWidth})/2 +',toolbar=no,menubar=no,location=no,resize=1,resizable=1{if NOT $file.is_image},scrollbars=yes{/if}');"><span class="icon-resize-full-alt"></span><span class="visuallyhidden"> {$CONST.MEDIA_FULLSIZE}</span></a></li>
-                <li><a id="media_rename" class="button_link" href="#" title="{$CONST.MEDIA_RENAME}" onclick="rename('{$file.id}', '{$file.name|escape:javascript}')"><span class="icon-edit"></span><span class="visuallyhidden"> {$CONST.MEDIA_RENAME}</span></a></li>
+                <li><a class="media_show_info button_link" href="#media_file_meta_{$file.id}" title="Show media info"><span class="icon-info-circle"></span><span class="visuallyhidden"> Show media info</span></a></li> {* i18n *}
+                <li><a class="media_fullsize button_link" href="#" title="{$CONST.MEDIA_FULLSIZE}" onclick="F1 = window.open('{if $file.hotlink}{$file.path}{else}{$file.full_file}{/if}', 'Zoom', 'height={$file.popupHeight},width={$file.popupWidth},top='+ (screen.height-{$file.popupHeight})/2 +',left='+ (screen.width-{$file.popupWidth})/2 +',toolbar=no,menubar=no,location=no,resize=1,resizable=1{if NOT $file.is_image},scrollbars=yes{/if}');"><span class="icon-resize-full-alt"></span><span class="visuallyhidden"> {$CONST.MEDIA_FULLSIZE}</span></a></li>
+                <li><a class="media_rename button_link" href="#" title="{$CONST.MEDIA_RENAME}" onclick="rename('{$file.id}', '{$file.name|escape:javascript}')"><span class="icon-edit"></span><span class="visuallyhidden"> {$CONST.MEDIA_RENAME}</span></a></li>
             {if $file.is_image AND NOT $file.hotlink}
-                <li><a id="media_resize" class="button_link" href="#" title="{$CONST.IMAGE_RESIZE}" onclick="location.href='?serendipity[adminModule]=images&amp;serendipity[adminAction]=scaleSelect&amp;serendipity[fid]={$file.id}';"><span class="icon-resize-full"></span><span class="visuallyhidden"> {$CONST.IMAGE_RESIZE}</span></a></li>
+                <li><a class="media_resize button_link" href="#" title="{$CONST.IMAGE_RESIZE}" onclick="location.href='?serendipity[adminModule]=images&amp;serendipity[adminAction]=scaleSelect&amp;serendipity[fid]={$file.id}';"><span class="icon-resize-full"></span><span class="visuallyhidden"> {$CONST.IMAGE_RESIZE}</span></a></li>
             {/if}
             {if $file.is_image AND NOT $file.hotlink}
-                <li><a id="media_rotate_left" class="button_link" href="?serendipity[adminModule]=images&amp;serendipity[adminAction]=rotateCCW&amp;serendipity[fid]={$file.id}" title="{$CONST.IMAGE_ROTATE_LEFT}"><span class="icon-ccw"></span><span class="visuallyhidden"> {$CONST.IMAGE_ROTATE_LEFT}</span></a></li>
+                <li><a class="media_rotate_left button_link" href="?serendipity[adminModule]=images&amp;serendipity[adminAction]=rotateCCW&amp;serendipity[fid]={$file.id}" title="{$CONST.IMAGE_ROTATE_LEFT}"><span class="icon-ccw"></span><span class="visuallyhidden"> {$CONST.IMAGE_ROTATE_LEFT}</span></a></li>
             {/if}
             {if $file.is_image AND NOT $file.hotlink}
-                <li><a id="media_rotate_right" class="button_link" href="?serendipity[adminModule]=images&amp;serendipity[adminAction]=rotateCW&amp;serendipity[fid]={$file.id}" title="{$CONST.IMAGE_ROTATE_RIGHT}"><span class="icon-cw"></span><span class="visuallyhidden">{$CONST.IMAGE_ROTATE_RIGHT}</span></a></li>
+                <li><a class="media_rotate_right button_link" href="?serendipity[adminModule]=images&amp;serendipity[adminAction]=rotateCW&amp;serendipity[fid]={$file.id}" title="{$CONST.IMAGE_ROTATE_RIGHT}"><span class="icon-cw"></span><span class="visuallyhidden">{$CONST.IMAGE_ROTATE_RIGHT}</span></a></li>
             {/if}
-                <li><a id="media_prop" class="button_link" href="?serendipity[adminModule]=images&amp;serendipity[adminAction]=properties&amp;serendipity[fid]={$file.id}" title="{$CONST.MEDIA_PROP}"><span class="icon-picture"></span><span class="visuallyhidden"> {$CONST.MEDIA_PROP}</span></a></li>
-                <li><a id="media_delete" class="button_link" href="?serendipity[adminModule]=images&amp;serendipity[adminAction]=delete&amp;serendipity[fid]={$file.id}" title="{$CONST.MEDIA_DELETE}"><span class="icon-trash"></span><span class="visuallyhidden"> {$CONST.MEDIA_DELETE}</span></a></li>
+                <li><a class="media_prop button_link" href="?serendipity[adminModule]=images&amp;serendipity[adminAction]=properties&amp;serendipity[fid]={$file.id}" title="{$CONST.MEDIA_PROP}"><span class="icon-picture"></span><span class="visuallyhidden"> {$CONST.MEDIA_PROP}</span></a></li>
+                <li><a class="media_delete button_link" href="?serendipity[adminModule]=images&amp;serendipity[adminAction]=delete&amp;serendipity[fid]={$file.id}" title="{$CONST.MEDIA_DELETE}"><span class="icon-trash"></span><span class="visuallyhidden"> {$CONST.MEDIA_DELETE}</span></a></li>
             </ul>
         {/if}
         </article>
diff --git a/templates/2k11/admin/serendipity_editor.js.tpl b/templates/2k11/admin/serendipity_editor.js.tpl
index 1b8bba19..382bb728 100644
--- a/templates/2k11/admin/serendipity_editor.js.tpl
+++ b/templates/2k11/admin/serendipity_editor.js.tpl
@@ -719,6 +719,12 @@ function highlightComment(id, checkvalue) {
         addUploadField();
     });
 
+    // Show media file info
+    $('.media_show_info').click(function(e) {
+        $($(this).attr('href')).toggleClass('additional_info');
+        e.preventDefault();
+    });
+
     // Clone media library
     $('.media_pane .pagination').clone().prependTo('.media_pane');
     $('.comments_pane .pagination').clone().insertAfter('.comments_pane > h3');
diff --git a/templates/2k11/admin/style.css b/templates/2k11/admin/style.css
index ac50f7f2..2ce8bfcf 100644
--- a/templates/2k11/admin/style.css
+++ b/templates/2k11/admin/style.css
@@ -1242,9 +1242,7 @@ form > .button_link:first-of-type { margin-top: 0; }
 
 #serendipityScaleImg img { max-width: 99%; }
 
-#template_select .preview_image,
-.media_file_preview,
-.media_file > div > footer {
+#template_select .preview_image {
     float: left;
     margin: 0 1em 1em 0;
 }
@@ -1429,38 +1427,31 @@ form > .button_link:first-of-type { margin-top: 0; }
     margin: 0 2% 1em 0;
 }
 
-.media_file_wrap:hover > .media_file_meta {
-    -webkit-animation: fade-in 0.4s 1;
-    -moz-animation: fade-in 0.4s 1;
-    animation: fade-in 0.4s 1;
-    display: block;
-    opacity: 1;
+.no-js .media_file_preview img {
+    margin: 0 0 1em;
 }
 
-.media_file_meta {
-    background-color: rgba(0,0,0,.6);
+.js .media_file_preview {
+    position: relative;
+}
+
+.js .media_file_meta {
+    background: #000;
+    background: rgba(0,0,0,.6);
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     color: #fcfcfc;
-    display: none;
-    opacity: 0;
     padding: .5em 1em;
     position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
 }
 
-@-webkit-keyframes fade-in {
-    0% { opacity: 0;  }
-    100% { opacity: 1; }
-}
-@-moz-keyframes fade-in {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
-}
-
-@keyframes fade-in {
-    0% { opacity: 0;  }
-    100% { opacity: 1; }
+.js .additional_info {
+    display: none;
+    visibility: hidden;
 }
 
 input[name="serendipity[filter][fileCategory]"] {
@@ -1470,6 +1461,7 @@ input[name="serendipity[filter][fileCategory]"] {
 .media_selector {
     cursor: pointer;
 }
+
 input:checked + .media_selector {
     background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(1px, #ddd), color-stop(100%, #eee));
     background-image: -webkit-linear-gradient(#fff, #ddd 1px, #eee);