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

Make top app bar 'short'

Browse Source 
This is a different type of Material Design top app bar, which gets 
smaller on scroll
This commit is contained in:
Matthew Grove
2018-11-19 21:00:23 +00:00
parent 4df4919627
commit e93647e4be
3 changed files with 86 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/global.js
View File

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

69
index.html
View File

@@ -57,10 +57,75 @@
<div class="mdc-drawer-scrim"></div>
<div class="mdc-drawer-app-content">
<header class="mdc-top-app-bar app-bar" id="app-bar"></header>
<header class="mdc-top-app-bar mdc-top-app-bar--short" id="app-bar"></header>
<main class="main-content" id="main-content">
<div class="mdc-top-app-bar--fixed-adjust">
<div class="mdc-top-app-bar--short-fixed-adjust">
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image:url('https://www.w3schools.com/w3css/img_lights.jpg');"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Title</h2>
<h3 class="mdc-typography--subtitle2"><time class="timeago" datetime="2018-02-23T19:52:0Z">DATE</time> | by <a href="//authors/author.html">Name</a></h3>
</div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='//articles/article/article_name';">Read</button>
</div>
</div>
</div>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image:url('https://www.w3schools.com/w3css/img_lights.jpg');"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Title</h2>
<h3 class="mdc-typography--subtitle2"><time class="timeago" datetime="2018-02-23T19:52:0Z">DATE</time> | by <a href="//authors/author.html">Name</a></h3>
</div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='//articles/article/article_name';">Read</button>
</div>
</div>
</div>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image:url('https://www.w3schools.com/w3css/img_lights.jpg');"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Title</h2>
<h3 class="mdc-typography--subtitle2"><time class="timeago" datetime="2018-02-23T19:52:0Z">DATE</time> | by <a href="//authors/author.html">Name</a></h3>
</div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='//articles/article/article_name';">Read</button>
</div>
</div>
</div>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image:url('https://www.w3schools.com/w3css/img_lights.jpg');"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Title</h2>
<h3 class="mdc-typography--subtitle2"><time class="timeago" datetime="2018-02-23T19:52:0Z">DATE</time> | by <a href="//authors/author.html">Name</a></h3>
</div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='//articles/article/article_name';">Read</button>
</div>
</div>
</div>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image:url('https://www.w3schools.com/w3css/img_lights.jpg');"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Title</h2>
<h3 class="mdc-typography--subtitle2"><time class="timeago" datetime="2018-02-23T19:52:0Z">DATE</time> | by <a href="//authors/author.html">Name</a></h3>
</div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='//articles/article/article_name';">Read</button>
</div>
</div>
</div>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image:url('https://www.w3schools.com/w3css/img_lights.jpg');"></div>
<div class="mdc-card-content">

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

@@ -1,7 +1,21 @@
<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">
<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>
<img src="/images/logo-white.png" style="height:48px;width:auto;position:relative;right:0;"/>
</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">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">Title</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>
</section>
</div>