Migrate remaining tables to .units-table (#3693)

* Formatting

* Bump ESLint version

* Migrate List DNS Rec to .units-table

* Migrate List IP to .units-table

* Migrate List Log Auth to .units-table

* Tidy certificate download links

* Migrate List Search to .units-table

* Fix label spacing

* Migrate List DNS Public to .units-table

And remove unused sorting from toolbar.

* Switch List DNS Public to read-only form

* Formatting

* Improve icon classes on List DNS

* Migrate List Firewall to .units-table

* Tidy

* Update JS to reflect new list view HTML

* Remove old list view CSS 🎉

package-lock.json

@@ -23,7 +23,7 @@
 				"@typescript-eslint/parser": "^5.59.11",
 				"cssnano": "^6.0.1",
 				"esbuild": "^0.18.4",
-				"eslint": "^8.42.0",
+				"eslint": "^8.43.0",
 				"eslint-config-prettier": "^8.8.0",
 				"eslint-plugin-editorconfig": "^4.0.3",
 				"eslint-plugin-import": "^2.27.5",
@@ -1469,9 +1469,9 @@
 			}
 		},
 		"node_modules/@eslint/js": {
-			"version": "8.42.0",
-			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.42.0.tgz",
-			"integrity": "sha512-6SWlXpWU5AvId8Ac7zjzmIOqMOba/JWY8XZ4A7q7Gn1Vlfg/SFFIlrtHXt9nPn4op9ZPAkl91Jao+QQv3r/ukw==",
+			"version": "8.43.0",
+			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.43.0.tgz",
+			"integrity": "sha512-s2UHCoiXfxMvmfzqoN+vrQ84ahUSYde9qNO1MdxmoEhyHWsfmwOpFlwYV+ePJEVc7gFnATGUi376WowX1N7tFg==",
 			"dev": true,
 			"engines": {
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -3346,9 +3346,9 @@
 			}
 		},
 		"node_modules/electron-to-chromium": {
-			"version": "1.4.432",
-			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.432.tgz",
-			"integrity": "sha512-yz3U/khQgAFT2HURJA3/F4fKIyO2r5eK09BQzBZFd6BvBSSaRuzKc2ZNBHtJcO75/EKiRYbVYJZ2RB0P4BuD2g==",
+			"version": "1.4.433",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.433.tgz",
+			"integrity": "sha512-MGO1k0w1RgrfdbLVwmXcDhHHuxCn2qRgR7dYsJvWFKDttvYPx6FNzCGG0c/fBBvzK2LDh3UV7Tt9awnHnvAAUQ==",
 			"dev": true
 		},
 		"node_modules/emoji-regex": {
@@ -3525,15 +3525,15 @@
 			}
 		},
 		"node_modules/eslint": {
-			"version": "8.42.0",
-			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.42.0.tgz",
-			"integrity": "sha512-ulg9Ms6E1WPf67PHaEY4/6E2tEn5/f7FXGzr3t9cBMugOmf1INYvuUwwh1aXQN4MfJ6a5K2iNwP3w4AColvI9A==",
+			"version": "8.43.0",
+			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.43.0.tgz",
+			"integrity": "sha512-aaCpf2JqqKesMFGgmRPessmVKjcGXqdlAYLLC3THM8t5nBRZRQ+st5WM/hoJXkdioEXLLbXgclUpM0TXo5HX5Q==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.2.0",
 				"@eslint-community/regexpp": "^4.4.0",
 				"@eslint/eslintrc": "^2.0.3",
-				"@eslint/js": "8.42.0",
+				"@eslint/js": "8.43.0",
 				"@humanwhocodes/config-array": "^0.11.10",
 				"@humanwhocodes/module-importer": "^1.0.1",
 				"@nodelib/fs.walk": "^1.2.8",

package.json

@@ -31,7 +31,7 @@
 		"@typescript-eslint/parser": "^5.59.11",
 		"cssnano": "^6.0.1",
 		"esbuild": "^0.18.4",
-		"eslint": "^8.42.0",
+		"eslint": "^8.43.0",
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-editorconfig": "^4.0.3",
 		"eslint-plugin-import": "^2.27.5",

web/css/src/themes/dark.css

@@ -351,98 +351,6 @@ strong {
 	color: #fff;
 }
 
-.units-header {
-	background: #404040;
-	border-left: 1px solid #212121;
-	border-right: 1px solid #212121;
-	border-bottom: 1px solid #212121;
-	text-shadow: 0 1px rgb(0 0 0 / 95%);
-	border-bottom-left-radius: 0;
-	border-bottom-right-radius: 0;
-	color: #dadada;
-	box-shadow: inset 0 1px 1px rgb(0 0 0 / 30%);
-}
-
-.l-unit {
-	color: #dadada;
-}
-
-.units .l-unit {
-	background-color: #303030;
-	border-bottom: 1px solid #282828;
-	border-left: 1px solid #212121;
-	border-right: 1px solid #212121;
-}
-
-.l-unit:hover,
-.units .l-unit:hover {
-	box-shadow: 0 2px 10px rgb(20 20 20 / 20%);
-	background-color: #353535;
-	text-shadow: 0 1px rgb(0 0 0 / 50%);
-	border-left: 1px solid #212121;
-	border-right: 1px solid #212121;
-}
-
-.units .l-unit.l-unit--starred {
-	border-left: 2px solid #ff3478;
-}
-
-.units .l-unit.focus {
-	background-color: #353535;
-}
-
-.l-unit--suspended {
-	background: #252525 !important;
-	color: #606060 !important;
-	text-shadow: 0 -1px rgb(0 0 0 / 40%) !important;
-	box-shadow: inset 0 0 2px rgb(0 0 0 / 20%);
-}
-
-.l-unit--suspended a {
-	color: #606060 !important;
-	text-shadow: 0 -1px rgb(0 0 0 / 40%) !important;
-}
-
-.units .l-unit.l-unit--outdated {
-	color: #d4d4d4;
-	background-color: #981111;
-}
-
-.l-unit--outdated.selected {
-	background: #b70000 !important;
-	color: #fff !important;
-	text-shadow: none !important;
-}
-
-.l-unit--outdated.selected b {
-	color: #fff !important;
-}
-
-.l-unit--suspended b,
-.l-unit--outdated b {
-	color: #606060;
-}
-
-.l-unit--outdated b {
-	color: #d4d4d4;
-}
-
-.l-unit--suspended.selected {
-	background-color: #454545 !important;
-	color: #707070 !important;
-}
-
-.l-unit__stat-col--left {
-	& a,
-	& a:visited {
-		color: #fafafa;
-	}
-
-	& a:hover {
-		color: #fff;
-	}
-}
-
 /* Units table
    ========================================================================== */
 
@@ -786,35 +694,10 @@ strong {
 	box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
 }
 
-.l-unit.selected {
-	background-color: #454545;
-	color: #d4d4d4;
-	box-shadow: 0 2px 10px rgb(30 30 30 / 35%);
-	text-shadow: 0 1px rgb(0 0 0 / 50%);
-	border-left: 1px solid #212121;
-	border-right: 1px solid #212121;
-}
-
-.l-unit.selected:hover {
-	background-color: #555;
-	color: #d4d4d4;
-	box-shadow: none !important;
-	text-shadow: 0 1px rgb(0 0 0 / 40%);
-}
-
-.l-unit.selected b,
-.l-unit.selected strong {
-	color: #d4d4d4;
-}
-
 .console-output {
 	color: #dadada;
 }
 
-#vstobjects.suspended {
-	background-color: #282828;
-}
-
 /* Spinner
    ========================================================================== */
 
@@ -835,13 +718,6 @@ strong {
 	background-color: #252525;
 }
 
-.l-unit--suspended .badge {
-	background-color: #303030;
-	color: #808080;
-	text-shadow: 0 -1px rgb(0 0 0 / 40%);
-	box-shadow: 0 1px 2px rgb(25 25 25 / 30%);
-}
-
 /* Icon component
    ========================================================================== */
 
@@ -858,10 +734,6 @@ strong {
 	text-shadow: 1px 1px rgb(0 0 0 / 30%);
 }
 
-.l-unit--suspended .icon-dim {
-	color: #808080;
-}
-
 /* Modals
    ========================================================================== */
 
@@ -922,23 +794,6 @@ strong {
 	background-color: #282828;
 }
 
-.body-stats .units .l-unit {
-	background-color: #282828;
-	border-bottom: 1px solid #404040;
-	border-left: 1px solid #282828;
-	border-right: 1px solid #282828;
-}
-
-.body-stats .units:hover .l-unit:hover {
-	background-color: #303030 !important;
-	color: #fff !important;
-}
-
-.body-stats .units:hover .l-unit:hover b,
-.body-stats .units:hover .l-unit:hover strong {
-	color: #fff !important;
-}
-
 /* App footer
    ========================================================================== */
 

web/css/src/themes/default.css

@@ -1100,356 +1100,6 @@
 	font-weight: 600;
 }
 
