Sort directories before files and update design

Author: natanfelles

src/functions.php

@@ -80,7 +80,6 @@
 	if ($SplFileInfo->isDir())
 	{
 		if (isset($_GET['order_by']) && in_array($_GET['order_by'], [
-					  'type',
 					  'filename',
 					  'size',
 					  'owner',
@@ -104,7 +103,6 @@
 	sort($paths);
 
 	if (isset($_GET['order_by']) && in_array($_GET['order_by'], [
-				  'type',
 				  'filename',
 				  'size',
 				  'owner',
@@ -130,15 +128,25 @@
 		$paths = array_reverse($paths);
 	}
 
-	$count = count($paths);
+	$dirs  = [];
+	$files = [];
 
-	for ($i = 0; $i < $count; $i++)
+	foreach ($paths as $path)
 	{
-		$paths[$i]['mTime'] = date('Y-m-d H:i:s', $paths[$i]['mTime']);
-		$paths[$i]['size']  = strpos($paths[$i]['size'], 'item') !== false
-							  ? $paths[$i]['size']
-							  : $GLOBALS['function_size_conversion']($paths[$i]['size']);
+		$path['mTime'] = date('Y-m-d H:i:s', $path['mTime']);
+		$path['size']  = $path['isDir']
+						 ? $path['size'] . ' item' . ($path['size'] < 2 ? '' : 's')
+						 : $GLOBALS['function_size_conversion']($path['size']);
+
+		if ($path['isDir'])
+		{
+			$dirs[] = $path;
+		}
+		else
+		{
+			$files[] = $path;
+		}
 	}
 
-	return $paths;
+	return array_merge($dirs, $files);
 };

src/pages/_template.php

@@ -90,6 +90,12 @@
 			min-width: 20px;
 			display: block;
 		}
+		td span {
+			color: gray;
+			min-width: 30px;
+			display: inline-block;
+			text-indent: 0;
+		}
 		.date {
 			float: right;
 			font-size: .875rem;
@@ -140,31 +146,6 @@
 	</p>
 
 	<script type="text/javascript">
-		function addClass(el, className)
-		{
-			if (el.classList)
-			{
-				el.classList.add(className);
-			}
-			else
-			{
-				el.className += ' ' + className;
-			}
-		}
-
-		function removeClass(el, className)
-		{
-			if (el.classList)
-			{
-				el.classList.remove(className);
-			}
-			else
-			{
-				el.className = el.className.replace(new RegExp('(^|\\b)' +
-							   className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
-			}
-		}
-
 		var uris = document.getElementsByClassName('uri');
 
 		for (var i = 0; i < uris.length; i++)
@@ -174,15 +155,15 @@ className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
 				{
 					if (uris[i].getAttribute('data-id') <= this.getAttribute('data-id'))
 					{
-						addClass(uris[i], 'active');
+						uris[i].classList.add('active');
 					}
 				}
 			}, true);
 
 			uris[i].addEventListener('mouseout', function () {
 				for (var i = 0; i < uris.length; i++)
 				{
-					removeClass(uris[i], 'active');
+					uris[i].classList.remove('active');
 				}
 			}, true);
 		}

src/pages/default.php

@@ -9,7 +9,6 @@
 <table>
 	<thead>
 		<tr>
-			<?= $function_order_link('type', 'Type') ?>
 			<?= $function_order_link('filename', 'Name') ?>
 			<?= $function_order_link('size', 'Size') ?>
 			<?= $function_order_link('owner', 'Owner') ?>
@@ -21,13 +20,15 @@
 	<tbody>
 <?php if(empty($paths)): ?>
 		<tr>
-			<td colspan="7">This directory is empty.</td>
+			<td colspan="6">This directory is empty.</td>
 		</tr>
 <?php endif ?>
 <?php foreach($paths as $path): ?>
 		<tr>
-			<td><?= $path['type'] ?></td>
-			<td><a href="<?= $path['href'] ?>"><?= $path['filename'] ?></a></td>
+			<td>
+				<span><?= $path['type'] ?></span>
+				<a href="<?= $path['href'] ?>"><?= $path['filename'] ?></a>
+			</td>
 			<td><?= $path['size'] ?></td>
 			<td><?= $path['owner'] ?></td>
 			<td><?= $path['group'] ?></td>

src/server_router.php

@@ -122,7 +122,7 @@
 		'realPath' => $SplFileInfo->getRealPath(),
 		'filename' => $SplFileInfo->getFilename(),
 		'isDir'    => $SplFileInfo->isDir(),
-		'size'     => $SplFileInfo->isDir() ? iterator_count($fi) . ' items' : $SplFileInfo->getSize(),
+		'size'     => $SplFileInfo->isDir() ? iterator_count($fi) : $SplFileInfo->getSize(),
 		'owner'    => $SplFileInfo->getOwner(),
 		'group'    => $SplFileInfo->getGroup(),
 		'perms'    => substr(sprintf('%o', $SplFileInfo->getPerms()), -4),