Modified the way file images are displayed. Modified styles to work b…

…etter across multiple browsers
baoang · Nov 29, 2010 · 3d0a99b · 3d0a99b
1 parent a7fe932
commit 3d0a99b
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 94 deletions.
diff --git a/index.php b/index.php
@@ -23,7 +23,8 @@
     <ul id="directoryListing">
     <?php $x = 1; foreach($lister->listDirectory() as $name => $fileInfo): ?>
         <li class="<?php echo $x %2 == 0 ? 'even' : 'odd'; ?>">
-            <a href="<?php if($fileInfo['file_type'] == 'directory' || 'back') { echo '?dir=' . $fileInfo['file_path']; } else { echo $fileInfo['file_path']; } ?>" class="clearfix <?php echo $fileInfo['file_type']; ?>">
+            <a href="<?php if(is_dir($fileInfo['file_path'])) { echo '?dir=' . $fileInfo['file_path']; } else { echo $fileInfo['file_path']; } ?>" class="clearfix">
+                <img src="resources/images/icons/<?php echo $fileInfo['file_icon']; ?>" class="fileIcon">
                 <span class="fileName"><?php echo $name; ?></span>
                 <span class="fileSize"><?php echo $fileInfo['file_size']; ?></span>
                 <span class="fileModTime"><?php echo $fileInfo['mod_time']; ?></span>
@@ -36,7 +37,7 @@
 
 <div id="footer" class="clearfix">
     <div class="left"><a href="home">Home</a> &raquo; dir &raquo; another_dir</div>
-    <div id="right"></div>
+    <div class="right">Powered by, <a href="http://www.directorylister.com">Directory Lister</a></div>
 </div>
 
 <pre>

diff --git a/resources/DirectoryLister.php b/resources/DirectoryLister.php
@@ -78,16 +78,16 @@ public function listDirectory($directory = NULL) {
 
                     // Get file type
                     if (is_dir($realPath)) {
-                        $fileType = 'directory';
+                        $fileIcon = 'folder.png';
                     } else {
 
                         // Get file extension
                         $fileExt = pathinfo($realPath, PATHINFO_EXTENSION);
 
                         if (isset($this->_settings['file_types'][$fileExt])) {
-                            $fileType = $this->_settings['file_types'][$fileExt];
+                            $fileIcon = $this->_settings['file_types'][$fileExt];
                         } else {
-                            $fileType = 'unknown';
+                            $fileIcon = 'blank.png';
                         }
                     }
 
@@ -104,17 +104,17 @@ public function listDirectory($directory = NULL) {
                             'file_path' => $directoryPath,
                             'file_size' => '-',
                             'mod_time'  => date("Y-m-d H:i:s", filemtime($realPath)),
-                            'file_type' => 'back'
+                            'file_icon' => 'back.png'
                         );
 
                     } else {
 
                         // Add file info to the array
                         $directoryArray[pathinfo($realPath, PATHINFO_BASENAME)] = array(
                             'file_path' => $relativePath,
-                            'file_size' => $fileType == 'directory' ? '-' : round(filesize($realPath) / 1024) . 'KB',
+                            'file_size' => is_dir($realPath) ? '-' : round(filesize($realPath) / 1024) . 'KB',
                             'mod_time'  => date("Y-m-d H:i:s", filemtime($realPath)),
-                            'file_type' => $fileType
+                            'file_icon' => $fileIcon
                         );
 
                     }

diff --git a/resources/css/directorylister.css b/resources/css/directorylister.css
@@ -9,7 +9,7 @@ html {
 body {
 	color: #333;
 	background: #FFF url(../images/bg.png) repeat top left;
-	font-family: sans-serif, serif, helvetica;
+	font-family: arial, sans-serif, serif, helvetica;
 	font-size: .8em;
 }
 
@@ -27,28 +27,24 @@ body {
 }
 
 #header .fileName {
-    width: 510px;
-}
-
-.fileName {
-    float: left;
+    display: inline-block;
     margin: 3px;
     overflow: none;
-    width: 490px;
+    width: 501px;
 }
 
-.fileSize {
-    float: left;
+#header .fileSize {
+    display: inline-block;
     margin: 3px;
     text-align: right;
     width: 100px;
 }
 
-.fileModTime {
+#header .fileModTime {
+    display: inline-block;
     float: right;
     margin: 3px;
     text-align: right;
-    width: 130px;
 }
 
 #directoryListing {
