Merge pull request #266 from Yohn/main

smooth scrolling and config tabs
This commit is contained in:
Julian Prieber 2022-12-13 15:24:06 +01:00 committed by GitHub
commit ab84a0667d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 1053 additions and 1058 deletions

View File

@ -3,242 +3,233 @@
@section('content') @section('content')
@if($_SERVER['QUERY_STRING'] == '') @if($_SERVER['QUERY_STRING'] == '')
<style>.nav-tabs{border-bottom:1px solid #ddd}.nav-tabs > li.active > a,.nav-tabs > li.active > a:hover,.nav-tabs > li.active > a:focus{color:#555;cursor:default;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent}.nav>li>a{position:relative;display:block;padding:10px 15px!important}.nav-tabs > li > a{margin-right:2px;line-height:1.428571429;border:1px solid transparent;border-radius:4px 4px 0 0}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{color:#555;cursor:default;background-color:#fff;border:1px solid #ddd!important;border-bottom-color:transparent}.nav-tabs > li > a:hover{border-color:#eee #eee #ddd}.nav-tabs > li > a:focus{outline:none}.tab-content > .tab-pane{display:none}.tab-content > .active{display:block}ul{padding:0}ul.nav{list-style:none;margin:0;padding:0}ul.nav > li{float:left}ul.nav > li > a{display:block;padding:3px 10px;text-decoration:none}ul.nav > li.active > a,ul.nav > li > a:hover{background-color:#eee}.tab-content{border-top:none;padding:10px}.tab-content > .tab-pane{padding:5px}</style>
<div><h2>Tabs</h2></div> <div><h2>Tabs</h2></div>
<div id="exTab2" class=""> <div id="exTab2" class="">
<ul id="myTab" class="nav nav-tabs"> <ul id="myTab" class="nav nav-tabs">
<li class="active"> <li class="nav-item"><a class="nav-link active" href="#home1" data-toggle="tab" id="home-tab">Config</a></li>
<a href="#1" data-toggle="tab">Config</a> <li class="nav-item"><a class="nav-link" href="#advanced2" data-toggle="tab" id="advanced-tab">Advanced Config</a></li>
</li> <li class="nav-item"><a class="nav-link" href="#backup3" data-toggle="tab" id="backup-tab">Take Backup</a></li>
<li><a href="#2" data-toggle="tab">Advanced Config</a> <li class="nav-item"><a class="nav-link" href="#backups4" data-toggle="tab" id="backups4-tab">All Backups</a></li>
</li> <li class="nav-item"><a class="nav-link" href="#diagnose5" data-toggle="tab" id="diagnose5-tab">Diagnosis</a></li>
<li><a href="#3" data-toggle="tab">Take Backup</a> </ul>
</li>
<li><a href="#4" data-toggle="tab">All Backups</a>
</li>
<li><a href="#5" data-toggle="tab">Diagnosis</a>
</li>
</ul>
<div class="tab-content "> <div class="tab-content ">
<div class="tab-pane active" id="1"> <div class="tab-pane fade show active" role="tabpanel" aria-labelledby="home-tab" id="home1">
<section class="shadow text-gray-400"> <section class="shadow text-gray-400">
<h2 class="mb-4 card-header"><i class="bi bi-link-45deg"> Config</i></h2> <h2 class="mb-4 card-header"><i class="bi bi-link-45deg"> Config</i></h2>
<div class="card-body p-0 p-md-3"> <div class="card-body p-0 p-md-3">
<style> <style>
.option{ .option{
background-color: #343a40; background-color: #343a40;
color: rgba(255, 255, 255, 0.8) !important; color: rgba(255, 255, 255, 0.8) !important;
min-height: 100px; min-height: 100px;
overflow: hidden; overflow: hidden;
padding: 20px; padding: 20px;
border-radius: 5px; border-radius: 5px;
-webkit-transition-duration: 0.3s; -webkit-transition-duration: 0.3s;
transition-duration: 0.3s; transition-duration: 0.3s;
} }
.option h3{ .option h3{
color:white!important; color:white!important;
} }
.option:hover, .option:focus, .option:active { .option:hover, .option:focus, .option:active {
-webkit-transform: scale(1.005); -webkit-transform: scale(1.005);
transform: scale(1.005); transform: scale(1.005);
box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
} }
.opt-img{ .opt-img{
font-size: 4rem; font-size: 4rem;
vertical-align: middle; vertical-align: middle;
display: flex; display: flex;
padding-right: 20px; padding-right: 20px;
padding-left: 10px; padding-left: 10px;
color: white; color: white;
} }
.opt-txt{ .opt-txt{
bottom: 10px; bottom: 10px;
position: relative; position: relative;
} }
.legend{ .legend{
background-color: #343a40; background-color: #343a40;
color: rgba(255, 255, 255, 0.8) !important; color: rgba(255, 255, 255, 0.8) !important;
min-height: 65px; min-height: 65px;
overflow: hidden; overflow: hidden;
padding: 10px 10px; padding: 10px 10px;
padding-left: 30px; padding-left: 30px;
padding-right: 30px; padding-right: 30px;
border-radius: 5px; border-radius: 5px;
-webkit-transition-duration: 0.3s; -webkit-transition-duration: 0.3s;
transition-duration: 0.3s; transition-duration: 0.3s;
} }
.legend h3{ .legend h3{
color:white!important; color:white!important;
} }
.legend:hover, .legend:focus, .legend:active { .legend:hover, .legend:focus, .legend:active {
box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
} }
.legendl { .legendl {
padding: 10px; padding: 10px;
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
min-width: 120px; min-width: 120px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: #31363b; background-color: #31363b;
border-radius: 5px; border-radius: 5px;
position: relative; position: relative;
display: flex; display: flex;
-webkit-transition-duration: 0.3s; -webkit-transition-duration: 0.3s;
transition-duration: 0.3s; transition-duration: 0.3s;
color: white; color: white;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
} }
.legendl:hover, .legendl:focus, .legendl:active { .legendl:hover, .legendl:focus, .legendl:active {
-webkit-transform: scale(1.1); -webkit-transform: scale(1.1);
transform: scale(1.1); transform: scale(1.1);
} }
</style> #button-top {
<style> display: inline-block;
#button-top { background-color: #275EFE;
display: inline-block; width: 50px;
background-color: #275EFE; height: 50px;
width: 50px; text-align: center;
height: 50px; border-radius: 5px;
text-align: center; position: fixed;
border-radius: 5px; bottom: 30px;
position: fixed; right: 30px;
bottom: 30px; transition: background-color .3s,
right: 30px; opacity .5s, visibility .5s;
transition: background-color .3s, opacity: 0;
opacity .5s, visibility .5s; visibility: hidden;
opacity: 0; z-index: 1000;
visibility: hidden; }
z-index: 1000; #button-top::after {
} content: "\f077";
#button-top::after { font-family: FontAwesome;
content: "\f077"; font-weight: normal;
font-family: FontAwesome; font-style: normal;
font-weight: normal; font-size: 2em;
font-style: normal; line-height: 50px;
font-size: 2em; color: #fff;
line-height: 50px; }
color: #fff; #button-top:hover {
} cursor: pointer;
#button-top:hover { -webkit-filter: brightness(90%);
cursor: pointer; }
-webkit-filter: brightness(90%); #button-top:active {
} background-color: #555;
#button-top:active { }
background-color: #555; #button-top.show {
} opacity: 1;
#button-top.show { visibility: visible;
opacity: 1; }
visibility: visible;
}
/* Styles for the content section */ /* Styles for the content section */
.content { .content {
width: 77%; width: 77%;
margin: 50px auto; margin: 50px auto;
font-family: 'Merriweather', serif; font-family: 'Merriweather', serif;
font-size: 17px; font-size: 17px;
color: #6c767a; color: #6c767a;
line-height: 1.9; line-height: 1.9;
} }
@media (min-width: 500px) { @media (min-width: 500px) {
.content { .content {
width: 43%; width: 43%;
} }
#button-top { #button-top {
margin: 30px; margin: 30px;
} }
} }
.content h1 { .content h1 {
margin-bottom: -10px; margin-bottom: -10px;
color: #03a9f4; color: #03a9f4;
line-height: 1.5; line-height: 1.5;
} }
.content h3 { .content h3 {
font-style: italic; font-style: italic;
color: #96a2a7; color: #96a2a7;
} }
</style> </style>
<div class="option"><a href="?alternative-config"> <div class="option"><a href="?alternative-config">
<div class="row"><i class="bi bi-pencil-square opt-img"></i><div> <div class="row"><i class="bi bi-pencil-square opt-img"></i><div>
<h3 class="">Alternative Config Editor</h3><p class="text-muted opt-txt">Use the Alternative Config Editor to edit the config directly</p> <h3 class="">Alternative Config Editor</h3><p class="text-muted opt-txt">Use the Alternative Config Editor to edit the config directly</p>
</div></div></a></div><br> </div></div></a></div><br>
<div class="option"><a href="{{ url('env-editor') }}"> <div class="option"><a href="{{ url('env-editor') }}">
<div class="row"><i class="bi bi-gear-fill opt-img"></i><div> <div class="row"><i class="bi bi-gear-fill opt-img"></i><div>
<h3 class="">Config Manager</h3><p class="text-muted opt-txt">Manage, download, upload, backup and restore your config</p> <h3 class="">Config Manager</h3><p class="text-muted opt-txt">Manage, download, upload, backup and restore your config</p>
</div></div></a></div><br> </div></div></a></div><br>
<div class="option"><a href="{{ url('panel/phpinfo') }}"> <div class="option"><a href="{{ url('panel/phpinfo') }}">
<div class="row"><i class="bi bi-filetype-php opt-img"></i><div> <div class="row"><i class="bi bi-filetype-php opt-img"></i><div>
<h3 class="">PHP info</h3><p class="text-muted opt-txt">Display debuggin infromation about your PHP setup</p> <h3 class="">PHP info</h3><p class="text-muted opt-txt">Display debuggin infromation about your PHP setup</p>
</div></div></a></div><br><br> </div></div></a></div><br><br>
<h3>Jump directly to:</h3> <h3>Jump directly to:</h3>
<div class="legend"> <div class="legend">
<div class="row"> <div class="row">
<a href="#Application"><div class="legendl">Application</div></a> <a href="#Application"><div class="legendl">Application</div></a>
<a href="#Panel-settings"><div class="legendl">Panel settings</div></a> <a href="#Panel-settings"><div class="legendl">Panel settings</div></a>
<a href="#Security"><div class="legendl">Security</div></a> <a href="#Security"><div class="legendl">Security</div></a>
<a href="#Advanced"><div class="legendl">Advanced</div></a> <a href="#Advanced"><div class="legendl">Advanced</div></a>
<a href="#SMTP"><div class="legendl">SMTP</div></a> <a href="#SMTP"><div class="legendl">SMTP</div></a>
<a href="#Debug"><div class="legendl">Debug</div></a> <a href="#Debug"><div class="legendl">Debug</div></a>
<div> <div>
</div></div></div> </div></div></div>
@include('components.config.config') @include('components.config.config')
</div> </div>
</section> </section>
</div> </div>
<div class="tab-pane" id="2"> <div class="tab-pane" role="tabpanel" aria-labelledby="advanced-tab" id="advanced2">
<section class="shadow text-gray-400"> <section class="shadow text-gray-400">
<h2 class="mb-4 card-header"><i class="bi bi-pencil-square"> Advanced config</i></h2> <h2 class="mb-4 card-header"><i class="bi bi-pencil-square"> Advanced config</i></h2>
<div class="card-body p-0 p-md-3"> <div class="card-body p-0 p-md-3">
@include('components.config.advanced-config') @include('components.config.advanced-config')
</div> </div>
</section> </section>
</div> </div>
<div class="tab-pane" id="3"> <div class="tab-pane" role="tabpanel" aria-labelledby="backup-tab" id="backup3">
<section class="shadow text-gray-400"> <section class="shadow text-gray-400">
<h2 class="mb-4 card-header"><i class="bi bi-link-45deg"> Backup</i></h2> <h2 class="mb-4 card-header"><i class="bi bi-link-45deg"> Backup</i></h2>
<div class="card-body p-0 p-md-3"> <div class="card-body p-0 p-md-3">
@include('components.config.backup') @include('components.config.backup')
</div> </div>
</section> </section>
</div> </div>
<div class="tab-pane" id="4"> <div class="tab-pane" role="tabpanel" aria-labelledby="backups4-tab" id="backups4">
<section class="shadow text-gray-400"> <section class="shadow text-gray-400">
<h2 class="mb-4 card-header"><i class="bi bi-link-45deg"> Backups</i></h2> <h2 class="mb-4 card-header"><i class="bi bi-link-45deg"> Backups</i></h2>
<div class="card-body p-0 p-md-3"> <div class="card-body p-0 p-md-3">
@include('components.config.backups') @include('components.config.backups')
</div> </div>
</section> </section>
</div> </div>
<div class="tab-pane" id="5"> <div class="tab-pane" role="tabpanel" aria-labelledby="diagnose5-tab" id="diagnose5">
<section class="shadow text-gray-400"> <section class="shadow text-gray-400">
<h2 class="mb-4 card-header"><i class="bi bi-braces-asterisk"> Debugging information</i> <span class="text-muted" style="font-size:60%;vertical-align: middle;">v{{file_get_contents(base_path("version.json"))}}</span></h2> <h2 class="mb-4 card-header"><i class="bi bi-braces-asterisk"> Debugging information</i> <span class="text-muted" style="font-size:60%;vertical-align: middle;">v{{file_get_contents(base_path("version.json"))}}</span></h2>
<div class="card-body p-0 p-md-3"> <div class="card-body p-0 p-md-3">
@include('components.config.diagnose') @include('components.config.diagnose')
</div> </div>
</section> </section>
</div> </div>
@ -257,12 +248,12 @@
<script src="{{ asset('studio/external-dependencies/jquery-1.11.1.min.js') }}"></script> <script src="{{ asset('studio/external-dependencies/jquery-1.11.1.min.js') }}"></script>
<script src="{{ asset('studio/external-dependencies/bootstrap.min.js') }}"></script> <script src="{{ asset('studio/external-dependencies/bootstrap.min.js') }}"></script>
<script> <script>
$('#myTab a').click(function(e) { //$('#myTab a').click(function(e) {
e.preventDefault(); // e.preventDefault();
$(this).tab('show'); // $(this).tab('show');
}); //});
// store the currently selected tab in the hash value // store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) { $("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
var id = $(e.target).attr("href").substr(1); var id = $(e.target).attr("href").substr(1);
window.location.hash = id; window.location.hash = id;
@ -270,9 +261,9 @@ $("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
// on load of the page: switch to the currently selected tab // on load of the page: switch to the currently selected tab
var hash = window.location.hash; var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show'); $('#myTab a[href="' + hash + '"]').tab('show');
</script>
<script>
var btn = $('#button-top'); var btn = $('#button-top');
$(window).scroll(function() { $(window).scroll(function() {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,3 +1,4 @@
html {scroll-behavior: smooth;}
/*! /*!
* Bootstrap v4.3.1 (https://getbootstrap.com/) * Bootstrap v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors * Copyright 2011-2019 The Bootstrap Authors
@ -197,9 +198,9 @@ button:focus {
outline: 5px auto -webkit-focus-ring-color; } outline: 5px auto -webkit-focus-ring-color; }
.buttonLogout{ .buttonLogout{
border:none; border:none;
background:none; background:none;
color: #e8e7e7; color: #e8e7e7;
margin-top: 9px; margin-top: 9px;
padding: 0; padding: 0;
font: inherit; font: inherit;
@ -3393,16 +3394,18 @@ input[type="button"].btn-block {
border-top-left-radius: 0.25rem; border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem; } border-top-right-radius: 0.25rem; }
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
border-color: #e9ecef #e9ecef rgba(0,0,0,.15); } color: #f8b739;
background-color: #212529;
border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) transparent;}
.nav-tabs .nav-link.disabled { .nav-tabs .nav-link.disabled {
color: #6c757d; color: #6c757d;
background-color: transparent; background-color: transparent;
border-color: transparent; } border-color: transparent; }
.nav-tabs .nav-link.active, .nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link { .nav-tabs .nav-item.show .nav-link {
color: #495057; color: #f8b739;
background-color: #fff; background-color: #484848;
border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) #fff; } border-color: rgba(106, 106, 106, 0.15) rgba(0,0,0,.15) #133;}
.nav-tabs .dropdown-menu { .nav-tabs .dropdown-menu {
margin-top: -1px; margin-top: -1px;
border-top-left-radius: 0; border-top-left-radius: 0;
@ -3435,7 +3438,6 @@ input[type="button"].btn-block {
.tab-content > .active { .tab-content > .active {
display: block; } display: block; }
.navbar { .navbar {
position: relative; position: relative;
display: -webkit-box; display: -webkit-box;

File diff suppressed because it is too large Load Diff