Mobile-first cron table (#3615)

web/css/src/themes/dark.css

@@ -443,6 +443,89 @@ strong {
 	}
 }
 
+/* Units table
+   ========================================================================== */
+
+.units-table-header {
+	@media (--viewport-large) {
+		background: #404040;
+		box-shadow: none;
+		text-shadow: 0 1px rgb(0 0 0 / 95%);
+		border-color: #212121;
+	}
+}
+
+.units-table-row {
+	border-color: #282828;
+	background-color: #303030;
+
+	&.selected {
+		background-color: #454545;
+		box-shadow: none;
+	}
+
+	&.disabled {
+		color: #606060;
+		background-color: #252525;
+
+		&.selected {
+			color: #333;
+			background-color: #454545;
+		}
+	}
+
+	&.focus {
+		background-color: #353535;
+	}
+
+	@media (--viewport-large) {
+		&:hover {
+			background-color: #353535;
+			border-color: #282828;
+			box-shadow: none;
+		}
+
+		&.selected {
+			border-left-color: #212121;
+			border-right-color: #212121;
+
+			&:hover {
+				background-color: #555;
+			}
+		}
+
+		&.disabled {
+			&:hover {
+				background-color: #252525;
+			}
+
+			&.selected:hover {
+				color: #333;
+				background-color: #454545;
+			}
+		}
+	}
+}
+
+.units-table-cell {
+	& a {
+		color: #fafafa;
+
+		&:hover {
+			color: #fafafa;
+		}
+	}
+}
+
+.units-table-row-action-link {
+	border-color: #454545;
+	background-color: #282828;
+
+	@media (--viewport-large) {
+		background-color: transparent;
+	}
+}
+
 /* Statistics
    ========================================================================== */
 

web/css/src/themes/default.css

@@ -831,6 +831,195 @@
 	}
 }
 
+/* Units table
+   ========================================================================== */
+
+.units-table {
+	font-size: 0.8rem;
+	padding-left: 20px;
+	padding-right: 20px;
+
+	@media (--viewport-large) {
+		width: 100%;
+		display: table;
+		border-collapse: collapse;
+		border-spacing: 0;
+		padding-left: 0;
+		padding-right: 0;
+	}
+}
+
+.units-table-header {
+	display: none;
+
+	@media (--viewport-large) {
+		display: table-row;
+		border-left: 1px solid #d0d0d0;
+		border-right: 1px solid #d0d0d0;
+		border-bottom: 1px solid #d0d0d0;
+		background: linear-gradient(
+			to bottom,
+			rgb(247 247 247 / 100%) 0%,
+			rgb(255 255 255 / 100%) 100%
+		);
+		box-shadow: inset 0 1px 1px rgb(255 255 255 / 100%), inset 0 0 1px rgb(255 255 255 / 100%),
+			inset 0 0 4px rgb(255 255 255 / 80%), 0 1px 4px rgb(140 140 140 / 35%);
+
+		& .units-table-cell {
+			font-weight: bold;
+			padding: 15px;
+		}
+	}
+}
+
+.units-table-row {
+	padding: 10px;
+	margin-top: 10px;
+	border: 1px solid #ddd;
+	border-radius: 6px;
+
+	&.selected {
+		background-color: #f8f8f8;
+		box-shadow: 0 2px 10px rgb(150 150 150 / 20%);
+	}
+
+	&.disabled {
+		color: silver;
+		background-color: #eaeaea;
+
+		&.selected {
+			color: #b2ac87;
+			background-color: #f2eab8;
+		}
+	}
+
+	&.focus {
+		border-left: 2px solid #5edad0;
+		background-color: #eff5fc;
+	}
+
+	@media (--viewport-large) {
+		display: table-row;
+		padding: 0;
+		margin-top: 0;
+		border-top: 0;
+		border-left-color: transparent;
+		border-right-color: transparent;
+		border-bottom-color: #ddd;
+		border-radius: 0;
+
+		&:last-child {
+			border-bottom-color: transparent;
+		}
+
+		&:hover {
+			background-color: #f8f8f8;
+			box-shadow: 0 2px 10px rgb(150 150 150 / 20%);
+			border-left-color: #ddd;
+			border-right-color: #ddd;
+
+			& .units-table-row-actions {
+				visibility: visible;
+			}
+		}
+
+		&.selected {
+			border-left: 1px solid #ddd;
+			border-right: 1px solid #ddd;
+
+			&:hover {
+				background-color: #fff5ce;
+			}
+		}
+
+		&.disabled {
+			&:hover {
+				background-color: #eaeaea;
+			}
+
+			&.selected:hover {
+				color: #b2ac87;
+				background-color: #f2eab8;
+			}
+		}
+	}
+}
+
+.units-table-cell {
+	&:nth-child(2) {
+		font-size: 0.9rem;
+	}
+
+	& a {
+		color: #353535;
+
+		&:hover {
+			color: #4c8bbe;
+		}
+	}
+
+	@media (--viewport-large) {
+		display: table-cell;
+		padding: 10px 15px;
+
+		&:nth-child(2) {
+			font-size: 0.8rem;
+		}
+
+		&:not(:nth-child(2)) {
+			text-align: center;
+		}
+	}
+}
+
+.units-table-row-actions {
+	display: flex;
+	padding-top: 5px;
+	padding-bottom: 5px;
+
+	@media (--viewport-large) {
+		visibility: hidden;
+		padding: 0;
+	}
+}
+
+.units-table-row-action {
+	margin-right: 10px;
+
+	&:last-child {
+		margin-right: 0;
+	}
+
+	@media (--viewport-large) {
+		margin-right: 0;
+	}
+}
+
+.units-table-row-action-link {
+	background-color: #f5f5f5;
+	border: 1px solid #ddd;
+	border-radius: var(--border-radius-base);
+	display: flex;
+	align-items: center;
+	padding-right: 10px;
+
+	& .fas {
+		padding: 5px 5px 5px 10px;
+		font-size: 0.9rem;
+	}
+
+	@media (--viewport-large) {
+		background-color: transparent;
+		border: 0;
+		padding-right: 0;
+
+		& .fas {
+			color: silver;
+			padding: 4px;
+		}
+	}
+}
+
 /* Cards
    ========================================================================== */
 
