Migrate List Services to .units-table (#3668)

web/templates/pages/list_services.php

@@ -91,21 +91,17 @@
 		</div>
 	</div>
 
-	<div class="units js-units-container">
-
-		<div class="units-header">
-			<div class="l-unit__col l-unit__col--right">
-				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>">
-				</div>
-
-				<div class="clearfix l-unit__stat-col--left wide-2"><b><?= _("Service") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-right compact-2">&nbsp;</div>
-				<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("Description") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Uptime") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("CPU") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Memory") ?></b></div>
+	<div class="units-table js-units-container">
+		<div class="units-table-header">
+			<div class="units-table-cell">
+				<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>">
 			</div>
+			<div class="units-table-cell"><?= _("Service") ?></div>
+			<div class="units-table-cell"></div>
+			<div class="units-table-cell"><?= _("Description") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Uptime") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("CPU") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Memory") ?></div>
 		</div>
 
 		<!-- Begin services status list item loop -->
@@ -116,11 +112,13 @@
 					$status = 'active';
 					$action = 'stop';
 					$spnd_icon = 'fa-stop';
+					$spnd_icon_class = 'icon-red';
 					$state_icon = 'fa-circle-check icon-green';
 				} else {
 					$status = 'suspended';
 					$action = 'start';
 					$spnd_icon = 'fa-play';
+					$spnd_icon_class = 'icon-green';
 					$state_icon = 'fa-circle-minus icon-red';
 				}
 				if (in_array($key, $phpfpm)){
@@ -133,50 +131,76 @@
 				$cpu = number_format($cpu, 1);
 				if ($cpu == '0.0')	$cpu = 0;
 			?>
-			<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended';?> animate__animated animate__fadeIn js-unit"
-				data-sort-name="<?=strtolower($key)?>"
-				data-sort-memory="<?=$data[$key]['MEM']?>"
-				data-sort-cpu="<?=$cpu;?>"
-				data-sort-uptime="<?=$data[$key]['RTIME']?>">
-				<div class="l-unit__col l-unit__col--right">
-					<div class="clearfix l-unit__stat-col--left super-compact">
+			<div class="units-table-row <?php if ($status == 'suspended') echo 'disabled'; ?> animate__animated animate__fadeIn js-unit"
+				data-sort-name="<?= strtolower($key) ?>"
+				data-sort-memory="<?= $data[$key]['MEM'] ?>"
+				data-sort-cpu="<?= $cpu; ?>"
+				data-sort-uptime="<?= $data[$key]['RTIME'] ?>">
+				<div class="units-table-cell">
+					<div>
 						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="service[]" value="<?= $key ?>">
+						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
-					<div class="clearfix l-unit__stat-col--left wide-2">
-						<i class="fas <?= $state_icon ?> u-mr5"></i>
-						<b><a href="/edit/server/<? echo $edit_url ?>/" title="<?= _("Edit") ?>: <?= $key ?>"><?= $key ?></a></b>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center compact-2">
-						<div class="actions-panel clearfix">
-							<div class="actions-panel__col actions-panel__edit shortcut-enter" data-key-action="href">
-								<a href="/edit/server/<? echo $edit_url ?>/" title="<?= _("Edit") ?>"><i class="fas fa-pencil icon-orange icon-dim"></i></a>
-							</div>
-							<div class="actions-panel__col actions-panel__stop shortcut-s" data-key-action="js">
-								<a
-									class="data-controls js-confirm-action"
-									href="/restart/service/?srv=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
-									data-confirm-title="<?= _("Restart") ?>"
-									data-confirm-message="<?= sprintf(_('Are you sure you want to restart %s?'), $key) ?>"
-								>
-									<i class="fas fa-arrow-rotate-left icon-highlight icon-dim"></i>
-								</a>
-							</div>
-							<div class="actions-panel__col actions-panel__delete shortcut-delete" data-key-action="js">
-								<a
-									class="data-controls js-confirm-action"
-									href="/<?= $action ?>/service/?srv=<?=$key?>&token=<?=$_SESSION['token']?>"
-									data-confirm-title="<?= _($action) ?>"
-									data-confirm-message="<?php if ($action == 'stop'){ echo sprintf(_('Are you sure you want to stop service %s?'), $key); } else { echo sprintf(_('Are you sure you want to start service %s?'), $key); }?>"
-								>
-									<i class="fas <?= $spnd_icon ?> icon-red icon-dim"></i>
-								</a>
-							</div>
-						</div>
-					</div>
-					<div class="clearfix l-unit__stat-col--left wide-3"><?=_($data[$key]['SYSTEM'])?></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?=humanize_time($data[$key]['RTIME'])?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?=$cpu?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?=$data[$key]['MEM']?> <?= _("MB") ?></b></div>
+				</div>
+				<div class="units-table-cell units-table-heading-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Service") ?>:</span>
+					<i class="fas <?= $state_icon ?> u-mr5"></i>
+					<a class="u-text-bold" href="/edit/server/<? echo $edit_url ?>/" title="<?= _("Edit") ?>: <?= $key ?>">
+						<?= $key ?>
+					</a>
+				</div>
+				<div class="units-table-cell">
+					<ul class="units-table-row-actions">
+						<li class="units-table-row-action shortcut-enter" data-key-action="href">
+							<a
+								class="units-table-row-action-link"
+								href="/edit/server/<? echo $edit_url ?>/"
+								title="<?= _("Edit") ?>"
+							>
+								<i class="fas fa-pencil icon-orange"></i>
+								<span class="u-hide-desktop"><?= _("Edit") ?></span>
+							</a>
+						</li>
+						<li class="units-table-row-action shortcut-s" data-key-action="js">
+							<a
+								class="units-table-row-action-link data-controls js-confirm-action"
+								href="/restart/service/?srv=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
+								title="<?= _("Restart") ?>"
+								data-confirm-title="<?= _("Restart") ?>"
+								data-confirm-message="<?= sprintf(_('Are you sure you want to restart %s?'), $key) ?>"
+							>
+								<i class="fas fa-arrow-rotate-left icon-highlight"></i>
+								<span class="u-hide-desktop"><?= _("Restart") ?></span>
+							</a>
+						</li>
+						<li class="units-table-row-action shortcut-delete" data-key-action="js">
+							<a
+								class="units-table-row-action-link data-controls js-confirm-action"
+								href="/<?= $action ?>/service/?srv=<?=$key?>&token=<?=$_SESSION['token']?>"
+								title="<?= _($action) ?>"
+								data-confirm-message="<?php if ($action == 'stop'){ echo sprintf(_('Are you sure you want to stop service %s?'), $key); } else { echo sprintf(_('Are you sure you want to start service %s?'), $key); }?>"
+							>
+								<i class="fas <?= $spnd_icon ?> <?= $spnd_icon_class ?>"></i>
+								<span class="u-hide-desktop"><?= _($action) ?></span>
+							</a>
+						</li>
+					</ul>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Description") ?>:</span>
+					<?= _($data[$key]['SYSTEM']) ?>
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("Uptime") ?>:</span>
+					<?= humanize_time($data[$key]['RTIME']) ?>
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("CPU") ?>:</span>
+					<?= $cpu ?>
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("Memory") ?>:</span>
+					<?= $data[$key]['MEM'] ?> <?= _("MB") ?>
 				</div>
 			</div>
 		<?php } ?>