From e93647e4be52feb16b660e185a206f6d7c2bb62f Mon Sep 17 00:00:00 2001
From: Matthew Grove <matthew@grove.gq>
Date: Mon, 19 Nov 2018 21:00:23 +0000
Subject: [PATCH] Make top app bar 'short' This is a different type of Material
 Design top app bar, which gets smaller on scroll

---
 assets/global.js              |  3 +-
 index.html                    | 69 ++++++++++++++++++++++++++++++++++-
 page-inserts/top-app-bar.html | 20 ++++++++--
 3 files changed, 86 insertions(+), 6 deletions(-)

diff --git a/assets/global.js b/assets/global.js
index c98952e..790eb5d 100644
--- a/assets/global.js
+++ b/assets/global.js
@@ -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;
             });
diff --git a/index.html b/index.html
index 0f0090e..2fc92c9 100644
--- a/index.html
+++ b/index.html
@@ -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">
diff --git a/page-inserts/top-app-bar.html b/page-inserts/top-app-bar.html
index 9a0d140..fccdd1c 100644
--- a/page-inserts/top-app-bar.html
+++ b/page-inserts/top-app-bar.html
@@ -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>
-</div>
+    <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>