@@ -910,10 +1099,10 @@
 	border-left: 1px solid #d0d0d0;
 	border-right: 1px solid #d0d0d0;
 	border-bottom: 1px solid #d0d0d0;
+	border-radius: 0 0 6px 6px;
 	text-shadow: 0 1px rgb(255 255 255 / 100%);
 	box-shadow: inset 0 1px 1px rgb(255 255 255 / 100%), inset 0 0 1px rgb(255 255 255 / 100%),
 		inset 0 0 4px rgb(255 255 255 / 80%), 0 1px 4px rgb(140 140 140 / 35%);
-	border-radius: 0 0 6px 6px;
 	min-height: 28px;
 	padding: 4px 0 4px 15px;
 	color: #707070;

web/css/src/themes/flat.css

@@ -82,6 +82,27 @@ strong {
 	box-shadow: none;
 }
 
+/* Units table
+   ========================================================================== */
+
+.units-table-row {
+	@media (--viewport-large) {
+		&:hover {
+			box-shadow: none;
+		}
+	}
+}
+
+.units-table-cell {
+	& a {
+		color: #5f7eb3;
+
+		&:hover {
+			color: #5f7eb3;
+		}
+	}
+}
+
 /* Statistics
    ========================================================================== */
 

web/css/src/themes/vestia.css

@@ -233,6 +233,23 @@ strong {
 	box-shadow: none;
 }
 
+/* Units table
+   ========================================================================== */
+
+.units-table-row {
+	@media (--viewport-large) {
+		&:hover {
+			box-shadow: none;
+		}
+	}
+}
+
+.units-table-cell {
+	& a:hover {
+		color: #ff6701;
+	}
+}
+
 /* Statistics
    ========================================================================== */
 

web/templates/pages/list_cron.php

@@ -66,103 +66,126 @@
 <!-- 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 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-5"><b><?= _("Command") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left compact-2 u-text-right"><b>&nbsp;</b></div>
-				<div class="clearfix l-unit__stat-col--left compact-3 u-text-center"><b><?= _("Minute") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left compact-3 u-text-center"><b><?= _("Hour") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left compact-3 u-text-center"><b><?= _("Day") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left compact-3 u-text-center"><b><?= _("Month") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left compact-3 u-text-center"><b><?= _("Day of Week") ?></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") ?>" <?= $display_mode ?>>
 			</div>
