Skip to content
This repository was archived by the owner on Aug 27, 2022. It is now read-only.

Commit 9c2dfa1

Browse files
jacques42andi34
jacques42
authored and
andi34
committed
admin-panel: fixed logout button and top nav bar
1 parent 29bbe95 commit 9c2dfa1

File tree

3 files changed

+89
-63
lines changed

3 files changed

+89
-63
lines changed

‎admin/index.php‎

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,6 @@
2525
</head>
2626
<body>
2727
<!-- NavBar content -->
28-
<div>
29-
<div class="adminsidebar" id="adminsidebar">
3028
<?php
3129
// Login / Authentication check
3230
if( !$config['login_enabled'] || (isset($_SESSION['auth']) && $_SESSION['auth'] === true) || !$config['protect_admin'] )
@@ -80,22 +78,36 @@ function isElementHidden($element_class, $setting)
8078
}
8179

8280

83-
/*******************
84-
* Create nav panel *
85-
*******************/
86-
$indent = 3;
87-
html_src_indent($indent++);
88-
89-
echo '<ul class="adminnavlist" id="navlist">';
81+
$indent = 2;
9082

83+
/********************
84+
* Create topnav bar *
85+
*********************/
86+
html_src_indent($indent++);
87+
echo '<div class="admintopnavbar">';
88+
html_src_indent($indent);
89+
echo '<i class="fa fa-long-arrow-left fa-3x" id="admintopnavbarback"></i>';
9190
if(isset($_SESSION['auth']) && $_SESSION['auth'] === true)
92-
{
93-
html_src_indent($indent);
94-
echo '<li><a class="adminnavlistelement" href="#" id="nav-ref-logout"> <div><i class="fa fa-sign-out fa-lg"></i><label id="adminnavlisttextlogout"><span data-i18n="logout"></span></div></a></li>';
95-
}
91+
{
92+
html_src_indent($indent);
93+
echo ' <i class="fa fa-sign-out fa-3x" id="admintopnavbarlogout"></i>';
94+
}
95+
html_src_indent($indent);
96+
echo ' <i class="fa fa-bars fa-3x" id="admintopnavbarmenutoggle"></i>';
97+
html_src_indent(--$indent);
98+
echo '</div>';
9699

100+
/*********************
101+
* Create sidenav bar *
102+
*********************/
103+
html_src_indent($indent++);
104+
echo '<div>';
97105
html_src_indent($indent);
98-
echo '<li><a class="adminnavlistelement" href="#" id="nav-ref-main"><div><i class="fa fa-long-arrow-left fa-2x"></i><label id="adminnavlisttextback"><span data-i18n="adminpanel_back"></span></label></div></a></li>';
106+
echo '<div class="adminsidebar" id="adminsidebar">';
107+
html_src_indent(++$indent);
108+
echo '<ul class="adminnavlist" id="navlist">';
109+
110+
html_src_indent(++$indent);
99111

100112

101113
foreach($configsetup as $section => $fields)
@@ -114,13 +126,12 @@ function isElementHidden($element_class, $setting)
114126
html_src_indent(--$indent);
115127
echo '</ul>';
116128
?>
117-
</div>
118-
119-
<!-- Settings page content -->
120-
<form autocomplete="off">
121-
<div class="admintopnavbar"><i class="fa fa-long-arrow-left fa-3x" id="admintopnavbarback"></i><i class="fa fa-bars fa-3x" id="admintopnavbarmenutoggle"> </i></div>
122-
<div class="admincontent" id="admincontentpage">
123-
<button class="save-btn" id="save-btn">
129+
</div>
130+
<!-- Settings page content -->
131+
<form autocomplete="off">
132+
133+
<div class="admincontent" id="admincontentpage">
134+
<button class="save-btn" id="save-btn">
124135
<span class="save"><span data-i18n="save"></span></span>
125136
<span class="saving"><i class="fa fa-circle-o-notch fa-spin fa-fw"></i><span data-i18n="saving"></span></span>
126137
<span class="success"><i class="fa fa-check"></i><span data-i18n="success"></span></span>