@@ -70,11 +66,9 @@ body {
 }*/
 
 #directoryListing li a {
-    background: transparent url(../images/icons/blank.png) no-repeat 3px center;
     border-top: 1px solid #555;
     color: #333;
     display: block;
-    padding-left: 20px;
     text-decoration: none;
 }
 
@@ -89,20 +83,41 @@ body {
     outline: none;
 }
 
-#directoryListing li a.back {
-    background-image: url(../images/icons/back.png);
+#directoryListing .fileIcon {
+    display: inline-block;
+    float: left;
+    margin: 3px;
+    margin-right: -19px;
+    width: 16px;
 }
 
-#directoryListing li a.directory {
-    background-image: url(../images/icons/folder.png);
+#directoryListing .fileName {
+    display: inline-block;
+    float: left;
+    margin: 3px;
+    margin-left: 22px;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 485px;
 }
 
-#directoryListing li a.code {
-    background-image: url(../images/icons/code.png);
+#directoryListing .fileSize {
+    display: inline-block;
+    float: left;
+    margin: 3px;
+    overflow: hidden;
+    text-align: right;
+    white-space: nowrap;
+    width: 100px;
 }
 
-#directoryListing li a.text {
-    background-image: url(../images/icons/text.png);
+#directoryListing .fileModTime {
+    display: inline-block;
+    float: right;
+    margin: 3px;
+    overflow: hidden;
+    text-align: right;
+    white-space: nowrap;
 }
 
 

diff --git a/resources/settings.ini b/resources/settings.ini
@@ -24,88 +24,88 @@ hide[] = .htpasswd
 [file_types]
 
 ; Applications
-app = app
-bat = app
-deb = app
-exe = app
-msi = app
-rpm = app
+app = app.png
+bat = app.png
+deb = app.png
+exe = app.png
+msi = app.png
+rpm = app.png
 
 ; Archives
-7z = archive
-gz = archive
-rar = archive
-tar = archive
-zip = archive
+7z = archive.png
+gz = archive.png
+rar = archive.png
+tar = archive.png
+zip = archive.png
 
 ; Audio
-aac = music
-mid = music
-midi = music
-mp3 = music
-ogg = music
-wma = music
-wav = music
+aac = music.png
+mid = music.png
+midi = music.png
+mp3 = music.png
+ogg = music.png
+wma = music.png
+wav = music.png
 
 ; Code
-c = code
-cpp = code
-css = code
-erb = code
-htm = code
-html = code
-java = code
-js = code
-php = code
-pl = code
-py = code
-rb = code
-xhtml = code
-xml = code
+c = code.png
+cpp = code.png
+css = code.png
+erb = code.png
+htm = code.png
+html = code.png
+java = code.png
+js = code.png
+php = code.png
+pl = code.png
+py = code.png
+rb = code.png
+xhtml = code.png
+xml = code.png
 
 ; Disc Images
-cue = cd
-iso = cd
-mdf = cd
-mds = cd
-mdx = cd
-nrg = cd
+cue = cd.png
+iso = cd.png
+mdf = cd.png
+mds = cd.png
+mdx = cd.png
+nrg = cd.png
 
 ; Documents
-csv = excel
-doc = word
-docx = word
-odt = text
-pdf = pdf
-xls = excel
-xlsx = excel
+csv = excel.png
+doc = word.png
+docx = word.png
+odt = text.png
+pdf = pdf.png
+xls = excel.png
+xlsx = excel.png
 
 ; Images
-bmp = image
-gif = image
-jpg = image
-jpeg = image
-png = image
-tga = image
+bmp = image.png
+gif = image.png
+jpg = image.png
+jpeg = image.png
+png = image.png
+tga = image.png
 
 ; Scripts
-bat = terminal
-cmd = terminal
-sh = terminal
+bat = terminal.png
+cmd = terminal.png
+sh = terminal.png
 
 ; Text
-log = text
-rtf = text
-txt = text
+log = text.png
+rtf = text.png
+txt = text.png
 
 ; Video
-avi = video
-mkv = video
-mov = video
-mp4 = video
-mpg = video
-wmv = video
-swf = flash
+avi = video.png
+mkv = video.png
+mov = video.png
+mp4 = video.png
+mpg = video.png
+wmv = video.png
+swf = flash.png
 
 ; Other
-msg = message
+msg = message.png