davismj/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GistRun</title>
  <style>
    section {
      // give children a row-style layout
      display: flex;
      // and fill the page
      height: 100vh;
      width: 100vw;
    }
    left-menu {
      height: 100%;
      width: 25%;
    .page-content {
      height: 100%;
      width: 75%;
      overflow-y: auto;
    }
    .loader {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: rgba(0,0,0,0.8); // a grey fade-out overlay
      // fade in behavior
      transition: opacity 0.25s ease-in-out;
      opacity: 0;
    }
    .loader div {
      margin: auto;
      height: 25vh;
      width: 25vw;
      border-radius: 6px;
      background: white;
    }

    // We add the .loading class to the parent element when router.isNavigating is true, this allows us to manipulate
    // arbitrary content on the page when the page is loading. For example, we can create a loader element that is
    // invisible by default, but show it when the page is loading. However, if down the line we decide that we want
    // to make all buttons greyed out while navigating, we could do .loading button { background: grey;  } or something
    .loading .loader {
      display: flex;
      opacity: 1;
    }
  </style>
</head>
<body>
  <section id="shell">
    <left-menu></left-menu>
    <main class="page-content ${router.isNavigating | then: 'loading'}">
      <div class="loader">
        <div>Loading</div>
      </div>
      <router-view></router-view>
    </main>
  </section>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>GistRun</title>
	<style>
	section {
	// give children a row-style layout
	display: flex;
	// and fill the page
	height: 100vh;
	width: 100vw;
	}
	left-menu {
	height: 100%;
	width: 25%;
	.page-content {
	height: 100%;
	width: 75%;
	overflow-y: auto;
	}
	.loader {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,0.8); // a grey fade-out overlay
	// fade in behavior
	transition: opacity 0.25s ease-in-out;
	opacity: 0;
	}
	.loader div {
	margin: auto;
	height: 25vh;
	width: 25vw;
	border-radius: 6px;
	background: white;
	}

	// We add the .loading class to the parent element when router.isNavigating is true, this allows us to manipulate
	// arbitrary content on the page when the page is loading. For example, we can create a loader element that is
	// invisible by default, but show it when the page is loading. However, if down the line we decide that we want
	// to make all buttons greyed out while navigating, we could do .loading button { background: grey; } or something
	.loading .loader {
	display: flex;
	opacity: 1;
	}
	</style>
	</head>
	<body>
	<section id="shell">
	<left-menu></left-menu>
	<main class="page-content ${router.isNavigating \| then: 'loading'}">
	<div class="loader">
	<div>Loading</div>
	</div>
	<router-view></router-view>
	</main>
	</section>
	</body>
	</html>