Skip to content

Commit ec9d935

Browse files
billzbillz
authored
Merge pull request #2063 from Jixabon/feature/user-interface-cleanups
Feature/user interface cleanups
2 parents ae9813b + 7630b97 commit ec9d935

27 files changed

Lines changed: 285 additions & 202 deletions

‎app/css/all.css‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ a {
2222
.sb-sidenav .sb-sidenav-menu .nav .nav-link {
2323
padding-top: 0.6rem;
2424
padding-bottom: 0.6rem;
25+
font-size: 16px;
2526
}
2627

2728
.sb-sidenav-light .sb-sidenav-menu .nav-link, .card-title, h4 {
@@ -121,6 +122,10 @@ th {
121122
font-size: 0.8rem;
122123
}
123124

125+
.page-card-header, .modal-title {
126+
font-size: 16px;
127+
}
128+
124129
.dhcp-static-leases {
125130
margin-top: 1em;
126131
margin-bottom: 1em;
@@ -298,12 +303,6 @@ button > i.fas {
298303
border-bottom-right-radius: 0.35rem;
299304
}
300305

301-
.nav-user {
302-
position: relative;
303-
bottom: 11px;
304-
right: 3px;
305-
}
306-
307306
.nav-item {
308307
font-size: 0.85rem;
309308
}

‎app/css/custom.php‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -75,12 +75,23 @@
7575
}
7676

7777
.btn-primary {
78-
color: var(--raspap-theme-color);
79-
border-color: var(--raspap-theme-color);
80-
background-color: #fff;
78+
border-color: var(--raspap-theme-color) !important;
79+
background-color: var(--raspap-theme-color) !important;
80+
}
81+
82+
.btn-primary.btn-outline {
83+
color: var(--raspap-theme-color) !important;
84+
border-color: var(--raspap-theme-color) !important;
85+
background-color: #fff !important;
8186
}
8287

83-
.btn-primary:disabled {
88+
.btn-primary:hover {
89+
color: #fff !important;
90+
border-color: var(--raspap-theme-color) !important;
91+
background-color: var(--raspap-theme-color) !important;
92+
}
93+
94+
.btn-primary.btn-outline:disabled {
8495
color: var(--raspap-theme-color) !important;
8596
border-color: var(--raspap-theme-color) !important;
8697
background-color: #fff !important;
@@ -94,13 +105,27 @@
94105
background-color: #f2f1f0;
95106
}
96107

108+
.nav-tabs-wrapper {
109+
width: 100%;
110+
overflow-x: auto;
111+
}
112+
.nav-tabs-wrapper::-webkit-scrollbar {
113+
display: none;
114+
}
115+
.nav-tabs-wrapper > .nav-tabs {
116+
flex-wrap: nowrap;
117+
min-width: 100%;
118+
width: min-content;
119+
}
120+
97121
.nav-tabs .nav-link.active,
98122
.nav-tabs .nav-link {
99123
font-size: 1.0rem;
100124
}
101125

102126
.nav-tabs a.nav-link {
103127
color: #6e707e;
128+
white-space: nowrap;
104129
}
105130

106131
a.nav-link.active {
@@ -111,19 +136,10 @@
111136
padding: 0.6rem 0.6rem 0.6rem 1.0rem;
112137
}
113138

114-
.btn-primary {
115-
background-color: #fff;
116-
}
117-
118139
.btn-warning {
119140
color: #333;
120141
}
121142

122-
.btn-primary:hover {
123-
background-color: var(--raspap-theme-color);
124-
border-color: var(--raspap-theme-color);
125-
}
126-
127143
i.fa.fa-bars {
128144
color: #d1d3e2;
129145
}

‎app/js/ajax/main.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -88,12 +88,11 @@ function loadInterfaceDHCPSelect() {
8888
$('#txtmetric').val(jsonData.Metric);
8989

9090
if (jsonData.StaticIP !== null && jsonData.StaticIP !== '' && !jsonData.FallbackEnabled) {
91-
$('#chkstatic').prop('checked', true).closest('.btn').addClass('active');
92-
$('#chkdhcp').prop('checked', false).closest('.btn').removeClass('active');
91+
$('#chkstatic').prop('checked', true).trigger('change');
92+
$('#chkdhcp').prop('checked', false).trigger('change');
9393
$('#chkfallback').prop('disabled', true);
9494
$('#dhcp-iface').removeAttr('disabled');
9595
} else {
96-
$('#chkdhcp').closest('.btn').addClass('active');
9796
$('#chkdhcp').closest('.btn').blur();
9897
}
9998
if (jsonData.FallbackEnabled || $('#chkdhcp').is(':checked')) {

‎app/js/ui/main.js‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -389,12 +389,24 @@ $(document).ready(function () {
389389
// DHCP or Static IP option group
390390
$('#chkstatic').on('change', function() {
391391
if (this.checked) {
392+
$('#chkstatic').closest('.btn').removeClass('btn-outline');
393+
$('#chkdhcp').closest('.btn').addClass('btn-outline');
392394
setStaticFieldsEnabled();
395+
} else {
396+
$('#chkstatic').closest('.btn').addClass('btn-outline');
397+
$('#chkdhcp').closest('.btn').removeClass('btn-outline');
393398
}
394399
});
395400

396401
$('#chkdhcp').on('change', function() {
397-
this.checked ? setStaticFieldsDisabled() : null;
402+
if (this.checked) {
403+
$('#chkdhcp').closest('.btn').removeClass('btn-outline');
404+
$('#chkstatic').closest('.btn').addClass('btn-outline');
405+
setStaticFieldsDisabled();
406+
} else {
407+
$('#chkdhcp').closest('.btn').addClass('btn-outline');
408+
$('#chkstatic').closest('.btn').removeClass('btn-outline');
409+
}
398410
});
399411

400412

@@ -582,15 +594,17 @@ $(window).bind("load", function() {
582594
});
583595

584596
// Sets focus on a specified tab
585-
document.addEventListener("DOMContentLoaded", function () {
586-
const params = new URLSearchParams(window.location.search);
587-
const targetTab = params.get("tab");
588-
if (targetTab) {
589-
let tabElement = document.querySelector(`[data-bs-toggle="tab"][href="#${targetTab}"]`);
590-
if (tabElement) {
591-
let tab = new bootstrap.Tab(tabElement);
592-
tab.show();
593-
}
597+
jQuery(function() {
598+
// Store hash in URL
599+
$('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
600+
var hash = $(e.target).attr('href');
601+
history.pushState(null, null, hash);
602+
});
603+
604+
// Activate tab based on URL hash
605+
var hash = window.location.hash;
606+
if (hash) {
607+
$('.nav-link[href="' + hash + '"]').tab('show');
594608
}
595609
});
596610

‎includes/dhcp.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ function DisplayDHCPConfig()
6464
}
6565
}
6666
$ap_iface = $_SESSION['ap_interface'];
67+
$initial_iface = isset($_POST['interface']) ? $_POST['interface'] : $ap_iface;
6768
$serviceStatus = $dnsmasq_state ? "up" : "down";
6869
exec('cat '. RASPI_DNSMASQ_PREFIX.'raspap.conf', $return);
6970
$log_dhcp = (preg_grep('/log-dhcp/', $return));
@@ -87,7 +88,7 @@ function DisplayDHCPConfig()
8788
"status",
8889
"serviceStatus",
8990
"dnsmasq_state",
90-
"ap_iface",
91+
"initial_iface",
9192
"conf",
9293
"hosts",
9394
"upstreamServers",

‎includes/footer.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<?php $_SESSION['lastActivity'] = time(); ?>
22

3-
<div class="d-flex align-items-center justify-content-between small">
3+
<div class="d-flex flex-column flex-sm-row align-items-center justify-content-between small">
44
<div class="text-muted">
55
<span class="pe-2"><a href="/about">v<?php echo RASPI_VERSION; ?></a></span> |
66
<span class="ps-2"><?php echo sprintf(_('Created by the <a href="%s" target="_blank" rel="noopener">%s</a>'), 'https://github.com/RaspAP', _('RaspAP Team')); ?></span>

‎includes/navbar.php‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
1-
<nav class="sb-topnav navbar navbar-expand navbar-light bg-light">
1+
<nav class="sb-topnav navbar navbar-expand navbar-light bg-light">
22
<!-- Navbar Brand-->
3-
<a class="sidebar-brand-text navbar-brand ps-5" href="wlan0_info">RaspAP</a>
3+
<a class="sidebar-brand-text navbar-brand ps-3" href="wlan0_info">RaspAP</a>
44
<!-- Sidebar Toggle-->
5-
<button class="btn btn-link btn-sm order-1 order-lg-0 me-auto p-3 bd-highlight" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>
5+
<button class="btn btn-link btn-lg order-1 order-lg-0 me-lg-auto py-2 px-3 bd-highlight" id="sidebarToggle" href="#!">
6+
<i class="fas fa-bars"></i>
7+
</button>
68
<!-- Navbar-->
7-
<ul class="navbar-nav ms-auto ms-md-0 me-2 me-lg-4">
9+
<ul class="navbar-nav align-items-center gap-3 ms-auto ms-lg-0 me-2 me-lg-4">
810
<!-- Display mode -->
9-
<div class="form-check form-switch p-4 mt-1">
10-
<input type="checkbox" class="form-check-input" id="night-mode" <?php echo getNightmode() ? 'checked' : null ; ?> >
11-
<label class="form-check-label" for="night-mode"><i class="far fa-moon mr-1 text-muted"></i></label>
12-
</div>
11+
<li>
12+
<div class="form-check form-switch pl-6 mb-0" style="min-height: initial;">
13+
<input type="checkbox" class="form-check-input" id="night-mode" <?php echo getNightmode() ? 'checked' : null ; ?> >
14+
<label class="form-check-label" for="night-mode"><i class="far fa-moon mr-1 text-muted"></i></label>
15+
</div>
16+
</li>
1317
<!-- Auth user -->
14-
<li class="nav-item mt-1">
15-
<a class="nav-link" href="auth_conf">
16-
<span class="mr-2 small nav-user"><?php echo htmlspecialchars($_SESSION['user_id'] ?? '', ENT_QUOTES); ?></span>
17-
<i class="fas fa-user-circle text-muted mt-2 fa-3x"></i>
18+
<li>
19+
<a class="d-flex flex-nowrap align-items-center gap-1" href="auth_conf">
20+
<span class="text-muted small"><?php echo htmlspecialchars($_SESSION['user_id'] ?? '', ENT_QUOTES); ?></span>
21+
<i class="fas fa-user-circle text-muted fa-3x"></i>
1822
</a>
1923
</li>
2024
</ul>

‎templates/about.php‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<div class="row">
77
<div class="col-lg-12">
88
<div class="card">
9-
<div class="card-header">
9+
<div class="card-header page-card-header">
1010
<div class="row">
1111
<div class="col">
1212
<i class="fas fa-info-circle me-2"></i><?php echo _("About RaspAP"); ?>
@@ -16,11 +16,13 @@
1616
<div class="card-body">
1717

1818
<!-- Nav tabs -->
19-
<ul class="nav nav-tabs">
20-
<li class="nav-item"><a class="nav-link active" href="#aboutgeneral" data-bs-toggle="tab"><?php echo _("About"); ?></a></li>
21-
<li class="nav-item"><a class="nav-link" href="#aboutsponsors" data-bs-toggle="tab"><?php echo _("Insiders"); ?></a></li>
22-
<li class="nav-item"><a class="nav-link" href="#aboutcontrib" data-bs-toggle="tab"><?php echo _("Contributing"); ?></a></li>
23-
</ul>
19+
<div class="nav-tabs-wrapper">
20+
<ul class="nav nav-tabs">
21+
<li class="nav-item"><a class="nav-link active" href="#aboutgeneral" data-bs-toggle="tab"><?php echo _("About"); ?></a></li>
22+
<li class="nav-item"><a class="nav-link" href="#aboutsponsors" data-bs-toggle="tab"><?php echo _("Insiders"); ?></a></li>
23+
<li class="nav-item"><a class="nav-link" href="#aboutcontrib" data-bs-toggle="tab"><?php echo _("Contributing"); ?></a></li>
24+
</ul>
25+
</div>
2426
<!-- /.nav-tabs -->
2527

2628
<!-- Tab panes -->

‎templates/adblock.php‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
<div class="row">
1313
<div class="col-lg-12">
1414
<div class="card">
15-
<div class="card-header">
16-
<div class="row">
15+
<div class="card-header page-card-header">
16+
<div class="row align-items-center">
1717
<div class="col">
1818
<i class="far fa-hand-paper me-2"></i><?php echo _("Ad Blocking"); ?>
1919
</div>
@@ -30,11 +30,13 @@
3030
<form role="form" action="adblock_conf" enctype="multipart/form-data" method="POST">
3131
<?php echo \RaspAP\Tokens\CSRF::hiddenField();?>
3232
<!-- Nav tabs -->
33-
<ul class="nav nav-tabs">
34-
<li class="nav-item"><a class="nav-link active" id="blocklisttab" href="#adblocklistsettings" data-bs-toggle="tab"><?php echo _("Blocklist settings"); ?></a></li>
35-
<li class="nav-item"><a class="nav-link" id="customtab" href="#adblockcustom" data-bs-toggle="tab"><?php echo _("Custom blocklist"); ?></a></li>
36-
<li class="nav-item"><a class="nav-link" id="logoutputtab" href="#adblocklogfileoutput" data-bs-toggle="tab"><?php echo _("Logging"); ?></a></li>
37-
</ul>
33+
<div class="nav-tabs-wrapper">
34+
<ul class="nav nav-tabs">
35+
<li class="nav-item"><a class="nav-link active" id="blocklisttab" href="#adblocklistsettings" data-bs-toggle="tab"><?php echo _("Blocklist settings"); ?></a></li>
36+
<li class="nav-item"><a class="nav-link" id="customtab" href="#adblockcustom" data-bs-toggle="tab"><?php echo _("Custom blocklist"); ?></a></li>
37+
<li class="nav-item"><a class="nav-link" id="logoutputtab" href="#adblocklogfileoutput" data-bs-toggle="tab"><?php echo _("Logging"); ?></a></li>
38+
</ul>
39+
</div>
3840

3941
<!-- Tab panes -->
4042
<div class="tab-content">
@@ -44,7 +46,9 @@
4446
<?php echo renderTemplate("adblock/logging", $__template_data) ?>
4547
</div><!-- /.tab-content -->
4648

47-
<?php echo $buttons ?>
49+
<div class="d-flex flex-wrap gap-2">
50+
<?php echo $buttons ?>
51+
</div>
4852
</form>
4953
</div><!-- /.card-body -->
5054
<div class="card-footer"><?php echo _("Information provided by adblock"); ?></div>

‎templates/admin.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<div class="row">
99
<div class="col-lg-12">
1010
<div class="card">
11-
<div class="card-header">
11+
<div class="card-header page-card-header">
1212
<div class="row">
1313
<div class="col">
1414
<i class="fas fa-user-lock me-2"></i><?php echo _("Authentication"); ?>

0 commit comments

Comments
 (0)