diff options
| -rw-r--r-- | inc/media.php | 45 | ||||
| -rw-r--r-- | inc/template.php | 2 | ||||
| -rw-r--r-- | lib/images/icon-list.png | bin | 0 -> 3342 bytes | |||
| -rw-r--r-- | lib/images/icon-sort.png | bin | 0 -> 316 bytes | |||
| -rw-r--r-- | lib/images/icon-thumb.png | bin | 0 -> 969 bytes | |||
| -rw-r--r-- | lib/tpl/default/design.css | 2 | ||||
| -rw-r--r-- | lib/tpl/default/mediamanager.css | 110 |
7 files changed, 91 insertions, 68 deletions
diff --git a/inc/media.php b/inc/media.php index 1bcb6a7b2..b4b62d2c5 100644 --- a/inc/media.php +++ b/inc/media.php @@ -546,7 +546,7 @@ function media_tabs_files($selected=false){ $tab .= ' class="'.$class.'" >'.$lang['media_searchtab'].'</a>'; echo $tab; - echo '<div class="mediamanager-clear"> </div>'; + echo '<div class="clearer"></div>'; echo '</div>'; } @@ -581,7 +581,7 @@ function media_tabs_details($selected=false){ $tab .= ' class="'.$class.'" >'.$lang['media_historytab'].'</a>'; echo $tab; - echo '<div class="mediamanager-clear"> </div>'; + echo '<div class="clearer"></div>'; echo '</div>'; } @@ -606,7 +606,7 @@ function media_tab_files_options(){ echo '<div class="mediamanager-block-sort">'.$lang['media_sort']; //select echo '</div>'; - echo '<div class="mediamanager-clear"> </div>'; + echo '<div class="clearer"></div>'; echo '</div>'; } @@ -628,13 +628,12 @@ function media_tab_files($ns,$auth=null,$jump='') { echo '<div class="nothing">'.$lang['nothingfound'].'</div>'.NL; }else{ if ($view == 'list') { - echo '<div class="mediamanager-files-list-tab">'; - echo '</div>'; + echo '<ul class="mediamanager-file-list mediamanager-list" id="id-mediamanager-file-list">'; } else { - echo '<div class="mediamanager-files-thumbnails-tab">'; - media_filelist($ns,$auth,$jump,'thumbs'); - echo '</div>'; + echo '<ul class="mediamanager-file-list mediamanager-thumbs" id="id-mediamanager-file-list">'; } + media_filelist($ns,$auth,$jump,'thumbs'); + echo '</ul>'; } echo '</div>'; echo '</div>'; @@ -1044,24 +1043,24 @@ function media_printfile_thumbs($item,$auth,$jump){ // Prepare filename $file = utf8_decodeFN($item['file']); - // Prepare info - $info = ''; + // output + echo '<li><div>'; + if($item['isimg']) media_printimgdetail($item, true); + echo '<a href="'.media_managerURL(array('image' => hsc($item['id']))).'" name= + "h_:'.$item['id'].'" class="info" >'.hsc($file).'</a>'; if($item['isimg']){ + $info = ''; $info .= (int) $item['meta']->getField('File.Width'); $info .= '×'; $info .= (int) $item['meta']->getField('File.Height'); - $info .= '<br/>'; - } - $info .= '<i>'.dformat($item['mtime']).'</i><br/>'; - $info .= filesize_h($item['size']); - - // output - echo '<div class="float-image" >'; - if($item['isimg']) media_printimgdetail($item, true); - echo '<br/><a href="'.media_managerURL(array('image' => hsc($item['id']))).'" name= - "h_:'.$item['id'].'" >'.hsc($file).'</a><br/>'; - echo '<span>'.$info.'</span><br/>'; - echo '</div>'.NL; + echo '<span class="info">'.$info.'</span>'; + } + $info = '<i>'.dformat($item['mtime']).'</i>'; + echo '<span class="info">'.$info.'</span>'; + $info = filesize_h($item['size']); + echo '<span class="info">'.$info.'</span>'; + echo '<div class="clearer"></div>'; + echo '</div></li>'.NL; } /** @@ -1088,7 +1087,7 @@ function media_printimgdetail($item, $fullscreen=false){ // output if ($fullscreen) { - echo '<a name="d_:'.$item['id'].'" href="'. + echo '<a name="d_:'.$item['id'].'" class="image" href="'. media_managerURL(array('image' => hsc($item['id']))).'">'; echo '<img src="'.$src.'" '.$att.' />'; echo '</a>'; diff --git a/inc/template.php b/inc/template.php index 31320c876..69ed61f7e 100644 --- a/inc/template.php +++ b/inc/template.php @@ -1441,7 +1441,7 @@ function tpl_media() { echo '<div id="id-mediamanager-layout-detail" class="layout" style="width: 30%;">'; tpl_fileDetails(); echo '</div>'; - echo '<div class="mediamanager-clear"> </div>'; + echo '<div class="clearer"></div>'; echo '</div>'; echo '</div>'; } diff --git a/lib/images/icon-list.png b/lib/images/icon-list.png Binary files differnew file mode 100644 index 000000000..ecfeed92d --- /dev/null +++ b/lib/images/icon-list.png diff --git a/lib/images/icon-sort.png b/lib/images/icon-sort.png Binary files differnew file mode 100644 index 000000000..c6403dd3c --- /dev/null +++ b/lib/images/icon-sort.png diff --git a/lib/images/icon-thumb.png b/lib/images/icon-thumb.png Binary files differnew file mode 100644 index 000000000..ccc7a101d --- /dev/null +++ b/lib/images/icon-thumb.png diff --git a/lib/tpl/default/design.css b/lib/tpl/default/design.css index 029a5525c..1dee4dc69 100644 --- a/lib/tpl/default/design.css +++ b/lib/tpl/default/design.css @@ -249,7 +249,7 @@ div.dokuwiki div.pagenav-next { /* ----------- type of recent changes ------------- */ div.dokuwiki div.changestypenav { - border-bottom: 1px solid #8CACBB; + border-bottom: 1px solid __border__; padding-bottom: 10px; margin-bottom: 10px; } diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css index bf4513f0c..25816e273 100644 --- a/lib/tpl/default/mediamanager.css +++ b/lib/tpl/default/mediamanager.css @@ -1,18 +1,3 @@ -.float-image { - float: left; - margin-right: 10px; - margin-bottom: 10px; - width: 100px; - height: 180px; - background-color: #DEE7EC; - padding: 10px; - text-align: center; -} - -.float-image:hover { - background-color: #dadada; -} - /* --- Tree formatting --- */ #media-menu img { @@ -55,35 +40,36 @@ overflow-x: hidden; padding: 0; margin: 0; + text-align: left; } .background-container { - background-color: #DEE7EC; + background-color: __background_alt__; margin-bottom: 10px; padding: 10px; text-align: left; } .mediamanager-link-thumbnails { - background: url('icon-thumb.png') 0 -4px no-repeat; + background: url('/lib/images/icon-thumb.png') 0 -4px no-repeat; padding-left: 30px; display: block; float: left; - /*width: 0;*/ - /*overflow: hidden;*/ + width: 0; + overflow: hidden; } .mediamanager-link-list { - background: url('icon-list.png') 0 -4px no-repeat; + background: url('/lib/images/icon-list.png') 0 -4px no-repeat; padding-left: 30px; display: block; float: left; - /*width: 0;*/ - /*overflow: hidden;*/ + width: 0; + overflow: hidden; } .mediamanager-block-sort { - background: url('icon-sort.png') 0 -4px no-repeat; + background: url('/lib/images/icon-sort.png') 0 -4px no-repeat; padding-left: 30px; display: block; float: right; @@ -95,22 +81,6 @@ margin-right: 10px; } -.mediamanager-clear { - clear: both; - line-height: 0; - font-size: 0; -} - -.mediamanager-link-upload { - background: url('icon-upload.png') 0 -4px no-repeat; - padding-left: 30px; -} - -.mediamanager-link-search { - background: url('icon-search.png') 0 -4px no-repeat; - padding-left: 30px; -} - .mediamanager-tabs a { font-weight: bold; display: block; @@ -130,11 +100,11 @@ } .mediamanager-tabs .selected { - background-color: #DEE7EC; + background-color: __background_alt__; } .mediamanager-tabs a:hover { - background-color: #DEE7EC; + background-color: __background_alt__; opacity: 0.5; } @@ -143,7 +113,7 @@ } .mediamanager-table tr:nth-child(2n+1){ - background-color: #f5f5f5; + background-color: __background_neu__; } .mediamanager-table { @@ -151,7 +121,7 @@ } .mediamanager-table tr:hover { - background-color: #DEE7EC; + background-color: __background_alt__; } form.meta textarea.edit { @@ -160,3 +130,57 @@ form.meta textarea.edit { min-width: 95%; max-width: 95%; } + +.mediamanager-file-list { + padding: 0; + margin: 0 !important; +} + +.mediamanager-thumbs li { + width: 100px; + min-height: 130px; + display: inline-block; + margin: 0; + margin-right: 10px; + margin-bottom: 10px; + background-color: __background_alt__; + padding: 10px; + vertical-align: top; + display: -moz-inline-stack; + text-align: center; +} + +.mediamanager-thumbs li .info { + display: block; +} + +.mediamanager-list li { + display: block; + margin-bottom: 3px; +} + +.mediamanager-list li:nth-child(2n+1) { + background-color: __background_neu__; +} + +.mediamanager-list li .image { + width: 50px; + height: 50px; + overflow: hidden; + float: left; +} + +.mediamanager-list li .image img { + width: 100%; +} + +.mediamanager-list li .info { + overflow: hidden; + float: left; + margin-left: 5px; + width: 20%; +} + +.mediamanager-file-list li:hover { + background-color: #dadada; +} |
