update templates and base structure

lib/Froxlor/UI/HTML.php

@@ -12,7 +12,7 @@ class HTML
 	 *        	array navigation data
 	 * @param
 	 *        	array userinfo the userinfo of the user
-	 * @return string the content of the navigation bar
+	 * @return array the content of the navigation bar
 	 *        
 	 * @author Florian Lippert <flo@syscp.org>
 	 */
@@ -61,15 +61,18 @@ class HTML
 
 							$navurl = htmlspecialchars($element['url']);
 							$navlabel = $element['label'];
+							$icon = $element['icon'] ?? null;
 						} else {
 							$navlabel = $element['label'];
+                            $icon = $element['icon'] ?? null;
 						}
 
 						$navigation_links[] = [
 							'url' => $navurl,
 							'target' => $target,
 							'is_active' => $active,
-							'label' => $navlabel
+							'label' => $navlabel,
+							'icon' => $icon
 						];
 					}
 				}
@@ -95,15 +98,18 @@ class HTML
 
 						$navurl = htmlspecialchars($box['url']);
 						$navlabel = $box['label'];
+						$icon = $box['icon'] ?? null;
 					} else {
 						$navurl = "#";
 						$navlabel = $box['label'];
+						$icon = $box['icon'] ?? null;
 					}
 
 					$returnvalue[] = [
 						'url' => $navurl,
 						'target' => $target,
 						'label' => $navlabel,
+						'icon' => $icon,
 						'items' => $navigation_links
 					];
 				}

lib/navigation/00.froxlor.main.php

