Edit top app bar

Begin to make it into a short app bar
This commit is contained in:
Matthew Grove
2018-12-08 21:26:01 +00:00
parent 98a0f84ec7
commit bcf03a2e45
3 changed files with 2 additions and 5 deletions

View File

@@ -52,9 +52,6 @@ body {
overflow: auto; overflow: auto;
} }
.app-bar {
position: absolute;
}
.main-content, footer { .main-content, footer {
margin: 20px; margin: 20px;
} }

View File

@@ -8,7 +8,7 @@ $(document).ready(function() {
$(".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 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'));
mdc_top_app_bar.setScrollTarget(document.getElementById('main-content')); // mdc_top_app_bar.setScrollTarget(document.getElementById('main-content'));
mdc_top_app_bar.listen('MDCTopAppBar:nav', () => { mdc_top_app_bar.listen('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open; drawer.open = !drawer.open;
}); });

View File

@@ -68,7 +68,7 @@
<div class="mdc-drawer-scrim"></div> <div class="mdc-drawer-scrim"></div>
<div class="mdc-drawer-app-content"> <div class="mdc-drawer-app-content">
<header class="mdc-top-app-bar app-bar" id="app-bar"></header> <header class="mdc-top-app-bar app-bar mdc-top-app-bar--short" id="app-bar"></header>
<main class="main-content" id="main-content"> <main class="main-content" id="main-content">
<div class="mdc-top-app-bar--fixed-adjust"> <div class="mdc-top-app-bar--fixed-adjust">