-/* Improve alignment of "Users" list double-height rows */
-
-.body-user {
-	& .l-unit.animate__animated.animate__fadeIn,
-	& .actions-panel {
-		line-height: 2rem;
-	}
-}
-
-.units-header {
-	font-size: 0.8rem;
-	background: linear-gradient(to bottom, rgb(247 247 247 / 100%) 0%, rgb(255 255 255 / 100%) 100%);
-	background-color: #fff;
-	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%);
-	min-height: 28px;
-	padding: 4px 0 4px 15px;
-	color: #707070;
-	overflow: hidden;
-	width: 1024px;
-	line-height: 1rem;
-
-	& .fas {
-		font-size: 1rem;
-	}
-}
-
-.units {
-	overflow-x: auto;
-	padding-left: 20px;
-	padding-right: 20px;
-	padding-bottom: 20px;
-
-	@media (--viewport-large) {
-		padding-left: 0;
-		padding-right: 0;
-		padding-bottom: 0;
-	}
-}
-
-.l-unit {
-	color: #707070;
-	padding-left: 15px;
-	overflow: hidden;
-	font-size: 0.8rem;
-	border-left: 1px solid transparent;
-	border-right: 1px solid transparent;
-}
-
-.units .l-unit {
-	border-bottom: 1px solid #ddd;
-	border-left: 1px solid transparent;
-	border-right: 1px solid transparent;
-	width: 1024px;
-}
-
-.l-unit:hover,
-.units .l-unit:hover {
-	box-shadow: 0 2px 10px rgb(150 150 150 / 20%);
-	background-color: #f8f8f8;
-	text-shadow: 0 1px rgb(255 255 255 / 50%);
-	border-left: 1px solid #ddd;
-	border-right: 1px solid #ddd;
-}
-
-.units .l-unit.l-unit--starred {
-	border-left: 2px solid #c36;
-}
-
-.units .l-unit.focus {
-	border-left: 2px solid #5edad0;
-	background-color: #eff5fc;
-}
-
-.units .l-unit.focus .l-unit-toolbar__col--right {
-	display: block;
-}
-
-.units > div:last-child {
-	border-bottom: none;
-}
-
-.l-unit:hover .l-unit-toolbar__col--right {
-	display: block;
-}
-
-.l-unit--blue {
-	border-left: 2px solid #3b9de8;
-}
-
-.l-unit--suspended {
-	background-color: #eaeaea !important;
-	color: #c0c0c0;
-
-	& a {
-		color: #c0c0c0 !important;
-	}
-}
-
-.units .l-unit.l-unit--outdated {
-	background-color: #ffcaca;
-	color: #4b4b4b;
-}
-
-.body-updates .units .l-unit.l-unit--outdated .fas.fa-box-open {
-	color: #da1010;
-}
-
-.l-unit--suspended b,
-.l-unit--outdated b {
-	color: #c0c0c0;
-}
-
-.l-unit--outdated b {
-	color: #4b4b4b;
-}
-
-.l-unit--suspended.selected {
-	background-color: #f2eab8 !important;
-	color: #b2ac87 !important;
-}
-
-.l-unit--outdated.selected {
-	background: #ff9494 !important;
-	color: #333 !important;
-	text-shadow: none !important;
-}
-
-.l-unit--suspended.selected b,
-.l-unit--outdated.selected b {
-	color: #333 !important;
-}
-
-.l-unit--selected {
-	background-color: #d1eddc;
-}
-
-.l-unit-toolbar {
-	display: none;
-}
-
-.l-unit label {
-	margin-bottom: 20px;
-}
-
-.l-unit__columns {
-	display: table;
-	width: 100%;
-}
-
-.l-unit__col {
-	display: table-cell;
-	padding-top: 12px;
-	vertical-align: top;
-	padding-bottom: 10px;
-
-	@media (--viewport-large) {
-		& .actions-panel {
-			visibility: hidden;
-		}
-
-		&:hover .actions-panel {
-			visibility: visible;
-		}
-	}
-}
-
-.l-unit__col--right.total {
-	padding-left: 16px;
-}
-
-.l-unit__suspended {
-	display: none;
-	font-size: 0.8rem;
-	font-weight: 600;
-	margin-top: 36px;
-	text-transform: uppercase;
-	margin-bottom: 14px;
-}
-
-.units.compact .l-unit__suspended {
-	margin-top: 1px;
-}
-
-.l-unit--outdated .l-unit__suspended,
-.l-unit--suspended .l-unit__suspended {
-	display: block;
-}
-
-.body-stats .l-unit__stat-col--left {
-	width: 180px;
-}
-
-.body-stats .l-unit__stat-col--right {
-	float: right;
-}
-
-.l-unit__stat-col--left {
-	float: left;
-	width: 110px;
-
-	&.border {
-		border-left: 1px solid #ebebeb;
-	}
-
-	&.border-clear {
-		border-left: 1px solid transparent;
-	}
-
-	& a,
-	& a:visited {
-		color: #353535;
-	}
-
-	& a:hover {
-		color: #4c8bbe;
-	}
-
-	&.super-compact {
-		width: 50px;
-		white-space: nowrap;
-	}
-
-	&.compact {
-		width: 60px;
-	}
-
-	&.compact-1 {
-		width: 70px;
-	}
-
-	&.compact-2 {
-		width: 80px;
-	}
-
-	&.compact-3 {
-		width: 90px;
-	}
-
-	&.compact-6 {
-		width: 100px;
-	}
-
-	&.compact-4 {
-		width: 130px;
-	}
-
-	&.compact-5 {
-		width: 160px;
-	}
-
-	&.wide {
-		width: 190px;
-	}
-
-	&.wide-2 {
-		width: 230px;
-	}
-
-	&.wide-3 {
-		width: 250px;
-	}
-
-	&.wide-4 {
-		width: 320px;
-	}
-
-	&.wide-5 {
-		width: 350px;
-	}
-
-	&.wide-6 {
-		width: 440px;
-	}
-
-	&.wide-7 {
-		width: 550px;
-	}
-}
-
-.l-unit__stat-col--right {
-	float: left;
-	max-width: 170px;
-}
-
-.l-unit-toolbar__col--right {
-	float: right;
-}
-
-.l-unit-toolbar .shortcut {
-	display: none;
-}
-
-.units .l-unit.focus .l-unit-toolbar .shortcut {
-	display: block;
-	background-color: #69a298;
-	border-radius: 13px;
-	color: #fff;
-	cursor: pointer;
-	font-size: 0.8rem;
-	font-weight: 600;
-	line-height: 25px;
-	padding-left: 7px;
-	padding-right: 9px;
-	position: absolute;
-	right: 3px;
-	top: 3px;
-}
-
-.units .l-unit.focus .l-unit-toolbar .shortcut.delete {
-	font-size: 10px;
-	padding-left: 2px;
-	padding-right: 5px;
-	text-transform: capitalize;
-}
-
-.units .l-unit.focus .l-unit-toolbar .shortcut.enter {
-	font-size: 17px;
-	padding-left: 1px;
-	padding-right: 7px;
-}
-
-.units .l-unit.focus .l-unit-toolbar i {
-	background: none;
-}
-
-.actions-panel {
-	line-height: 1.1rem;
-}
-
-.actions-panel__col {
-	display: inline-block;
-	margin-left: 6px;
-
-	& a {
-		color: #777;
-		font-size: 0.9rem;
-		display: inline-block;
-	}
-
-	@media (--viewport-large) {
-		margin-left: 3px;
-	}
-}
-
 /* Statistics
    ========================================================================== */
 
@@ -2446,27 +2096,6 @@
 	box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
 }
 
-.l-unit.selected {
-	background-color: #f8f8f8;
-	color: #4b4b4b;
-	box-shadow: 0 2px 10px rgb(150 150 150 / 20%);
-	text-shadow: 0 1px rgb(255 255 255 / 50%);
-	border-left: 1px solid #ddd;
-	border-right: 1px solid #ddd;
-
-	& b,
-	& strong {
-		color: #4b4b4b;
-	}
-
-	&:hover {
-		background-color: #fff5ce;
-		color: #4b4b4b;
-		box-shadow: 0 2px 14px rgb(150 150 150 / 25%);
-		text-shadow: 0 1px rgb(255 255 255 / 60%);
-	}
-}
-
 .console-output {
 	color: #202020;
 	font-family: var(--font-family-monospace);
@@ -2474,11 +2103,6 @@
 	line-height: 1.15;
 }
 
-#vstobjects.suspended {
-	background-color: #fff;
-	padding-bottom: 30px;
-}
-
 /* Badge component
    ========================================================================== */
 
@@ -2498,13 +2122,6 @@
 	background-color: #eaeaea;
 }
 
-.l-unit--suspended .badge {
-	background: #eaeaea;
-	color: #c0c0c0;
-	text-shadow: 0 -1px #fafafa;
-	box-shadow: 0 1px 2px rgb(120 120 120 / 30%);
-}
-
 /* Icon component
    ========================================================================== */
 
@@ -2589,10 +2206,6 @@
 	text-shadow: 1px 1px rgb(255 255 255 / 30%);
 }
 
-.l-unit--suspended .icon-dim {
-	color: #c0c0c0;
-}
-
 /* Tabs component
    ========================================================================== */
 
@@ -2663,17 +2276,6 @@
 	padding: 10px 0 20px 20px;
 }
 
-.userlist-email {
-	font-size: 0.75rem;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-.userlist-username {
-	margin-top: -2px;
-	line-height: 1.2rem;
-}
-
 /* App footer
    ========================================================================== */
 

web/css/src/themes/flat.css

@@ -57,31 +57,6 @@ strong {
 	background-color: #fff;
 }
 
-.units-header {
-	box-shadow: none;
-	background: #fafafa;
-}
-
-.l-unit:hover {
-	box-shadow: none;
-}
-
-.l-unit__stat-col--left {
-	& a,
-	& a:visited {
-		color: #5f7eb3;
-	}
-
-	& a:hover {
-		color: #5f7eb3;
-	}
-}
-
-.l-unit:hover,
-.units .l-unit:hover {
-	box-shadow: none;
-}
-
 /* Units table
    ========================================================================== */
 

web/css/src/themes/vestia.css

@@ -205,34 +205,6 @@ strong {
 	}
 }
 
-.units-header {
-	box-shadow: none;
-	background: #fafafa;
-	line-height: 1.2rem;
-	border-bottom-left-radius: 0;
-	border-bottom-right-radius: 0;
-}
-
-.l-unit:hover {
-	box-shadow: none;
-}
-
-.l-unit__stat-col--left {
-	& a,
-	& a:visited {
-		color: #111;
-	}
-
-	& a:hover {
-		color: #ff6701;
-	}
-}
-
-.l-unit:hover,
-.units .l-unit:hover {
-	box-shadow: none;
-}
-
 /* Units table
    ========================================================================== */
 

web/css/src/utilities.css

@@ -1,16 +1,6 @@
 /* Utilities
    ========================================================================== */
 
-.clearfix::before,
-.clearfix::after {
-	content: " ";
-	display: table;
-}
-
-.clearfix::after {
-	clear: both;
-}
-
 .u-block {
 	display: block !important;
 }
@@ -51,10 +41,6 @@
 	font-size: 0.75rem !important;
 }
 
-.u-text-italic {
-	font-style: italic !important;
-}
-
 .u-text-bold {
 	font-weight: bold !important;
 }
@@ -69,6 +55,10 @@
 	word-break: break-word !important;
 }
 
+.u-text-no-wrap {
+	white-space: nowrap !important;
+}
+
 .u-overflow {
 	overflow: auto !important;
 }

web/js/src/navigation.js

