me/bbc-young-reporter
1
0
Fork 0
mirror of https://github.com/mgrove36/bbc-young-reporter.git synced 2026-03-03 03:17:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make top app bar and drawer work properly

Browse Source 
Top app bar now collapses on scroll & drawer opens when the menu button is clicked
This commit is contained in:
Matthew Grove
2018-11-20 16:51:32 +00:00
parent 404d4ab508
commit 2709500e8d
3 changed files with 9 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
assets/global.js
View File

@@ -1,19 +1,21 @@
$(document).ready(function(){ $(document).ready(function(){
// include navbar // include navbar
$(".mdc-drawer").load("/page-inserts/navbar.html", function(){ $(".mdc-drawer").load("/page-inserts/navbar.html", function(){
// initiate MDC drawer
const drawer = new mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
// include top app bar // include top app bar
$(".mdc-top-app-bar").load("/page-inserts/top-app-bar.html", function(){ $(".mdc-top-app-bar").load("/page-inserts/top-app-bar.html", function(){
// initiate MDC drawer
const drawer = new mdc.drawer.MDCDrawer.attachTo(document.querySelector(".mdc-drawer"));
// initiate MDC top app bar // initiate MDC top app bar
const mdc_top_app_bar = new mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar')); const mdc_top_app_bar = new mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
setScrollTarget(document.getElementById('main-content'), mdc_top_app_bar);
mdc_top_app_bar.listen('MDCTopAppBar:nav', () => { mdc_top_app_bar.listen("MDCTopAppBar:nav", () => {
drawer.open = !drawer.open; drawer.open = !drawer.open;
}); });
// initiate MDC items // initiate MDC items
mdc.autoInit(); mdc.autoInit();

BIN
images/page-logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 188 KiB

14
page-inserts/top-app-bar.html
View File

@@ -1,21 +1,9 @@
<!-- <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC School Report | Reading School</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
<img src="/images/logo-white.png" class="material-icons mdc-top-app-bar__action-item" aria-label="Reading School" alt="Reading School Logo"/>
</section>
</div> -->
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC School Report | Reading School</span> <span class="mdc-top-app-bar__title">BBC School Report | Reading School</span>
</section> </section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<img src="/images/logo-white.png" class="material-icons mdc-top-app-bar__action-item" aria-label="Reading School" alt="Reading School Logo" style="height:55px;width:48px;"/> <img src="/images/logo-white.png" class="mdc-top-app-bar__action-item" aria-label="Reading School" alt="Reading School Logo" style="height:65px;width:54px;"/>
</section> </section>
</div> </div>