mbirth/tcl_update_db
1
0
Fork 0
mirror of https://github.com/mbirth/tcl_update_db.git synced 2024-12-26 12:34:07 +00:00
Code Issues Releases Wiki Activity

Separate KEYone and Motion into different tabs.

Browse Source
This commit is contained in:
Markus Birth 2017-12-29 16:25:57 +01:00
parent be31fd513f
commit 702265a341
Signed by: mbirth
GPG Key ID: A9928D7A098C3A9A
2 changed files with 48 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/style.css
View File

@ -11,6 +11,10 @@ body {
font-family: sans-serif; font-family: sans-serif;
} }
.panel {
margin-top: 70px;
}
table td+td { table td+td {
border-left: 1px dashed silver; border-left: 1px dashed silver;
text-align: center; text-align: center;

47
index_main.php
View File

@ -9,9 +9,18 @@
<body class="mdc-typography"> <body class="mdc-typography">
<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--align-start"> <section class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
<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">
<div>
<nav id="tab-bar" class="mdc-tab-bar mdc-tab-bar--indicator-accent">
<a class="mdc-tab mdc-tab--active" href="#keyone" data-panel="family-keyone">KEYone</a>
<a class="mdc-tab" href="#motion" data-panel="family-motion">Motion</a>
<span class="mdc-tab-bar__indicator"></span>
</nav>
</div>
</section>
</div> </div>
</header> </header>
<main> <main>
@ -37,6 +46,7 @@ if (count($unknowns) > 0) {
} }
foreach ($allVars as $family => $models) { foreach ($allVars as $family => $models) {
echo '<div id="family-' . strtolower($family) . '" class="panel" role="tabpanel">';
foreach ($models as $model => $variants) { foreach ($models as $model => $variants) {
echo '<h2>' . $family . ' ' . $model . '</h2>' . PHP_EOL; echo '<h2>' . $family . ' ' . $model . '</h2>' . PHP_EOL;
$allVersions = $db->getAllVersionsForModel($model); $allVersions = $db->getAllVersionsForModel($model);
@ -66,10 +76,41 @@ foreach ($allVars as $family => $models) {
} }
echo '</tbody></table>'; echo '</tbody></table>';
} }
echo '</div>';
} }
?> ?>
</main> </main>
<script 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>window.mdc.autoInit()</script> <script type="text/javascript">
window.mdc.autoInit();
window.tabBar = new mdc.tabs.MDCTabBar(document.querySelector('#tab-bar'));
function activatePanel(panelId)
{
var allPanels = document.querySelectorAll('.panel');
for (var i=0; i<allPanels.length; i++) {
var panel = allPanels[i];
if (panel.id == panelId) {
tabBar.activeTabIndex = i;
}
panel.style.display = (panel.id == panelId)?'block':'none';
}
}
window.tabBar.listen('MDCTabBar:change', function(t) {
var nthChildIndex = t.detail.activeTabIndex;
var tabId = t.srcElement.id;
var tab = document.querySelector('#' + tabId + ' .mdc-tab:nth-child(' + (nthChildIndex + 1) + ')');
var panelId = tab.dataset.panel;
activatePanel(panelId);
});
var hash = location.hash;
if (hash.length > 1) {
activatePanel('family-' + hash.substring(1));
} else {
activatePanel('family-keyone');
}
</script>
</body> </body>
</html> </html>