djpbessems/lucidAuth
1
0
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

Refactored template; make main content scrollable without overflow

Browse Source 
Switched to Flexbox CSS based layout
Retargeted HTML-elements for theming
This commit is contained in:
Danny Bessems 2019-03-05 11:14:17 +01:00
parent 1548cd4bb6
commit a049bdbd24
7 changed files with 181 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
include/lucidAuth.template.php
View File

@ -33,6 +33,47 @@ $pageLayout['full'] = <<<'FULL'
</html> </html>
FULL; FULL;
$pageLayout['full2'] = <<<'FULL2'
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<title>lucidAuth</title>
<meta name="application-name" content="lucidAuth" />
<meta name="theme-color" content="#003399" />
<link href="misc/style.css" rel="stylesheet" />
<link href="misc/style.panes.css" rel="stylesheet" />
<link href="misc/style.button.css" rel="stylesheet" />
<link href="misc/style.theme.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="misc/script.translation.js"></script>
<script src="misc/script.index.js"></script>
</head>
<body>
<div class="wrapper">
<section id="theme" class="content">
<div class="columns">
<main class="main">
<header class="header">
<div class="logo">
<div class="left"><div class="middle">lucidAuth</div></div><div class="right"></div>
<div class="sub"><em>Respect</em> the unexpected; mitigate your risks</div>
</div>
%1$s
</header>
<section>
%2$s
</section>
</main>
<aside class="sidebar-first"></aside>
<aside class="sidebar-second"></aside>
</div>
</section>
</div>
</body>
</html>
FULL2;
$pageLayout['bare'] = <<<'BARE' $pageLayout['bare'] = <<<'BARE'
<!DOCTYPE html> <!DOCTYPE html>
<html lang="nl"> <html lang="nl">
@ -77,11 +118,23 @@ $contentLayout['login'] = <<<'LOGIN'
<img src="/images/tag_lock.png" style="position: absolute; top: 175px; left: 20px;" alt="Secure!" /> <img src="/images/tag_lock.png" style="position: absolute; top: 175px; left: 20px;" alt="Secure!" />
LOGIN; LOGIN;
$contentLayout['manage'] = <<<'MANAGE' $contentLayout['manage']['header'] = <<<'MANAGE_HEADER'
<script src="misc/script.editable.table.js"></script> <script src="misc/script.editable.table.js"></script>
<script src="misc/script.manage.js"></script> <script src="misc/script.manage.js"></script>
<span id="user"><span data-translation="span_loggedinas">Ingelogd als</span>&nbsp;%1$s&nbsp;---&nbsp;[<a id="linklanguage-en" href="#" tabindex="700">EN</a>&nbsp;<a id="linklanguage-nl" class="current" href="#" tabindex="700">NL</a>]&nbsp;[<a href="#" tabindex="800" data-translation="link_logout">Log uit</a>]</span> <span id="user"><span data-translation="span_loggedinas">Ingelogd als</span>&nbsp;%1$s&nbsp;---&nbsp;[<a id="linklanguage-en" href="#" tabindex="700">EN</a>&nbsp;<a id="linklanguage-nl" class="current" href="#" tabindex="700">NL</a>]&nbsp;[<a href="#" tabindex="800" data-translation="link_logout">Log uit</a>]</span>
<section> <ul style="clear: both; margin-top: 20px;">
<li class="buttons">
<button id="btnnewuser" class="bttn-simple bttn-xs bttn-primary" data-translation="button_new">nieuw</button>
<button id="btnfoo" class="bttn-simple bttn-xs bttn-primary" data-translation="button_foo">foo</button>
<button id="btnbar" class="bttn-simple bttn-xs bttn-primary" data-translation="button_bar">bar</button>
</li>
<li class="buttons">
<button id="btnsync" class="bttn-simple bttn-xs bttn-primary" data-translation="button_save">opslaan</button>
<button id="btncancel" class="bttn-simple bttn-xs bttn-primary" data-translation="button_cancel">annuleren</button>
</li>
</ul>
MANAGE_HEADER;
$contentLayout['manage']['section'] = <<<'MANAGE_SECTION'
<ul> <ul>
<li> <li>
<table id="usertable"> <table id="usertable">
@ -93,21 +146,11 @@ $contentLayout['manage'] = <<<'MANAGE'
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
%2$s %1$s
</tbody> </tbody>
</table> </table>
</li> </li>
<li class="buttons">
<button id="btnnewuser" class="bttn-simple bttn-xs bttn-primary" data-translation="button_new">nieuw</button>
<button id="btnfoo" class="bttn-simple bttn-xs bttn-primary" data-translation="button_foo">foo</button>
<button id="btnbar" class="bttn-simple bttn-xs bttn-primary" data-translation="button_bar">bar</button>
</li>
<li class="buttons">
<button id="btnsync" class="bttn-simple bttn-xs bttn-primary" data-translation="button_save">wijzigingen opslaan</button>
<button id="btncancel" class="bttn-simple bttn-xs bttn-primary" data-translation="button_cancel">annuleren</button>
</li>
</ul> </ul>
</section> MANAGE_SECTION;
MANAGE;
?> ?>

