update base structure

This commit is contained in:
envoyr
2022-02-16 20:29:42 +01:00
parent 91197bcff2
commit a4d6d183ff
18 changed files with 39943 additions and 154 deletions

View File

@@ -344,7 +344,7 @@ if (is_array($_themeoptions) && (!array_key_exists('variants', $_themeoptions) |
$hl_path = 'templates/' . $theme . '/assets/img';
// default is theme-image
$header_logo = $hl_path . '/logo.png';
$header_logo = $hl_path . '/logo_white.png';
$header_logo_login = $hl_path . '/logo.png';
if (Settings::Get('panel.logo_overridetheme') == 1 || Settings::Get('panel.logo_overridecustom') == 1) {

View File

@@ -1703,7 +1703,7 @@ $lng['2fa']['2fa_email_desc'] = 'Das Konto ist eingerichtet, um Einmalpasswörte
$lng['2fa']['2fa_ga_desc'] = 'Das Konto ist eingerichtet, um zeitbasierte Einmalpasswörter via Authenticator-App zu erhalten. Um die gewünschte Authenticator-App einzurichten, scanne bitte den untenstehenden QR-Code. Zum Deaktivieren, klicke auf "' . $lng['2fa']['2fa_delete'] . '"';
$lng['admin']['logviewenabled'] = 'Zugriff auf access/error-Logdateien';
$lng['panel']['viewlogs'] = 'Logdateien einsehen';
$lng['panel']['not_configured'] = 'Das System wurde noch nicht konfiguriert. Hier klicken für Konfiguration.';
$lng['panel']['not_configured'] = 'Das System wurde noch nicht konfiguriert. Klicke auf den Button um die Installation zu starten.';
$lng['panel']['done_configuring'] = 'Nach Abschluss der Konfiguration der Dienste,<br>untenstehenden Link klicken';
$lng['panel']['ihave_configured'] = 'Ich habe die Dienste konfiguriert';
$lng['panel']['system_is_configured'] = 'Das System ist bereits konfiguriert';

View File

@@ -1,5 +1,20 @@
{% extends "Froxlor/userarea.html.twig" %}
{% block content %}
test text
{% 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>
<p class="lead mb-5">Damit Froxlor mit dem Backend vernünftig kommunizieren kann, musst du dieses noch Konfigurieren.</p>
<a class="btn btn-lg btn-light text-info" href="{{ linker({'section': 'configfiles', 'page': 'configfiles'}) }}">Jetzt konfigurieren</a>
<aside class="position-absolute bottom-0 end-0 p-5">
<i class="fa fa-hat-wizard fa-5x"></i>
</aside>
</div>
{% endif %}
<div class="card">
<div class="card-body">
<p>Test</p>
</div>
</div>
{% endblock %}

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

File diff suppressed because one or more lines are too long

View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" {% if darkmode is defined %}class="{{ darkmode }}"{% endif %}>
<html lang="en"{% if darkmode is defined %} class="{{ darkmode }}"{% endif %}>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
@@ -22,45 +22,15 @@
</title>
</head>
<body {% if body_class is defined %}class="{{ body_class }}"{% endif %}>
{{ global_errors|raw }}
{% block navigation %}{% endblock %}
<div class="container-fluid">
{{ global_errors|raw }}
{% block body %}{% endblock %}
<footer class="py-5 text-center">
<span>
<img src="{{ basehref|default("") }}templates/Froxlor/assets/img/logo_grey.png" alt="Froxlor"/>
{% if install_mode is not defined %}
{% if (get_setting('admin.show_version_login') == '1'
and module == 'Login') or (module != 'Login'
and get_setting('admin.show_version_footer') == '1') %}
{{ call_static('\\Froxlor\\Froxlor', 'getFullVersion') }}
{% endif %}
{% endif %}
&copy; 2009-{{ "now"|date("Y") }} by <a href="https://www.froxlor.org/" rel="external">the Froxlor Team</a>
{% if install_mode is not defined %}
{% if (get_setting('panel.imprint_url') != '') %}
<a href="{{ get_setting('panel.imprint_url') }}" target="_blank" class="footer-link">{{ lng('imprint') }}</a>
{% endif %}
{% if (get_setting('panel.terms_url') != '') %}
<a href="{{ get_setting('panel.terms_url') }}" target="_blank" class="footer-link">{{ lng('terms') }}</a>
{% endif %}
{% if (get_setting('panel.privacy_url') != '') %}
<a href="{{ get_setting('panel.privacy_url') }}" target="_blank" class="footer-link">{{ lng('privacy') }}</a>
{% endif %}
{% endif %}
</span>
{% if lng('translator') %}
<span class="mt-3">
{{ lng('panel.translator') }}: {{ lng('translator') }}
</span>
{% endif %}
</footer>
</div>
{% block body %}
<div class="container-fluid">
{% block content %}{% endblock %}
{{ include('Froxlor/footer.html.twig') }}
</div>
{% endblock %}
</body>
</html>

View File

@@ -0,0 +1,30 @@
<footer class="py-5 text-center">
<span>
<img src="{{ basehref|default("") }}templates/Froxlor/assets/img/logo_grey.png" alt="Froxlor"/>
{% if install_mode is not defined %}
{% if (get_setting('admin.show_version_login') == '1'
and module == 'Login') or (module != 'Login'
and get_setting('admin.show_version_footer') == '1') %}
{{ call_static('\\Froxlor\\Froxlor', 'getFullVersion') }}
{% endif %}
{% endif %}
&copy; 2009-{{ "now"|date("Y") }} by <a href="https://www.froxlor.org/" rel="external">the Froxlor Team</a>
{% if install_mode is not defined %}
{% if (get_setting('panel.imprint_url') != '') %}
<a href="{{ get_setting('panel.imprint_url') }}" target="_blank" class="footer-link">{{ lng('imprint') }}</a>
{% endif %}
{% if (get_setting('panel.terms_url') != '') %}
<a href="{{ get_setting('panel.terms_url') }}" target="_blank" class="footer-link">{{ lng('terms') }}</a>
{% endif %}
{% if (get_setting('panel.privacy_url') != '') %}
<a href="{{ get_setting('panel.privacy_url') }}" target="_blank" class="footer-link">{{ lng('privacy') }}</a>
{% endif %}
{% endif %}
</span>
{% if lng('translator') %}
<span class="mt-3">
{{ lng('panel.translator') }}: {{ lng('translator') }}
</span>
{% endif %}
</footer>

View File

@@ -2,7 +2,7 @@
{% set body_class = "min-vh-100 d-flex align-items-center" %}
{% block body %}
{% block content %}
<div class="container max-w-lg flex align-content-center mt-5">
<img src="{{ basehref|default('') }}templates/Froxlor/assets/img/logo.png" class="filter-me" alt="Froxlor Server Management Panel"/>

View File

@@ -2,7 +2,7 @@
{% set body_class = "min-vh-100 d-flex align-items-center" %}
{% block body %}
{% block content %}
<div class="container">
<div class="row justify-content-center">
<form class="col-4 d-flex flex-column" method="post" enctype="application/x-www-form-urlencoded">

View File

@@ -2,7 +2,7 @@
{% set body_class = "min-vh-100 d-flex align-items-center" %}
{% block body %}
{% block content %}
<div class="alert alert-{{ type }} fade show" role="alert">
<h4 class="alert-heading">
{{ heading }}

View File

@@ -2,7 +2,7 @@
{% set body_class = "min-vh-100 d-flex align-items-center" %}
{% block body %}
{% block content %}
<div class="container max-w-lg flex align-content-center mt-5">
<img src="templates/Sparkle/assets/img/logo.png" alt="Froxlor Server Management Panel" />

View File

@@ -1,6 +1,6 @@
{% extends "Froxlor/base.html.twig" %}
{% block body %}
{% block content %}
<div class="container my-auto">
<div class="alert alert-danger fade show" role="alert">
<h4 class="alert-heading">

View File

@@ -2,7 +2,7 @@
{% set body_class = "min-vh-100 d-flex align-items-center" %}
{% block body %}
{% block content %}
<div class="container my-auto">
<div class="alert alert-warning fade show" role="alert">
<h4 class="alert-heading">

View File

@@ -1,5 +1,5 @@
<nav id="sidebar">
<ul class="nav flex-column flex-nowrap overflow-hidden w-100">
<div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 280px;">
<ul class="nav nav-pills flex-column mb-auto">
{% for idx,mitems in nav_entries %}
{% if mitems.label|upper != 'OVERVIEW' %}
{% if mitems.items is not empty %}
@@ -29,4 +29,18 @@
{% endif %}
{% endfor %}
</ul>
</nav>
<hr>
<div class="dropdown">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
<strong>d00p</strong>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>

View File

@@ -1,9 +1,31 @@
// Colors
$primary: #2a2a2a;
$light-bg: #e9ecef;
$dark-bg: #2f2f2f;
$light-font-color: #333333;
$dark-font-color: #ffffff;
$froxlor-blue-light: #62c8f4;
$froxlor-blue-dark: #1871a2;
$primary: $froxlor-blue-dark;
$secondary: $dark-bg;
$info: $froxlor-blue-dark;
$warning: #FBBF24;
$danger: #E11D48;
$alert-bg-scale: 0;
$alert-color-scale: 0;
$alert-border-width: 0;
$card-border-width: 0;
// Body
$body-bg: #f8f8f8;
$body-color: $primary;
$body-bg: $light-bg;
$body-color: $light-font-color;
// Borders
$border-radius: 0.5rem;
// Links
$links: $froxlor-blue-dark;

View File

@@ -1,72 +1,23 @@
@charset "UTF-8";
@import "~@fortawesome/fontawesome-free/css/all";
@import "variables";
@import "~bootstrap/scss/bootstrap";
@import "~@fortawesome/fontawesome-free/css/all";
.max-w-lg {
max-width: 992px !important;
.navbar, .card {
@extend .shadow-sm;
}
.card {
border: none;
@apply shadow;
.alert-icon {
padding: .5rem;
background: rgba(0, 0, 0, .15);
text-align: center;
border-radius: $border-radius;
margin-right: .75rem;
}
.card-body {
padding: 2rem;
.card .card-body {
p {
@extend .card-text;
}
}
.rounded-corner-tl-bl {
border-radius: $border-radius 0 $border-radius 0;
}
footer {
color: #888;
font-size: 0.75rem !important;
}
footer a,
footer a:active,
footer a:visited {
color: #888;
}
.dark {
/* redefine theme colors for dark theme */
$primary: #3a3a3a;
$secondary: #111111;
$success: #3a3a3a;
$dark: #000;
$card-bg: #3a3a3a;
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"danger": $danger,
"info": $indigo,
"dark": $dark,
"light": $light,
);
/* redefine theme color variables */
@each $color, $value in $theme-colors {
--#{$variable-prefix}#{$color}: #{$value};
}
/* redefine theme color rgb vars (used for bg- colors) */
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
@each $color, $value in $theme-colors-rgb {
--#{$variable-prefix}#{$color}-rgb: #{$value};
}
$body-color: #999;
$body-bg: #222;
--#{$variable-prefix}body-color: #{$body-color};
--#{$variable-prefix}body-bg: #{$body-bg};
@import "bootstrap";
}

View File

@@ -1,26 +1,37 @@
{% extends "Froxlor/base.html.twig" %}
{% set body_class = "min-vh-100 d-flex flex-column" %}
{% block navigation %}
<nav class="navbar navbar-expand navbar-light bg-light shadow-sm">
<div class="container-fluid">
<a class="navbar-brand" href="{{ linker({'section': 'index'}) }}">
{% if get_setting('panel.is_configured') == 0 and userinfo.adminsession == 1 and userinfo.change_serversettings == 1 %}
<div class="alert alert-info rounded-0 mb-0 d-flex justify-content-between align-items-baseline" role="alert">
<span>
<i class="alert-icon fa fa-info-circle"></i> {{ lng('panel.not_configured') }}
</span>
<span>
<a href="{{ linker({'section': 'configfiles', 'page': 'configfiles'}) }}" class="btn btn-light btn-sm">
Setup starten
</a>
</span>
</div>
{% endif %}
<nav class="navbar navbar-expand navbar-light bg-light py-0">
<div class="container-fluid gx-0">
<a class="navbar-brand bg-dark p-3" style="width: 280px" 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">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarTop">
<div class="collapse navbar-collapse justify-content-end px-3" id="navbarTop">
<ul class="navbar-nav align-items-center">
{% if get_setting('panel.is_configured') == 0 and userinfo.adminsession == 1 and userinfo.change_serversettings == 1 %}
<div class="alert alert-warning py-0 mx-2 my-auto" role="alert">
<a href="{{ linker({'section': 'configfiles', 'page': 'configfiles'}) }}" class="alert-link">{{ lng('panel.not_configured') }}</a>
</div>
{% endif %}
<li class="nav-item text-nowrap d-block me-2">
<a class="btn btn-primary btn-sm d-block" href="{{ linker({'section': 'index'}) }}">{{ lng('panel.dashboard') }}</a>
<a class="btn btn-secondary btn-sm d-block" href="{{ linker({'section': 'index'}) }}">{{ lng('panel.dashboard') }}</a>
</li>
<li class="nav-item dropdown me-2">
<a class="btn btn-info btn-sm d-block dropdown-toggle" href="#" id="navbarOpts" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<a class="btn btn-secondary btn-sm d-block dropdown-toggle" href="#" id="navbarOpts" role="button" data-bs-toggle="dropdown" aria-expanded="false">
{{ lng('panel.options') }}
</a>
<ul class="dropdown-menu" aria-labelledby="navbarOpts">
@@ -56,16 +67,16 @@
</ul>
</li>
<!-- if switched-user
<li class="nav-item text-nowrap d-block me-2">
<a class="btn btn-info btn-sm d-block" href="#view=suBack">
<i class="fas fa-undo"></i>
Switch back</a>
</li>
endif -->
<li class="nav-item text-nowrap d-block me-2">
<a class="btn btn-info btn-sm d-block" href="#view=suBack">
<i class="fas fa-undo"></i>
Switch back</a>
</li>
endif -->
<li class="nav-item text-nowrap d-block">
<a class="btn btn-danger btn-sm d-block" href="{{ linker({'section': 'index', 'action': 'logout'}) }}">
<a class="btn btn-link" title="{{ lng('login.logout') }}" href="{{ linker({'section': 'index', 'action': 'logout'}) }}">
<i class="fas fa-power-off"></i>
{{ lng('login.logout') }}</a>
</a>
</li>
</ul>
</div>
@@ -73,13 +84,14 @@
</nav>
{% endblock %}
{% block body %}
<div class="row">
<div class="col-2 bg-secondary text-light">
{{ include('Froxlor/sidebarmenu.html.twig') }}
</div>
<main role="main" class="col-10 px-3 py-2">
{% block body %}
<div class="d-flex flex-grow-1">
{{ include('Froxlor/sidebarmenu.html.twig') }}
<main role="main" class="flex-grow-1 p-5">
{% block content %}{% endblock %}
{{ include('Froxlor/footer.html.twig') }}
</main>
</div>
{% endblock %}