Migrate List Backups to .units-table (#3619)

* Fix string not translated

* Migrate List Backup table to .units-table

* Refine .units-table alignment of items

web/css/src/themes/default.css

@@ -867,7 +867,12 @@
 
 		& .units-table-cell {
 			font-weight: bold;
-			padding: 15px;
+			padding: 14px 15px;
+
+			/* Checkbox cell */
+			&:nth-child(1) {
+				line-height: 1.1;
+			}
 		}
 	}
 }
@@ -962,11 +967,18 @@
 		display: table-cell;
 		padding: 10px 15px;
 
+		/* Checkbox cell */
+		&:nth-child(1) {
+			vertical-align: bottom;
+		}
+
+		/* Row heading cell */
 		&:nth-child(2) {
 			font-size: 0.8rem;
 		}
 
-		&:not(:nth-child(2)) {
+		/* Metadata cells */
+		&:not(:nth-child(1), :nth-child(2)) {
 			text-align: center;
 		}
 	}
@@ -974,6 +986,7 @@
 
 .units-table-row-actions {
 	display: flex;
+	flex-wrap: wrap;
 	padding-top: 5px;
 	padding-bottom: 5px;
 

web/templates/pages/list_backup.php

@@ -35,21 +35,18 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units js-units-container">
-		<div class="header units-header">
-			<div class="l-unit__col l-unit__col--right">
-				<div>
-					<div class="clearfix l-unit__stat-col--left super-compact">
-						<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>" <?= $display_mode ?>>
-					</div>
-					<div class="clearfix l-unit__stat-col--left wide-4"><b><?= _("File Name") ?></b></div>
-					<div class="clearfix l-unit__stat-col--left compact-4 u-text-right"><b>&nbsp;</b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Date") ?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Size") ?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Type") ?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Runtime") ?></b></div>
-				</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") ?>" <?= $display_mode ?>>
 			</div>
+			<div class="units-table-cell"><?= _("File Name") ?></div>
+			<div class="units-table-cell"></div>
+			<div class="units-table-cell"><?= _("Date") ?></div>
+			<div class="units-table-cell"><?= _("Size") ?></div>
+			<div class="units-table-cell"><?= _("Type") ?></div>
+			<div class="units-table-cell"><?= _("Runtime") ?></div>
 		</div>
 
 		<!-- Begin user backup list item loop -->
@@ -69,58 +66,91 @@
 				if (!empty($data[$key]['DB'])) $db = _('Yes');
 				if (!empty($data[$key]['CRON'])) $cron = _('Yes');
 				if (!empty($data[$key]['UDIR'])) $udir = _('Yes');
-			?>
-			<div class="l-unit animate__animated animate__fadeIn js-unit">
-				<div class="l-unit__col l-unit__col--right">
+		?>
+			<div class="units-table-row animate__animated animate__fadeIn js-unit">
+				<div class="units-table-cell">
 					<div>
-						<div class="clearfix l-unit__stat-col--left super-compact">
-							<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="backup[]" value="<?= $key ?>" <?= $display_mode ?>>
-						</div>
-						<div class="clearfix l-unit__stat-col--left wide-4 truncate">
-							<b>
-								<?php if ($read_only === "true") { ?>
-									<?= $key ?>
-								<?php } else { ?>
-									<a href="/list/backup/?backup=<?= $key ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Restore") ?>"><?= $key ?></a>
-								<?php } ?>
-							</b>
-						</div>
-						<!-- START QUICK ACTION TOOLBAR AREA -->
-						<div class="clearfix l-unit__stat-col--left compact-4 u-text-right">
-							<div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
-								<div class="actions-panel clearfix">
-									<?php if ($_SESSION["userContext"] === "admin" && $_SESSION["look"] === "admin" && $read_only === "true") { ?>
-										<!-- Restrict ability to restore or delete backups when impersonating 'admin' account -->
-										&nbsp;
-									<?php } else { ?>
-										<div class="actions-panel__col actions-panel__download shortcut-d" data-key-action="href"><a href="/download/backup/?backup=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Download") ?>"><i class="fas fa-file-arrow-down icon-lightblue icon-dim"></i></a></div>
-										<?php if ($read_only !== 'true') {?>
-											<div class="actions-panel__col actions-panel__list shortcut-enter" data-key-action="href"><a href="/list/backup/?backup=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Restore") ?>"><i class="fas fa-arrow-rotate-left icon-green 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="/delete/backup/?backup=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
-													data-confirm-title="<?= _("Delete") ?>"
-													data-confirm-message="<?= sprintf(_("Are you sure you want to delete backup %s?"), $key) ?>"
-												>
-													<i class="fas fa-trash icon-red icon-dim"></i>
-												</a>
-											</div>
-										<?php } ?>
-									<?php } ?>
-								</div>
-							</div>
-						</div>
-						<!-- END QUICK ACTION TOOLBAR AREA -->
-						<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= translate_date($data[$key]["DATE"]) ?></b></div>
-						<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= humanize_usage_size($data[$key]["SIZE"]) ?></b> <span class="u-text-small"><?= humanize_usage_measure($data[$key]["SIZE"]) ?></span></div>
-						<div class="clearfix l-unit__stat-col--left u-text-center"><?= $data[$key]["TYPE"] ?></div>
-						<div class="clearfix l-unit__stat-col--left u-text-center"><?= humanize_time($data[$key]["RUNTIME"]) ?></div>
+						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="backup[]" value="<?= $key ?>" <?= $display_mode ?>>
+						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
 				</div>