17
public/lucidAuth.manage.php
View File

@ -12,7 +12,7 @@
try { try {
$allUsers = $pdoDB->query(' $allUsers = $pdoDB->query('
SELECT User.Username, Role.Rolename, COUNT(DISTINCT SecureToken.Value) AS Sessions SELECT User.Id, User.Username, Role.Rolename, COUNT(DISTINCT SecureToken.Value) AS Sessions
FROM User FROM User
LEFT JOIN Role LEFT JOIN Role
ON (User.RoleId=Role.Id) ON (User.RoleId=Role.Id)
@ -25,19 +25,22 @@
} }
foreach($allUsers as $row) { foreach($allUsers as $row) {
$tableRows[] = sprintf('<tr><td>%1$s</td><td>%2$s</td><td class="immutable"><a href="?">%3$s</a></td></tr>', $tableRows[] = sprintf('<tr><td data-userid="%1$s">%2$s</td><td>%3$s</td><td class="immutable"><a href="?">%4$s</a></td></tr>',
$row['Id'],
explode('\\', $row['Username'])[1], explode('\\', $row['Username'])[1],
$row['Rolename'], $row['Rolename'],
$row['Sessions'] $row['Sessions']
); );
} }
echo sprintf($pageLayout['full'], echo sprintf($pageLayout['full2'],
sprintf($contentLayout['manage'], sprintf($contentLayout['manage']['header'],
$validateTokenResult['name'], $validateTokenResult['name']
),
sprintf($contentLayout['manage']['section'],
implode($tableRows) implode($tableRows)
) )
); );
} else { } else {
// No cookie containing valid authentication token found; // No cookie containing valid authentication token found;
// explicitly deleting any remaining cookie, then redirecting to loginpage // explicitly deleting any remaining cookie, then redirecting to loginpage

22
public/misc/script.manage.js
View File

@ -5,9 +5,29 @@ $(document).ready(function(){
$('#btnnewuser').click(function() { $('#btnnewuser').click(function() {
var newUser = 'User' + String(Math.floor(Math.random() * Math.floor(9999))).padStart(4, '0'); var newUser = 'User' + String(Math.floor(Math.random() * Math.floor(9999))).padStart(4, '0');
$('#usertable tbody').append($('<tr><td>' + newUser + '</td><td>User</td><td class="immutable"><a href="?">0</a></td></tr>')); $('#usertable tbody').append($('<tr class="new"><td>' + newUser + '</td><td>User</td><td class="immutable"><a href="?">0</a></td></tr>'));
// Call `editableTableWidget()` again to include the newly added `<tr>` // Call `editableTableWidget()` again to include the newly added `<tr>`
// To prevent recreating multiple new editors; reference the already existing `<input>` // To prevent recreating multiple new editors; reference the already existing `<input>`
$('#usertable').editableTableWidget({editor: $('#editor')}); $('#usertable').editableTableWidget({editor: $('#editor')});
}); });
if (localStorage.getItem('theme') !== null) {
$('#theme').addClass(localStorage.getItem('theme'));
}
$('.logo .sub').click(function(event) {
var classes = ["tablecloth", "weave", "madras", "tartan", "seigaiha"];
if (event.ctrlKey) {
var selectedTheme = classes[~~(Math.random()*classes.length)];
$('#theme').removeClass(classes.join(' ')).addClass(selectedTheme);
localStorage.setItem('theme', selectedTheme);
}
if (event.altKey) {
$('#theme').removeClass(classes.join(' '));
localStorage.removeItem('theme');
}
});
}); });

19
public/misc/script.theme.js
View File

@ -1,19 +0,0 @@
$(document).ready(function() {
if (localStorage.getItem('theme') != '') {
$('html').addClass(localStorage.getItem('theme'));
}
$('.logo .sub').on('click', function(event) {
if (event.ctrlKey) {
var classes = ["tablecloth", "weave", "madras", "tartan", "seigaiha"];
var selectedTheme = classes[~~(Math.random()*classes.length)];
$('html').removeClass().addClass(selectedTheme);
localStorage.setItem('theme', selectedTheme);
}
if (event.altKey) {
$('html').removeClass();
localStorage.removeItem('theme');
}
});
});