+			<div class="units-table-cell"><?= _("Command") ?></div>
+			<div class="units-table-cell"></div>
+			<div class="units-table-cell"><?= _("Minute") ?></div>
+			<div class="units-table-cell"><?= _("Hour") ?></div>
+			<div class="units-table-cell"><?= _("Day") ?></div>
+			<div class="units-table-cell"><?= _("Month") ?></div>
+			<div class="units-table-cell"><?= _("Day of Week") ?></div>
 		</div>
 
 		<!-- Begin cron job list item loop -->
 		<?php
-			foreach ($data as $key => $value) {
-				++$i;
-				if ($data[$key]['SUSPENDED'] == 'yes') {
-					$status = 'suspended';
-					$spnd_action = 'unsuspend';
-					$spnd_action_title = _('Unsuspend');
-					$spnd_icon = 'fa-play';
-					$spnd_confirmation = _('Are you sure you want to unsuspend this cron job?') ;
-				} else {
-					$status = 'active';
-					$spnd_action = 'suspend';
-					$spnd_action_title = _('Suspend');
-					$spnd_icon = 'fa-pause';
-					$spnd_confirmation = _('Are you sure you want to suspend this cron job?') ;
-				}
-			?>
-			<div class="l-unit <?php if($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-unit"
+		foreach ($data as $key => $value) {
+			++$i;
+			if ($data[$key]['SUSPENDED'] == 'yes') {
+				$status = 'suspended';
+				$spnd_action = 'unsuspend';
+				$spnd_action_title = _('Unsuspend');
+				$spnd_icon = 'fa-play';
+				$spnd_icon_class = 'icon-green';
+				$spnd_confirmation = _('Are you sure you want to unsuspend this cron job?') ;
+			} else {
+				$status = 'active';
+				$spnd_action = 'suspend';
+				$spnd_action_title = _('Suspend');
+				$spnd_icon = 'fa-pause';
+				$spnd_icon_class = 'icon-highlight';
+				$spnd_confirmation = _('Are you sure you want to suspend this cron job?') ;
+			}
+		?>
+			<div class="units-table-row <?php if ($status == 'suspended') echo 'disabled'; ?> animate__animated animate__fadeIn js-unit"
 				data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
 				data-sort-name="<?=htmlspecialchars($data[$key]['CMD'], ENT_NOQUOTES)?>">
-				<div class="l-unit__col l-unit__col--right">
-					<div class="clearfix l-unit__stat-col--left super-compact">
+				<div class="units-table-cell">
+					<div>
 						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="job[]" value="<?= $key ?>" <?= $display_mode ?>>
+						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
-					<div class="clearfix l-unit__stat-col--left wide-5 truncate">
-						<?php if ($read_only === "true" || $data[$key]["SUSPENDED"] == "yes") { ?>
-							<b><?= htmlspecialchars($data[$key]["CMD"], ENT_NOQUOTES) ?></b>
-						<?php } else { ?>
-							<b><a href="/edit/cron/?job=<?=$data[$key]['JOB']?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit Cron Job") ?>: <?=htmlspecialchars($data[$key]['CMD'], ENT_NOQUOTES)?>"><?=htmlspecialchars($data[$key]['CMD'], ENT_NOQUOTES)?></a></b>
-						<?php } ?>
-					</div>
-					<!-- START QUICK ACTION TOOLBAR AREA -->
-					<div class="clearfix l-unit__stat-col--left compact-2 u-text-right">
-						<div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
-							<div class="actions-panel clearfix">
-								<?php if ($read_only === "true") { ?>
-									<!-- Restrict other administrators from editing, deleting, or suspending 'admin' user cron jobs -->
-									&nbsp;
-								<?php } else { ?>
-									<?php if ($data[$key]['SUSPENDED'] == 'no') {?>
-										<div class="actions-panel__col actions-panel__download shortcut-enter" data-key-action="href">
-											<a href="/edit/cron/?job=<?=$data[$key]['JOB']?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit Cron Job") ?>">
-												<i class="fas fa-pencil icon-orange icon-dim"></i>
-											</a>
-										</div>
-									<?php } ?>
-									<div class="actions-panel__col actions-panel__suspend shortcut-s" data-key-action="js">
-										<a
-											class="data-controls js-confirm-action"
-											href="/<?= $spnd_action ?>/cron/?job=<?= $data[$key]["JOB"] ?>&token=<?= $_SESSION["token"] ?>"
-											data-confirm-title="<?= $spnd_action_title ?>"
-											data-confirm-message="<?= sprintf($spnd_confirmation, $key) ?>"
-										>
-											<i class="fas <?= $spnd_icon ?> 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="/delete/cron/?job=<?= $data[$key]["JOB"] ?>&token=<?= $_SESSION["token"] ?>"
-											data-confirm-title="<?= _("Delete") ?>"
-											data-confirm-message="<?= sprintf(_("Are you sure you want to delete this cron job?"), $key) ?>"
-										>
-											<i class="fas fa-trash icon-red icon-dim"></i>
-										</a>
-									</div>
-								<?php } ?>
-							</div>
-						</div>
-					</div>
-					<!-- END QUICK ACTION TOOLBAR AREA -->
-					<div class="clearfix l-unit__stat-col--left compact-3 u-text-center"><?= $data[$key]["MIN"] ?></div>
-					<div class="clearfix l-unit__stat-col--left compact-3 u-text-center"><?= $data[$key]["HOUR"] ?></div>
-					<div class="clearfix l-unit__stat-col--left compact-3 u-text-center"><?= $data[$key]["DAY"] ?></div>
-					<div class="clearfix l-unit__stat-col--left compact-3 u-text-center"><?= $data[$key]["MONTH"] ?></div>
-					<div class="clearfix l-unit__stat-col--left compact-3 u-text-center"><?= $data[$key]["WDAY"] ?></div>
+				</div>
+				<div class="units-table-cell u-text-bold">
+					<span class="u-hide-desktop">Command:</span>
+					<?php if ($read_only === "true" || $data[$key]["SUSPENDED"] == "yes") { ?>
+						<?= htmlspecialchars($data[$key]["CMD"], ENT_NOQUOTES) ?>
+					<?php } else { ?>
+						<a href="/edit/cron/?job=<?=$data[$key]['JOB']?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit Cron Job") ?>: <?=htmlspecialchars($data[$key]['CMD'], ENT_NOQUOTES)?>">
+							<?=htmlspecialchars($data[$key]['CMD'], ENT_NOQUOTES)?>
+						</a>
+					<?php } ?>
+				</div>
+				<div class="units-table-cell">
+					<?php if (!$read_only) { ?>
+						<ul class="units-table-row-actions">
+							<?php if ($data[$key]['SUSPENDED'] == 'no') {?>
+								<li class="units-table-row-action shortcut-enter" data-key-action="href">
+									<a
+										class="units-table-row-action-link"
+										href="/edit/cron/?job=<?=$data[$key]['JOB']?>&token=<?=$_SESSION['token']?>"
+										title="<?= _("Edit") ?>"
+									>
+										<i class="fas fa-pencil icon-orange"></i>
+										<span class="u-hide-desktop"><?= _("Edit") ?></span>
+									</a>
+								</li>
+							<?php } ?>
+							<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="/<?= $spnd_action ?>/cron/?job=<?= $data[$key]["JOB"] ?>&token=<?= $_SESSION["token"] ?>"
+									title="<?= $spnd_action_title ?>"
+									data-confirm-title="<?= $spnd_action_title ?>"
+									data-confirm-message="<?= sprintf($spnd_confirmation, $key) ?>"
+								>
+									<i class="fas <?= $spnd_icon ?> <?= $spnd_icon_class ?>"></i>
+									<span class="u-hide-desktop"><?= $spnd_action_title ?></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/cron/?job=<?= $data[$key]["JOB"] ?>&token=<?= $_SESSION["token"] ?>"
+									title="<?= _("Delete") ?>"
+									data-confirm-title="<?= _("Delete") ?>"
+									data-confirm-message="<?= sprintf(_("Are you sure you want to delete this cron job?"), $key) ?>"
+								>
+									<i class="fas fa-trash icon-red"></i>
+									<span class="u-hide-desktop"><?= _("Delete") ?></span>
+								</a>
+							</li>
+						</ul>
+					<?php } ?>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Minute") ?>:</span>
+					<?= $data[$key]["MIN"] ?>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Hour") ?>:</span>
+					<?= $data[$key]["HOUR"] ?>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Day") ?>:</span>
+					<?= $data[$key]["DAY"] ?>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Month") ?>:</span>
+					<?= $data[$key]["MONTH"] ?>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Day of Week") ?>:</span>
+					<?= $data[$key]["WDAY"] ?>
 				</div>
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">