1
0
mirror of https://github.com/mbirth/tcl_update_db.git synced 2024-12-26 12:34:07 +00:00

Add drawer to switch between pages.

This commit is contained in:
Markus Birth 2018-02-18 23:32:04 +01:00
parent d13fb868c7
commit 73595a2dbf
Signed by: mbirth
GPG Key ID: A9928D7A098C3A9A
4 changed files with 72 additions and 0 deletions

5
assets/menu.coffee Normal file
View File

@ -0,0 +1,5 @@
document.addEventListener 'DOMContentLoaded', (event) ->
window.drawer = new mdc.drawer.MDCTemporaryDrawer document.querySelector '.mdc-drawer'
document.querySelector('.mdc-toolbar__menu-icon').addEventListener 'click', ->
drawer.open = true

View File

@ -10,6 +10,7 @@
<link rel="stylesheet" href="assets/style.css"/> <link rel="stylesheet" href="assets/style.css"/>
<script type="text/javascript" src="node_modules/material-components-web/dist/material-components-web.js"></script> <script type="text/javascript" src="node_modules/material-components-web/dist/material-components-web.js"></script>
<script type="text/javascript" src="assets/main.js"></script> <script type="text/javascript" src="assets/main.js"></script>
<script type="text/javascript" src="assets/menu.js"></script>
</head> </head>
<body class="mdc-typography"> <body class="mdc-typography">
<?php <?php
@ -38,6 +39,7 @@ $families = array_keys($allVars);
<header class="mdc-toolbar mdc-toolbar--fixed"> <header class="mdc-toolbar mdc-toolbar--fixed">
<div class="mdc-toolbar__row"> <div class="mdc-toolbar__row">
<section class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start"> <section class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
<button class="material-icons mdc-toolbar__menu-icon">menu</button>
<span class="mdc-toolbar__title">BlackBerry/TCL Firmware List</span> <span class="mdc-toolbar__title">BlackBerry/TCL Firmware List</span>
</section> </section>
<section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar"> <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
@ -56,6 +58,9 @@ foreach ($families as $i => $family) {
</section> </section>
</div> </div>
</header> </header>
<?php include 'menu.php'; ?>
<main> <main>
<div class="mdc-toolbar-fixed-adjust"></div> <div class="mdc-toolbar-fixed-adjust"></div>
<?php <?php
@ -116,5 +121,22 @@ foreach ($allVars as $family => $models) {
</div> </div>
</main> </main>
<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(["disableCookies"]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//analytics.birth-online.de/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', '4']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript><p><img src="//analytics.birth-online.de/piwik.php?idsite=4&rec=1" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->
</body> </body>
</html> </html>

40
menu.php Executable file
View File

@ -0,0 +1,40 @@
<?php
$menu_items = array(
array('index.php', 'view_agenda', 'Version Table'),
array('timeline.php', 'view_list', 'Version Timeline'),
'---',
array('https://github.com/mbirth/tcl_update_db', 'code', 'GitHub Source'),
);
$this_page = basename($_SERVER['SCRIPT_NAME']);
?>
<aside class="mdc-drawer mdc-drawer--temporary">
<nav class="mdc-drawer__drawer">
<header class="mdc-drawer__header">
<div class="mdc-drawer__header-content mdc-theme--text-primary-on-primary mdc-theme--primary-bg">
BlackBerry/TCL Firmwares
</div>
</header>
<nav class="mdc-drawer__content mdc-list-group">
<div class="mdc-list">
<?php
foreach ($menu_items as $mi) {
if (is_array($mi)) {
if ($mi[0] == $this_page) {
echo '<a class="mdc-list-item mdc-list-item--selected" href="#">' . PHP_EOL;
} else {
echo '<a class="mdc-list-item" href="' . $mi[0] . '">' . PHP_EOL;
}
echo '<i class="material-icons mdc-list-item__graphic" aria-hidden="true">' . $mi[1] . '</i>' . $mi[2] . PHP_EOL;
echo '</a>' . PHP_EOL;
} elseif ($mi == '---') {
echo '</div>' . PHP_EOL;
echo '<hr class="mdc-list-divider"/>' . PHP_EOL;
echo '<div class="mdc-list">' . PHP_EOL;
}
}
?>
</div>
</nav>
</nav>
</aside>

View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="assets/material-icons.css"/> <link rel="stylesheet" href="assets/material-icons.css"/>
<link rel="stylesheet" href="assets/style.css"/> <link rel="stylesheet" href="assets/style.css"/>
<script type="text/javascript" src="node_modules/material-components-web/dist/material-components-web.js"></script> <script type="text/javascript" src="node_modules/material-components-web/dist/material-components-web.js"></script>
<script type="text/javascript" src="assets/menu.js"></script>
</head> </head>
<body class="mdc-typography timeline"> <body class="mdc-typography timeline">
<?php <?php
@ -35,10 +36,14 @@ if (count($unknowns) > 0) {
<header class="mdc-toolbar mdc-toolbar--fixed"> <header class="mdc-toolbar mdc-toolbar--fixed">
<div class="mdc-toolbar__row"> <div class="mdc-toolbar__row">
<section class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start"> <section class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
<button class="material-icons mdc-toolbar__menu-icon">menu</button>
<span class="mdc-toolbar__title">BlackBerry/TCL Firmware Timeline</span> <span class="mdc-toolbar__title">BlackBerry/TCL Firmware Timeline</span>
</section> </section>
</div> </div>
</header> </header>
<?php include 'menu.php'; ?>
<main> <main>
<div class="mdc-toolbar-fixed-adjust"></div> <div class="mdc-toolbar-fixed-adjust"></div>
<?php <?php