27
public/misc/style.css
View File

@ -116,13 +116,16 @@ body {
margin-top: 7px; margin-top: 7px;
width: 20px; width: 20px;
} }
.main header button,
.main section button { .main section button {
margin-left: 160px; margin-left: 160px;
text-transform: uppercase; text-transform: uppercase;
} }
.main header .buttons,
.main section .buttons { .main section .buttons {
text-align: center; text-align: center;
} }
.main header .buttons button,
.main section .buttons button { .main section .buttons button {
margin-left: inherit; margin-left: inherit;
} }
@ -130,7 +133,7 @@ body {
width: 100%; width: 100%;
} }
.main section table * { .main section table * {
font-size: 12px; font-size: 14px;
padding: 2px; padding: 2px;
margin: 0; margin: 0;
} }
@ -200,25 +203,3 @@ body {
.main span#user nav { .main span#user nav {
display: inline; display: inline;
} }
.main span#user #pluginlogos {
display: none;
position: absolute;
top: 72px;
right: 10px;
height: 112px;
width: 250px;
border: 1px solid rgb(0, 51, 153);
box-shadow: black 0px 0px 20px;
box-sizing: border-box;
padding-top: 5px;
background: white;
font-size: inherit;
font-weight: bold;
}
.main span#user #pluginlogos img {
width: 75px;
height: 75px;
filter: saturate(500%) contrast(200%) grayscale(100%) opacity(50%);
transition: all 375ms;
cursor: pointer;
}

50
public/misc/style.panes.css Normal file
View File

@ -0,0 +1,50 @@
body{
margin: 0;
}
.wrapper{
min-height: 100vh;
background: #FFFFFF;
display: flex;
flex-direction: column;
}
.header {
height: 125px;
background: #FFFFFF;
color: #000000;
}
.content {
display: flex;
flex: 1;
background: #333333;
color: #000;
min-height: 0px;
max-height: 100vh;
}
.columns{
display: flex;
flex:1;
}
.main{
flex: 1;
order: 2;
background: #fff;
border: 3px solid #CCCCCC;
border-radius: 5px;
height: 400px;
margin-top: auto;
margin-bottom: auto;
}
.main section {
overflow-y: scroll;
height: calc(100% - 125px);
}
.sidebar-first{
width: 25%;
background: transparent;
order: 1;
}
.sidebar-second{
width: 25%;
order: 3;
background: transparent;
}

10
public/misc/style.theme.css
View File