‎src/js/admin.js‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,6 @@ $(function () {
114114

115115
// Range slider - dynamically update value when being moved
116116
$(document).on('input', '.configslider', function () {
117-
// console.log('slider moves - query #' + this.name + '-value');
118117
document.querySelector(
119118
'#' + this.name.replace('[', '\\[').replace(']', '\\]') + '-value span'
120119
).innerHTML = this.value;
@@ -126,7 +125,6 @@ $(function () {
126125
*/
127126
$('.setting_section').waypoint({
128127
handler: function (direction) {
129-
//console.log('waypoint triggered ' + this.element.id + ' - scroll direction is ' + direction);
130128
$('.adminnavlistelement').removeClass('active');
131129
$('#nav-' + this.element.id).addClass('active');
132130

@@ -139,7 +137,6 @@ $(function () {
139137

140138
if (direction == 'down') {
141139
newPos = topPos + elemTarget.offsetHeight - window.innerHeight;
142-
//console.log('Nav bar element nav-' + this.element.id + ' out of viewport - winInner:' + window.innerHeight + ' Element height:' + elemTarget.offsetHeight + ' new scroll pos:' + newPos);
143140
} else {
144141
newPos = topPos;
145142
}
@@ -152,27 +149,12 @@ $(function () {
152149
$('.adminnavlistelement').click(function (e) {
153150
e.preventDefault();
154151

155-
// console.log('nav clicked ' + this.id);
156-
157152
// on small screens, hide navbar after click
158-
if ($('div.admintopnavbar').is(':visible')) {
153+
if (window.matchMedia('screen and (max-width: 700px)').matches) {
159154
$('div.adminsidebar').toggle();
160155
}
161156

162-
if (this.id == 'nav-ref-main') {
163-
location.assign('../');
164-
165-
return false;
166-
}
167-
168-
if (this.id == 'nav-ref-logout') {
169-
location.assign('../login/logout.php');
170-
171-
return false;
172-
}
173-
174157
const target = $(this).attr('href');
175-
//console.log('target is ' + target.substring(1));
176158

177159
// scroll content page if we need to
178160
const contentpage = document.getElementById('admincontentpage');
@@ -181,23 +163,21 @@ $(function () {
181163
const totalPageHeight = contentpage.scrollHeight;
182164
const scrollPoint = window.scrollY + window.innerHeight;
183165

184-
//console.log('scrollY: ' + window.scrollY + '::: target scroll element: ' + elemTarget.scrollTop);
185-
186166
if (isInViewport(elemTarget) && scrollPoint >= totalPageHeight) {
187167
$('.adminnavlistelement').removeClass('active');
188168
$('#' + this.id).addClass('active');
189169

190170
return false;
191171
}
192172

193-
// console.log("target element is currently not visible - need to scroll");
194173
$('html, body').animate(
195174
{
196-
scrollTop: $(target).offset().top
175+
// sroll element to 5em below top - and have to disable eslint rule because prettier removes unnecessary but clarifying parenthesis
176+
// eslint-disable-next-line no-mixed-operators
177+
scrollTop: $(target).offset().top - 5 * parseInt(config.ui.font_size, 10)
197178
},
198179
1000,
199180
() => {
200-
//console.log('callback triggered ' + this.id);
201181
$('.adminnavlistelement').removeClass('active');
202182
$('#' + this.id).addClass('active');
203183

@@ -208,12 +188,11 @@ $(function () {
208188
if (!isInViewport(eT)) {
209189
const viewportOffset = elemTarget.getBoundingClientRect();
210190
let newPos = 0;
211-
//console.log('viewportoffset.top: ' + viewportOffset.top)
191+
212192
if (viewportOffset.top < 0) {
213193
newPos = eT.offsetTop;
214194
} else {
215195
newPos = window.innerHeight - eT.offsetHeight;
216-
//console.log('Nav bar element ' + this.id + ' out of viewport - winInner:' + window.innerHeight + ' Element height:' + eT.offsetHeight + ' new scroll pos:' + newPos);
217196
}
218197
cp.scrollTop = newPos;
219198
}
@@ -241,11 +220,33 @@ $(function () {
241220

242221
// menu toggle button for topnavbar (small screen sizes)
243222
$('#admintopnavbarmenutoggle').on('click', function () {
244-
$('div.adminsidebar').toggle();
223+
$('.adminsidebar').toggle();
224+
if (window.matchMedia('screen and (min-width: 701px)').matches) {
225+
if ($('#adminsidebar').is(':visible')) {
226+
$('#admincontentpage').css('margin-left', '200px');
227+
} else {
228+
$('#admincontentpage').css('margin-left', '0px');
229+
}
230+
}
245231
});
246232

247233
// back button for topnavbar (small screen sizes)
248234
$('#admintopnavbarback').on('click', function () {
249235
location.assign('../');
250236
});
237+
238+
// logout button for topnavbar (small screen sizes)
239+
$('#admintopnavbarlogout').on('click', function () {
240+
location.assign('../login/logout.php');
241+
});
242+
243+
// check padding of settings content on window resize
244+
window.addEventListener('resize', onWindowResize);
245+
function onWindowResize() {
246+
if (window.matchMedia('screen and (max-width: 700px)').matches) {
247+
$('#admincontentpage').css('margin-left', '0px');
248+
} else if ($('#adminsidebar').is(':visible')) {
249+
$('#admincontentpage').css('margin-left', '200px');
250+
}
251+
}
251252
});

‎src/sass/admin.scss‎

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,18 @@ body {
2222
* side nav bar
2323
***********************/
2424
div.admincontent {
25-
margin-left: 200px;
26-
padding: 1px 16px;
2725
overflow: auto;
2826
height: 100%;
27+
padding: 5em 1em;
28+
}
29+
30+
#admincontentpage {
31+
margin-left: 200px;
2932
}
3033

3134
.adminsidebar {
3235
margin: 0;
33-
padding: 0;
36+
padding: 5em 1em;
3437
width: 200px;
3538
background: $panelColor;
3639
color: $fontColor;
@@ -42,7 +45,6 @@ div.admincontent {
4245
}
4346

4447
.admintopnavbar {
45-
display: none;
4648
height: 4em;
4749
width: 100%;
4850
position: fixed;
@@ -110,7 +112,7 @@ div.setting_section {
110112
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7);
111113
display: block;
112114
padding: 5px 5px;
113-
margin: 25px;
115+
margin: 0 25px 25px 25px;
114116
color: $fontColor;
115117
background-color: $panelColor;
116118
}
@@ -163,6 +165,9 @@ div.setting_element {
163165
display: block;
164166
}
165167

168+
/***************************
169+
* Screen size @media queries
170+
****************************/
166171
@media screen and (max-width: 1400px) {
167172
div.setting_element {
168173
float: left;
@@ -177,32 +182,41 @@ div.setting_element {
177182
}
178183
}
179184

185+
@media screen and (min-width: 701px) {
186+
.adminsidebar {
187+
display: block;
188+
}
189+
}
180190
/* On screens that are less than 700px wide, make the sidebar hidden */
181191
@media screen and (max-width: 700px) {
182-
div.adminsidebar {
192+
.adminsidebar {
183193
display: none;
184194
padding-top: 5em;
185195
}
186196

187-
.admintopnavbar {
188-
display: block;
197+
#adminsidebar {
198+
display: none;
199+
padding-top: 5em;
189200
}
190201

191-
div.admincontent {
202+
#admincontentpage {
192203
margin-left: 0px;
193-
padding-top: 5em;
194204
}
195205

196-
div.setting_section {
197-
margin: 0 0 0 0;
206+
div.admincontent {
207+
padding-top: 5em;
208+
width: 100%;
198209
}
199210

200-
#nav-ref-main {
201-
display: none;
211+
div.setting_section {
212+
margin: 0 0 25px 0;
202213
}
203214
}
204215

205-
/* Manual as tooltip for setting element */
216+
/*************************
217+
* Show manual as tooltip
218+
* for setting elements
219+
*************************/
206220

207221
.tooltip {
208222
position: relative;

0 commit comments

Comments
 (0)
⚡