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

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">