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
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>
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'
<!DOCTYPE html>
<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!" />
LOGIN;
$contentLayout['manage'] = <<<'MANAGE'
$contentLayout['manage']['header'] = <<<'MANAGE_HEADER'
<script src="misc/script.editable.table.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>
<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>
<li>
<table id="usertable">
@ -93,21 +146,11 @@ $contentLayout['manage'] = <<<'MANAGE'
</tr>
</thead>
<tbody>
%2$s
%1$s
</tbody>
</table>
</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>
</section>
MANAGE;
MANAGE_SECTION;
?>