@@ -18,47 +18,11 @@
  */
 return array(
 	'customer' => array(
-		'index' => array(
-			'url' => 'customer_index.php',
-			'label' => $lng['admin']['overview'],
-			'elements' => array(
-				array(
-					'label' => $lng['menue']['main']['username']
-				),
-				array(
-					'url' => 'customer_index.php?page=change_password',
-					'label' => $lng['menue']['main']['changepassword']
-				),
-				array(
-					'url' => 'customer_index.php?page=change_language',
-					'label' => $lng['menue']['main']['changelanguage']
-				),
-				array(
-					'url' => 'customer_index.php?page=change_theme',
-					'label' => $lng['menue']['main']['changetheme'],
-					'show_element' => (\Froxlor\Settings::Get('panel.allow_theme_change_customer') == true)
-				),
-				array(
-					'url' => 'customer_index.php?page=apikeys',
-					'label' => $lng['menue']['main']['apikeys'],
-					'show_element' => (\Froxlor\Settings::Get('api.enabled') == true)
-				),
-				array(
-					'url' => 'https://docs.froxlor.org/apiguide/index.html',
-					'new_window' => true,
-					'label' => $lng['menue']['main']['apihelp'],
-					'show_element' => (\Froxlor\Settings::Get('api.enabled') == true)
-				),
-				array(
-					'url' => 'customer_index.php?action=logout',
-					'label' => $lng['login']['logout']
-				)
-			)
-		),
 		'email' => array(
 			'url' => 'customer_email.php',
 			'label' => $lng['menue']['email']['email'],
 			'show_element' => (! \Froxlor\Settings::IsInList('panel.customer_hide_options', 'email')),
+            'icon' => 'fa fa-envelope',
 			'elements' => array(
 				array(
 					'url' => 'customer_email.php?page=emails',
@@ -83,6 +47,7 @@ return array(
 			'url' => 'customer_mysql.php',
 			'label' => $lng['menue']['mysql']['mysql'],
 			'show_element' => (! \Froxlor\Settings::IsInList('panel.customer_hide_options', 'mysql')),
+            'icon' => 'fa fa-database',
 			'elements' => array(
 				array(
 					'url' => 'customer_mysql.php?page=mysqls',
@@ -102,6 +67,7 @@ return array(
 			'url' => 'customer_domains.php',
 			'label' => $lng['menue']['domains']['domains'],
 			'show_element' => (! \Froxlor\Settings::IsInList('panel.customer_hide_options', 'domains')),
+            'icon' => 'fa fa-globe',
 			'elements' => array(
 				array(
 					'url' => 'customer_domains.php?page=domains',
@@ -117,6 +83,7 @@ return array(
 			'url' => 'customer_ftp.php',
 			'label' => $lng['menue']['ftp']['ftp'],
 			'show_element' => (! \Froxlor\Settings::IsInList('panel.customer_hide_options', 'ftp')),
+            'icon' => 'fa fa-transfer',
 			'elements' => array(
 				array(
 					'url' => 'customer_ftp.php?page=accounts',
@@ -134,6 +101,7 @@ return array(
 			'url' => 'customer_extras.php',
 			'label' => $lng['menue']['extras']['extras'],
 			'show_element' => (! \Froxlor\Settings::IsInList('panel.customer_hide_options', 'extras')),
+            'icon' => 'fa fa-wrench',
 			'elements' => array(
 				array(
 					'url' => 'customer_extras.php?page=htpasswds',
@@ -161,6 +129,7 @@ return array(
 			'url' => 'customer_traffic.php',
 			'label' => $lng['menue']['traffic']['traffic'],
 			'show_element' => (! \Froxlor\Settings::IsInList('panel.customer_hide_options', 'traffic')),
+            'icon' => 'fa fa-area-chart',
 			'elements' => array(
 				array(
 					'url' => 'customer_traffic.php?page=current',
@@ -170,46 +139,10 @@ return array(
 		)
 	),
 	'admin' => array(
-		'index' => array(
-			'url' => 'admin_index.php',
-			'label' => $lng['admin']['overview'],
-			'elements' => array(
-				array(
-					'label' => $lng['menue']['main']['username']
-				),
-				array(
-					'url' => 'admin_index.php?page=change_password',
-					'label' => $lng['menue']['main']['changepassword']
-				),
-				array(
-					'url' => 'admin_index.php?page=change_language',
-					'label' => $lng['menue']['main']['changelanguage']
-				),
-				array(
-					'url' => 'admin_index.php?page=change_theme',
-					'label' => $lng['menue']['main']['changetheme'],
-					'show_element' => (\Froxlor\Settings::Get('panel.allow_theme_change_admin') == true)
-				),
-				array(
-					'url' => 'admin_index.php?page=apikeys',
-					'label' => $lng['menue']['main']['apikeys'],
-					'show_element' => (\Froxlor\Settings::Get('api.enabled') == true)
-				),
-				array(
-					'url' => 'https://docs.froxlor.org/apiguide/index.html',
-					'new_window' => true,
-					'label' => $lng['menue']['main']['apihelp'],
-					'show_element' => (\Froxlor\Settings::Get('api.enabled') == true)
-				),
-				array(
-					'url' => 'admin_index.php?action=logout',
-					'label' => $lng['login']['logout']
-				)
-			)
-		),
 		'resources' => array(
 			'label' => $lng['admin']['resources'],
 			'required_resources' => 'customers',
+            'icon' => 'fa fa-box',
 			'elements' => array(
 				array(
 					'url' => 'admin_customers.php?page=customers',
@@ -251,6 +184,7 @@ return array(
 		'traffic' => array(
 			'label' => $lng['admin']['traffic'],
 			'required_resources' => 'customers',
+            'icon' => 'fa fa-area-chart',
 			'elements' => array(
 				array(
 					'url' => 'admin_traffic.php?page=customers',
@@ -262,6 +196,7 @@ return array(
 		'server' => array(
 			'label' => $lng['admin']['server'],
 			'required_resources' => 'change_serversettings',
+            'icon' => 'fa fa-server',
 			'elements' => array(
 				array(
 					'url' => 'admin_configfiles.php?page=configfiles',
@@ -306,6 +241,7 @@ return array(
 		'server_php' => array(
 			'label' => $lng['admin']['server_php'],
 			'required_resources' => 'change_serversettings',
+            'icon' => 'fab fa-php',
 			'elements' => array(
 				array(
 					'url' => 'admin_phpsettings.php?page=overview',
@@ -339,6 +275,7 @@ return array(
 		),
 		'misc' => array(
 			'label' => $lng['admin']['misc'],
+            'icon' => 'fa fa-wrench',
 			'elements' => array(
 				array(
 					'url' => 'admin_settings.php?page=integritycheck',

mix-manifest.json

@@ -1,5 +1,5 @@
 {
     "/templates/Froxlor/assets/js/main.js": "/templates/Froxlor/assets/js/main.js",
-    "/templates/Froxlor/assets/css/main.css": "/templates/Froxlor/assets/css/main.css",
+    "/templates/Froxlor/assets/css/dark.css": "/templates/Froxlor/assets/css/dark.css",
-    "/templates/Froxlor/assets/css/dark.css": "/templates/Froxlor/assets/css/dark.css"
+    "/templates/Froxlor/assets/css/main.css": "/templates/Froxlor/assets/css/main.css"
 }

templates/Froxlor/sidebarmenu.html.twig

@@ -1,46 +1,50 @@
-<div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 280px;">
+<nav id="sidebar" class="sidebar collapse d-md-flex flex-shrink-0 flex-column bg-dark overflow-auto max-h-before-header">
-	<ul class="nav nav-pills flex-column mb-auto">
+	<ul class="nav d-flex flex-fill flex-column py-3">
 		{% for idx,mitems in nav_entries %}
-			{% if mitems.label|upper != 'OVERVIEW' %}
+			{% if mitems.items is not empty %}
-				{% if mitems.items is not empty %}
+				<li class="nav-item">
-					<li class="nav-item">
+					<a class="nav-link text-light {% if mitems.active == 0 %}collapsed{% endif %}" href="#sub{{ idx }}" data-bs-toggle="collapse" data-bs-target="#sub{{ idx }}">
-						<a class="nav-link text-light {% if mitems.active == 0 %}collapsed{% endif %}" href="#sub{{ idx }}" data-bs-toggle="collapse" data-bs-target="#sub{{ idx }}">
+						{% if mitems.icon is not empty %}
-							<span class="{{ mitems.icon }}"></span>
+							<i class="{{ mitems.icon }}"></i>
-							{{ mitems.label|upper }}</a>
+						{% endif %}
-						<div class="collapse {% if mitems.active == 1 %}show{% endif %}" id="sub{{ idx }}" aria-expanded="{% if mitems.active == 1 %}true{% else %}false{% endif %}">
+						{{ mitems.label }}
-							<ul class="flex-column ps-3 nav">
+					</a>
-								{% for item in mitems.items %}
+					<div class="collapse {% if mitems.active == 1 %}show{% endif %}" id="sub{{ idx }}" aria-expanded="{% if mitems.active == 1 %}true{% else %}false{% endif %}">
-									<li class="nav-item">
+						<ul class="flex-column ps-3 nav">
-										<a class="nav-link text-light pb-0 {% if item.active == 1 %}font-weight-bold{% endif %}" href="{{ item.url|raw }}">{{ item.label }}</a>
+							{% for item in mitems.items %}
-									</li>
+								<li class="nav-item">
-								{% endfor %}
+									<a class="nav-link text-light {% if item.active == 1 %}font-weight-bold{% endif %}" href="{{ item.url|raw }}">{{ item.label|raw }}</a>
-							</ul>
+								</li>
-						</div>
+							{% endfor %}
-					</li>
+						</ul>
-				{% else %}
+					</div>
-					<li class="nav-item">
+				</li>
-						<a class="nav-link text-light {% if mitems.active == 1 %}active{% endif %}" href="{% if mitems.url is not empty %}{{ mitems.url|raw }}{% else %}#{% endif %}" {% if mitems.target is not empty %} target="{{ mitems.target }}" {% endif %}>
+			{% else %}
-							{% if mitems.icon is not empty %}
+				<li class="nav-item">
-								<span class="{{ mitems.icon }}"></span>
+					<a class="nav-link text-light {% if mitems.active == 1 %}active{% endif %}" href="{% if mitems.url is not empty %}{{ mitems.url|raw }}{% else %}#{% endif %}" {% if mitems.target is not empty %} target="{{ mitems.target }}" {% endif %}>
-							{% endif %}
+						{% if mitems.icon is not empty %}
-							{{ mitems.label|upper }}</a>
+							<i class="{{ mitems.icon }}"></i>
-					</li>
+						{% endif %}
-				{% endif %}
+						{{ mitems.label|upper }}
+					</a>
+				</li>
 			{% endif %}
 		{% endfor %}
 	</ul>
-	<hr>
+
-	<div class="dropdown">
+	<div class="d-flex flex-shrink-0 p-3 user-info">
-		<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
+		<div class="dropdown d-block flex-shrink-0">
-			<i class="fa-solid fa-user me-3"></i>
+			<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
-			<strong>{{ userinfo.loginname }}</strong>
+				<i class="fa-solid fa-user me-3"></i>
-		</a>
+				<strong>{{ userinfo.loginname }}</strong>
-		<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
+			</a>
-			<li><a class="dropdown-item" href="#">New project...</a></li>
+			<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
-			<li><a class="dropdown-item" href="#">Settings</a></li>
+				<li><a class="dropdown-item" href="#">New project...</a></li>
-			<li><a class="dropdown-item" href="#">Profile</a></li>
+				<li><a class="dropdown-item" href="#">Settings</a></li>
-			<li><hr class="dropdown-divider"></li>
+				<li><a class="dropdown-item" href="#">Profile</a></li>
-			<li><a class="dropdown-item" href="{{ linker({'section': 'index', 'action': 'logout'}) }}">{{ lng('login.logout') }}</a></li>
+				<li><hr class="dropdown-divider"></li>
-		</ul>
+				<li><a class="dropdown-item" href="{{ linker({'section': 'index', 'action': 'logout'}) }}">{{ lng('login.logout') }}</a></li>
+			</ul>
+		</div>
 	</div>
-</div>
+</nav>

templates/Froxlor/src/scss/_global.scss

@@ -8,6 +8,24 @@
   @extend .shadow-sm;
 }
 
+.page-header {
+  margin-bottom: 2rem;
+
+  &:after {
+    margin-top: .5rem;
+    display: block;
+    height: 3px;
+    width: 100px;
+    background: $froxlor-blue-dark;
+    border-radius: 3px;
+    content: ' ';
+  }
+}
+
+.progress-thin {
+  height: 3px;
+}
+
 .alert-icon {
   padding: .5rem;
   background: rgba(0, 0, 0, .15);
@@ -16,12 +34,6 @@
   margin-right: .75rem;
 }
 
-.card .card-body {
-  p {
-    @extend .card-text;
-  }
-}
-
 .max-w-420 {
   max-width: 420px;
 }
@@ -34,6 +46,10 @@
   max-width: 991.98px;
 }
 
+.max-h-before-header {
+  max-height: calc(100vh - ($spacer * 3.5));
+}
+
 footer {
   @extend .text-muted;
 }

templates/Froxlor/src/scss/components/_card.scss

@@ -0,0 +1,12 @@
+.card {
+  margin-bottom: $spacer * 1.5;
+
+  .card-header {
+    border-bottom: #e5e5e5 solid 1px;
+  }
+  .card-body {
+    p {
+      @extend .card-text;
+    }
+  }
+}

templates/Froxlor/src/scss/components/_navbar.scss

@@ -0,0 +1,22 @@
+.navbar {
+  background: darken($navbar-bg, 3);
+}
+
+@include media-breakpoint-up(md) {
+  .navbar {
+    .navbar-brand {
+      background: $dark;
+      width: $sidebar-width;
+    }
+  }
+}
+
+@include media-breakpoint-down(md) {
+  .navbar {
+    background: $dark;
+  }
+
+  .navbar-light .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+  }
+}

templates/Froxlor/src/scss/components/_sidebar.scss

@@ -0,0 +1,38 @@
+.sidebar {
+  width: $sidebar-width;
+  @extend .shadow;
+
+  &.collapsing {
+    transition: none;
+  }
+
+  .user-info {
+    background: darken($dark, 2);
+  }
+
+  >.nav {
+    >.nav-item {
+      >.nav-link {
+        i {
+          margin-right: 1rem;
+          width: 1rem;
+          text-align: center;
+          opacity: .5;
+        }
+        &:not(.collapsed) {
+          background: darken($dark, 4);
+          border-left: $primary solid 3px;
+          padding-left: calc(1rem - 3px);
+        }
+      }
+      >.collapse, >.collapsing {
+        background: darken($dark, 2);
+
+        a {
+          opacity: .78;
+          margin-left: 1.25rem;
+        }
+      }
+    }
+  }
+}

templates/Froxlor/src/scss/main.scss

@@ -6,3 +6,6 @@
 
 // Theme
 @import "global";
+@import "components/navbar";
+@import "components/sidebar";
+@import "components/card";

templates/Froxlor/src/scss/variables/_main.scss

@@ -21,7 +21,8 @@ $alert-border-width: 0;
 $list-group-item-color-scale: 0;
 $list-group-item-bg-scale: 0;
 
-$card-border-width: 0;
+// Space
+$spacer: 1.25rem;
 
 // Body
 $body-bg: $light-bg;
@@ -35,3 +36,11 @@ $links: $froxlor-blue-dark;
 
 // Navbar
 $navbar-bg: #ffffff;
+
+// Sidebar
+$sidebar-width: 280px;
+
+// Card
+$card-cap-bg: none;
+$card-cap-padding-y: $spacer;
+$card-border-width: 0;

templates/Froxlor/user/dashboard-item.html.twig

@@ -1,29 +1,31 @@
 {% macro ditem(lngstr, available, used, assigned = null, formatbytes = false) %}
-	<div class="col">
+    <div class="col border-end border-bottom p-3">
-		<div class="card bg-light h-100 p-2">
+        <div class="row mb-1">
-			<div class="row mb-1">
+            <div class="col text-truncate">{{ lng(lngstr) }}</div>
-				<div class="col">{{ lng(lngstr) }}</div>
+            <div class="col-auto">
-				<div class="col-auto">
+                <small>{% if formatbytes %}{{ used|formatBytes }}{% else %}{{ used }}{% endif %}/{% if available < 0 %}{{ lng('customer.unlimited') }}{% else %}{% if formatbytes %}{{ available|formatBytes }}{% else %}{{ available }}{% endif %}{% endif %}</small>
-					<small>{% if formatbytes %}{{ used|formatBytes }}{% else %}{{ used }}{% endif %}/{% if available < 0 %}{{ lng('customer.unlimited') }}{% else %}{% if formatbytes %}{{ available|formatBytes }}{% else %}{{ available }}{% endif %}{% endif %}</small>
+            </div>
-				</div>
+        </div>
-			</div>
+        <div class="progress progress-thin my-auto">
-			<div class="progress my-auto" style="height: .25rem;">
+            {% set usageperc = 1 %}
-				{% set usageperc = 1 %}
+            {% if available > 0 %}
-				{% if available > 0 %}
+                {% set usageperc = (used  / available) * 100|round %}
-					{% set usageperc = (used  / available) * 100|round %}
+            {% endif %}
-				{% endif %}
+            <div
-				<div class="progress-bar{% if available < 0 %} bg-secondary{% elseif usageperc >= 75 and usageperc < 90 %} bg-warning{% elseif usageperc >= 90 %} bg-danger{% endif %}" 
+                class="progress-bar{% if available < 0 %} bg-secondary{% elseif usageperc >= 75 and usageperc < 90 %} bg-warning{% elseif usageperc >= 90 %} bg-danger{% endif %}"
-				role="progressbar" 
+                role="progressbar"
-				style="width: {% if available < 0 %}100{% else %}{{ usageperc }}{% endif %}%;" aria-valuenow="{% if available < 0 %}100{% else %}{{ used }}{% endif %}" aria-valuemin="0" aria-valuemax="{% if available < 0 %}100{% else %}{{ available }}{% endif %}"></div>
+                style="width: {% if available < 0 %}100{% else %}{{ usageperc }}{% endif %}%;"
-			</div>
+                aria-valuenow="{% if available < 0 %}100{% else %}{{ used }}{% endif %}"
-			{% if assigned is not empty %}
+                aria-valuemin="0"
-			<div class="progress my-auto" style="height: .25rem;">
+                aria-valuemax="{% if available < 0 %}100{% else %}{{ available }}{% endif %}"></div>
-				<div class="progress-bar bg-info" role="progressbar" 
+        </div>
-				style="width:{% if available > 0 %}{{ (assigned / available) * 100|round }}{% else %}1{% endif %}%;" 
+        {% if assigned is not empty %}
-				aria-valuenow="{{ assigned }}" aria-valuemin="0" 
+            <div class="progress progress-thin my-auto">
-				aria-valuemax="{{ available }}"></div>
+                <div class="progress-bar bg-info" role="progressbar"
-			</div>
+                    style="width:{% if available > 0 %}{{ (assigned / available) * 100|round }}{% else %}1{% endif %}%;"
-			{% endif %}
+                    aria-valuenow="{{ assigned }}" aria-valuemin="0"
-		</div>
+                    aria-valuemax="{{ available }}"></div>
-	</div>
+            </div>
+        {% endif %}
+    </div>
 {% endmacro %}

templates/Froxlor/user/index.html.twig

@@ -1,6 +1,8 @@
 {% extends "Froxlor/userarea.html.twig" %}
 
 {% block content %}
+	<h2 class="page-header">Dashboard</h2>
+
 	{% if get_setting('panel.is_configured') == 0 and userinfo.adminsession == 1 and userinfo.change_serversettings == 1 %}
 		<div class="alert alert-info position-relative p-5">
 			<h3>Willkommen bei Froxlor!</h3>
@@ -12,323 +14,103 @@
 		</div>
 	{% endif %}
 
+	<div class="card">
+		{% import "Froxlor/user/dashboard-item.html.twig" as dashboard %}
+		{% if userinfo.adminsession == 1 %}
+			{# admin-resources #}
+			<div class="row g-0">
+				{{ dashboard.ditem('admin.customers', userinfo.customers, overview.number_customers) }}
+				{{ dashboard.ditem('admin.domains', userinfo.domains, overview.number_domains) }}
+				{{ dashboard.ditem('customer.diskspace', userinfo.diskspace_bytes, overview.diskspace_bytes_used, overview.diskspace_bytes, true) }}
+				{{ dashboard.ditem('customer.traffic', userinfo.traffic_bytes, overview.traffic_bytes_used, overview.traffic_bytes, true) }}
+				{{ dashboard.ditem('customer.subdomains', userinfo.subdomains, overview.subdomains_used, overview.subdomains_assigned) }}
+			</div>
+			<div class="row g-0">
+				{{ dashboard.ditem('customer.mysqls', userinfo.mysqls, overview.mysqls_used, overview.mysqls_assigned) }}
+				{{ dashboard.ditem('customer.emails', userinfo.emails, overview.emails_used, overview.emails_assigned) }}
+				{{ dashboard.ditem('customer.accounts', userinfo.email_accounts, overview.email_accounts_used, overview.email_accounts_assigned) }}
+				{{ dashboard.ditem('customer.forwarders', userinfo.email_forwarders, overview.email_forwarders_used, overview.email_forwarders_assigned) }}
+				{{ dashboard.ditem('customer.ftps', userinfo.ftps, overview.ftps_used, overview.ftps_assigned) }}
+			</div>
+		{% else %}
+			{# customer-resources #}
+			<div class="row g-0">
+				{{ dashboard.ditem('customer.diskspace', userinfo.diskspace_bytes, userinfo.diskspace_bytes_used, null, true) }}
+				{{ dashboard.ditem('customer.traffic', userinfo.traffic_bytes, userinfo.traffic_bytes_used, null, true) }}
+				{{ dashboard.ditem('customer.subdomains', userinfo.subdomains, userinfo.subdomains_used) }}
+				{{ dashboard.ditem('customer.mysqls', userinfo.mysqls, userinfo.mysqls_used) }}
+			</div>
+			<div class="row g-0">
+				{{ dashboard.ditem('customer.emails', userinfo.emails, userinfo.emails_used) }}
+				{{ dashboard.ditem('customer.accounts', userinfo.email_accounts, userinfo.email_accounts_used) }}
+				{{ dashboard.ditem('customer.forwarders', userinfo.email_forwarders, userinfo.email_forwarders_used) }}
+				{{ dashboard.ditem('customer.ftps', userinfo.ftps, userinfo.ftps_used) }}
+			</div>
+		{% endif %}
+	</div>
+
 	<div class="row">
-		<div class="col-12 {% if userinfo.adminsession == 1 %}col-xl-4{% else %}col-xl-8{% endif %} mb-3 mb-xl-0">
+		<div class="col-7">
-			<div class="card mb-3">
+			<div class="card">
 				<div class="card-header">
-					<i class="fa-solid fa-chart-line"></i>
+					<h5>Applicant Information</h5>
-					{{ lng('panel.usage_statistics') }}
+					<span class="text-muted">Personal details and application.</span>
 				</div>
 				<div class="card-body">
-					<div class="row row-cols-1 row-cols-md-2{% if userinfo.adminsession == 0 %} row-cols-lg-3 row-cols-xl-4{% endif %} g-4">
+					dd
-						{% import "Froxlor/user/dashboard-item.html.twig" as dashboard %}
-						{% if userinfo.adminsession == 1 %}
-							{# admin-resources #}
-							{{ dashboard.ditem('admin.customers', userinfo.customers, overview.number_customers) }}
-							{{ dashboard.ditem('admin.domains', userinfo.domains, overview.number_domains) }}
-
-							{{ dashboard.ditem('customer.diskspace', userinfo.diskspace_bytes, overview.diskspace_bytes_used, overview.diskspace_bytes, true) }}
-							{{ dashboard.ditem('customer.traffic', userinfo.traffic_bytes, overview.traffic_bytes_used, overview.traffic_bytes, true) }}
-
-							{{ dashboard.ditem('customer.subdomains', userinfo.subdomains, overview.subdomains_used, overview.subdomains_assigned) }}
-							{{ dashboard.ditem('customer.mysqls', userinfo.mysqls, overview.mysqls_used, overview.mysqls_assigned) }}
-							{{ dashboard.ditem('customer.emails', userinfo.emails, overview.emails_used, overview.emails_assigned) }}
-							{{ dashboard.ditem('customer.accounts', userinfo.email_accounts, overview.email_accounts_used, overview.email_accounts_assigned) }}
-							{{ dashboard.ditem('customer.forwarders', userinfo.email_forwarders, overview.email_forwarders_used, overview.email_forwarders_assigned) }}
-							{{ dashboard.ditem('customer.ftps', userinfo.ftps, overview.ftps_used, overview.ftps_assigned) }}
-						{% else %}
-							{# customer-resources #}
-							{{ dashboard.ditem('customer.diskspace', userinfo.diskspace_bytes, userinfo.diskspace_bytes_used, null, true) }}
-							{{ dashboard.ditem('customer.traffic', userinfo.traffic_bytes, userinfo.traffic_bytes_used, null, true) }}
-
-							{{ dashboard.ditem('customer.subdomains', userinfo.subdomains, userinfo.subdomains_used) }}
-							{{ dashboard.ditem('customer.mysqls', userinfo.mysqls, userinfo.mysqls_used) }}
-							{{ dashboard.ditem('customer.emails', userinfo.emails, userinfo.emails_used) }}
-							{{ dashboard.ditem('customer.accounts', userinfo.email_accounts, userinfo.email_accounts_used) }}
-							{{ dashboard.ditem('customer.forwarders', userinfo.email_forwarders, userinfo.email_forwarders_used) }}
-							{{ dashboard.ditem('customer.ftps', userinfo.ftps, userinfo.ftps_used) }}
-						{% endif %}
-					</div>
 				</div>
 			</div>
+
 			{% if userinfo.adminsession == 1 %}
-				{# froxlor-details #}
+			{# froxlor-details #}
-				<div class="card mb-3">
+			<div class="card mb-3">
-					<div class="card-header">
+				<div class="card-header">
-						<i class="fa-solid fa-wrench"></i>
+					<i class="fa-solid fa-wrench"></i>
-						{{ lng('admin.froxlordetails') }}
+					{{ lng('admin.froxlordetails') }}
-					</div>
+				</div>
-					<ul class="list-group list-group-flush">
+				<ul class="list-group list-group-flush">
+					<li class="list-group-item d-flex justify-content-between align-items-start">
+						<div class="ms-2 me-auto">
+							<div class="fw-bold">{{ lng('tasks.outstanding_tasks') }}</div>
+							{% for task in outstanding_tasks %}
+								<i class="fa-regular fa-clock"></i>
+								{{ task.desc }}<br>
+							{% endfor %}
+						</div>
+					</li>
+					{% for cronrun in cron_last_runs %}
 						<li class="list-group-item d-flex justify-content-between align-items-start">
-							<div class="ms-2 me-auto">
+							<div class="ms-2 me-auto">{{ cronrun.title }}</div>
-								<div class="fw-bold">{{ lng('tasks.outstanding_tasks') }}</div>
+							<span class="badge bg-primary">
-								{% for task in outstanding_tasks %}
-									<i class="fa-regular fa-clock"></i>
-									{{ task.desc }}<br>
-								{% endfor %}
-							</div>
-						</li>
-						{% for cronrun in cron_last_runs %}
-							<li class="list-group-item d-flex justify-content-between align-items-start">
-								<div class="ms-2 me-auto">{{ cronrun.title }}</div>
-								<span class="badge bg-primary">
 									{% if cronrun.lastrun > 0 %}
 										{{ cronrun.lastrun|date('d.m.Y H:i') }}
 									{% else %}
 										{{ lng('cronjobs.notyetrun') }}
 									{% endif %}
 								</span>
-							</li>
+						</li>
-						{% endfor %}
+					{% endfor %}
-					</ul>
+				</ul>
-				</div>
+			</div>
 			{% endif %}
 		</div>
-		{% if userinfo.adminsession == 1 %}
+		<div class="col-5">
-			<div
+			<div id="newsfeed" class="card">
-				class="col-12 col-xl-4 mb-3 mb-xl-0">
+				<div class="card-header">
-				{# system infos #}
+					<h5>Froxlor Newsfeed</h5>
-				<div class="card mb-3">
+					<span class="text-muted">Personal details and application.</span>
-					<div class="card-header">
+				</div>
-						<i class="fa-solid fa-gears"></i>
+				<div class="list-group list-group-flush" id="newsfeeditems">
-						{{ lng('admin.systemdetails') }}
+					<div class="list-group-item d-flex justify-content-between align-items-start">
+						<div class="ms-2 me-auto">
+							Loading newsfeed...
+						</div>
+						<span>
+							<i class="fa-solid fa-spinner fa-spin"></i>
+						</span>
 					</div>
-					<ul class="list-group list-group-flush">
-						<li class="list-group-item d-flex justify-content-between align-items-start">
-							<div class="ms-2 me-auto">
-								<div class="fw-bold">{{ lng('admin.hostname') }}</div>
-								{{ sysinfo.hostname }}
-							</div>
-						</li>
-						<li class="list-group-item d-flex justify-content-between align-items-start">
-							<div class="ms-2 me-auto">
-								<div class="fw-bold">{{ lng('admin.serversoftware') }}</div>
-								{{ sysinfo.webserver }}
-							</div>
-						</li>
-						<li class="list-group-item d-flex justify-content-between align-items-start">
-							<div class="ms-2 me-auto">
-								<div class="fw-bold">{{ lng('admin.phpversion') }}</div>
-								<a href="{{ linker({'section':'settings','page':'phpinfo'}) }}">{{ sysinfo.phpversion }}</a>
-							</div>
-						</li>
-						<li class="list-group-item d-flex justify-content-between align-items-start">
-							<div class="ms-2 me-auto">
-								<div class="fw-bold">{{ lng('admin.mysqlserverversion') }}</div>
-								{{ sysinfo.mysqlserverversion }}
-							</div>
-						</li>
-						<li class="list-group-item d-flex justify-content-between align-items-start">
-							<div class="ms-2 me-auto">
-								<div class="fw-bold">{{ lng('admin.webserverinterface') }}</div>
-								{{ sysinfo.phpsapi }}
-							</div>
-						</li>
-						{% if sysinfo.memory is not empty %}
-							<li class="list-group-item d-flex justify-content-between align-items-start">
-								<div class="ms-2 me-auto">
-									<div class="fw-bold">{{ lng('admin.memory') }}</div>
-									<pre>{{ sysinfo.memory }}</pre>
-								</div>
-							</li>
-						{% endif %}
-						<li class="list-group-item d-flex justify-content-between align-items-start">
-							<div class="ms-2 me-auto">
-								<div class="fw-bold">{{ lng('admin.sysload') }}</div>
-								{{ sysinfo.load }}
-							</div>
-						</li>
-						{% if sysinfo.kernel is not empty %}
-							<li class="list-group-item d-flex justify-content-between align-items-start">
-								<div class="ms-2 me-auto">
-									<div class="fw-bold">Kernel</div>
-									{{ sysinfo.kernel }}
-								</div>
-							</li>
-						{% endif %}
-						{% if sysinfo.uptime is not empty %}
-							<li class="list-group-item d-flex justify-content-between align-items-start">
-								<div class="ms-2 me-auto">
-									<div class="fw-bold">Uptime</div>
-									{{ sysinfo.uptime }}
-								</div>
-							</li>
-						{% endif %}
-					</ul>
 				</div>
 			</div>
-		{% endif %}
-		<div
-			class="col-12 col-xl-4">
-
-			{# newsfeed #}
-			{% if (userinfo.adminsession == 1 and get_setting('admin.show_news_feed') == 1) or (userinfo.adminsession == 0 and get_setting('customer.show_news_feed') == 1) %}
-				<div class="card mb-3" id="newsfeed" {% if userinfo.adminsession == 0 %} data-role="customer" {% endif %}>
-					<div class="card-header">
-						<i class="fa-solid fa-rss"></i>
-						News
-					</div>
-					<div class="list-group list-group-flush" id="newsfeeditems">
-						<div class="list-group-item d-flex justify-content-between align-items-start">
-							<div class="ms-2 me-auto">
-								Loading newsfeed...
-							</div>
-							<span>
-								<i class="fa-solid fa-spinner fa-spin"></i>
-							</span>
-						</div>
-					</div>
-				</div>
-			{% elseif userinfo.adminsession == 1 and get_setting('admin.show_news_feed') == 0 %}
-				<div class="card bg-warning text-dark mb-3">
-					<div class="card-header">
-						<i class="fa-solid fa-rss"></i>
-						News
-					</div>
-					<div class="card-body">
-						<i class="fa-solid fa-circle-exclamation"></i>
-						{{ lng('panel.newsfeed_disabled') }}&nbsp;
-						<a href="{{ linker({'section':'settings','part':'panel'}) }}" title="{{ lng('panel.edit') }}">
-							<i class="fa-solid fa-pen"></i>
-						</a>
-					</div>
-				</div>
-			{% endif %}
-
-			{% if userinfo.adminsession == 1 %}
-				{# custom notes #}
-				{% if userinfo.custom_notes is not empty and userinfo.custom_notes_show == 1 %}
-					<div class="card bg-info text-dark mb-3">
-						<div class="card-body">
-							{{ userinfo.custom_notes|nl2br|raw }}
-						</div>
-					</div>
-				{% endif %}
-
-				{# systemdetails #}
-
-			{% else %}
-
-				{# account info #}
-				<div class="card mb-3">
-					<div class="card-header">
-						<i class="fa-solid fa-user"></i>
-						{{ lng('index.accountdetails') }}
-					</div>
-					<ul class="list-group list-group-flush">
-						<li class="list-group-item d-flex justify-content-between align-items-start">
-							<div class="ms-2 me-auto">
-								<div class="fw-bold">{{ lng('login.username') }}</div>
-								{{ userinfo.loginname }}
-							</div>
-						</li>
-						<li class="list-group-item d-flex justify-content-between align-items-start">
-							<div class="ms-2 me-auto">
-								<div class="fw-bold">{{ lng('customer.email') }}</div>
-								{{ userinfo.email }}
-							</div>
-						</li>
-						<li class="list-group-item d-flex justify-content-between align-items-start">
-							<div class="ms-2 me-auto">
-								<div class="fw-bold">{{ lng('customer.services') }}</div>
-								{% if userinfo.imap == 1 %}
-									<span class="badge bg-success">IMAP</span>
-								{% endif %}
-								{% if userinfo.pop3 == 1 %}
-									<span class="badge bg-success">POP3</span>
-								{% endif %}
-								{% if userinfo.phpenabled == 1 %}
-									<span class="badge bg-success">PHP</span>
-								{% endif %}
-								{% if userinfo.perlenabled == 1 %}
-									<span class="badge bg-success">Perl/CGI</span>
-								{% endif %}
-								{% if userinfo.api_allowed == 1 %}
-									<a href="{{ linker({'section':'index','page':'apikeys'}) }}">
-										<span class="badge bg-success">API</span>
-									</a>
-								{% endif %}
-							</div>
-						</li>
-						{% if stdsubdomain is not empty %}
-							<li class="list-group-item d-flex justify-content-between align-items-start">
-								<div class="ms-2 me-auto">
-									<div class="fw-bold">{{ lng('admin.stdsubdomain') }}</div>
-									{{ stdsubdomain }}
-								</div>
-							</li>
-						{% endif %}
-						<li class="list-group-item d-flex justify-content-between align-items-start">
-							<div class="ms-2 me-auto">
-								<div class="fw-bold">{{ lng('customer.domains') }}</div>
-								{% for domain in domains %}
-									{{ domain }}<br>
-								{% endfor %}
-							</div>
-							<span class="badge bg-primary rounded-pill">{{ domains|length }}</span>
-						</li>
-					</ul>
-				</div>
-
-				{# customer details #}
-				<div class="card">
-					<div class="card-header">
-						<i class="fa-solid fa-id-card"></i>
-						{{ lng('index.customerdetails') }}
-					</div>
-					<ul class="list-group list-group-flush">
-						{% if userinfo.customernumber is not empty %}
-							<li class="list-group-item d-flex justify-content-between align-items-start">
-								<div class="ms-2 me-auto">
-									<div class="fw-bold">{{ lng('customer.customernumber') }}</div>
-									{{ userinfo.customernumber }}
-								</div>
-							</li>
-						{% endif %}
-						{% if userinfo.company is not empty %}
-							<li class="list-group-item d-flex justify-content-between align-items-start">
-								<div class="ms-2 me-auto">
-									<div class="fw-bold">{{ lng('customer.company') }}</div>
-									{{ userinfo.company }}
-								</div>
-							</li>
-						{% endif %}
-						{% if userinfo.name is not empty %}
-							<li class="list-group-item d-flex justify-content-between align-items-start">
-								<div class="ms-2 me-auto">
-									<div class="fw-bold">{{ lng('customer.name') }}</div>
-									{{ userinfo.firstname }}
-									{{ userinfo.name }}
-								</div>
-							</li>
-						{% endif %}
-						{% if userinfo.street is not empty %}
-							<li class="list-group-item d-flex justify-content-between align-items-start">
-								<div class="ms-2 me-auto">
-									<div class="fw-bold">{{ lng('customer.street') }}</div>
-									{{ userinfo.street }}
-								</div>
-							</li>
-						{% endif %}
-						{% if userinfo.city is not empty %}
-							<li class="list-group-item d-flex justify-content-between align-items-start">
-								<div class="ms-2 me-auto">
-									<div class="fw-bold">{{ lng('customer.zipcode') }}/{{ lng('customer.city') }}</div>
-									{{ userinfo.zipcode }}
-									{{ userinfo.city }}
-								</div>
-							</li>
-						{% endif %}
-						{% if userinfo.custom_notes is not empty and userinfo.custom_notes_show == 1 %}
-							<li class="list-group-item list-group-item-info d-flex justify-content-between align-items-start">
-								<div class="ms-2 me-auto">
-									{{ userinfo.custom_notes|nl2br|raw }}
-								</div>
-							</li>
-						{% endif %}
-					</ul>
-				</div>
-			{% endif %}
 		</div>
 	</div>
 {% endblock %}

templates/Froxlor/user/newsfeeditem.html.twig

@@ -1,9 +1,9 @@
 <a href="{{ link|default('#')|raw }}" class="list-group-item list-group-item-action">
 	<div class="d-flex w-100 justify-content-between">
-		<h5 class="mb-1">{{ title }}</h5>
+		<b class="mb-1">{{ title }}</b>
 		{% if date is not empty %}
 			<small>{{ date }}</small>
 		{% endif %}
 	</div>
-	<p class="mb-1">{{ content|raw }}</p>
+	<p class="small mb-1">{{ content|raw }}</p>
 </a>

templates/Froxlor/userarea.html.twig

@@ -17,15 +17,20 @@
 		</div>
 	{% endif %}
 
-	<nav class="navbar navbar-expand py-0">
+	<nav class="navbar navbar-expand-md navbar-light py-0">
 		<div class="container-fluid gx-0">
-			<a class="navbar-brand bg-dark p-3" style="width: 280px" href="{{ linker({'section': 'index'}) }}">
+			<a class="navbar-brand p-3" href="{{ linker({'section': 'index'}) }}">
 				<img src="{{ header_logo }}" alt="" width="auto" height="24" class="d-inline-block align-text-top">
 			</a>
-			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTop" aria-controls="navbarTop" aria-expanded="false" aria-label="Toggle navigation">
+			<div class="me-3 me-sm-0">
-				<span class="navbar-toggler-icon"></span>
+				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
-			</button>
+					<span class="navbar-toggler-icon"></span>
-			<div class="collapse navbar-collapse justify-content-end px-3" id="navbarTop">
+				</button>
+				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar" aria-controls="sidebar"  aria-expanded="false" aria-label="Toggle sidebar">
+					<span class="navbar-toggler-icon"></span>
+				</button>
+			</div>
+			<div class="collapse navbar-collapse justify-content-end px-3" id="navbar">
 				<ul class="navbar-nav align-items-center">
 					<li class="nav-item text-nowrap d-block me-2">
 						<a class="btn btn-primary btn-sm d-block" href="{{ linker({'section': 'index'}) }}">
@@ -87,11 +92,13 @@
 {% endblock %}
 
 {% block body %}
-	<div class="d-flex flex-grow-1">
+	<div class="d-flex flex-grow-1 overflow-hidden">
 		{{ include('Froxlor/sidebarmenu.html.twig') }}
 
-		<main role="main" class="flex-grow-1 p-5">
+		<main role="main" class="d-flex flex-column flex-grow-1 p-5 pb-0 overflow-auto max-h-before-header">
-			{% block content %}{% endblock %}
+			<section class="flex-grow-1">
+				{% block content %}{% endblock %}
+			</section>
 
 			{{ include('Froxlor/footer.html.twig') }}
 		</main>