@@ -29,7 +29,7 @@ export function enterFocused() {
 	}
 
 	const activeUnit = document.querySelector(
-		'.js-unit.focus .actions-panel__col.actions-panel__edit a'
+		'.js-unit.focus .units-table-row-actions .shortcut-enter a'
 	);
 	if (activeUnit) {
 		location.href = activeUnit.getAttribute('href');
@@ -78,8 +78,7 @@ function moveFocusLeftRight(direction) {
 }
 
 function moveFocusUpDown(direction) {
-	const unitSelector = '.js-unit:not(.header)';
-	const units = Array.from(document.querySelectorAll(unitSelector));
+	const units = Array.from(document.querySelectorAll('.js-unit'));
 	const currentFocused = document.querySelector('.js-unit.focus');
 	let index = units.indexOf(currentFocused);
 

web/js/src/shortcuts.js

@@ -130,7 +130,7 @@ export default function handleShortcuts() {
 			(_evt) => {
 				const checked = document.querySelector('.js-unit-checkbox:eq(0)').checked;
 				document
-					.querySelectorAll('.l-unit')
+					.querySelectorAll('.js-unit')
 					.forEach((el) => el.classList.toggle('selected'), !checked);
 				document.querySelectorAll('.js-unit-checkbox').forEach((el) => (el.checked = !checked));
 			},
@@ -347,7 +347,7 @@ export default function handleShortcuts() {
 		.register(
 			{ key: 'L' },
 			(_evt) => {
-				const element = document.querySelector('.js-units-container .l-unit.focus .shortcut-l');
+				const element = document.querySelector('.js-units-container .js-unit.focus .shortcut-l');
 				if (element) {
 					executeShortcut(element);
 				}
@@ -357,7 +357,7 @@ export default function handleShortcuts() {
 		.register(
 			{ key: 'S' },
 			(_evt) => {
-				const element = document.querySelector('.js-units-container .l-unit.focus .shortcut-s');
+				const element = document.querySelector('.js-units-container .js-unit.focus .shortcut-s');
 				if (element) {
 					executeShortcut(element);
 				}
@@ -367,7 +367,7 @@ export default function handleShortcuts() {
 		.register(
 			{ key: 'W' },
 			(_evt) => {
-				const element = document.querySelector('.js-units-container .l-unit.focus .shortcut-w');
+				const element = document.querySelector('.js-units-container .js-unit.focus .shortcut-w');
 				if (element) {
 					executeShortcut(element);
 				}
@@ -377,7 +377,7 @@ export default function handleShortcuts() {
 		.register(
 			{ key: 'D' },
 			(_evt) => {
-				const element = document.querySelector('.js-units-container .l-unit.focus .shortcut-d');
+				const element = document.querySelector('.js-units-container .js-unit.focus .shortcut-d');
 				if (element) {
 					executeShortcut(element);
 				}
@@ -387,7 +387,7 @@ export default function handleShortcuts() {
 		.register(
 			{ key: 'R' },
 			(_evt) => {
-				const element = document.querySelector('.js-units-container .l-unit.focus .shortcut-r');
+				const element = document.querySelector('.js-units-container .js-unit.focus .shortcut-r');
 				if (element) {
 					executeShortcut(element);
 				}
@@ -397,7 +397,7 @@ export default function handleShortcuts() {
 		.register(
 			{ key: 'N' },
 			(_evt) => {
-				const element = document.querySelector('.js-units-container .l-unit.focus .shortcut-n');
+				const element = document.querySelector('.js-units-container .js-unit.focus .shortcut-n');
 				if (element) {
 					executeShortcut(element);
 				}
@@ -407,7 +407,7 @@ export default function handleShortcuts() {
 		.register(
 			{ key: 'U' },
 			(_evt) => {
-				const element = document.querySelector('.js-units-container .l-unit.focus .shortcut-u');
+				const element = document.querySelector('.js-units-container .js-unit.focus .shortcut-u');
 				if (element) {
 					executeShortcut(element);
 				}
@@ -418,7 +418,7 @@ export default function handleShortcuts() {
 			{ code: 'Delete' },
 			(_evt) => {
 				const element = document.querySelector(
-					'.js-units-container .l-unit.focus .shortcut-delete'
+					'.js-units-container .js-unit.focus .shortcut-delete'
 				);
 				if (element) {
 					executeShortcut(element);
@@ -448,7 +448,7 @@ export default function handleShortcuts() {
 					dialog.querySelector('button[type="submit"]').click();
 				} else {
 					const element = document.querySelector(
-						'.js-units-container .l-unit.focus .shortcut-enter'
+						'.js-units-container .js-unit.focus .shortcut-enter'
 					);
 					if (element) {
 						executeShortcut(element);

web/templates/includes/panel.php

@@ -27,15 +27,23 @@
 					<div class="top-bar-usage-inner">
 						<span class="top-bar-usage-item">
 							<i class="fas <?= $user_icon ?>" title="<?= _("Logged in as") ?>: <?= htmlspecialchars($panel[$user]["NAME"]) ?>"></i>
-							<b><?= htmlspecialchars($user) ?></b>
+							<span class="u-text-bold">
+								<?= htmlspecialchars($user) ?>
+							</span>
 						</span>
 						<span class="top-bar-usage-item">
 							<i class="fas fa-hard-drive" title="<?= _("Disk") ?>: <?= humanize_usage_size($panel[$user]["U_DISK"]) ?> <?= humanize_usage_measure($panel[$user]["U_DISK"]) ?>"></i>
-							<b><?= humanize_usage_size($panel[$user]["U_DISK"]) ?></b> <?= humanize_usage_measure($panel[$user]["U_DISK"]) ?>
+							<span class="u-text-bold">
+								<?= humanize_usage_size($panel[$user]["U_DISK"]) ?>
+							</span>
+							<?= humanize_usage_measure($panel[$user]["U_DISK"]) ?>
 						</span>
 						<span class="top-bar-usage-item">
 							<i class="fas fa-right-left" title="<?= _("Bandwidth") ?>: <?= humanize_usage_size($panel[$user]["U_BANDWIDTH"]) ?> <?= humanize_usage_measure($panel[$user]["U_BANDWIDTH"]) ?>"></i>
-							<b><?= humanize_usage_size($panel[$user]["U_BANDWIDTH"]) ?></b> <?= humanize_usage_measure($panel[$user]["U_BANDWIDTH"]) ?>
+							<span class="u-text-bold">
+								<?= humanize_usage_size($panel[$user]["U_BANDWIDTH"]) ?>
+							</span>
+							<?= humanize_usage_measure($panel[$user]["U_BANDWIDTH"]) ?>
 						</span>
 					</div>
 				</div>

web/templates/pages/add_db.php

@@ -119,43 +119,43 @@
 					<div class="u-mb10">
 						<label for="v_charset" class="form-label"><?= _("Charset") ?></label>
 						<select class="form-select" name="v_charset" id="v_charset">
-							<option value=big5 <?php if ((!empty($v_charset)) && ( $v_charset == 'big5')) echo 'selected';?>>big5</option>
-							<option value=dec8 <?php if ((!empty($v_charset)) && ( $v_charset == 'dec8')) echo 'selected';?>>dec8</option>
-							<option value=cp850 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp850')) echo 'selected';?>>cp850</option>
-							<option value=hp8 <?php if ((!empty($v_charset)) && ( $v_charset == 'hp8')) echo 'selected';?>>hp8</option>
-							<option value=koi8r <?php if ((!empty($v_charset)) && ( $v_charset == 'koi8r')) echo 'selected';?>>koi8r</option>
-							<option value=latin1 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin1')) echo 'selected';?>>latin1</option>
-							<option value=latin2 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin2')) echo 'selected';?>>latin2</option>
-							<option value=swe7 <?php if ((!empty($v_charset)) && ( $v_charset == 'swe7')) echo 'selected';?>>swe7</option>
-							<option value=ascii <?php if ((!empty($v_charset)) && ( $v_charset == 'ascii')) echo 'selected';?>>ascii</option>
-							<option value=ujis <?php if ((!empty($v_charset)) && ( $v_charset == 'ujis')) echo 'selected';?>>ujis</option>
-							<option value=sjis <?php if ((!empty($v_charset)) && ( $v_charset == 'sjis')) echo 'selected';?>>sjis</option>
-							<option value=hebrew <?php if ((!empty($v_charset)) && ( $v_charset == 'hebrew')) echo 'selected';?>>hebrew</option>
-							<option value=tis620 <?php if ((!empty($v_charset)) && ( $v_charset == 'tis620')) echo 'selected';?>>tis620</option>
-							<option value=euckr <?php if ((!empty($v_charset)) && ( $v_charset == 'euckr')) echo 'selected';?>>euckr</option>
-							<option value=koi8u <?php if ((!empty($v_charset)) && ( $v_charset == 'koi8u')) echo 'selected';?>>koi8u</option>
-							<option value=gb2312 <?php if ((!empty($v_charset)) && ( $v_charset == 'gb2312')) echo 'selected';?>>gb2312</option>
-							<option value=greek <?php if ((!empty($v_charset)) && ( $v_charset == 'greek')) echo 'selected';?>>greek</option>
-							<option value=cp1250 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1250')) echo 'selected';?>>cp1250</option>
-							<option value=gbk <?php if ((!empty($v_charset)) && ( $v_charset == 'gbk')) echo 'selected';?>>gbk</option>
-							<option value=latin5 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin5')) echo 'selected';?>>latin5</option>
-							<option value=armscii8 <?php if ((!empty($v_charset)) && ( $v_charset == 'armscii8')) echo 'selected';?>>armscii8</option>
-							<option value=utf8 <?php if ((!empty($v_charset)) && ( $v_charset == 'utf8')) echo 'selected';?>>utf8</option>
-							<option value=utf8mb4 <?php if ((!empty($v_charset)) && ( $v_charset == 'utf8mb4')) echo 'selected';?> <?php if (empty($v_charset)) echo 'selected';?>>utf8mb4</option>
-							<option value=ucs2 <?php if ((!empty($v_charset)) && ( $v_charset == 'ucs2')) echo 'selected';?>>ucs2</option>
-							<option value=cp866 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp866')) echo 'selected';?>>cp866</option>
-							<option value=keybcs2 <?php if ((!empty($v_charset)) && ( $v_charset == 'keybcs2')) echo 'selected';?>>keybcs2</option>
-							<option value=macce <?php if ((!empty($v_charset)) && ( $v_charset == 'macce')) echo 'selected';?>>macce</option>
-							<option value=macroman <?php if ((!empty($v_charset)) && ( $v_charset == 'macroman')) echo 'selected';?>>macroman</option>
-							<option value=cp852 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp852')) echo 'selected';?>>cp852</option>
-							<option value=latin7 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin7')) echo 'selected';?>>latin7</option>
-							<option value=cp1251 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1251')) echo 'selected';?>>cp1251</option>
-							<option value=cp1256 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1256')) echo 'selected';?>>cp1256</option>
-							<option value=cp1257 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1257')) echo 'selected';?>>cp1257</option>
-							<option value=binary <?php if ((!empty($v_charset)) && ( $v_charset == 'binary')) echo 'selected';?>>binary</option>
-							<option value=geostd8 <?php if ((!empty($v_charset)) && ( $v_charset == 'geostd8')) echo 'selected';?>>geostd8</option>
-							<option value=cp932 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp932')) echo 'selected';?>>cp932</option>
-							<option value=eucjpms <?php if ((!empty($v_charset)) && ( $v_charset == 'eucjpms')) echo 'selected';?>>eucjpms</option>
+							<option value=big5 <?php if ((!empty($v_charset)) && ( $v_charset == 'big5')) echo 'selected'; ?>>big5</option>
+							<option value=dec8 <?php if ((!empty($v_charset)) && ( $v_charset == 'dec8')) echo 'selected'; ?>>dec8</option>
+							<option value=cp850 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp850')) echo 'selected'; ?>>cp850</option>
+							<option value=hp8 <?php if ((!empty($v_charset)) && ( $v_charset == 'hp8')) echo 'selected'; ?>>hp8</option>
+							<option value=koi8r <?php if ((!empty($v_charset)) && ( $v_charset == 'koi8r')) echo 'selected'; ?>>koi8r</option>
+							<option value=latin1 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin1')) echo 'selected'; ?>>latin1</option>
+							<option value=latin2 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin2')) echo 'selected'; ?>>latin2</option>
+							<option value=swe7 <?php if ((!empty($v_charset)) && ( $v_charset == 'swe7')) echo 'selected'; ?>>swe7</option>
+							<option value=ascii <?php if ((!empty($v_charset)) && ( $v_charset == 'ascii')) echo 'selected'; ?>>ascii</option>
+							<option value=ujis <?php if ((!empty($v_charset)) && ( $v_charset == 'ujis')) echo 'selected'; ?>>ujis</option>
+							<option value=sjis <?php if ((!empty($v_charset)) && ( $v_charset == 'sjis')) echo 'selected'; ?>>sjis</option>
+							<option value=hebrew <?php if ((!empty($v_charset)) && ( $v_charset == 'hebrew')) echo 'selected'; ?>>hebrew</option>
+							<option value=tis620 <?php if ((!empty($v_charset)) && ( $v_charset == 'tis620')) echo 'selected'; ?>>tis620</option>
+							<option value=euckr <?php if ((!empty($v_charset)) && ( $v_charset == 'euckr')) echo 'selected'; ?>>euckr</option>
+							<option value=koi8u <?php if ((!empty($v_charset)) && ( $v_charset == 'koi8u')) echo 'selected'; ?>>koi8u</option>
+							<option value=gb2312 <?php if ((!empty($v_charset)) && ( $v_charset == 'gb2312')) echo 'selected'; ?>>gb2312</option>
+							<option value=greek <?php if ((!empty($v_charset)) && ( $v_charset == 'greek')) echo 'selected'; ?>>greek</option>
+							<option value=cp1250 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1250')) echo 'selected'; ?>>cp1250</option>
+							<option value=gbk <?php if ((!empty($v_charset)) && ( $v_charset == 'gbk')) echo 'selected'; ?>>gbk</option>
+							<option value=latin5 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin5')) echo 'selected'; ?>>latin5</option>
+							<option value=armscii8 <?php if ((!empty($v_charset)) && ( $v_charset == 'armscii8')) echo 'selected'; ?>>armscii8</option>
+							<option value=utf8 <?php if ((!empty($v_charset)) && ( $v_charset == 'utf8')) echo 'selected'; ?>>utf8</option>
+							<option value=utf8mb4 <?php if ((!empty($v_charset)) && ( $v_charset == 'utf8mb4')) echo 'selected'; ?> <?php if (empty($v_charset)) echo 'selected'; ?>>utf8mb4</option>
+							<option value=ucs2 <?php if ((!empty($v_charset)) && ( $v_charset == 'ucs2')) echo 'selected'; ?>>ucs2</option>
+							<option value=cp866 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp866')) echo 'selected'; ?>>cp866</option>
+							<option value=keybcs2 <?php if ((!empty($v_charset)) && ( $v_charset == 'keybcs2')) echo 'selected'; ?>>keybcs2</option>
+							<option value=macce <?php if ((!empty($v_charset)) && ( $v_charset == 'macce')) echo 'selected'; ?>>macce</option>
+							<option value=macroman <?php if ((!empty($v_charset)) && ( $v_charset == 'macroman')) echo 'selected'; ?>>macroman</option>
+							<option value=cp852 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp852')) echo 'selected'; ?>>cp852</option>
+							<option value=latin7 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin7')) echo 'selected'; ?>>latin7</option>
+							<option value=cp1251 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1251')) echo 'selected'; ?>>cp1251</option>
+							<option value=cp1256 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1256')) echo 'selected'; ?>>cp1256</option>
+							<option value=cp1257 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1257')) echo 'selected'; ?>>cp1257</option>
+							<option value=binary <?php if ((!empty($v_charset)) && ( $v_charset == 'binary')) echo 'selected'; ?>>binary</option>
+							<option value=geostd8 <?php if ((!empty($v_charset)) && ( $v_charset == 'geostd8')) echo 'selected'; ?>>geostd8</option>
+							<option value=cp932 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp932')) echo 'selected'; ?>>cp932</option>
+							<option value=eucjpms <?php if ((!empty($v_charset)) && ( $v_charset == 'eucjpms')) echo 'selected'; ?>>eucjpms</option>
 						</select>
 					</div>
 				</div>

web/templates/pages/add_dns.php

@@ -89,12 +89,12 @@
 				</div>
 				<div x-cloak  x-show="showAdvanced" id="advtable">
 					<?php if ($_SESSION["DNS_CLUSTER_SYSTEM"] == "hestia-zone" && $_SESSION["SUPPORT_DNSSEC"] == "yes") { ?>
-					<div class="form-check u-mb10">
-						<input class="form-check-input" type="checkbox" name="v_dnssec" id="v_dnssec" value="yes" <?php if ($v_dnssec === 'yes'){ echo ' checked'; } ?>>
-						<label for="v_dnssec">
-							<?= _("Enable DNSSEC") ?>
-						</label>
-					</div>
+						<div class="form-check u-mb10">
+							<input class="form-check-input" type="checkbox" name="v_dnssec" id="v_dnssec" value="yes" <?php if ($v_dnssec === 'yes'){ echo ' checked'; } ?>>
+							<label for="v_dnssec">
+								<?= _("Enable DNSSEC") ?>
+							</label>
+						</div>
 					<?php } ?>
 					<div class="u-mb10">
 						<label for="v_exp" class="form-label">
@@ -114,37 +114,37 @@
 						<input type="text" class="form-control" name="v_ns2" value="<?= htmlentities(trim($v_ns2, "'")) ?>">
 					</div>
 					<?php
-						if($v_ns3) {
+						if ($v_ns3) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns3" value="' . htmlentities(trim($v_ns3, "'")) . '">
 								<span class="form-link form-link-danger u-ml10 js-remove-ns">' . _('Delete') . '</span>
 							</div>';
 						}
-						if($v_ns4) {
+						if ($v_ns4) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns4" value="' . htmlentities(trim($v_ns4, "'")) . '">
 								<span class="form-link form-link-danger u-ml10 js-remove-ns">' . _('Delete') . '</span>
 							</div>';
 						}
-						if($v_ns5) {
+						if ($v_ns5) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns5" value="' . htmlentities(trim($v_ns5, "'")) . '">
 								<span class="form-link form-link-danger u-ml10 js-remove-ns">' . _('Delete') . '</span>
 							</div>';
 						}
-						if($v_ns6) {
+						if ($v_ns6) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns6" value="' . htmlentities(trim($v_ns6, "'")) . '">
 								<span class="form-link form-link-danger u-ml10 js-remove-ns">' . _('Delete') . '</span>
 							</div>';
 						}
-						if($v_ns7) {
+						if ($v_ns7) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns7" value="' . htmlentities(trim($v_ns7, "'")) . '">
 								<span class="form-link form-link-danger u-ml10 js-remove-ns">' . _('Delete') . '</span>
 							</div>';
 						}
-						if($v_ns8) {
+						if ($v_ns8) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns8" value="' . htmlentities(trim($v_ns8, "'")) . '">
 								<span class="form-link form-link-danger u-ml10 js-remove-ns">' . _('Delete') . '</span>

web/templates/pages/add_package.php

@@ -200,37 +200,37 @@
 						<input type="text" class="form-control" name="v_ns2" value="<?= htmlentities(trim($v_ns2, "'")) ?>">
 					</div>
 					<?php
-						if($v_ns3) {
+						if ($v_ns3) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
 								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
 							</div>';
 						}
-						if($v_ns4) {
+						if ($v_ns4) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
 								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
 							</div>';
 						}
-						if($v_ns5) {
+						if ($v_ns5) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
 								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
 							</div>';
 						}
-						if($v_ns6) {
+						if ($v_ns6) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
 								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
 							</div>';
 						}
-						if($v_ns7) {
+						if ($v_ns7) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
 								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
 							</div>';
 						}
-						if($v_ns8) {
+						if ($v_ns8) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
 								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>

web/templates/pages/edit_dns.php

@@ -65,12 +65,12 @@
 				</div>
 			<?php } ?>
 			<?php if ($_SESSION["DNS_CLUSTER_SYSTEM"] == "hestia-zone" && $_SESSION["SUPPORT_DNSSEC"] == "yes") { ?>
-			<div class="form-check u-mb10">
-				<input class="form-check-input" type="checkbox" name="v_dnssec" id="v_dnssec" value="yes" <?php if ($v_dnssec === 'yes'){ echo ' checked'; } ?>>
-				<label for="v_dnssec">
-					<?= _("Enable DNSSEC") ?>
-				</label>
-			</div>
+				<div class="form-check u-mb10">
+					<input class="form-check-input" type="checkbox" name="v_dnssec" id="v_dnssec" value="yes" <?php if ($v_dnssec === 'yes'){ echo ' checked'; } ?>>
+					<label for="v_dnssec">
+						<?= _("Enable DNSSEC") ?>
+					</label>
+				</div>
 			<?php } ?>
 			<div class="u-mb10">
 				<label for="v_exp" class="form-label">

web/templates/pages/edit_package.php

@@ -204,37 +204,37 @@
 						<input type="text" class="form-control" name="v_ns2" value="<?= htmlentities(trim($v_ns2, "'")) ?>">
 					</div>
 					<?php
-						if($v_ns3) {
+						if ($v_ns3) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
 								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
 							</div>';
 						}
-						if($v_ns4) {
+						if ($v_ns4) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
 								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
 							</div>';
 						}
-						if($v_ns5) {
+						if ($v_ns5) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
 								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
 							</div>';
 						}
-						if($v_ns6) {
+						if ($v_ns6) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
 								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
 							</div>';
 						}
-						if($v_ns7) {
+						if ($v_ns7) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
 								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
 							</div>';
 						}
-						if($v_ns8) {
+						if ($v_ns8) {
 							echo '<div class="u-side-by-side u-mb5">
 								<input type="text" class="form-control" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
 								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>

web/templates/pages/edit_user.php

@@ -254,37 +254,37 @@
 							<input type="text" class="form-control" name="v_ns2" value="<?= htmlentities(trim($v_ns2, "'")) ?>">
 						</div>
 						<?php
-							if($v_ns3) {
+							if ($v_ns3) {
 								echo '<div class="u-side-by-side u-mb5">
 									<input type="text" class="form-control" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
 									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
 								</div>';
 							}
-							if($v_ns4) {
+							if ($v_ns4) {
 								echo '<div class="u-side-by-side u-mb5">
 									<input type="text" class="form-control" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
 									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
 								</div>';
 							}
-							if($v_ns5) {
+							if ($v_ns5) {
 								echo '<div class="u-side-by-side u-mb5">
 									<input type="text" class="form-control" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
 									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
 								</div>';
 							}
-							if($v_ns6) {
+							if ($v_ns6) {
 								echo '<div class="u-side-by-side u-mb5">
 									<input type="text" class="form-control" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
 									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
 								</div>';
 							}
-							if($v_ns7) {
+							if ($v_ns7) {
 								echo '<div class="u-side-by-side u-mb5">
 									<input type="text" class="form-control" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
 									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
 								</div>';
 							}
-							if($v_ns8) {
+							if ($v_ns8) {
 								echo '<div class="u-side-by-side u-mb5">
 									<input type="text" class="form-control" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
 									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>

web/templates/pages/edit_web.php

@@ -134,13 +134,13 @@
 					</label>
 				</div>
 				<div class="form-check">
-					<input class="form-check-input js-redirect-custom-value" type="radio" name="v-redirect" id="v-redirect-radio-2" value="<?= htmlentities($v_domain);?>" <?php if ( $v_redirect == $v_domain) echo 'checked';?> >
+					<input class="form-check-input js-redirect-custom-value" type="radio" name="v-redirect" id="v-redirect-radio-2" value="<?= htmlentities($v_domain);?>" <?php if ( $v_redirect == $v_domain) echo 'checked'; ?>>
 					<label for="v-redirect-radio-2">
 						<?= sprintf(_("Redirect visitors to %s"), htmlentities($v_domain)) ?>
 					</label>
 				</div>
 				<div class="form-check">
-					<input class="form-check-input js-redirect-custom-value" type="radio" name="v-redirect" id="v-redirect-radio-3" value="custom" <?php if ( !empty($v_redirect_custom)) echo 'checked';?>>
+					<input class="form-check-input js-redirect-custom-value" type="radio" name="v-redirect" id="v-redirect-radio-3" value="custom" <?php if ( !empty($v_redirect_custom)) echo 'checked'; ?>>
 					<label for="v-redirect-radio-3">
 						<?= _("Redirect visitors to a custom domain or web address") ?>
 					</label>
@@ -185,7 +185,10 @@
 				<div class="form-check u-mb20">
 					<input class="form-check-input" type="checkbox" name="v_ssl_hsts" id="ssl_hsts" <?php if ($v_ssl_hsts == 'yes') echo 'checked' ?>>
 					<label for="ssl_hsts">
-						<?= _("Enable HTTP Strict Transport Security (HSTS)") ?><a href="https://en.wikipedia.org/wiki/HTTP_Strict_Transport_Security" target="_blank"><i class="fas fa-question-circle"></i></a>
+						<?= _("Enable HTTP Strict Transport Security (HSTS)") ?>
+						<a href="https://en.wikipedia.org/wiki/HTTP_Strict_Transport_Security" target="_blank">
+							<i class="fas fa-question-circle"></i>
+						</a>
 					</label>
 				</div>
 				<div x-cloak x-show="showCertificates" class="js-ssl-details">

web/templates/pages/list_dns.php

@@ -94,6 +94,13 @@
 					$spnd_icon = 'fa-play';
 					$spnd_icon_class = 'icon-green';
 					$spnd_confirmation = _('Are you sure you want to unsuspend domain %s?');
+					if ($data[$key]['DNSSEC'] !== 'yes') {
+						$dnssec_icon = 'fa-circle-xmark';
+						$dnssec_title = _('Disabled');
+					} else {
+						$dnssec_icon = 'fa-circle-check';
+						$dnssec_title = _('Enabled');
+					}
 				} else {
 					$status = 'active';
 					$spnd_action = 'suspend';
@@ -102,10 +109,10 @@
 					$spnd_icon_class = 'icon-highlight';
 					$spnd_confirmation = _('Are you sure you want to suspend domain %s?');
 					if ($data[$key]['DNSSEC'] !== 'yes') {
-						$dnssec_icon = 'fa-circle-xmark';
+						$dnssec_icon = 'fa-circle-xmark icon-red';
 						$dnssec_title = _('Disabled');
 					} else {
-						$dnssec_icon = 'fa-circle-check';
+						$dnssec_icon = 'fa-circle-check icon-green';
 						$dnssec_title = _('Enabled');
 					}
 				}

web/templates/pages/list_dns_public.php

@@ -9,49 +9,6 @@
 			<?php } ?>
 		</div>
 		<div class="toolbar-right">
-			<div class="toolbar-sorting">
-				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
-					<?= _("Sort by") ?>:
-					<span class="u-text-bold">
-						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
-					</span>
-				</button>
-				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
-					<li data-entity="sort-date" data-sort-as-int="1">
-						<span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
-					</li>
-					<li data-entity="sort-expire" data-sort-as-int="1">
-						<span class="name"><?= _("Expire") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
-					</li>
-					<li data-entity="sort-ip">
-						<span class="name"><?= _("IP Address") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
-					</li>
-					<li data-entity="sort-name">
-						<span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?= _("Name") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
-					</li>
-					<li data-entity="sort-records">
-						<span class="name"><?= _("Records") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
-					</li>
-				</ul>
-				<?php if ($read_only !== "true") { ?>
-					<form x-data x-bind="BulkEdit" action="/bulk/dns/" method="post">
-						<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>" />
-						<select class="form-select" name="action">
-							<option value=""><?= _("Apply to selected") ?></option>
-							<?php if ($_SESSION["userContext"] === "admin") { ?>
-								<option value="rebuild"><?= _("Rebuild") ?></option>
-							<?php } ?>
-							<option value="suspend"><?= _("Suspend") ?></option>
-							<option value="unsuspend"><?= _("Unsuspend") ?></option>
-							<option value="delete"><?= _("Delete") ?></option>
-						</select>
-						<button type="submit" class="toolbar-input-submit" title="<?= _("Apply to selected") ?>">
-							<i class="fas fa-arrow-right"></i>
-						</button>
-					</form>
-				<?php } ?>
-			</div>
 			<div class="toolbar-search">
 				<form action="/search/" method="get">
 					<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>" />
@@ -68,48 +25,35 @@
 
 <div class="container">
 
-	<div class="units js-units-container">
-		<div class="l-unit animate__animated animate__fadeIn js-unit">
-			<div class="l-unit__col l-unit__col--right">
-				<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("DNSKEY Record") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $data[$domain]["RECORD"]; ?>"></b></div>
-			</div>
-		</div>
-		<div class="l-unit animate__animated animate__fadeIn js-unit">
-			<div class="l-unit__col l-unit__col--right">
-				<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("DS Record") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $data[$domain]["DS"]; ?>"></b></div>
-			</div>
-		</div>
-		<div class="l-unit animate__animated animate__fadeIn js-unit">
-			<div class="l-unit__col l-unit__col--right">
-				<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("Public Key") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $data[$domain]["KEY"]; ?>"></b></div>
-			</div>
-		</div>
-		<div class="l-unit animate__animated animate__fadeIn js-unit">
-			<div class="l-unit__col l-unit__col--right">
-				<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("Key Type / Flag") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $flag; ?>"></b></div>
-			</div>
-		</div>
-		<div class="l-unit animate__animated animate__fadeIn js-unit">
-			<div class="l-unit__col l-unit__col--right">
-				<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("Key Tag") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $data[$domain]["KEYTAG"]; ?>"></b></div>
-			</div>
-		</div>
-		<div class="l-unit animate__animated animate__fadeIn js-unit">
-			<div class="l-unit__col l-unit__col--right">
-				<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("Flag") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $data[$domain]["FLAG"]; ?>"></b></div>
-			</div>
-		</div>
-		<div class="l-unit animate__animated animate__fadeIn js-unit">
-			<div class="l-unit__col l-unit__col--right">
-				<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("Algorithm") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $algorithm; ?>"></b></div>
-			</div>
+	<div class="form-container">
+		<h1 class="form-title"><?= _("View Public DNSSEC Key") ?></h1>
+		<div class="u-mb10">
+			<label class="form-label"><?= _("DNSKEY Record") ?></label>
+			<input type="text" class="form-control" value="<?php echo $data[$domain]["RECORD"]; ?>" readonly>
+		</div>
+		<div class="u-mb10">
+			<label class="form-label"><?= _("DS Record") ?></label>
+			<input type="text" class="form-control" value="<?php echo $data[$domain]["DS"]; ?>" readonly>
+		</div>
+		<div class="u-mb10">
+			<label class="form-label"><?= _("Public Key") ?></label>
+			<input type="text" class="form-control" value="<?php echo $data[$domain]["KEY"]; ?>" readonly>
+		</div>
+		<div class="u-mb10">
+			<label class="form-label"><?= _("Key Type / Flag") ?></label>
+			<input type="text" class="form-control" value="<?php echo $flag; ?>" readonly>
+		</div>
+		<div class="u-mb10">
+			<label class="form-label"><?= _("Key Tag") ?></label>
+			<input type="text" class="form-control" value="<?php echo $data[$domain]["KEYTAG"]; ?>" readonly>
+		</div>
+		<div class="u-mb10">
+			<label class="form-label"><?= _("Flag") ?></label>
+			<input type="text" class="form-control" value="<?php echo $data[$domain]["FLAG"]; ?>" readonly>
+		</div>
+		<div class="u-mb10">
+			<label class="form-label"><?= _("Algorithm") ?></label>
+			<input type="text" class="form-control" value="<?php echo $algorithm; ?>" readonly>
 		</div>
 	</div>
 

web/templates/pages/list_dns_rec.php

@@ -72,20 +72,17 @@
 
 <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"><b><?= _("Record") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left super-compact u-text-right"><b>&nbsp;</b></div>
-				<div class="clearfix l-unit__stat-col--left compact u-text-center" style="padding-left: 32px;"><b><?= _("Type") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left compact u-text-center"><b><?= _("Priority") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left compact u-text-center"><b><?= _("TTL") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left super-compact"><b>&nbsp;</b></div>
-				<div class="clearfix l-unit__stat-col--left wide-6"><b><?= _("IP or Value") ?></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"><?= _("Record") ?></div>
+			<div class="units-table-cell"></div>
+			<div class="units-table-cell u-text-center"><?= _("Type") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Priority") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("TTL") ?></div>
+			<div class="units-table-cell"><?= _("IP or Value") ?></div>
 		</div>
 
 		<!-- Begin DNS record list item loop -->
@@ -94,63 +91,81 @@
 				++$i;
 				if ($data[$key]['SUSPENDED'] == 'yes') {
 					$status = 'suspended';
-				}else{
+				} else {
 					$status = 'active';
-
 				}
 			?>
-			<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended';?> animate__animated animate__fadeIn js-unit"
+			<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-record="<?= $data[$key]['RECORD'] ?>"
 				data-sort-type="<?= $data[$key]['TYPE'] ?>"
 				data-sort-ttl="<?= $data[$key]['TTL'] ?>"
 				data-sort-value="<?= $data[$key]['VALUE'] ?>">
-				<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<?= $data[$key]["ID"] ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="record[]" value="<?= $data[$key]["ID"] ?>" <?= $display_mode ?>>
+						<label for="check<?= $data[$key]["ID"] ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-truncate">
-						<b>
-						<?php if (($read_only === 'true') || ($data[$key]['SUSPENDED'] == 'yes')) { ?>
-							<?= substr($data[$key]['RECORD'], 0, 12); if(strlen($data[$key]['RECORD']) > 12 ) echo '...'; ?>
-						<?php } else { ?>
-							<a href="/edit/dns/?domain=<?= htmlspecialchars($_GET['domain']) ?>&record_id=<?= $data[$key]['ID'] ?>&token=<?= $_SESSION['token'] ?>" title="<?= _("Edit DNS Record") . ': '.htmlspecialchars($data[$key]['RECORD']) ?>"><? echo substr($data[$key]['RECORD'], 0, 12); if(strlen($data[$key]['RECORD']) > 12 ) echo '...'; ?></a>
-						<?php } ?>
-						</b>
-					</div>
-				<!-- START QUICK ACTION TOOLBAR AREA -->
-				<div class="clearfix l-unit__stat-col--left super-compact 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 editing of DNS records when impersonating 'admin' account -->
-								&nbsp;
-							<?php } else { ?>
+				</div>
+				<div class="units-table-cell units-table-heading-cell u-text-bold">
+					<span class="u-hide-desktop"><?= _("Record") ?>:</span>
+					<?php if (($read_only === 'true') || ($data[$key]['SUSPENDED'] == 'yes')) { ?>
+						<?= substr($data[$key]['RECORD'], 0, 12); if (strlen($data[$key]['RECORD']) > 12 ) echo '...'; ?>
+					<?php } else { ?>
+						<a href="/edit/dns/?domain=<?= htmlspecialchars($_GET['domain']) ?>&record_id=<?= $data[$key]['ID'] ?>&token=<?= $_SESSION['token'] ?>" title="<?= _("Edit DNS Record") . ': '.htmlspecialchars($data[$key]['RECORD']) ?>">
+							<? echo substr($data[$key]['RECORD'], 0, 12); if (strlen($data[$key]['RECORD']) > 12 ) echo '...'; ?>
+						</a>
+					<?php } ?>
+				</div>
+				<div class="units-table-cell">
+					<?php if ($read_only !== "true") { ?>
+						<ul class="units-table-row-actions">
+							<?php if ($read_only !== "true") { ?>
 								<?php if ($data[$key]['SUSPENDED'] == 'no') { ?>
-									<div class="actions-panel__col actions-panel__logs shortcut-enter" data-key-action="href"><a href="/edit/dns/?domain=<?= htmlspecialchars($_GET['domain']) ?>&record_id=<?= $data[$key]['ID'] ?>&token=<?= $_SESSION['token'] ?>" title="<?= _("Edit DNS Record") ?>"><i class="fas fa-pencil icon-orange icon-dim"></i></a></div>
+									<li class="units-table-row-action shortcut-enter" data-key-action="href">
+										<a
+											class="units-table-row-action-link"
+											href="/edit/dns/?domain=<?= htmlspecialchars($_GET['domain']) ?>&record_id=<?= $data[$key]['ID'] ?>&token=<?= $_SESSION['token'] ?>"
+											title="<?= _("Edit DNS Record") ?>"
+										>
+											<i class="fas fa-pencil icon-orange"></i>
+											<span class="u-hide-desktop"><?= _("Edit DNS Record") ?></span>
+										</a>
+									</li>
 								<?php } ?>
-								<div class="actions-panel__col actions-panel__delete shortcut-delete" data-key-action="js">
+								<li class="units-table-row-action shortcut-delete" data-key-action="js">
 									<a
-										class="data-controls js-confirm-action"
+										class="units-table-row-action-link data-controls js-confirm-action"
 										href="/delete/dns/?domain=<?= htmlspecialchars($_GET["domain"]) ?>&record_id=<?= $data[$key]["ID"] ?>&token=<?= $_SESSION["token"] ?>"
+										title="<?= _("Delete") ?>"
 										data-confirm-title="<?= _("Delete") ?>"
 										data-confirm-message="<?= sprintf(_("Are you sure you want to delete record %s?"), $key) ?>"
 									>
-										<i class="fas fa-trash icon-red icon-dim"></i>
+										<i class="fas fa-trash icon-red"></i>
+										<span class="u-hide-desktop"><?= _("Delete") ?></span>
 									</a>
-								</div>
+								</li>
 							<?php } ?>
-						</div>
-					</div>
+						</ul>
+					<?php } ?>
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("Type") ?>:</span>
+					<?= $data[$key]['TYPE'] ?>
+				</div>
+				<div class="units-table-cell u-text-center-desktop">
+					<span class="u-hide-desktop u-text-bold"><?= _("Priority") ?>:</span>
+					<?= $data[$key]['PRIORITY'] ?>
+				</div>
+				<div class="units-table-cell u-text-center-desktop">
+					<span class="u-hide-desktop u-text-bold"><?= _("TTL") ?>:</span>
+					<?php if ($data[$key]['TTL'] == ''){ echo _('Default'); } else { echo $data[$key]['TTL'];} ?>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("IP or Value") ?>:</span>
+					<?= htmlspecialchars($data[$key]["VALUE"], ENT_QUOTES, "UTF-8") ?>
 				</div>
-				<!-- END QUICK ACTION TOOLBAR AREA -->
-				<div class="clearfix l-unit__stat-col--left compact u-text-center" style="padding-left: 32px;"><b><?= $data[$key]['TYPE'] ?></b></div>
-				<div class="clearfix l-unit__stat-col--left compact u-text-center"><?= $data[$key]['PRIORITY'] ?>&nbsp;</div>
-				<div class="clearfix l-unit__stat-col--left compact u-text-center"><?php if ($data[$key]['TTL'] == ''){ echo _('Default'); }else{ echo $data[$key]['TTL'];} ?></div>
-				<div class="clearfix l-unit__stat-col--left super-compact"><b>&nbsp;</b></div>
-				<div class="clearfix l-unit__stat-col--left wide-6 u-text-break"><?= htmlspecialchars($data[$key]["VALUE"], ENT_QUOTES, "UTF-8") ?></div>
 			</div>
-		</div>
 		<?php } ?>
 	</div>
 

web/templates/pages/list_firewall.php

@@ -60,19 +60,17 @@
 
 <div class="container">
 
-	<div class="units compact 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") ?>">
-				</div>
-				<div class="clearfix l-unit__stat-col--left wide-1"><b><?= _("Action") ?></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 wide-3"><b><?= _("Comment") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Protocol") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left wide-3 u-text-center"><b><?= _("Port") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("IP Address") ?></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"><?= _("Action") ?></div>
+			<div class="units-table-cell"></div>
+			<div class="units-table-cell"><?= _("Comment") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Protocol") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Port") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("IP Address") ?></div>
 		</div>
 
 		<!-- Begin firewall chain/action list item loop -->
@@ -84,74 +82,95 @@
 					$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 rule #%s?') ;
 				} 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 rule #%s?') ;
 				}
 			?>
-			<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-unit"
+			<div class="units-table-row <?php if ($status == 'suspended') echo 'disabled'; ?> animate__animated animate__fadeIn js-unit"
 				data-sort-action="<?= $data[$key]['ACTION'] ?>"
 				data-sort-protocol="<?= $data[$key]['PROTOCOL'] ?>"
 				data-sort-port="<?= $data[$key]['PORT'] ?>"
 				data-sort-ip="<?= str_replace('.', '', $data[$key]['IP']) ?>"
 				data-sort-comment="<?= $data[$key]['COMMENT'] ?>">
-				<div class="l-unit__col l-unit__col--right">
+				<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="rule[]" value="<?= $key ?>">
-						</div>
-						<div class="clearfix l-unit__stat-col--left wide-1">
-							<b>
-								<a href="/edit/firewall/?rule=<?= $key ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Edit Firewall Rule") ?>">
-									<?php
-										$suspended = $data[$key]["SUSPENDED"] == "no";
-										$action = $data[$key]["ACTION"];
-										$iconClass = $action == "DROP" ? "fa-circle-minus" : "fa-circle-check";
-										$colorClass = $action == "DROP" ? "icon-red" : "icon-green";
-									?>
-									<i class="fas <?= $iconClass ?> u-mr5 <?= $suspended ? $colorClass : "" ?>"></i> <?= $action ?>
-								</a>
-							</b>
-						</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" style="padding-right: 10px;">
-									<div class="actions-panel__col actions-panel__logs shortcut-enter" data-key-action="href"><a href="/edit/firewall/?rule=<?= $key ?>&token=<?= $_SESSION['token'] ?>" title="<?= _("Edit Firewall Rule") ?>"><i class="fas fa-pencil icon-orange icon-dim"></i></a></div>
-									<div class="actions-panel__col actions-panel__suspend shortcut-s" data-key-action="js">
-										<a
-											class="data-controls js-confirm-action"
-											href="/<?= $spnd_action ?>/firewall/?rule=<?= $key ?>&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/firewall/?rule=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
-											data-confirm-title="<?= _("Delete") ?>"
-											data-confirm-message="<?= sprintf(_("Are you sure you want to delete rule %s"), $key) ?>"
-										>
-											<i class="fas fa-trash icon-red icon-dim"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-						<!-- END QUICK ACTION TOOLBAR AREA -->
-						<div class="clearfix l-unit__stat-col--left wide-3"><b><?php if (!empty($data[$key]['COMMENT'])) echo '' . $data[$key]['COMMENT']; else echo "&nbsp;"; ?></b></div>
-						<div class="clearfix l-unit__stat-col--left u-text-center"><?= _($data[$key]['PROTOCOL']) ?></div>
-						<div class="clearfix l-unit__stat-col--left wide-3 u-text-center"><b><?= $data[$key]['PORT'] ?></b></div>
-						<div class="clearfix l-unit__stat-col--left u-text-center"><?= $data[$key]['IP'] ?></div>
+						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="rule[]" value="<?= $key ?>">
+						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
 				</div>
+				<div class="units-table-cell u-text-bold units-table-heading-cell">
+					<span class="u-hide-desktop"><?= _("Action") ?>:</span>
+					<a href="/edit/firewall/?rule=<?= $key ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Edit Firewall Rule") ?>">
+						<?php
+							$suspended = $data[$key]["SUSPENDED"] == "no";
+							$action = $data[$key]["ACTION"];
+							$iconClass = $action == "DROP" ? "fa-circle-minus" : "fa-circle-check";
+							$colorClass = $action == "DROP" ? "icon-red" : "icon-green";
+						?>
+						<i class="fas <?= $iconClass ?> u-mr5 <?= $suspended ? $colorClass : "" ?>"></i> <?= $action ?>
+					</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/firewall/?rule=<?= $key ?>&token=<?= $_SESSION['token'] ?>"
+								title="<?= _("Edit Firewall Rule") ?>"
+							>
+								<i class="fas fa-pencil icon-orange"></i>
+								<span class="u-hide-desktop"><?= _("Edit Firewall Rule") ?></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="/<?= $spnd_action ?>/firewall/?rule=<?= $key ?>&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/firewall/?rule=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
+								title="<?= _("Delete") ?>"
+								data-confirm-title="<?= _("Delete") ?>"
+								data-confirm-message="<?= sprintf(_("Are you sure you want to delete rule %s"), $key) ?>"
+							>
+								<i class="fas fa-trash icon-red"></i>
+								<span class="u-hide-desktop"><?= _("Delete") ?></span>
+							</a>
+						</li>
+					</ul>
+				</div>
+				<div class="units-table-cell u-text-bold">
+					<span class="u-hide-desktop"><?= _("Comment") ?>:</span>
+					<?php if (!empty($data[$key]['COMMENT'])) echo '' . $data[$key]['COMMENT']; else echo "&nbsp;"; ?>
+				</div>
+				<div class="units-table-cell u-text-center-desktop">
+					<span class="u-hide-desktop u-text-bold"><?= _("Protocol") ?>:</span>
+					<?= _($data[$key]['PROTOCOL']) ?>
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("Port") ?>:</span>
+					<?= $data[$key]['PORT'] ?>
+				</div>
+				<div class="units-table-cell u-text-center-desktop">
+					<span class="u-hide-desktop u-text-bold"><?= _("IP Address") ?>:</span>
+					<?= $data[$key]['IP'] ?>
+				</div>
 			</div>
 		<?php } ?>
 	</div>

web/templates/pages/list_ip.php

@@ -56,22 +56,18 @@
 
 <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") ?>">
-					</div>
-					<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("IP Address") ?></b></div>
-					<div class="clearfix l-unit__stat-col--left compact u-text-right"><b>&nbsp;</b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center compact-5"><b><?= _("Netmask") ?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Interface") ?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Status") ?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Domains") ?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Owner") ?></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") ?>">
 			</div>
+			<div class="units-table-cell"><?= _("IP Address") ?></div>
+			<div class="units-table-cell"></div>
+			<div class="units-table-cell u-text-center"><?= _("Netmask") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Interface") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Status") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Domains") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Owner") ?></div>
 		</div>
 
 		<!-- Begin IP address list item loop -->
@@ -79,44 +75,70 @@
 			foreach ($data as $key => $value) {
 				++$i;
 			?>
-			<div class="l-unit animate__animated animate__fadeIn js-unit"
+			<div class="units-table-row animate__animated animate__fadeIn js-unit"
 				data-sort-ip="<?= str_replace(".", "", $key) ?>"
 				data-sort-date="<?= strtotime($data[$key]["DATE"] . " " . $data[$key]["TIME"]) ?>"
 				data-sort-netmask="<?= str_replace(".", "", $data[$key]["NETMASK"]) ?>"
 				data-sort-interface="<?= $data[$key]["INTERFACE"] ?>"
 				data-sort-domains="<?= $data[$key]["U_WEB_DOMAINS"] ?>"
 				data-sort-owner="<?= $data[$key]["OWNER"] ?>">
-
-				<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="ip[]" value="<?= $key ?>">
+						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
-					<div class="clearfix l-unit__stat-col--left wide-3"><b><a href="/edit/ip/?ip=<?= $key ?>&token=<?= $_SESSION['token'] ?>" title="<?= _("Edit IP Address") ?>"><?= $key ?> <?php if (!empty($data[$key]['NAT'])) echo ' → ' . $data[$key]['NAT'] . ''; ?></a></b>
-					</div>
-					<!-- START QUICK ACTION TOOLBAR AREA -->
-					<div class="clearfix l-unit__stat-col--left compact u-text-right">
-						<div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
-							<div class="actions-panel clearfix">
-								<div class="actions-panel__col actions-panel__logs shortcut-enter" data-key-action="href"><a href="/edit/ip/?ip=<?= $key ?>&token=<?= $_SESSION['token'] ?>" title="<?= _("Edit IP Address") ?>"><i class="fas fa-pencil icon-orange 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/ip/?ip=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
-										data-confirm-title="<?= _("Delete") ?>"
-										data-confirm-message="<?= sprintf(_("Are you sure you want to delete IP address %s?"), $key) ?>"
-									>
-										<i class="fas fa-trash icon-red icon-dim"></i>
-									</a>
-								</div>
-							</div>
-						</div>
-					</div>
-					<!-- END QUICK ACTION TOOLBAR AREA -->
-					<div class="clearfix l-unit__stat-col--left u-text-center compact-5"><?= $data[$key]["NETMASK"] ?></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><?= $data[$key]["INTERFACE"] ?></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _($data[$key]["STATUS"]) ?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= $data[$key]["U_WEB_DOMAINS"] ?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= $data[$key]["OWNER"] ?></b></div>
+				</div>
+				<div class="units-table-cell units-table-heading-cell u-text-bold">
+					<span class="u-hide-desktop"><?= _("IP Address") ?>:</span>
+					<a href="/edit/ip/?ip=<?= $key ?>&token=<?= $_SESSION['token'] ?>" title="<?= _("Edit IP Address") ?>">
+						<?= $key ?> <?php if (!empty($data[$key]['NAT'])) echo ' → ' . $data[$key]['NAT'] . ''; ?>
+					</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/ip/?ip=<?= $key ?>&token=<?= $_SESSION['token'] ?>"
+								title="<?= _("Edit IP Address") ?>"
+							>
+								<i class="fas fa-pencil icon-orange"></i>
+								<span class="u-hide-desktop"><?= _("Edit IP Address") ?></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/ip/?ip=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
+								title="<?= _("Delete") ?>"
+								data-confirm-title="<?= _("Delete") ?>"
+								data-confirm-message="<?= sprintf(_("Are you sure you want to delete IP address %s?"), $key) ?>"
+							>
+								<i class="fas fa-trash icon-red"></i>
+								<span class="u-hide-desktop"><?= _("Delete") ?></span>
+							</a>
+						</li>
+					</ul>
+				</div>
+				<div class="units-table-cell u-text-center-desktop">
+					<span class="u-hide-desktop u-text-bold"><?= _("Netmask") ?>:</span>
+					<?= $data[$key]["NETMASK"] ?>
+				</div>
+				<div class="units-table-cell u-text-center-desktop">
+					<span class="u-hide-desktop u-text-bold"><?= _("Interface") ?>:</span>
+					<?= $data[$key]["INTERFACE"] ?>
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("Status") ?>:</span>
+					<?= _($data[$key]["STATUS"]) ?>
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("Domains") ?>:</span>
+					<?= $data[$key]["U_WEB_DOMAINS"] ?>
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("Owner") ?>:</span>
+					<?= $data[$key]["OWNER"] ?>
 				</div>
 			</div>
 		<?php } ?>

web/templates/pages/list_log.php

@@ -48,20 +48,18 @@
 				<!-- Hide delete buttons-->
 			<?php } else { ?>
 				<?php if ($_SESSION["userContext"] === "admin" || ($_SESSION["userContext"] === "user" && $_SESSION["POLICY_USER_DELETE_LOGS"] !== "no")) { ?>
-					<div class="actions-panel" data-key-action="js">
-						<a
-							class="button button-secondary button-danger data-controls js-confirm-action"
-							<?php if ($_SESSION["userContext"] === "admin" && isset($_GET["user"])) { ?>
-								href="/delete/log/?user=<?= htmlentities($_GET["user"]) ?>&token=<?= $_SESSION["token"] ?>"
-							<?php } else { ?>
-								href="/delete/log/?token=<?= $_SESSION["token"] ?>"
-							<?php } ?>
-							data-confirm-title="<?= _("Delete") ?>"
-							data-confirm-message="<?= _("Are you sure you want to delete the logs?") ?>"
-						>
-							<i class="fas fa-circle-xmark icon-red"></i><?= _("Delete") ?>
-						</a>
-					</div>
+					<a
+						class="button button-secondary button-danger data-controls js-confirm-action"
+						<?php if ($_SESSION["userContext"] === "admin" && isset($_GET["user"])) { ?>
+							href="/delete/log/?user=<?= htmlentities($_GET["user"]) ?>&token=<?= $_SESSION["token"] ?>"
+						<?php } else { ?>
+							href="/delete/log/?token=<?= $_SESSION["token"] ?>"
+						<?php } ?>
+						data-confirm-title="<?= _("Delete") ?>"
+						data-confirm-message="<?= _("Are you sure you want to delete the logs?") ?>"
+					>
+						<i class="fas fa-circle-xmark icon-red"></i><?= _("Delete") ?>
+					</a>
 				<?php } ?>
 			<?php } ?>
 		</div>

web/templates/pages/list_log_auth.php

@@ -18,20 +18,18 @@
 				<!-- Hide delete buttons-->
 			<?php } else { ?>
 				<?php if ($_SESSION["userContext"] === "admin" || ($_SESSION["userContext"] === "user" && $_SESSION["POLICY_USER_DELETE_LOGS"] !== "no")) { ?>
-					<div class="actions-panel" data-key-action="js">
-						<a
-							class="button button-secondary button-danger data-controls js-confirm-action"
-							<?php if ($_SESSION["userContext"] === "admin" && isset($_GET["user"])) { ?>
-								href="/delete/log/auth/?user=<?= htmlentities($_GET["user"]) ?>&token=<?= $_SESSION["token"] ?>"
-							<?php } else { ?>
-								href="/delete/log/auth/?token=<?= $_SESSION["token"] ?>"
-							<?php } ?>
-							data-confirm-title="<?= _("Delete") ?>"
-							data-confirm-message="<?= _("Are you sure you want to delete the logs?") ?>"
-						>
-							<i class="fas fa-circle-xmark icon-red"></i><?= _("Delete") ?>
-						</a>
-					</div>
+					<a
+						class="button button-secondary button-danger data-controls js-confirm-action"
+						<?php if ($_SESSION["userContext"] === "admin" && isset($_GET["user"])) { ?>
+							href="/delete/log/auth/?user=<?= htmlentities($_GET["user"]) ?>&token=<?= $_SESSION["token"] ?>"
+						<?php } else { ?>
+							href="/delete/log/auth/?token=<?= $_SESSION["token"] ?>"
+						<?php } ?>
+						data-confirm-title="<?= _("Delete") ?>"
+						data-confirm-message="<?= _("Are you sure you want to delete the logs?") ?>"
+					>
+						<i class="fas fa-circle-xmark icon-red"></i><?= _("Delete") ?>
+					</a>
 				<?php } ?>
 			<?php } ?>
 		</div>
@@ -41,17 +39,13 @@
 
 <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 u-text-center">
-					<b><?= _("Status") ?></b>
-				</div>
-				<div class="clearfix l-unit__stat-col--left"><b><?= _("Date") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left compact-2"><b><?= _("Time") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left"><b><?= _("IP Address") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left wide-7"><b><?= _("Browser") ?></b></div>
-			</div>
+	<div class="units-table js-units-container">
+		<div class="units-table-header">
+			<div class="units-table-cell"><?= _("Status") ?></div>
+			<div class="units-table-cell"><?= _("Date") ?></div>
+			<div class="units-table-cell"><?= _("Time") ?></div>
+			<div class="units-table-cell"><?= _("IP Address") ?></div>
+			<div class="units-table-cell"><?= _("Browser") ?></div>
 		</div>
 
 		<!-- Begin log history entry loop -->
@@ -74,15 +68,29 @@
 					$status_title = _('Failed');
 				}
 			?>
-			<div class="l-unit header animate__animated animate__fadeIn js-unit">
-				<div class="l-unit__col l-unit__col--right">
-					<div class="clearfix l-unit__stat-col--left u-text-center">
-						<i class="fas <?= $status_icon ?> u-mr5" title="<?= $status_title ?>"></i>
-					</div>
-					<div class="clearfix l-unit__stat-col--left"><b><?= translate_date($data[$key]["DATE"]) ?></b></div>
-					<div class="clearfix l-unit__stat-col--left compact-2"><b><?= htmlspecialchars($data[$key]["TIME"]) ?></b></div>
-					<div class="clearfix l-unit__stat-col--left"><?= htmlspecialchars($data[$key]["IP"]) ?></div>
-					<div class="clearfix l-unit__stat-col--left wide-7"><?= htmlspecialchars($data[$key]["USER_AGENT"]) ?></b></div>
+			<div class="units-table-row animate__animated animate__fadeIn js-unit">
+				<div class="units-table-cell u-text-center-desktop">
+					<i class="fas <?= $status_icon ?> u-mr5" title="<?= $status_title ?>"></i>
+				</div>
+				<div class="units-table-cell units-table-heading-cell u-text-bold">
+					<span class="u-hide-desktop"><?= _("Date") ?>:</span>
+					<time class="u-text-no-wrap" datetime="<?= htmlspecialchars($data[$key]["DATE"]) ?>">
+						<?= translate_date($data[$key]["DATE"]) ?>
+					</time>
+				</div>
+				<div class="units-table-cell u-text-bold">
+					<span class="u-hide-desktop"><?= _("Time") ?>:</span>
+					<time datetime="<?= htmlspecialchars($data[$key]["TIME"]) ?>">
+						<?= htmlspecialchars($data[$key]["TIME"]) ?>
+					</time>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("IP Address") ?>:</span>
+					<?= htmlspecialchars($data[$key]["IP"]) ?>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Browser") ?>:</span>
+					<?= htmlspecialchars($data[$key]["USER_AGENT"]) ?>
 				</div>
 			</div>
 		<?php } ?>

web/templates/pages/list_search.php

@@ -42,19 +42,14 @@
 
 <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">
-					&nbsp;
-				</div>
-				<div class="clearfix l-unit__stat-col--left u-text-center compact-2"><b><?= _("Status") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left wide-5"><b><?= _("Search Results") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left compact-3"><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><?= _("Owner") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Type") ?></b></div>
-			</div>
+	<div class="units-table js-units-container">
+		<div class="units-table-header">
+			<div class="units-table-cell"></div>
+			<div class="units-table-cell u-text-center"><?= _("Status") ?></div>
+			<div class="units-table-cell"><?= _("Search Results") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Date") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Owner") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Type") ?></div>
 		</div>
 
 		<!-- Begin search result item loop -->
@@ -82,7 +77,7 @@
 				}
 				$uniq_id .= sha1($value['RESULT']);
 			?>
-			<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-unit"
+			<div class="units-table-row <?php if ($status == 'suspended') echo 'disabled'; ?> animate__animated animate__fadeIn js-unit"
 				data-uniq-id="<?= $uniq_id?>"
 				data-sort-date="<?= strtotime($value['DATE'].' '.$value['TIME']) ?>"
 				data-sort-name="<?= $value['RESULT'] ?>"
@@ -90,93 +85,91 @@
 				data-sort-owner="<?= $value['USER'] ?>"
 				data-sort-status="<?= $status ?>"
 				style="<?php if (($_SESSION['POLICY_SYSTEM_HIDE_ADMIN'] === 'yes') && ($value['USER']) === 'admin') { echo 'display: none;'; } ?>">
-
-				<div class="l-unit__col l-unit__col--right">
-					<div class="clearfix l-unit__stat-col--left super-compact u-text-center">
-						<?php
-							if ($object === 'web domain') {
-									$icon = 'fa-earth-americas';
-							}
-							if ($object === 'mail domain') {
-									$icon = 'fa-envelopes-bulk';
-							}
-							if ($object === 'dns domain') {
-									$icon = 'fa-book-atlas';
-							}
-							if ($object === 'dns record') {
-									$icon = 'fa-book-atlas';
-							}
-							if ($object === 'database') {
-									$icon = 'fa-database';
-							}
-							if ($object === 'cron job') {
-									$icon = 'fa-clock';
-							}
-						?>
-						<i class="fa <?= $icon ?> icon-dim"></i>
-					</div>
-					<div class="clearfix l-unit__stat-col--left compact-2 u-text-center">
-						<b>
-							<?php if ($status === "active") { ?>
-								<i class="fas fa-circle-check icon-green"></i>
-							<?php } ?>
-							<?php if ($status === "suspended") { ?>
-								<i class="fas fa-triangle-exclamation icon-orange"></i>
-							<?php } ?>
-						</b>
-					</div>
-					<div class="clearfix l-unit__stat-col--left wide-5">
-						<?php
-							if ($value['KEY'] == 'RECORD') {
-								$edit_lnk = '/edit/'.$value['TYPE'].'/?domain='.$value['PARENT'].'&record_id='.$value['LINK'].'&user='.$value['USER'];
-							}
-							if ($value['KEY'] == 'ACCOUNT') {
-								$edit_lnk = '/edit/'.$value['TYPE'].'/?domain='.$value['PARENT'].'&account='.$value['LINK'].'&user='.$value['USER'];
-							}
-							if ($value['KEY'] == 'JOB') {
-								$edit_lnk = '/edit/'.$value['TYPE'].'/?job='.$value['LINK'].'&user='.$value['USER'];
-							}
-							if ($value['KEY'] == 'DATABASE') {
-								$edit_lnk = '/edit/'.$value['TYPE'].'/?database='.$value['RESULT'].'&user='.$value['USER'];
-							}
-							if (($value['KEY'] != 'RECORD') && ($value['KEY'] != 'ACCOUNT') && ($value['KEY'] != 'JOB') && ($value['KEY'] != 'DATABASE') ) {
-								$edit_lnk = '/edit/'.$value['TYPE'].'/?'.strtolower($value['KEY']).'='.$value['RESULT'].'&user='.$value['USER'];
+				<div class="units-table-cell u-text-center-desktop">
+					<?php
+						if ($object === 'web domain') {
+							$icon = 'fa-earth-americas';
+						}
+						if ($object === 'mail domain') {
+							$icon = 'fa-envelopes-bulk';
+						}
+						if ($object === 'dns domain') {
+							$icon = 'fa-book-atlas';
+						}
+						if ($object === 'dns record') {
+							$icon = 'fa-book-atlas';
+						}
+						if ($object === 'database') {
+							$icon = 'fa-database';
+						}
+						if ($object === 'cron job') {
+							$icon = 'fa-clock';
+						}
+					?>
+					<i class="fa <?= $icon ?> icon-dim"></i>
+				</div>
+				<div class="units-table-cell u-text-center-desktop">
+					<span class="u-hide-desktop u-text-bold"><?= _("Status") ?>:</span>
+					<?php if ($status === "active") { ?>
+						<i class="fas fa-circle-check icon-green"></i>
+					<?php } ?>
+					<?php if ($status === "suspended") { ?>
+						<i class="fas fa-triangle-exclamation icon-orange"></i>
+					<?php } ?>
+				</div>
+				<div class="units-table-cell units-table-heading-cell u-text-bold">
+					<span class="u-hide-desktop"><?= _("Search Results") ?>:</span>
+					<?php
+						if ($value['KEY'] == 'RECORD') {
+							$edit_lnk = '/edit/'.$value['TYPE'].'/?domain='.$value['PARENT'].'&record_id='.$value['LINK'].'&user='.$value['USER'];
+						}
+						if ($value['KEY'] == 'ACCOUNT') {
+							$edit_lnk = '/edit/'.$value['TYPE'].'/?domain='.$value['PARENT'].'&account='.$value['LINK'].'&user='.$value['USER'];
+						}
+						if ($value['KEY'] == 'JOB') {
+							$edit_lnk = '/edit/'.$value['TYPE'].'/?job='.$value['LINK'].'&user='.$value['USER'];
+						}
+						if ($value['KEY'] == 'DATABASE') {
+							$edit_lnk = '/edit/'.$value['TYPE'].'/?database='.$value['RESULT'].'&user='.$value['USER'];
+						}
+						if (($value['KEY'] != 'RECORD') && ($value['KEY'] != 'ACCOUNT') && ($value['KEY'] != 'JOB') && ($value['KEY'] != 'DATABASE') ) {
+							$edit_lnk = '/edit/'.$value['TYPE'].'/?'.strtolower($value['KEY']).'='.$value['RESULT'].'&user='.$value['USER'];
+						}
+					?>
+					<?php
+						if (($_SESSION['userContext'] === 'admin') && ($_SESSION['user'] !== 'admin') && ($value['USER'] === 'admin') && ($_SESSION['POLICY_SYSTEM_PROTECTED_ADMIN'] === 'yes')) {
+							echo $value['RESULT'];
+						} else {
+							if ($value['USER'] == $_SESSION['user']) {
+								$href = $edit_lnk.'&token='.$_SESSION['token'];
+							} else {
+								$href = '/login/?loginas='.$value['USER'].'&token='.$_SESSION['token'].'&edit_link='.urlencode($edit_lnk);
 							}
-						?>
-						<b>
-							<?php
-								if (($_SESSION['userContext'] === 'admin') && ($_SESSION['user'] !== 'admin') && ($value['USER'] === 'admin') && ($_SESSION['POLICY_SYSTEM_PROTECTED_ADMIN'] === 'yes')) {
-									echo $value['RESULT'];
-								} else {
-									if ($value['USER'] == $_SESSION['user']) {
-										$href = $edit_lnk.'&token='.$_SESSION['token'];
-									} else {
-										$href = '/login/?loginas='.$value['USER'].'&token='.$_SESSION['token'].'&edit_link='.urlencode($edit_lnk);
-									}
-									echo '<a href="' . $href . '">' . $value['RESULT'] . '</a>';
-								}
-							?>
-						</b>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-right compact-3">
-						<div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
-							<div class="actions-panel clearfix">
-								&nbsp;
-							</div>
-						</div>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><?= translate_date($value["DATE"]) ?></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center">
-						<b>
-							<a href="/search/?q=<?= htmlentities($_GET['q']); ?>&u=<?= $value['USER']; ?>&token=<?= $_SESSION['token'] ?>"><?= $value['USER']; ?></a>
-							<?php if (!($_SESSION['POLICY_SYSTEM_HIDE_ADMIN'] === 'yes' && $value['USER'] !== 'admin') && ($_SESSION['userContext'] === 'admin')) { ?>
-								<a href="/login/?loginas=<?= $value['USER'] ?>&token=<?= $_SESSION['token'] ?>" title="<?= _("Log in as") ?> <?= $value['USER'] ?>">
-									<i class="fas fa-right-to-bracket icon-green icon-dim"></i>
-								</a>
-							<?php } ?>
-						</b>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><?= _($object) ?></b></div>
+							echo '<a href="' . $href . '">' . $value['RESULT'] . '</a>';
+						}
+					?>
+				</div>
+				<div class="units-table-cell u-text-center-desktop">
+					<span class="u-hide-desktop u-text-bold"><?= _("Date") ?>:</span>
+					<time datetime="<?= htmlspecialchars($value["DATE"]) ?>">
+						<?= translate_date($value["DATE"]) ?>
+					</time>
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("Owner") ?>:</span>
+					<a href="/search/?q=<?= htmlentities($_GET['q']); ?>&u=<?= $value['USER']; ?>&token=<?= $_SESSION['token'] ?>">
+						<?= $value['USER']; ?>
+					</a>
+					<?php if (!($_SESSION['POLICY_SYSTEM_HIDE_ADMIN'] === 'yes' && $value['USER'] !== 'admin') && ($_SESSION['userContext'] === 'admin')) { ?>
+						<a href="/login/?loginas=<?= $value['USER'] ?>&token=<?= $_SESSION['token'] ?>" title="<?= _("Log in as") ?> <?= $value['USER'] ?>">
+							<i class="fas fa-right-to-bracket icon-green icon-dim"></i>
+							<span class="u-hidden-visually"><?= _("Log in as") ?> <?= $value['USER'] ?></span>
+						</a>
+					<?php } ?>
+				</div>
+				<div class="units-table-cell u-text-center-desktop">
+					<span class="u-hide-desktop u-text-bold"><?= _("Type") ?>:</span>
+					<?= _($object) ?>
 				</div>
 			</div>
 		<?php } ?>

web/templates/pages/list_services.php

@@ -19,16 +19,14 @@
 			<a href="/list/log/?user=system&token=<?= $_SESSION["token"] ?>" class="button button-secondary">
 				<i class="fas fa-binoculars icon-orange"></i><?= _("Logs") ?>
 			</a>
-			<div class="actions-panel" data-key-action="js">
-				<a
-					class="button button-secondary button-danger data-controls js-confirm-action"
-					href="/restart/system/?hostname=<?= $sys["sysinfo"]["HOSTNAME"] ?>&token=<?= $_SESSION["token"] ?>&system_reset_token=<?= time() ?>"
-					data-confirm-title="<?= _("Restart") ?>"
-					data-confirm-message="<?= sprintf(_("Are you sure you want to restart %s?"), "Server") ?>"
-				>
-					<i class="fas fa-arrow-rotate-left icon-red"></i><?= _("Restart") ?>
-				</a>
-			</div>
+			<a
+				class="button button-secondary button-danger data-controls js-confirm-action"
+				href="/restart/system/?hostname=<?= $sys["sysinfo"]["HOSTNAME"] ?>&token=<?= $_SESSION["token"] ?>&system_reset_token=<?= time() ?>"
+				data-confirm-title="<?= _("Restart") ?>"
+				data-confirm-message="<?= sprintf(_("Are you sure you want to restart %s?"), "Server") ?>"
+			>
+				<i class="fas fa-arrow-rotate-left icon-red"></i><?= _("Restart") ?>
+			</a>
 		</div>
 		<div class="toolbar-right">
 			<form x-data x-bind="BulkEdit" action="/bulk/service/" method="post">

web/templates/pages/list_ssl.php

@@ -24,12 +24,16 @@
 				}"
 				class="u-mb20"
 			>
-				<label for="v_crt" class="form-label">
+				<label for="v_crt" class="form-label u-side-by-side">
 					<?= _("SSL Certificate") ?>
 					<a
 						x-bind:href="blob()"
 						download="<?= htmlentities($v_domain) ?>.crt"
-					><i class="fas fa-download"></i></a>
+						title="<?= _("Download") ?>"
+					>
+						<i class="fas fa-download"></i>
+						<span class="u-hidden"><?= _("Download") ?></span>
+					</a>
 				</label>
 				<textarea
 					x-model="atob(text)"
@@ -47,12 +51,16 @@
 				}"
 				class="u-mb20"
 			>
-				<label for="v_key" class="form-label">
+				<label for="v_key" class="form-label u-side-by-side">
 					<?= _("SSL Private Key") ?>
 					<a
 						x-bind:href="blob()"
 						download="<?= htmlentities($v_domain) ?>.key"
-					><i class="fas fa-download"></i></a>
+						title="<?= _("Download") ?>"
+					>
+						<i class="fas fa-download"></i>
+						<span class="u-hidden"><?= _("Download") ?></span>
+					</a>
 				</label>
 				<textarea
 					x-model="atob(text)"
@@ -70,12 +78,16 @@
 				}"
 				class="u-mb20"
 			>
-				<label for="v_csr" class="form-label">
+				<label for="v_csr" class="form-label u-side-by-side">
 					<?= _("SSL CSR") ?>
 					<a
 						x-bind:href="blob()"
 						download="<?= htmlentities($v_domain) ?>.csr"
-					><i class="fas fa-download"></i></a>
+						title="<?= _("Download") ?>"
+					>
+						<i class="fas fa-download"></i>
+						<span class="u-hidden"><?= _("Download") ?></span>
+					</a>
 				</label>
 				<textarea
 					x-model="atob(text)"