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.
This commit is contained in:
Matthias Mees
parent
d1e79a7d7a
commit
d02fea28ea
@ -69,9 +69,7 @@
|
||||
</a>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<footer class="media_file_meta">
|
||||
<footer id="media_file_meta_{$file.id}" class="media_file_meta additional_info">
|
||||
<ul class="plainList">
|
||||
{if $file.hotlink}
|
||||
<li>{$file.nice_hotlink}</li>
|
||||
@ -92,21 +90,23 @@
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
</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&serendipity[adminAction]=scaleSelect&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&serendipity[adminAction]=scaleSelect&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&serendipity[adminAction]=rotateCCW&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&serendipity[adminAction]=rotateCCW&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&serendipity[adminAction]=rotateCW&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&serendipity[adminAction]=rotateCW&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&serendipity[adminAction]=properties&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&serendipity[adminAction]=delete&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&serendipity[adminAction]=properties&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&serendipity[adminAction]=delete&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>
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user