Przeglądaj źródła

Merge branch 'main' into feature/improve-eslint

Jakob Bouchard 3 lat temu
rodzic
commit
0d39f20f5b

+ 8 - 8
web/css/src/themes/dark.css

@@ -26,6 +26,14 @@ strong {
 	box-shadow: 0 8px 15px rgb(0 0 0 / 25%);
 }
 
+.top-bar-usage-inner {
+  color: #909090;
+}
+
+.top-bar-nav-list {
+  background-color: #454545;
+}
+
 .top-bar-nav-link {
 	&:hover {
 		color: #dadada;
@@ -68,14 +76,6 @@ strong {
 	color: #e7e7e7;
 }
 
-.top-bar-usage-inner {
-	color: #909090;
-	box-shadow: inset 0 1px 1px rgb(0 0 0 / 85%), 0 1px 1px rgb(0 0 0 / 20%);
-	background-color: rgb(15 15 15 / 50%);
-	border-color: rgb(120 120 120 / 95%);
-	text-shadow: 0 1px 1px rgb(0 0 0 / 50%);
-}
-
 .notification-container {
 	background-color: rgb(50 50 50 / 99%);
 	text-shadow: 0 1px rgb(0 0 0 / 50%);

+ 107 - 126
web/css/src/themes/default.css

@@ -55,34 +55,22 @@
    ========================================================================== */
 
 .top-bar {
-	background: linear-gradient(
-		to bottom,
-		rgb(104 145 196 / 100%) 0%,
-		rgb(69 114 181 / 100%) 50%,
-		rgb(65 90 149 / 100%) 100%
-	);
-	background-color: #5070a6;
-	box-shadow: 0 4px 10px rgb(100 100 100 / 40%);
-	border-bottom: 1px solid #fff;
-
-	@media (--viewport-medium) {
-		position: fixed;
-		width: 100%;
-		z-index: 2;
-		top: 0;
-	}
+  background: linear-gradient(to bottom, rgb(104 145 196 / 100%) 0%, rgb(69 114 181 / 100%) 50%, rgb(65 90 149 / 100%) 100%);
+  background-color: #5070a6;
+  box-shadow: 0 4px 10px rgb(100 100 100 / 40%);
+  border-bottom: 1px solid #fff;
+  position: fixed;
+  width: 100%;
+  z-index: 2;
+  top: 0;
 }
 
 .top-bar-inner {
-	padding-top: 10px;
-
-	@media (--viewport-medium) {
-		display: flex;
-		padding-top: 0;
-		padding-left: 20px;
-		padding-right: 20px;
-		justify-content: space-between;
-	}
+  display: flex;
+  height: 40px;
+  padding-left: 20px;
+  padding-right: 20px;
+  justify-content: space-between;
 
 	@media (--viewport-large) {
 		padding-left: 0;
@@ -91,55 +79,91 @@
 }
 
 .top-bar-left {
-	@media (--viewport-medium) {
-		display: flex;
-		align-items: center;
-	}
+  display: flex;
+  align-items: center;
 }
 
 .top-bar-logo {
-	display: block;
-	width: 54px;
-	margin-left: auto;
-	margin-right: auto;
+  display: block;
+  width: 54px;
+  margin-right: 30px;
+}
 
-	@media (--viewport-medium) {
-		margin-right: 16px;
-	}
+.top-bar-usage {
+  display: none;
+
+  @media (--viewport-small) {
+    display: block;
+  }
 }
 
-.top-bar-nav {
-	margin-top: 10px;
+.top-bar-usage-inner {
+  display: flex;
+  color: #fff;
+  text-shadow: 1px 1px rgb(0 0 0 / 25%);
+  font-weight: 500;
+}
 
-	@media (--viewport-medium) {
-		margin-top: 0;
-		display: flex;
-		align-self: stretch;
-	}
+.top-bar-usage-item {
+  margin-right: 11px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  & .fas {
+    margin-right: 3px;
+  }
+}
+
+.top-bar-right {
+  display: flex;
+}
+
+.top-bar-notifications {
+  display: flex;
+  position: relative;
+}
+
+.top-bar-nav {
+  display: flex;
+  position: relative;
 }
 
 .top-bar-nav-list {
-	display: flex;
+  display: none;
+  background-color: #4673b6;
+  box-shadow: 0 3px 20px 0 rgb(0 0 0 / 40%);
+  position: absolute;
+  top: 100%;
+  right: 0;
+
+  @media (--viewport-medium) {
+    display: flex !important; /* NOTE: Overrides inline style set by JS */
+    background-color: transparent;
+    box-shadow: none;
+    position: static;
+  }
 }
 
 .top-bar-nav-item {
-	display: flex;
-	position: relative;
-	flex-grow: 1;
+  @media (--viewport-medium) {
+    display: flex;
+  }
 }
 
 .top-bar-nav-link {
-	color: #f7f7f7;
-	display: flex;
-	flex-grow: 1;
-	align-items: center;
-	justify-content: center;
-	font-size: 0.8rem;
-	font-weight: 600;
-	text-shadow: 1px 1px rgb(0 0 0 / 25%);
-	border-left: 1px solid transparent;
-	border-right: 1px solid transparent;
-	padding: 10px;
+  color: #f7f7f7;
+  display: flex;
+  align-items: center;
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-shadow: 1px 1px rgb(0 0 0 / 25%);
+  background-color: transparent;
+  border: 0;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  padding: 10px;
 
 	&:hover {
 		box-shadow: inset 0 0 6px rgb(255 255 255 / 60%);
@@ -194,51 +218,12 @@
 }
 
 .top-bar-nav-link-label {
-	margin-left: 6px;
-}
-
-.top-bar-right {
-	@media (--viewport-medium) {
-		display: flex;
-		align-items: center;
-	}
-}
+  margin-left: 6px;
+  white-space: nowrap;
 
-.top-bar-usage {
-	display: flex;
-	justify-content: center;
-	margin-top: 10px;
-
-	@media (--viewport-medium) {
-		margin-top: 0;
-		margin-right: 10px;
-	}
-}
-
-.top-bar-usage-inner {
-	display: flex;
-	border-radius: 12px;
-	font-size: 0.75rem;
-	font-weight: 500;
-	line-height: 0.75rem;
-	padding: 4px 8px;
-	color: #30659d;
-	box-shadow: 0 1px 1px rgb(0 0 0 / 20%), inset 0 1px 0 rgb(0 0 0 / 8%);
-	background-color: rgb(255 255 255 / 75%);
-	border: 1px solid rgb(255 255 255 / 75%);
-	text-shadow: 0 1px 1px rgb(255 255 255 / 60%);
-}
-
-.top-bar-usage-item {
-	margin-right: 11px;
-
-	&:last-child {
-		margin-right: 0;
-	}
-
-	& .fas {
-		margin-right: 3px;
-	}
+  @media (--viewport-medium) {
+    display: none;
+  }
 }
 
 .l-center {
@@ -248,27 +233,25 @@
 }
 
 .notification-container {
-	background-color: #fff;
-	box-shadow: 0 3px 20px 0 rgb(0 0 0 / 40%);
-	max-height: 500px;
-	overflow-y: auto;
-	position: absolute;
-	top: 100%;
-	left: 10px;
-	width: 330px;
-	z-index: 1;
-	font-size: 0.8rem;
-	color: #6f6f6f;
-	border-bottom-left-radius: 6px;
-	border-bottom-right-radius: 6px;
-	border: 1px solid #fff;
-	border-top: none;
-
-	@media (--viewport-medium) {
-		left: auto;
-		right: 0;
-		width: 390px;
-	}
+  background-color: #fff;
+  box-shadow: 0 3px 20px 0 rgb(0 0 0 / 40%);
+  max-height: 500px;
+  overflow-y: auto;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  width: 300px;
+  z-index: 1;
+  font-size: 0.8rem;
+  color: #6f6f6f;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+  border: 1px solid #fff;
+  border-top: none;
+
+  @media (--viewport-medium) {
+    width: 400px;
+  }
 }
 
 .notification-container .empty {
@@ -2153,9 +2136,7 @@ body.mobile .l-unit-toolbar__col--right {
 }
 
 .l-content {
-	@media (--viewport-medium) {
-		padding-top: 40px;
-	}
+  padding-top: 40px;
 }
 
 .console-output {

+ 21 - 17
web/css/src/themes/flat.css

@@ -22,6 +22,10 @@ strong {
 	background: #5070a6;
 }
 
+.top-bar-usage-inner {
+  text-shadow: none;
+}
+
 .top-bar-nav-link {
 	text-shadow: none;
 
@@ -68,20 +72,20 @@ strong {
    ========================================================================== */
 
 .button {
-	box-shadow: none;
-	background: linear-gradient(to bottom, rgb(235 243 249 / 100%) 0%, rgb(223 235 245 / 100%) 100%);
-}
+  box-shadow: none;
+  background: linear-gradient(to bottom, rgb(235 243 249 / 100%) 0%, rgb(223 235 245 / 100%) 100%);
 
-.button:hover {
-	color: #6986b7;
-	box-shadow: none;
-	background: linear-gradient(to bottom, rgb(241 248 253 / 100%) 0%, rgb(227 240 251 / 100%) 100%);
-}
+  &:hover {
+    color: #6986b7;
+    box-shadow: none;
+    background: linear-gradient(to bottom, rgb(241 248 253 / 100%) 0%, rgb(227 240 251 / 100%) 100%);
+  }
 
-.button:active,
-.button:focus {
-	box-shadow: none;
-	background: linear-gradient(to bottom, rgb(210 232 250 / 100%) 0%, rgb(194 224 248 / 100%) 100%);
+  &:active,
+  &:focus {
+    box-shadow: none;
+    background: linear-gradient(to bottom, rgb(210 232 250 / 100%) 0%, rgb(194 224 248 / 100%) 100%);
+  }
 }
 
 .button-secondary {
@@ -102,12 +106,12 @@ strong {
 	border-color: #f4301a;
 }
 
-.ui-dialog .ui-dialog-buttonpane button:nth-of-type(2) {
-	box-shadow: none;
-}
-
 .ui-dialog {
-	box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
+  box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
+
+  & .ui-dialog-buttonpane button:nth-of-type(2) {
+    box-shadow: none;
+  }
 }
 
 .badge {

+ 18 - 22
web/css/src/themes/vestia.css

@@ -26,6 +26,10 @@ strong {
 	background: #5d5d5d;
 }
 
+.top-bar-nav-list {
+  background-color: #5d5d5d;
+}
+
 .top-bar-nav-link {
 	&:hover,
 	&:active {
@@ -42,14 +46,6 @@ strong {
 	}
 }
 
-.top-bar-usage-inner {
-	color: #fff;
-	border: none;
-	background: none;
-	box-shadow: none;
-	text-shadow: none;
-}
-
 .table-header {
 	box-shadow: none;
 	background: #fafafa;
@@ -151,12 +147,12 @@ strong {
 	}
 }
 
-.ui-dialog .ui-dialog-buttonpane button {
-	box-shadow: none;
-}
-
 .ui-dialog {
-	box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
+  box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
+
+  & .ui-dialog-buttonpane button {
+    box-shadow: none;
+  }
 }
 
 .notification-container {
@@ -429,15 +425,15 @@ li[aria-expanded="true"] a {
    ========================================================================== */
 
 .collapse-header {
-	background: #fafafa;
-	box-shadow: none;
-	color: #444;
-}
+  background: #fafafa;
+  box-shadow: none;
+  color: #444;
 
-.collapse-header:hover {
-	color: #ff791f;
-}
+  &:hover {
+    color: #ff791f;
+  }
 
-.collapse-header .fas {
-	display: none;
+  & .fas {
+    display: none;
+  }
 }

+ 6 - 0
web/css/src/utilities.css

@@ -146,3 +146,9 @@
 	white-space: pre !important;
 	line-height: 1.2 !important;
 }
+
+.u-hide-desktop {
+  @media (--viewport-medium) {
+    display: none !important;
+  }
+}

Plik diff jest za duży
+ 0 - 0
web/css/themes/dark.min.css


Plik diff jest za duży
+ 0 - 0
web/css/themes/default.min.css


+ 1 - 1
web/css/themes/flat.min.css

@@ -1 +1 @@
-:root{--alert-box-shadow:none;--alert-text-shadow:none}b,strong{font-weight:600}.top-bar{background:#5070a6;box-shadow:none}.top-bar-nav-link{text-shadow:none}.top-bar-nav-link:active,.top-bar-nav-link:hover{background:#fff;box-shadow:none}.top-bar-nav-link.active{background:#fff}.table-header{background:#fafafa}.l-unit:hover,.table-header{box-shadow:none}.l-unit__stat-col--left a,.l-unit__stat-col--left a:visited{color:#5f7eb3}.l-unit__stat-col--left a:hover{color:#474747}.button,.form-control,.form-select,.l-unit:hover,.units .l-unit:hover{box-shadow:none}.button{background:linear-gradient(180deg,#ebf3f9 0,#dfebf5)}.button:hover{background:linear-gradient(180deg,#f1f8fd 0,#e3f0fb);box-shadow:none;color:#6986b7}.button:active,.button:focus{background:linear-gradient(180deg,#d2e8fa 0,#c2e0f8);box-shadow:none}.button-secondary{background:linear-gradient(180deg,#fafafa 0,#f1f1f1);box-shadow:none}.button-danger:hover{background:#fcd3cf;border-color:#f27e71;color:#f4301a}.button-danger:active,.button-danger:focus{background:#a91200;border-color:#f4301a;color:#fff}.ui-dialog .ui-dialog-buttonpane button:nth-of-type(2){box-shadow:none}.ui-dialog{box-shadow:0 2px 11px 0 rgba(0,0,0,.5)}.badge{box-shadow:none}.context-menu.sort-order,.notification-container{border:1px solid #ccc;box-shadow:none}.context-menu.sort-order{background:#fff!important}.body-login,.body-reset{background:#5f7eb3}.login{background-color:hsla(0,0%,100%,.8);box-shadow:0 2px 10px rgba(0,0,0,.3),inset 0 0 2px #fff}.collapse-header{background:#fafafa;box-shadow:none}
+:root{--alert-box-shadow:none;--alert-text-shadow:none}b,strong{font-weight:600}.top-bar{background:#5070a6;box-shadow:none}.top-bar-nav-link,.top-bar-usage-inner{text-shadow:none}.top-bar-nav-link:active,.top-bar-nav-link:hover{background:#fff;box-shadow:none}.top-bar-nav-link.active{background:#fff}.table-header{background:#fafafa}.l-unit:hover,.table-header{box-shadow:none}.l-unit__stat-col--left a,.l-unit__stat-col--left a:visited{color:#5f7eb3}.l-unit__stat-col--left a:hover{color:#474747}.button,.form-control,.form-select,.l-unit:hover,.units .l-unit:hover{box-shadow:none}.button{background:linear-gradient(180deg,#ebf3f9 0,#dfebf5)}.button:hover{background:linear-gradient(180deg,#f1f8fd 0,#e3f0fb);box-shadow:none;color:#6986b7}.button:active,.button:focus{background:linear-gradient(180deg,#d2e8fa 0,#c2e0f8);box-shadow:none}.button-secondary{background:linear-gradient(180deg,#fafafa 0,#f1f1f1);box-shadow:none}.button-danger:hover{background:#fcd3cf;border-color:#f27e71;color:#f4301a}.button-danger:active,.button-danger:focus{background:#a91200;border-color:#f4301a;color:#fff}.ui-dialog{box-shadow:0 2px 11px 0 rgba(0,0,0,.5)}.badge,.ui-dialog .ui-dialog-buttonpane button:nth-of-type(2){box-shadow:none}.context-menu.sort-order,.notification-container{border:1px solid #ccc;box-shadow:none}.context-menu.sort-order{background:#fff!important}.body-login,.body-reset{background:#5f7eb3}.login{background-color:hsla(0,0%,100%,.8);box-shadow:0 2px 10px rgba(0,0,0,.3),inset 0 0 2px #fff}.collapse-header{background:#fafafa;box-shadow:none}

Plik diff jest za duży
+ 0 - 0
web/css/themes/vestia.min.css


+ 633 - 763
web/js/init.js

@@ -1,767 +1,637 @@
 // Replace .no-js class with .js
-document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
-
-$(document).ready(function () {
-	if ($('.body-login')[0]) {
-		$('input').first().focus();
-	}
-
-	$('.submenu-select-dropdown').each(function () {
-		$(this).wrap("<span class='submenu-select-wrapper'></span>");
-		$(this).after("<span class='holder'></span>");
-	});
-	$('.submenu-select-dropdown')
-		.change(function () {
-			var selectedOption = $(this).find(':selected').text();
-			$(this).next('.holder').text(selectedOption);
-		})
-		.trigger('change');
-	$('.js-to-top').on('click', function () {
-		$('html, body').animate({ scrollTop: 0 }, 'normal');
-	});
-
-	$('.button').on('click', function (evt) {
-		var action = $(this).data('action');
-		var id = $(this).data('id');
-		if (action == 'submit' && document.getElementById(id)) {
-			evt.preventDefault();
-			$(document.getElementById(id)).submit();
-		}
-	});
-
-	var isMobile = false; //initiate as false
-	// device detection
-	/* eslint-disable no-useless-escape */
-	if (
-		/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(
-			navigator.userAgent
-		) ||
-		/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
-			navigator.userAgent.substr(0, 4)
-		)
-	) {
-		isMobile = true;
-		$('body').addClass('mobile');
-	}
-	/* eslint-enable no-useless-escape */
-
-	$(window).scroll(function () {
-		set_sticky_class();
-	});
-
-	$('.toolbar-right .sort-by').click(function () {
-		$('.context-menu.sort-order').toggle();
-	});
-
-	// SEARCH BOX
-
-	$('.toolbar-search .js-search-input').hover(
-		function () {
-			clearTimeout(VE.tmp.search_display_interval);
-			clearTimeout(VE.tmp.search_hover_interval);
-			VE.tmp.search_display_interval = setTimeout(function () {
-				$('.js-search-input').addClass('activated');
-			}, 150);
-		},
-		function () {
-			clearTimeout(VE.tmp.search_display_interval);
-			clearTimeout(VE.tmp.search_hover_interval);
-			VE.tmp.search_hover_interval = setTimeout(function () {
-				if (!VE.tmp.search_activated && !$('.js-search-input').val().length) {
-					$('.js-search-input').removeClass('activated');
-				}
-			}, 600);
-		}
-	);
-
-	$('.js-search-input').focus(function () {
-		VE.tmp.search_activated = 1;
-		clearTimeout(VE.tmp.search_hover_interval);
-	});
-	$('.js-search-input').blur(function () {
-		VE.tmp.search_activated = 0;
-		clearTimeout(VE.tmp.search_hover_interval);
-		VE.tmp.search_hover_interval = setTimeout(function () {
-			if (!$('.js-search-input').val().length) {
-				$('.js-search-input').removeClass('activated');
-			}
-		}, 600);
-	});
-
-	// TIMER
-
-	if ($('.movement.left').length) {
-		VE.helpers.refresh_timer.right = $('.movement.right');
-		VE.helpers.refresh_timer.left = $('.movement.left');
-		VE.helpers.refresh_timer.start();
-
-		$('.pause').click(function () {
-			VE.helpers.refresh_timer.stop();
-			$('.pause').addClass('u-hidden');
-			$('.play').removeClass('u-hidden');
-			$('.refresh-timer').addClass('paused');
-		});
-
-		$('.play').click(function () {
-			VE.helpers.refresh_timer.start();
-			$('.pause').removeClass('u-hidden');
-			$('.play').addClass('u-hidden');
-			$('.refresh-timer').removeClass('paused');
-		});
-	}
-
-	// SORTING
-
-	$('#vstobjects input, #vstobjects select, #vstobjects textarea').change(function () {
-		VE.tmp.form_changed = 1;
-	});
-
-	$('.sort-order span').click(function () {
-		$('.context-menu.sort-order').toggle();
-		if ($(this).hasClass('active')) return;
-
-		$('.sort-order span').removeClass('active');
-		$(this).addClass('active');
-		VE.tmp.sort_par = $(this).parent('li').attr('entity');
-		VE.tmp.sort_as_int = $(this).parent('li').attr('sort_as_int');
-		VE.tmp.sort_direction = $(this).hasClass('up') * 1 || -1;
-
-		$('.toolbar .sort-by b').html($(this).parent('li').find('.name').html());
-		$('.toolbar .sort-by i').removeClass('fa-arrow-up-a-z fa-arrow-down-a-z');
-		$(this).hasClass('up')
-			? $('.toolbar .sort-by i').addClass('fa-arrow-up-a-z')
-			: $('.toolbar .sort-by i').addClass('fa-arrow-down-a-z');
-		$('.units .l-unit')
-			.sort(function (a, b) {
-				if (VE.tmp.sort_as_int)
-					return parseInt($(a).attr(VE.tmp.sort_par)) >= parseInt($(b).attr(VE.tmp.sort_par))
-						? VE.tmp.sort_direction
-						: VE.tmp.sort_direction * -1;
-				else
-					return $(a).attr(VE.tmp.sort_par) <= $(b).attr(VE.tmp.sort_par)
-						? VE.tmp.sort_direction
-						: VE.tmp.sort_direction * -1;
-			})
-			.appendTo('.l-center.units');
-	});
-
-	$('#objects').submit(function (e) {
-		if (!e.originalEvent) {
-			return;
-		}
-		e.preventDefault();
-		$('.ch-toggle').each(function () {
-			if ($(this).prop('checked')) {
-				key = this.name;
-				div = $('<input type="hidden" name="' + key + '" value="' + this.value + '">');
-				$('#objects').append(div);
-			}
-		});
-
-		$('#objects').submit();
-		return false;
-	});
-
-	// Shortcuts
-
-	shortcut.add(
-		'Ctrl+Enter',
-		function () {
-			$('form#vstobjects').submit();
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: false,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'Ctrl+Backspace',
-		function () {
-			var redirect = $('a.button#btn-back').attr('href');
-			if (VE.tmp.form_changed && redirect) {
-				VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', redirect);
-			} else if ($('form#vstobjects .button.cancel')[0]) {
-				location.href = $('form#vstobjects input.cancel')
-					.attr('onclick')
-					.replace("location.href='", '')
-					.replace("'", '');
-			} else if (redirect) {
-				location.href = redirect;
-			}
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: false,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'f',
-		function () {
-			$('.js-search-input').addClass('activated').focus();
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	$(window).on('keypress', function (evt) {
-		var tag = evt.target.tagName.toLowerCase();
-		if (evt.charCode == 97 && tag != 'input' && tag != 'textarea' && tag != 'selectbox') {
-			evt.preventDefault();
-			if (!evt.ctrlKey && !evt.shiftKey) {
-				if ($('.button#btn-create').length) {
-					location.href = $('.button#btn-create').attr('href');
-				}
-			} else {
-				if ($('.l-unit .ch-toggle:eq(0)').prop('checked')) {
-					$('.l-unit').removeClass('selected');
-					$('.l-unit .ch-toggle').prop('checked', false);
-				} else {
-					$('.l-unit').addClass('selected');
-					$('.l-unit .ch-toggle').prop('checked', true);
-				}
-			}
-		}
-	});
-
-	shortcut.add(
-		'1',
-		function () {
-			var target = $('.main-menu .main-menu-item:nth-of-type(1) a');
-			if (target.length != 1) {
-				return;
-			}
-			if (VE.tmp.form_changed) {
-				VE.helpers.createConfirmationDialog(
-					$('.js-confirm-dialog-redirect'),
-					'',
-					target.attr('href')
-				);
-			} else {
-				location.href = target.attr('href');
-			}
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'2',
-		function () {
-			var target = $('.main-menu .main-menu-item:nth-of-type(2) a');
-			if (target.length != 1) {
-				return;
-			}
-			if (VE.tmp.form_changed) {
-				VE.helpers.createConfirmationDialog(
-					$('.js-confirm-dialog-redirect'),
-					'',
-					target.attr('href')
-				);
-			} else {
-				location.href = target.attr('href');
-			}
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'3',
-		function () {
-			var target = $('.main-menu .main-menu-item:nth-of-type(3) a');
-			if (target.length != 1) {
-				return;
-			}
-			if (VE.tmp.form_changed) {
-				VE.helpers.createConfirmationDialog(
-					$('.js-confirm-dialog-redirect'),
-					'',
-					target.attr('href')
-				);
-			} else {
-				location.href = target.attr('href');
-			}
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'4',
-		function () {
-			var target = $('.main-menu .main-menu-item:nth-of-type(4) a');
-			if (target.length != 1) {
-				return;
-			}
-			if (VE.tmp.form_changed) {
-				VE.helpers.createConfirmationDialog(
-					$('.js-confirm-dialog-redirect'),
-					'',
-					target.attr('href')
-				);
-			} else {
-				location.href = target.attr('href');
-			}
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'5',
-		function () {
-			var target = $('.main-menu .main-menu-item:nth-of-type(5) a');
-			if (target.length != 1) {
-				return;
-			}
-			if (VE.tmp.form_changed) {
-				VE.helpers.createConfirmationDialog(
-					$('.js-confirm-dialog-redirect'),
-					'',
-					target.attr('href')
-				);
-			} else {
-				location.href = target.attr('href');
-			}
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'6',
-		function () {
-			var target = $('.main-menu .main-menu-item:nth-of-type(6) a');
-			if (target.length != 1) {
-				return;
-			}
-			if (VE.tmp.form_changed) {
-				VE.helpers.createConfirmationDialog(
-					$('.js-confirm-dialog-redirect'),
-					'',
-					target.attr('href')
-				);
-			} else {
-				location.href = target.attr('href');
-			}
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'7',
-		function () {
-			var target = $('.main-menu .main-menu-item:nth-of-type(7) a');
-			if (target.length != 1) {
-				return;
-			}
-			if (VE.tmp.form_changed) {
-				VE.helpers.createConfirmationDialog(
-					$('.js-confirm-dialog-redirect'),
-					'',
-					target.attr('href')
-				);
-			} else {
-				location.href = target.attr('href');
-			}
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'h',
-		function () {
-			var shortcutsDialog = document.querySelector('.shortcuts');
-			if (shortcutsDialog.open) {
-				shortcutsDialog.close();
-			} else {
-				shortcutsDialog.showModal();
-			}
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'Esc',
-		function () {
-			var shortcutsDialog = document.querySelector('.shortcuts');
-			if (shortcutsDialog.open) {
-				shortcutsDialog.close();
-			}
-			$('input, checkbox, textarea, select').blur();
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: false,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'Left',
-		function () {
-			VE.navigation.move_focus_left();
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'Right',
-		function () {
-			VE.navigation.move_focus_right();
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'down',
-		function () {
-			VE.navigation.move_focus_down();
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'up',
-		function () {
-			VE.navigation.move_focus_up();
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'l',
-		function () {
-			var elm = $('.units.active .l-unit.focus .shortcut-l');
-			if (elm.length) {
-				VE.navigation.shortcut(elm);
-			}
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		's',
-		function () {
-			var elm = $('.units.active .l-unit.focus .shortcut-s');
-			if (elm.length) {
-				VE.navigation.shortcut(elm);
-			}
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'w',
-		function () {
-			var elm = $('.units.active .l-unit.focus .shortcut-w');
-			if (elm.length) {
-				VE.navigation.shortcut(elm);
-			}
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'd',
-		function () {
-			var elm = $('.units.active .l-unit.focus .shortcut-d');
-			if (elm.length) {
-				VE.navigation.shortcut(elm);
-			}
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'r',
-		function () {
-			var elm = $('.units.active .l-unit.focus .shortcut-r');
-			if (elm.length) {
-				VE.navigation.shortcut(elm);
-			}
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'n',
-		function () {
-			var elm = $('.units.active .l-unit.focus .shortcut-n');
-			if (elm.length) {
-				VE.navigation.shortcut(elm);
-			}
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'u',
-		function () {
-			var elm = $('.units.active .l-unit.focus .shortcut-u');
-			if (elm.length) {
-				VE.navigation.shortcut(elm);
-			}
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'Delete',
-		function () {
-			var elm = $('.units.active .l-unit.focus .shortcut-delete');
-			if (elm.length) {
-				VE.navigation.shortcut(elm);
-			}
-		},
-		{
-			type: 'keydown',
-			propagate: false,
-			disable_in_input: true,
-			target: document,
-		}
-	);
-
-	shortcut.add(
-		'Enter',
-		function (evt) {
-			if (evt.target.tagName == 'INPUT' && evt.target.form.id == 'vstobjects') {
-				$('form#vstobjects').submit();
-			}
-
-			if (VE.tmp.form_changed) {
-				if (!$('.ui-dialog').is(':visible')) {
-					VE.helpers.createConfirmationDialog(
-						$('.js-confirm-dialog-redirect')[0],
-						'',
-						$(VE.navigation.state.menu_selector + '.focus a').attr('href')
-					);
-				} else {
-					// if dialog is opened - submitting confirm box by "enter" shortcut
-					$('.ui-dialog button.submit').click();
-				}
-			} else {
-				if (!$('.ui-dialog').is(':visible')) {
-					var elm = $('.units.active .l-unit.focus .shortcut-enter');
-					if (elm.length) {
-						VE.navigation.shortcut(elm);
-					} else {
-						VE.navigation.enter_focused();
-					}
-				} else {
-					// if dialog is opened - submitting confirm box by "enter" shortcut
-					$('.ui-dialog button.submit').click();
-				}
-			}
-		},
-		{
-			type: 'keydown',
-			propagate: true,
-			disable_in_input: false,
-			target: document,
-		}
-	);
-
-	document.querySelector('.shortcuts-close').addEventListener('click', function () {
-		var shortcutsDialog = document.querySelector('.shortcuts');
-		if (shortcutsDialog.open) {
-			shortcutsDialog.close();
-		}
-	});
-
-	document.querySelector('.js-shortcuts').addEventListener('click', function () {
-		event.preventDefault();
-		var shortcutsDialog = document.querySelector('.shortcuts');
-		if (shortcutsDialog.open) {
-			shortcutsDialog.close();
-		} else {
-			shortcutsDialog.showModal();
-		}
-	});
-
-	$(document).click(function (evt) {
-		//close notification popup
-		if (
-			!$(evt.target).hasClass('js-notifications') &&
-			$(evt.target).parents('ul.notification-container').length == 0
-		) {
-			$('.notification-container').addClass('u-hidden');
-			$('.js-notifications').removeClass('active');
-		}
-	});
-
-	// focusing on the first input at form
-	if (location.href.indexOf('lead=') == -1 && !$('.ui-dialog').is(':visible')) {
-		$('#vstobjects .form-control:not([disabled]), #vstobjects .form-select:not([disabled])')
-			.first()
-			.focus();
-	}
-
-	$('.js-notifications').click(function (evt) {
-		evt.preventDefault();
-		if (!$('.js-notifications').hasClass('active')) {
-			VE.notifications.get_list();
-			$('.js-notifications').addClass('active');
-		} else {
-			$('.notification-container').addClass('u-hidden');
-			$('.js-notifications').removeClass('active');
-		}
-	});
-
-	$('.button').attr('title', 'ctrl+Enter');
-	$('.button.cancel').attr('title', 'ctrl+Backspace');
-
-	VE.core.register();
-	if (location.href.search(/list/) != -1) {
-		var shift_select_ref = $('body').finderSelect({
-			children: '.l-unit',
-			onFinish: function (evt) {
-				if (
-					$('.l-content').find('.l-unit.selected').length == $('.l-content').find('.l-unit').length
-				) {
-					$('.toggle-all').addClass('clicked-on');
-				}
-			},
-			toggleAllHook: function () {
-				if ($('.l-unit').length == $('.ch-toggle:checked').length) {
-					$('.l-unit.selected').removeClass('selected');
-					$('.ch-toggle').prop('checked', false);
-					$('#toggle-all').prop('checked', false);
-				} else {
-					$('.ch-toggle').prop('checked', true);
-					$('#toggle-all').prop('checked', true);
-				}
-			},
-		});
-
-		$('table').on('mousedown', 'td', function (e) {
-			if (e.ctrlKey) {
-				e.preventDefault();
-			}
-		});
-	}
-
-	//
-	$('form#objects').on('submit', function (evt) {
-		$('.l-unit').find('.ch-toggle').prop('checked', false);
-		$('.l-unit.selected').find('.ch-toggle').prop('checked', true);
-	});
-	// todo: maybe give the save button id?
-	$('.button[data-id=vstobjects][data-action=submit]').on('click', function (ev) {
-		let loadingAnimationEle = document.createElement('div');
-		loadingAnimationEle.className = 'spinner';
-		loadingAnimationEle.innerHTML =
-			'<div class="spinner-inner"></div><div class="spinner-mask"></div> <div class="spinner-mask-two"></div>';
-
-		// this both gives an indication that we've clicked and is loading, also prevents double-clicking/clicking-on-something-else while loading.
-		$('.button[data-id=vstobjects][data-action=submit]').replaceWith(loadingAnimationEle);
-		$('.button').replaceWith('');
-		// workaround a render bug on Safari (loading icon doesn't render without this)
-		ev.preventDefault();
-		$('#vstobjects').submit();
-	});
-});
+document.documentElement.className = document.documentElement.className.replace('no-js', 'js')
+
+$(document).ready(function(){
+    if($('.body-login')[0]){
+        $('input').first().focus();
+    }
+
+    $(".submenu-select-dropdown").each(function(){
+        $(this).wrap("<span class='submenu-select-wrapper'></span>");
+        $(this).after("<span class='holder'></span>");
+    });
+    $(".submenu-select-dropdown").change(function(){
+        var selectedOption = $(this).find(":selected").text();
+        $(this).next(".holder").text(selectedOption);
+    }).trigger('change');
+    $('.js-to-top').on('click', function() {
+        $("html, body").animate({ scrollTop: 0 }, "normal");
+    });
+
+    $('.button').on('click',function(evt){
+        var action = $(this).data('action');
+        var id = $(this).data('id');
+        if(action=='submit' && document.getElementById(id)){
+            evt.preventDefault();
+            $(document.getElementById(id)).submit();
+        }
+    });
+
+            var isMobile = false; //initiate as false
+            // device detection
+            /* eslint-disable no-useless-escape */
+            if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
+                || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))){
+                 isMobile = true;
+                $('body').addClass('mobile');
+            }
+            /* eslint-enable no-useless-escape */
+
+            $(window).scroll(function(){set_sticky_class()});
+
+            $('.toolbar-right .sort-by').click(function(){
+              $('.context-menu.sort-order').toggle();
+            });
+
+            // SEARCH BOX
+
+            $('.toolbar-search .js-search-input').hover(function(){
+              clearTimeout(VE.tmp.search_display_interval);
+              clearTimeout(VE.tmp.search_hover_interval);
+              VE.tmp.search_display_interval = setTimeout(function(){$('.js-search-input').addClass('activated');}, 150);
+            }, function(){
+              clearTimeout(VE.tmp.search_display_interval);
+              clearTimeout(VE.tmp.search_hover_interval);
+              VE.tmp.search_hover_interval = setTimeout(function(){
+                if(!VE.tmp.search_activated && !$(".js-search-input").val().length){
+                  $(".js-search-input").removeClass('activated');
+                }
+              }, 600);
+            });
+
+            $('.js-search-input').focus(function(){
+              VE.tmp.search_activated = 1;
+              clearTimeout(VE.tmp.search_hover_interval);
+            });
+            $('.js-search-input').blur(function(){
+              VE.tmp.search_activated = 0;
+              clearTimeout(VE.tmp.search_hover_interval);
+              VE.tmp.search_hover_interval = setTimeout(function(){
+                if(!$(".js-search-input").val().length){
+                  $(".js-search-input").removeClass('activated');
+                }
+              }, 600);
+            });
+
+
+            // TIMER
+
+            if($('.movement.left').length){
+              VE.helpers.refresh_timer.right = $('.movement.right');
+              VE.helpers.refresh_timer.left = $('.movement.left');
+              VE.helpers.refresh_timer.start();
+
+              $('.pause').click(function(){
+                VE.helpers.refresh_timer.stop();
+                $('.pause').addClass('u-hidden');
+                $('.play').removeClass('u-hidden');
+                $('.refresh-timer').addClass('paused');
+              });
+
+              $('.play').click(function(){
+                VE.helpers.refresh_timer.start();
+                $('.pause').removeClass('u-hidden');
+                $('.play').addClass('u-hidden');
+                $('.refresh-timer').removeClass('paused');
+              });
+            }
+
+
+            // SORTING
+
+            $('#vstobjects input, #vstobjects select, #vstobjects textarea').change(function(){VE.tmp.form_changed=1});
+
+            $('.sort-order span').click(function(){
+              $('.context-menu.sort-order').toggle();
+              if($(this).hasClass('active'))
+                return;
+
+              $('.sort-order span').removeClass('active');
+              $(this).addClass('active');
+              VE.tmp.sort_par = $(this).parent('li').attr('entity');
+              VE.tmp.sort_as_int = $(this).parent('li').attr('sort_as_int');
+              VE.tmp.sort_direction = $(this).hasClass('up')*1 || -1;
+
+              $('.toolbar .sort-by b').html($(this).parent('li').find('.name').html());
+              $('.toolbar .sort-by i').removeClass('fa-arrow-up-a-z fa-arrow-down-a-z');
+              $(this).hasClass('up') ? $('.toolbar .sort-by i').addClass('fa-arrow-up-a-z') : $('.toolbar .sort-by i').addClass('fa-arrow-down-a-z');
+              $('.units .l-unit').sort(function (a, b) {
+                if(VE.tmp.sort_as_int)
+                  return parseInt($(a).attr(VE.tmp.sort_par)) >= parseInt($(b).attr(VE.tmp.sort_par)) ? VE.tmp.sort_direction : VE.tmp.sort_direction * -1;
+                else
+                  return $(a).attr(VE.tmp.sort_par) <= $(b).attr(VE.tmp.sort_par) ? VE.tmp.sort_direction : VE.tmp.sort_direction * -1;
+                }).appendTo(".l-center.units");
+              });
+
+              $('#objects').submit( function (e){
+                 if(!e.originalEvent){
+                    return;
+                 }
+                 e.preventDefault();
+                 $('.ch-toggle').each( function (){
+                    if($(this).prop('checked')){
+                        key=this.name;
+                        div=$('<input type="hidden" name="'+key+'" value="'+this.value+'">');
+                        $('#objects').append(div);
+                    }
+                 });
+
+                 $('#objects').submit();
+                 return false;
+              });
+
+              // Shortcuts
+
+              shortcut.add("Ctrl+Enter", function(){
+                $('form#vstobjects').submit();
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': false,
+                  'target':           document
+                  }
+              );
+
+              shortcut.add("Ctrl+Backspace", function(){
+                var redirect = $('a.button#btn-back').attr('href')
+                if(VE.tmp.form_changed && redirect){
+                  VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', redirect);
+                } else if($('form#vstobjects .button.cancel')[0]){
+                  location.href=$('form#vstobjects input.cancel').attr('onclick').replace("location.href='", "").replace("'","");
+                } else if(redirect){
+                  location.href = redirect;
+                }
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': false,
+                  'target':           document
+                  }
+              );
+
+
+              shortcut.add("f", function(){
+                $('.js-search-input').addClass('activated').focus();
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+              $(window).on('keypress', function(evt) {
+                  var tag = evt.target.tagName.toLowerCase();
+                  if (evt.charCode == 97 && tag != 'input' && tag != 'textarea' && tag != 'selectbox') {
+                      evt.preventDefault();
+                      if (!evt.ctrlKey && !evt.shiftKey) {
+                          if ($('.button#btn-create').length) {
+                              location.href=$('.button#btn-create').attr('href');
+                          }
+                      }
+                      else {
+                          if ($('.l-unit .ch-toggle:eq(0)').prop('checked')) {
+                                $('.l-unit').removeClass('selected');
+                                $('.l-unit .ch-toggle').prop('checked', false);
+                          }
+                          else {
+                               $('.l-unit').addClass('selected');
+                               $('.l-unit .ch-toggle').prop('checked', true);
+                          }
+                      }
+                }
+              });
+
+              shortcut.add("1", function(){
+                var target = $('.main-menu .main-menu-item:nth-of-type(1) a')
+                if(target.length != 1){
+                  return;
+                }
+                if(VE.tmp.form_changed){
+                  VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
+                } else {
+                  location.href=target.attr('href');
+                }
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+              shortcut.add("2", function(){
+                var target = $('.main-menu .main-menu-item:nth-of-type(2) a')
+                if(target.length != 1){
+                  return;
+                }
+                if(VE.tmp.form_changed){
+                  VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
+                } else {
+                  location.href=target.attr('href');
+                }
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+              shortcut.add("3", function(){
+                var target = $('.main-menu .main-menu-item:nth-of-type(3) a')
+                if(target.length != 1){
+                  return;
+                }
+                if(VE.tmp.form_changed){
+                  VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
+                } else {
+                  location.href=target.attr('href');
+                }
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+              shortcut.add("4", function(){
+                var target = $('.main-menu .main-menu-item:nth-of-type(4) a')
+                if(target.length != 1){
+                  return;
+                }
+                if(VE.tmp.form_changed){
+                  VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
+                } else {
+                  location.href=target.attr('href');
+                }
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+              shortcut.add("5", function(){
+                var target = $('.main-menu .main-menu-item:nth-of-type(5) a')
+                if(target.length != 1){
+                  return;
+                }
+                if(VE.tmp.form_changed){
+                  VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
+                } else {
+                  location.href=target.attr('href');
+                }
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+              shortcut.add("6", function(){
+                var target = $('.main-menu .main-menu-item:nth-of-type(6) a')
+                if(target.length != 1){
+                  return;
+                }
+                if(VE.tmp.form_changed){
+                  VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
+                } else {
+                  location.href=target.attr('href');
+                }
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+              shortcut.add("7", function(){
+                var target = $('.main-menu .main-menu-item:nth-of-type(7) a')
+                if(target.length != 1){
+                  return;
+                }
+                if(VE.tmp.form_changed){
+                  VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
+                } else {
+                  location.href=target.attr('href');
+                }
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+              shortcut.add("h", function(){
+                var shortcutsDialog = document.querySelector('.shortcuts');
+                if (shortcutsDialog.open) {
+                  shortcutsDialog.close();
+                } else {
+                  shortcutsDialog.showModal();
+                }
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+              shortcut.add("Esc", function(){
+                var shortcutsDialog = document.querySelector('.shortcuts');
+                if (shortcutsDialog.open) {
+                  shortcutsDialog.close();
+                }
+                $('input, checkbox, textarea, select').blur();
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': false,
+                  'target':           document
+                  }
+              );
+
+              shortcut.add("Left", function(){
+                VE.navigation.move_focus_left();
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+              shortcut.add("Right", function(){
+                VE.navigation.move_focus_right();
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+
+
+              shortcut.add("down", function(){
+                VE.navigation.move_focus_down();
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+              shortcut.add("up", function(){
+                VE.navigation.move_focus_up();
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+              shortcut.add("l", function(){
+                var elm = $('.units.active .l-unit.focus .shortcut-l');
+                if(elm.length){
+                  VE.navigation.shortcut(elm);
+                }
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+              shortcut.add("s", function(){
+                var elm = $('.units.active .l-unit.focus .shortcut-s');
+                if(elm.length){
+                  VE.navigation.shortcut(elm);
+                }
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+              shortcut.add("w", function(){
+                var elm = $('.units.active .l-unit.focus .shortcut-w');
+                if(elm.length){
+                  VE.navigation.shortcut(elm);
+                }
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+              shortcut.add("d", function(){
+                var elm = $('.units.active .l-unit.focus .shortcut-d');
+                if(elm.length){
+                  VE.navigation.shortcut(elm);
+                }
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+              shortcut.add("r", function(){
+                var elm = $('.units.active .l-unit.focus .shortcut-r');
+                if(elm.length){
+                  VE.navigation.shortcut(elm);
+                }
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+              shortcut.add("n", function(){
+                var elm = $('.units.active .l-unit.focus .shortcut-n');
+                if(elm.length){
+                  VE.navigation.shortcut(elm);
+                }
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+              shortcut.add("u", function(){
+                var elm = $('.units.active .l-unit.focus .shortcut-u');
+                if(elm.length){
+                  VE.navigation.shortcut(elm);
+                }
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+
+              shortcut.add("Delete", function(){
+                var elm = $('.units.active .l-unit.focus .shortcut-delete');
+                if(elm.length){
+                  VE.navigation.shortcut(elm);
+                }
+              }, {
+                  'type':             'keydown',
+                  'propagate':        false,
+                  'disable_in_input': true,
+                  'target':           document
+                  }
+              );
+
+              shortcut.add("Enter", function(evt){
+
+                if (evt.target.tagName == 'INPUT' && evt.target.form.id == 'vstobjects'){
+                  $('form#vstobjects').submit();
+                }
+
+                if(VE.tmp.form_changed){
+                  if(!$('.ui-dialog').is(':visible')){
+                    VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect')[0], '', $(VE.navigation.state.menu_selector + '.focus a').attr('href'));
+                  } else { // if dialog is opened - submitting confirm box by "enter" shortcut
+                    $('.ui-dialog button.submit').click();
+                  }
+                } else {
+                    if(!$('.ui-dialog').is(':visible')){
+                      var elm = $('.units.active .l-unit.focus .shortcut-enter');
+                      if(elm.length){
+                        VE.navigation.shortcut(elm);
+                      } else {
+                        VE.navigation.enter_focused();
+                      }
+                    } else { // if dialog is opened - submitting confirm box by "enter" shortcut
+                      $('.ui-dialog button.submit').click();
+                    }
+                }
+              }, {
+                  'type':             'keydown',
+                  'propagate':        true,
+                  'disable_in_input': false,
+                  'target':           document
+                  }
+              );
+
+              document.querySelector('.shortcuts-close').addEventListener('click', function(){
+                var shortcutsDialog = document.querySelector('.shortcuts');
+                if (shortcutsDialog.open) {
+                  shortcutsDialog.close();
+                }
+              });
+
+              document.querySelector('.js-shortcuts').addEventListener('click', function() {
+                event.preventDefault();
+                var shortcutsDialog = document.querySelector('.shortcuts');
+                if (shortcutsDialog.open) {
+                  shortcutsDialog.close();
+                } else {
+                  shortcutsDialog.showModal();
+                }
+              });
+
+              $(document).click(function(evt){
+                //close notification popup
+                if(!$(evt.target).hasClass('js-notifications') && $(evt.target).parents('ul.notification-container').length == 0){
+                  $('.notification-container').addClass('u-hidden');
+                  $('.js-notifications').removeClass('active');
+                }
+              });
+
+
+              // focusing on the first input at form
+              if( location.href.indexOf('lead=') == -1 && !$('.ui-dialog').is(':visible') ){
+                $('#vstobjects .form-control:not([disabled]), #vstobjects .form-select:not([disabled])').first().focus();
+              }
+
+              $('.js-notifications').click(function(evt){
+                if(!$('.js-notifications').hasClass('active')){
+                  VE.notifications.get_list();
+                  $('.js-notifications').addClass('active');
+                } else {
+                  $('.notification-container').addClass('u-hidden');
+                  $('.js-notifications').removeClass('active');
+                }
+              });
+
+              $('.js-toggle-top-bar-menu').click(function(evt){
+                $(this).siblings('.top-bar-nav-list').toggle();
+              });
+
+            $('.button').attr('title','ctrl+Enter');
+            $('.button.cancel').attr('title','ctrl+Backspace');
+
+            VE.core.register();
+            if (location.href.search(/list/) != -1) {
+                var shift_select_ref = $('body').finderSelect({
+                    children: '.l-unit',
+                    'onFinish': function(evt) {
+                        if ($('.l-content').find('.l-unit.selected').length == $('.l-content').find('.l-unit').length) {
+                            $('.toggle-all').addClass('clicked-on');
+                        }
+                    },
+                    'toggleAllHook': function() {
+                        if ($('.l-unit').length == $('.ch-toggle:checked').length) {
+                            $('.l-unit.selected').removeClass('selected');
+                            $('.ch-toggle').prop('checked', false);
+                            $('#toggle-all').prop('checked', false);
+                        }
+                        else {
+                            $('.ch-toggle').prop('checked', true);
+                            $('#toggle-all').prop('checked', true);
+                        }
+                    }
+                });
+
+                $('table').on('mousedown', 'td', function(e) {
+                    if (e.ctrlKey) {
+                        e.preventDefault();
+                    }
+                });
+            }
+
+            //
+            $('form#objects').on('submit', function(evt) {
+                $('.l-unit').find('.ch-toggle').prop('checked', false);
+                $('.l-unit.selected').find('.ch-toggle').prop('checked', true);
+            });
+            // todo: maybe give the save button id?
+            $(".button[data-id=vstobjects][data-action=submit]").on('click', function(ev){
+              let loadingAnimationEle = document.createElement("div");
+              loadingAnimationEle.className = "spinner";
+              loadingAnimationEle.innerHTML = '<div class="spinner-inner"></div><div class="spinner-mask"></div> <div class="spinner-mask-two"></div>';
+
+              // this both gives an indication that we've clicked and is loading, also prevents double-clicking/clicking-on-something-else while loading.
+              $(".button[data-id=vstobjects][data-action=submit]").replaceWith(loadingAnimationEle);
+              $(".button").replaceWith('');
+              // workaround a render bug on Safari (loading icon doesn't render without this)
+              ev.preventDefault();
+              $('#vstobjects').submit();
+            });
+    });
 
 /**
  * generates a random string

+ 55 - 64
web/templates/includes/panel.php

@@ -1,9 +1,9 @@
-<div class="hidden" id="token" token="<?=$_SESSION['token']?>"></div>
+<div id="token" token="<?=$_SESSION['token']?>"></div>
 
 <header class="top-bar">
   <div class="l-center top-bar-inner">
 
-    <!-- Logo / Left Menu wrapper -->
+    <!-- Logo / Usage Statistics wrapper -->
     <div class="top-bar-left">
 
       <!-- Logo / Home Button -->
@@ -11,48 +11,6 @@
         <img src="/images/logo-header.svg" alt="<?=_('Hestia Control Panel');?>" width="54" height="29">
       </a>
 
-      <!-- Left Menu -->
-      <nav class="top-bar-nav">
-        <ul class="top-bar-nav-list">
-
-          <!-- Records tab -->
-          <li class="top-bar-nav-item">
-            <a class="top-bar-nav-link <?php if(in_array($TAB, ['WEB', 'DNS', 'MAIL', 'DB', 'BACKUP', 'CRON', 'PACKAGE', 'USER', 'LOG'])) echo 'active' ?>" href="<?=htmlspecialchars($home_url)?>">
-              <i class="fas fa-list-check"></i>
-              <span class="top-bar-nav-link-label"><?=_('Records');?></span>
-            </a>
-          </li>
-
-          <!-- File Manager tab -->
-          <?php if ((isset($_SESSION['FILE_MANAGER'])) && (!empty($_SESSION['FILE_MANAGER'])) && ($_SESSION['FILE_MANAGER'] == "true")) {?>
-            <?php if (($_SESSION['userContext'] === 'admin') && (isset($_SESSION['look']) && ($_SESSION['look'] === 'admin') && ($_SESSION['POLICY_SYSTEM_PROTECTED_ADMIN'] == 'yes'))) {?>
-              <!-- Hide file manager when impersonating admin-->
-            <?php } else { ?>
-              <li class="top-bar-nav-item">
-                <a class="top-bar-nav-link <?php if($TAB == 'FM') echo 'active' ?>" href="/fm/">
-                  <i class="fas fa-folder-open"></i>
-                  <span class="top-bar-nav-link-label"><?=_('Files');?></span>
-                </a>
-              </li>
-            <?php } ?>
-          <?php } ?>
-
-          <!-- Statistics tab-->
-          <li class="top-bar-nav-item">
-            <a class="top-bar-nav-link <?php if($TAB == 'STATS') echo 'active' ?>" href="/list/stats/">
-              <i class="fas fa-chart-line"></i>
-              <span class="top-bar-nav-link-label"><?=_('Statistics');?></span>
-            </a>
-          </li>
-
-        </ul>
-      </nav>
-
-    </div>
-
-    <!-- Usage Statistics / Right Menu wrapper -->
-    <div class="top-bar-right">
-
       <!-- Usage Statistics -->
       <div class="top-bar-usage">
         <?php
@@ -80,21 +38,46 @@
         </div>
       </div>
 
-      <!-- Right Menu -->
+    </div>
+
+    <!-- Notifications / Menu wrapper -->
+    <div class="top-bar-right">
+
+      <!-- Notifications -->
+      <?php if (($_SESSION['userContext'] === 'admin') && (isset($_SESSION['look']) && ($user == 'admin'))) {?>
+        <!-- Do not show notifications panel when impersonating 'admin' user -->
+      <?php } else { ?>
+        <div class="top-bar-notifications">
+          <button type="button" class="top-bar-nav-link js-notifications" title="<?=_('Notifications');?>">
+            <i class="fas fa-bell <?php if($panel[$user]['NOTIFICATIONS'] == 'yes') echo 'animate__animated animate__swing status-icon orange' ?>"></i>
+            <span class="u-hidden"><?=_('Notifications');?></span>
+          </button>
+          <ul class="notification-container animate__animated animate__fadeIn u-hidden"></ul>
+        </div>
+      <?php } ?>
+
+      <!-- Menu -->
       <nav class="top-bar-nav">
-        <ul class="top-bar-nav-list">
 
-          <!-- Notifications -->
-          <?php if (($_SESSION['userContext'] === 'admin') && (isset($_SESSION['look']) && ($user == 'admin'))) {?>
-            <!-- Do not show notifications panel when impersonating 'admin' user -->
-          <?php } else { ?>
-            <li class="top-bar-nav-item">
-              <a title="<?=_('Notifications');?>" class="top-bar-nav-link js-notifications <?php if($panel[$user]['NOTIFICATIONS'] == 'yes') echo 'updates' ?>" href="#">
-                <i class="fas fa-bell <?php if($panel[$user]['NOTIFICATIONS'] == 'yes') echo 'animate__animated animate__swing status-icon orange' ?>"></i>
-                <span class="u-hidden"><?=_('Notifications');?></span>
-              </a>
-              <ul class="notification-container animate__animated animate__fadeIn u-hidden"></ul>
-            </li>
+        <button type="button" class="top-bar-nav-link u-hide-desktop js-toggle-top-bar-menu" title="<?=_('Toggle menu');?>">
+          <i class="fas fa-bars"></i>
+          <span class="u-hidden"><?=_('Toggle menu');?></span>
+        </button>
+
+        <ul class="top-bar-nav-list animate__animated animate__fadeIn">
+
+          <!-- File Manager -->
+          <?php if ((isset($_SESSION['FILE_MANAGER'])) && (!empty($_SESSION['FILE_MANAGER'])) && ($_SESSION['FILE_MANAGER'] == "true")) {?>
+            <?php if (($_SESSION['userContext'] === 'admin') && (isset($_SESSION['look']) && ($_SESSION['look'] === 'admin') && ($_SESSION['POLICY_SYSTEM_PROTECTED_ADMIN'] == 'yes'))) {?>
+              <!-- Hide file manager when impersonating admin-->
+            <?php } else { ?>
+              <li class="top-bar-nav-item">
+                <a title="<?=_('File manager');?>" class="top-bar-nav-link <?php if($TAB == 'FM') echo 'active' ?>" href="/fm/">
+                  <i class="fas fa-folder-open"></i>
+                  <span class="top-bar-nav-link-label"><?=_('File manager');?></span>
+                </a>
+              </li>
+            <?php } ?>
           <?php } ?>
 
           <!-- Server Settings -->
@@ -105,7 +88,7 @@
               <li class="top-bar-nav-item">
                 <a title="<?=_('Server');?>" class="top-bar-nav-link <?php if(in_array($TAB, ['SERVER', 'IP', 'RRD', 'FIREWALL'])) echo 'active' ?>" href="/list/server/">
                   <i class="fas fa-gear"></i>
-                  <span class="u-hidden"><?=_('Server');?></span>
+                  <span class="top-bar-nav-link-label"><?=_('Server');?></span>
                 </a>
               </li>
             <?php } ?>
@@ -117,7 +100,7 @@
             <li class="top-bar-nav-item">
               <a title="<?=_('Logs');?>" class="top-bar-nav-link <?php if($TAB == 'LOG') echo 'active' ?>" href="/list/log/">
                 <i class="fas fa-clock-rotate-left"></i>
-                <span class="u-hidden"><?=_('Logs');?></span>
+                <span class="top-bar-nav-link-label"><?=_('Logs');?></span>
               </a>
             </li>
           <?php } else { ?>
@@ -125,17 +108,25 @@
               <li class="top-bar-nav-item">
                 <a title="<?=htmlspecialchars($user)?> (<?=htmlspecialchars($panel[$user]['NAME'])?>)" class="top-bar-nav-link" href="/edit/user/?user=<?=$user; ?>&token=<?=$_SESSION['token']?>">
                   <i class="fas fa-circle-user"></i>
-                  <span class="u-hidden"><?=htmlspecialchars($user)?> (<?=htmlspecialchars($panel[$user]['NAME'])?>)</span>
+                  <span class="top-bar-nav-link-label"><?=htmlspecialchars($user)?> (<?=htmlspecialchars($panel[$user]['NAME'])?>)</span>
                 </a>
               </li>
             <?php } ?>
           <?php } ?>
 
-          <!-- Help / Documentation-->
+          <!-- Statistics -->
+          <li class="top-bar-nav-item">
+            <a title="<?=_('Statistics');?>" class="top-bar-nav-link <?php if($TAB == 'STATS') echo 'active' ?>" href="/list/stats/">
+              <i class="fas fa-chart-line"></i>
+              <span class="top-bar-nav-link-label"><?=_('Statistics');?></span>
+            </a>
+          </li>
+
+          <!-- Help / Documentation -->
           <li class="top-bar-nav-item">
             <a title="<?=_('Help');?>" class="top-bar-nav-link" href="https://docs.hestiacp.com/" target="_blank" rel="noopener">
               <i class="fas fa-circle-question"></i>
-              <span class="u-hidden"><?=_('Help');?></span>
+              <span class="top-bar-nav-link-label"><?=_('Help');?></span>
             </a>
           </li>
 
@@ -144,14 +135,14 @@
             <li class="top-bar-nav-item">
               <a title="<?=_('Log out');?> (<?=$user?>)" class="top-bar-nav-link top-bar-nav-link-logout" href="/logout/?token=<?=$_SESSION['token']?>">
                 <i class="fas fa-circle-up"></i>
-                <span class="u-hidden"><?=_('Log out');?> (<?=$user?>)</span>
+                <span class="top-bar-nav-link-label"><?=_('Log out');?> (<?=$user?>)</span>
               </a>
             </li>
           <?php } else { ?>
             <li class="top-bar-nav-item">
               <a title="<?=_('Log out');?>" class="top-bar-nav-link top-bar-nav-link-logout" href="/logout/?token=<?=$_SESSION['token']?>">
                 <i class="fas fa-right-from-bracket"></i>
-                <span class="u-hidden"><?=_('Log out');?></span>
+                <span class="top-bar-nav-link-label"><?=_('Log out');?></span>
               </a>
             </li>
           <?php } ?>

Niektóre pliki nie zostały wyświetlone z powodu dużej ilości zmienionych plików