Better layout/UI for media database overview.
This commit is contained in:
Matthias Mees
parent
245a8050db
commit
b310936e45
@ -10,52 +10,54 @@
|
||||
{/if}
|
||||
</div>
|
||||
{else}
|
||||
<article class="media_file">
|
||||
<article class="media_file {cycle values="odd,even"}">
|
||||
<header>
|
||||
<div class="form_check">
|
||||
<input id="multidelete_image{$file.id}" name="serendipity[multiDelete][]" type="checkbox" value="{$file.id}"><label for="multidelete_image{$file.id}" class="visuallyhidden">Select for multidelete</label> {* i18n *}
|
||||
</div>
|
||||
<h3>{$file.realname}{if $file.orderkey != ''}: {$file.orderkey|@escape}{/if}</h3>
|
||||
{if $file.authorid != 0}<span class="author">{$file.authorname}</span>{/if}
|
||||
{if $file.authorid != 0}<span class="author block_level">{$file.authorname}</span>{/if}
|
||||
</header>
|
||||
|
||||
<div class="media_file_preview">
|
||||
{$file.preview}
|
||||
<div class="clearfix">
|
||||
<div class="media_file_preview">
|
||||
{$file.preview}
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<ul class="media_file_meta plainList">
|
||||
{if $file.hotlink}
|
||||
<li>{$file.nice_hotlink}</li>
|
||||
{else}
|
||||
{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>{$file.nice_size} KB</li>
|
||||
{if $file.realname != $file.diskname}
|
||||
<li>{$file.diskname}</li>
|
||||
{/if}
|
||||
{/if}
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
{if $file.is_editable}
|
||||
<ul class="media_file_actions plainList">
|
||||
<li><a id="media_fullsize" class="icon_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="icon_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>
|
||||
<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>
|
||||
{if $file.is_image AND NOT $file.hotlink}
|
||||
<li><a id="media_resize" class="icon_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 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>
|
||||
{/if}
|
||||
{if $file.is_image AND NOT $file.hotlink}
|
||||
<li><a id="media_rotate_left" class="icon_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 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>
|
||||
{/if}
|
||||
{if $file.is_image AND NOT $file.hotlink}
|
||||
<li><a id="media_rotate_right" class="icon_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 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>
|
||||
{/if}
|
||||
<li><a id="media_prop" class="icon_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="icon_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><div class="form_check">
|
||||
<input id="multidelete_image{$file.id}" name="serendipity[multiDelete][]" type="checkbox" value="{$file.id}"><label for="multidelete_image{$file.id}" class="visuallyhidden">Select for multidelete</label> {* i18n *}
|
||||
</div>
|
||||
</li>
|
||||
<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>
|
||||
</ul>
|
||||
{/if}
|
||||
<footer>
|
||||
<ul class="media_file_meta plainList">
|
||||
{if $file.hotlink}
|
||||
<li>{$file.nice_hotlink}</li>
|
||||
{else}
|
||||
{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>{$file.nice_size} KB</li>
|
||||
{if $file.realname != $file.diskname}
|
||||
<li>{$file.diskname}</li>
|
||||
{/if}
|
||||
{/if}
|
||||
</ul>
|
||||
</footer>
|
||||
</article>
|
||||
{/if}
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<fieldset>
|
||||
<legend><span>{$CONST.FILTERS}</span></legend>
|
||||
|
||||
<a id="toggle_filters" class="icon_link" href="#" title="{$CONST.FILTERS}" onclick="showFilters(); return false"><span class="icon-filter"></span><span class="visuallyhidden"> {$CONST.FILTERS}</span></a>
|
||||
<a id="toggle_filters" class="button_link icon_link" href="#" title="{$CONST.FILTERS}" onclick="showFilters(); return false"><span class="icon-filter"></span><span class="visuallyhidden"> {$CONST.FILTERS}</span></a>
|
||||
|
||||
<div id="media_filter" class="clearfix">
|
||||
<div id="media_filter_path" class="form_select">
|
||||
@ -131,7 +131,9 @@
|
||||
{if $media.show_upload}
|
||||
<input type="button" value="{$CONST.ADD_MEDIA|@escape}" onclick="location.href='{$media.url}&serendipity[adminAction]=addSelect&serendipity[only_path]={$media.only_path|escape:url}'; return false">
|
||||
{/if}
|
||||
<input name="go" type="submit" value="{$CONST.GO}">
|
||||
<div class="form_buttons">
|
||||
<input name="go" type="submit" value="{$CONST.GO}">
|
||||
</div>
|
||||
</form>
|
||||
{if $media.nr_files < 1}
|
||||
<span class="msg_notice"><span class="icon-info-circle"></span> {$CONST.NO_IMAGES_FOUND}</span>
|
||||
|
||||
@ -451,7 +451,9 @@ form > a,
|
||||
#filter_entries .form_field label,
|
||||
#serendipity_category label,
|
||||
.pluginmanager_plugin .form_check,
|
||||
.pluginmanager_plugin h5 {
|
||||
.pluginmanager_plugin h5,
|
||||
.media_file .form_check,
|
||||
.media_file h3 {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
@ -855,10 +857,9 @@ summary { cursor: pointer; }
|
||||
#serendipity_comments_list .form_check { margin: 1.35em 0; }
|
||||
|
||||
.comment_data,
|
||||
.configuration_group h3 {
|
||||
clear: both;
|
||||
margin-top: 0;
|
||||
}
|
||||
.configuration_group h3 { margin-top: 0; }
|
||||
|
||||
.comment_data { clear: both; }
|
||||
|
||||
.comment_data dt,
|
||||
.comment_data dd,
|
||||
@ -872,9 +873,9 @@ summary { cursor: pointer; }
|
||||
.comment_summary, .comment_full,
|
||||
.serendipity_commentDirection { clear: both; }
|
||||
|
||||
#template_select article {
|
||||
#template_select article,
|
||||
.media_file {
|
||||
background: #eee;
|
||||
border: 1px solid #ddd;
|
||||
margin: 0 0 1em;
|
||||
padding: 0 .5em 1em;
|
||||
-webkit-box-sizing: border-box;
|
||||
@ -882,6 +883,17 @@ summary { cursor: pointer; }
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#template_select article,
|
||||
.media_file,
|
||||
.media_file_preview img { border: 1px solid #ddd; }
|
||||
|
||||
.media_file_preview {
|
||||
float: left;
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
.media_file .actions { margin-bottom: 0; }
|
||||
|
||||
#template_select .preview_image {
|
||||
float: left;
|
||||
margin: 0 1em 1em 0;
|
||||
@ -895,7 +907,8 @@ summary { cursor: pointer; }
|
||||
|
||||
.template_info,
|
||||
.template_info dl,
|
||||
fieldset p { margin: 0; }
|
||||
fieldset p,
|
||||
.media_file_meta { margin: 0; }
|
||||
|
||||
.actions li { margin: 0 .4em 0 0; }
|
||||
|
||||
@ -1020,7 +1033,15 @@ fieldset p { margin: 0; }
|
||||
.pluginmanager_configure { right: 5px; }
|
||||
|
||||
.pluginmanager_plugin .form_check,
|
||||
.pluginmanager_plugin h5 { margin: 0 0 1em; }
|
||||
.pluginmanager_plugin h5,
|
||||
.media_file .form_check { margin: 0 0 1em; }
|
||||
|
||||
.media_file h3 { margin: .5em 0 1em; }
|
||||
|
||||
.media_file .form_check input {
|
||||
position: relative;
|
||||
top: .125em;
|
||||
}
|
||||
|
||||
/* Media db – might go into imgedit.css in the end */
|
||||
#fs_crop { min-height: 200px; }
|
||||
@ -1069,13 +1090,15 @@ fieldset p { margin: 0; }
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
#template_select article {
|
||||
#template_select article,
|
||||
.media_file {
|
||||
float: left;
|
||||
margin: 0 2% 1em 0;
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
#template_select .odd { clear: left; }
|
||||
#template_select .odd,
|
||||
.media_pane .odd { clear: left; }
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user