diff --git a/inc/media.php b/inc/media.php
index 1bcb6a7b241f587a9d2ece85ec53e0186702cdcd..b4b62d2c55dbff6ae7ea2e258a82c41db7eae109 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 31320c876dc50e2369b4badb9b75fe9ae2122cdd..69ed61f7e5c4ebc1aec36d8ce5b38f24a231dd69 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
new file mode 100644
index 0000000000000000000000000000000000000000..ecfeed92d9c042ff0840a30084a092c0c13013c3
Binary files /dev/null and b/lib/images/icon-list.png differ
diff --git a/lib/images/icon-sort.png b/lib/images/icon-sort.png
new file mode 100644
index 0000000000000000000000000000000000000000..c6403dd3c4bce08f7ba9487ad15fcfe7a3c04ff0
Binary files /dev/null and b/lib/images/icon-sort.png differ
diff --git a/lib/images/icon-thumb.png b/lib/images/icon-thumb.png
new file mode 100644
index 0000000000000000000000000000000000000000..ccc7a101dda21b9f9058ba933402dce3b8fdc167
Binary files /dev/null and b/lib/images/icon-thumb.png differ
diff --git a/lib/tpl/default/design.css b/lib/tpl/default/design.css
index 029a5525c4d4bd8bbf29297b4cf5c4bb88ee3071..1dee4dc690a0cbcaf5d166c5eb545fb77fc48e43 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 bf4513f0c6f97c4003e67b5ec5a5140a173440ef..25816e273710e0086e4cfba9c0b297ceb04d5c61 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;
+}