+				<div class="units-table-cell u-text-bold">
+					<span class="u-hide-desktop"><?= _("File Name") ?>:</span>
+					<?php if ($read_only === "true") { ?>
+						<?= $key ?>
+					<?php } else { ?>
+						<a href="/list/backup/?backup=<?= $key ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Restore") ?>">
+							<?= $key ?>
+						</a>
+					<?php } ?>
+				</div>
+				<div class="units-table-cell">
+					<?php if (!($_SESSION["userContext"] === "admin" && $_SESSION["look"] === "admin" && $read_only === "true")) { ?>
+						<ul class="units-table-row-actions">
+							<li class="units-table-row-action shortcut-d" data-key-action="href">
+								<a
+									class="units-table-row-action-link"
+									href="/download/backup/?backup=<?=$key?>&token=<?=$_SESSION['token']?>"
+									title="<?= _("Download") ?>"
+								>
+									<i class="fas fa-file-arrow-down icon-lightblue"></i>
+									<span class="u-hide-desktop"><?= _("Download") ?></span>
+								</a>
+							</li>
+							<?php if ($read_only !== 'true') { ?>
+								<li class="units-table-row-action shortcut-enter" data-key-action="href">
+									<a
+										class="units-table-row-action-link data-controls"
+										href="/list/backup/?backup=<?=$key?>&token=<?=$_SESSION['token']?>"
+										title="<?= _("Restore") ?>"
+									>
+										<i class="fas fa-arrow-rotate-left icon-green"></i>
+										<span class="u-hide-desktop"><?= _("Restore") ?></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="/delete/backup/?backup=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
+										title="<?= _("Delete") ?>"
+										data-confirm-title="<?= _("Delete") ?>"
+										data-confirm-message="<?= sprintf(_("Are you sure you want to delete backup %s?"), $key) ?>"
+									>
+										<i class="fas fa-trash icon-red"></i>
+										<span class="u-hide-desktop"><?= _("Delete") ?></span>
+									</a>
+								</li>
+							<?php } ?>
+						</ul>
+					<?php } ?>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Date") ?>:</span>
+					<span class="u-text-bold">
+						<?= translate_date($data[$key]["DATE"]) ?>
+					</span>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Size") ?>:</span>
+					<span class="u-text-bold">
+						<?= humanize_usage_size($data[$key]["SIZE"]) ?>
+					</span>
+					<span class="u-text-small">
+						<?= humanize_usage_measure($data[$key]["SIZE"]) ?>
+					</span>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Type") ?>:</span>
+					<?= $data[$key]["TYPE"] ?>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Runtime") ?>:</span>
+					<?= humanize_time($data[$key]["RUNTIME"]) ?>
+				</div>
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

web/templates/pages/list_cron.php

@@ -111,7 +111,7 @@
 					</div>
 				</div>
 				<div class="units-table-cell u-text-bold">
-					<span class="u-hide-desktop">Command:</span>
+					<span class="u-hide-desktop"><?= _("Command") ?>:</span>
 					<?php if ($read_only === "true" || $data[$key]["SUSPENDED"] == "yes") { ?>
 						<?= htmlspecialchars($data[$key]["CMD"], ENT_NOQUOTES) ?>
 					<?php } else { ?>