@ -1,11 +1,11 @@
html.tablecloth { #theme.tablecloth {
height: 100%; height: 100%;
background: repeating-linear-gradient(-45deg, transparent, transparent 1em, rgba(136, 136, 136, 0.4) 0, rgba(136, 136, 136, 0.1) 2em, transparent 0, transparent 1em, rgba(136, 136, 136, 0.3) 0, rgba(136, 136, 136, 0.2) 4em, transparent 0, transparent 1em, rgba(68, 68, 68, 0.6) 0, rgba(68, 68, 68, 0.2) 2em), background: repeating-linear-gradient(-45deg, transparent, transparent 1em, rgba(136, 136, 136, 0.4) 0, rgba(136, 136, 136, 0.1) 2em, transparent 0, transparent 1em, rgba(136, 136, 136, 0.3) 0, rgba(136, 136, 136, 0.2) 4em, transparent 0, transparent 1em, rgba(68, 68, 68, 0.6) 0, rgba(68, 68, 68, 0.2) 2em),
repeating-linear-gradient(45deg, transparent, transparent 1em, rgba(136, 136, 136, 0.4) 0, rgba(136, 136, 136, 0.1) 2em, transparent 0, transparent 1em, rgba(136, 136, 136, 0.3) 0, rgba(136, 136, 136, 0.2) 4em, transparent 0, transparent 1em, rgba(68, 68, 68, 0.4) 0, rgba(68, 68, 68, 0.1) 2em), #666; repeating-linear-gradient(45deg, transparent, transparent 1em, rgba(136, 136, 136, 0.4) 0, rgba(136, 136, 136, 0.1) 2em, transparent 0, transparent 1em, rgba(136, 136, 136, 0.3) 0, rgba(136, 136, 136, 0.2) 4em, transparent 0, transparent 1em, rgba(68, 68, 68, 0.4) 0, rgba(68, 68, 68, 0.1) 2em), #666;
background-blend-mode: multiply; background-blend-mode: multiply;
} }
html.weave { #theme.weave {
background: linear-gradient(45deg, #666 12%, transparent 0, transparent 88%, #666 0), background: linear-gradient(45deg, #666 12%, transparent 0, transparent 88%, #666 0),
linear-gradient(135deg, transparent 37%, #888 0, #888 63%, transparent 0), linear-gradient(135deg, transparent 37%, #888 0, #888 63%, transparent 0),
linear-gradient(45deg, transparent 37%, #666 0, #666 63%, transparent 0), linear-gradient(45deg, transparent 37%, #666 0, #666 63%, transparent 0),
@ -13,14 +13,14 @@ html.weave {
background-size: 40px 40px; background-size: 40px 40px;
} }
html.madras { #theme.madras {
height: 100%; height: 100%;
background-color: #e9d4b9; background-color: #e9d4b9;
background-image: repeating-linear-gradient(45deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 120px, rgba(11, 36, 45, 0.5) 120px, rgba(11, 36, 45, 0.5) 140px), background-image: repeating-linear-gradient(45deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 120px, rgba(11, 36, 45, 0.5) 120px, rgba(11, 36, 45, 0.5) 140px),
repeating-linear-gradient(135deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 140px, rgba(11, 36, 45, 0.5) 140px, rgba(11, 36, 45, 0.5) 160px); repeating-linear-gradient(135deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 140px, rgba(11, 36, 45, 0.5) 140px, rgba(11, 36, 45, 0.5) 160px);
} }
html.tartan { #theme.tartan {
height: 100%; height: 100%;
background-color: #a0302c; background-color: #a0302c;
background-image: repeating-linear-gradient(20deg, transparent, transparent 50px, rgba(0, 0, 0, 0.4) 50px, rgba(0, 0, 0, 0.4) 53px, transparent 53px, transparent 63px, rgba(0, 0, 0, 0.4) 63px, rgba(0, 0, 0, 0.4) 66px, transparent 66px, transparent 116px, rgba(0, 0, 0, 0.5) 116px, rgba(0, 0, 0, 0.5) 166px, rgba(255, 255, 255, 0.2) 166px, rgba(255, 255, 255, 0.2) 169px, rgba(0, 0, 0, 0.5) 169px, rgba(0, 0, 0, 0.5) 179px, rgba(255, 255, 255, 0.2) 179px, rgba(255, 255, 255, 0.2) 182px, rgba(0, 0, 0, 0.5) 182px, rgba(0, 0, 0, 0.5) 232px, transparent 232px), background-image: repeating-linear-gradient(20deg, transparent, transparent 50px, rgba(0, 0, 0, 0.4) 50px, rgba(0, 0, 0, 0.4) 53px, transparent 53px, transparent 63px, rgba(0, 0, 0, 0.4) 63px, rgba(0, 0, 0, 0.4) 66px, transparent 66px, transparent 116px, rgba(0, 0, 0, 0.5) 116px, rgba(0, 0, 0, 0.5) 166px, rgba(255, 255, 255, 0.2) 166px, rgba(255, 255, 255, 0.2) 169px, rgba(0, 0, 0, 0.5) 169px, rgba(0, 0, 0, 0.5) 179px, rgba(255, 255, 255, 0.2) 179px, rgba(255, 255, 255, 0.2) 182px, rgba(0, 0, 0, 0.5) 182px, rgba(0, 0, 0, 0.5) 232px, transparent 232px),
@ -28,7 +28,7 @@ html.tartan {
repeating-linear-gradient(145deg, transparent, transparent 2px, rgba(0, 0, 0, 0.2) 2px, rgba(0, 0, 0, 0.2) 3px, transparent 3px, transparent 5px, rgba(0, 0, 0, 0.2) 5px); repeating-linear-gradient(145deg, transparent, transparent 2px, rgba(0, 0, 0, 0.2) 2px, rgba(0, 0, 0, 0.2) 3px, transparent 3px, transparent 5px, rgba(0, 0, 0, 0.2) 5px);
} }
html.seigaiha { #theme.seigaiha {
background-color: grey; background-color: grey;
background-image: radial-gradient(circle at 100% 150%, grey 24%, silver 25%, silver 28%, grey 29%, grey 36%, silver 36%, silver 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0)), background-image: radial-gradient(circle at 100% 150%, grey 24%, silver 25%, silver 28%, grey 29%, grey 36%, silver 36%, silver 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0)),
radial-gradient(circle at 0 150%, grey 24%, silver 25%, silver 28%, grey 29%, grey 36%, silver 36%, silver 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0)), radial-gradient(circle at 0 150%, grey 24%, silver 25%, silver 28%, grey 29%, grey 36%, silver 36%, silver 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0)),