use grid layout and :has() selector

The support for the :has() selector is now pretty good and this allows us to special-case the reports that require a fixed size. Overall, the grid layout should more robustly handle the layout
beancount · Jan 13, 2024 · 35ca74b · 35ca74b
1 parent 0e69b95
commit 35ca74b
Show file tree

Hide file tree

Showing 13 changed files with 132 additions and 142 deletions.
diff --git a/frontend/css/layout.css b/frontend/css/layout.css
@@ -1,42 +1,86 @@
+/*
+There are three main layout components.
+
+The header (<header>), the left sidebar (<aside>) and the main content (<article>).
+In the HTML markup, they are all direct children of the <body>.
+
+These elements are arranged as follows:
+
+     header
+  ------------
+  aside | main
+
+On mobile at resolutions smaller than 768px, we hide the aside menu,
+having it slide in from the left side. This means that iPads and larger will show the side menu.
+
+For most reports, we want the header to scroll on mobile but for some
+like the editor we need to have a fixed size filling the whole screen.
+For those reports, the .fixed-fullsize-container be used.
+*/
+
 :root {
-  --header-height: 50px;
   --aside-width: 160px;
 }
 
 body {
-  padding: var(--header-height) 0 0 var(--aside-width);
+  display: grid;
+  grid:
+    "header header" auto
+    "aside main" 1fr
+    /
+    var(--aside-width) 1fr;
+  width: 100vw;
+  height: 100vh;
+  padding: 0;
 }
 
 header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: var(--z-index-header);
   display: flex;
+  flex-wrap: wrap;
+  grid-area: header;
   align-items: center;
-  width: 100%;
-  height: var(--header-height);
-  padding: 0 7px 0 10px;
+  padding: 0.5em;
   color: var(--header-color);
   background-color: var(--header-background);
 }
 
 article {
   position: relative;
-  width: 100%;
-  max-width: 100vw;
-  height: 100%;
+  grid-area: main;
   padding: 1.5em;
-  overflow-x: scroll;
+  overflow-x: auto;
+}
+
+article:has(> .fixed-fullsize-container) {
+  padding: 0;
 }
 
 .fixed-fullsize-container {
-  position: fixed;
-  inset: var(--header-height) 0 0 var(--aside-width);
+  width: 100%;
+  max-width: 100vw;
+  height: 100%;
+  max-height: 100vh;
 }
 
 @media (width <= 767px) {
-  .fixed-fullsize-container {
-    left: 0;
+  body {
+    display: block;
+    font-size: 16px;
+    transition: var(--transitions);
+  }
+
+  body:has(> article > .fixed-fullsize-container) {
+    display: grid;
+    grid-template: "header" max-content "main" 1fr;
+  }
+
+  header {
+    padding-left: 50px;
+  }
+}
+
+@media print {
+  body {
+    grid-template: "header" max-content "main" 1fr;
   }
 }
diff --git a/frontend/css/media-mobile.css b/frontend/css/media-mobile.css
diff --git a/frontend/css/media-print.css b/frontend/css/media-print.css
diff --git a/frontend/css/notifications.css b/frontend/css/notifications.css
@@ -1,7 +1,7 @@
 /* Notifications */
 .notifications {
   position: fixed;
-  top: calc(var(--header-height) + 10px);
+  top: 60px;
   right: 10px;
   width: 400px;
 }

diff --git a/frontend/css/style.css b/frontend/css/style.css
@@ -5,12 +5,10 @@
   --font-family-editor: "Source Code Pro", monospace;
 
   /* Scale of z-index values */
-  --z-index-aside: 1;
-  --z-index-header: 2;
-  --z-index-floating-ui: 3;
-  --z-index-keyboard-overlays: 10;
-  --z-index-autocomplete: 8;
-  --z-index-overlay: 4;
+  --z-index-floating-ui: 1;
+  --z-index-autocomplete: 2;
+  --z-index-overlay: 3;
+  --z-index-keyboard-overlays: 4;
 
   /* Base colors */
   --error: hsl(0deg 100% 30%);

diff --git a/frontend/src/main.ts b/frontend/src/main.ts
@@ -17,8 +17,6 @@ import "../css/grid.css";
 import "../css/fonts.css";
 import "../css/help.css";
 import "../css/journal-table.css";
-import "../css/media-mobile.css";
-import "../css/media-print.css";
 import "../css/notifications.css";
 import "../css/tree-table.css";
 

diff --git a/frontend/src/modals/ModalBase.svelte b/frontend/src/modals/ModalBase.svelte
@@ -70,8 +70,7 @@
 
   .background {
     position: fixed;
-    top: 0;
-    left: 0;
+    inset: 0;
     width: 100%;
     height: 100%;
     cursor: pointer;
@@ -80,8 +79,7 @@
 
   .overlay {
     position: fixed;
-    top: 0;
-    left: 0;
+    inset: 0;
     z-index: var(--z-index-overlay);
     display: flex;
     align-items: start;

diff --git a/frontend/src/notifications.ts b/frontend/src/notifications.ts
@@ -7,8 +7,13 @@ const notificationList = (() => {
     if (value === null) {
       value = document.createElement("div");
       value.className = "notifications";
+      value.style.right = "10px";
       document.body.appendChild(value);
     }
+    // always update the distance to top to account for the current header height
+    const headerHeight =
+      document.querySelector("header")?.getBoundingClientRect().height ?? 50;
+    value.style.top = `${headerHeight + 10}px`;
     return value;
   };
 })();
@@ -26,7 +31,6 @@ type NotificationType = "info" | "warning" | "error";
  */
 export function notify(
   msg: string,
-  // eslint-disable-next-line default-param-last
   cls: NotificationType = "info",
   callback?: () => void,
 ): void {

diff --git a/frontend/src/reports/editor/Editor.svelte b/frontend/src/reports/editor/Editor.svelte
@@ -143,5 +143,6 @@
   form :global(.cm-editor) {
     width: 100%;
     height: 100%;
+    overflow: hidden;
   }
 </style>
diff --git a/frontend/src/sidebar/Aside.svelte → frontend/src/sidebar/AsideContents.svelte b/frontend/src/sidebar/Aside.svelte → frontend/src/sidebar/AsideContents.svelte
diff --git a/frontend/src/sidebar/AsideWithButton.svelte b/frontend/src/sidebar/AsideWithButton.svelte
@@ -1,39 +1,27 @@
 <script lang="ts">
-  import Aside from "./Aside.svelte";
+  import AsideContents from "./AsideContents.svelte";
 
+  /** Whether the sidebar is currently shown. */
   let active = false;
   const toggle = () => {
     active = !active;
   };
 </script>
 
-<button type="button" class:active on:click={toggle}>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    height="32px"
-    width="32px"
-    version="1.0"
-    viewBox="0 0 24 24"
-  >
-    <circle cx="12" cy="5" r="2" />
-    <circle cx="12" cy="12" r="2" />
-    <circle cx="12" cy="19" r="2" />
-  </svg>
-</button>
-<a href="#add-transaction" class:active class="add-transaction">+</a>
+{#if active}
+  <div class="overlay" on:click={toggle} aria-hidden="true"></div>
+{/if}
+<div class:active class="aside-buttons">
+  <button type="button" on:click={toggle}>☰</button>
+  <a class="button" href="#add-transaction">+</a>
+</div>
 <aside class:active>
-  <Aside />
+  <AsideContents />
 </aside>
 
 <style>
   aside {
-    position: fixed;
-    top: var(--header-height);
-    bottom: 0;
-    left: 0;
-    z-index: var(--z-index-aside);
-    width: var(--aside-width);
+    grid-area: aside;
     padding-top: 0.5rem;
     margin: 0;
     overflow-y: auto;
@@ -42,67 +30,69 @@
     border-right: 1px solid var(--sidebar-border);
   }
 
-  .add-transaction,
-  button {
-    z-index: var(--z-index-floating-ui);
+  .aside-buttons {
     display: none;
-    background-color: var(--sidebar-background);
-  }
-
-  .add-transaction,
-  button:hover {
-    background-color: var(--sidebar-background);
   }
 
   @media (width <= 767px) {
+    :root {
+      --aside-width: 200px;
+    }
+
     aside {
+      position: fixed;
       top: 0;
+      bottom: 0;
+      z-index: var(--z-index-floating-ui);
+      width: var(--aside-width);
       margin-left: calc(-1 * var(--aside-width));
       transition: var(--transitions);
     }
 
+    .overlay {
+      position: fixed;
+      inset: 0;
+      z-index: var(--z-index-floating-ui);
+      cursor: pointer;
+      background: var(--overlay-wrapper-background);
+      transition: var(--transitions);
+    }
+
     aside.active {
       margin-left: 0;
     }
 
-    .add-transaction,
-    button {
+    .aside-buttons {
       position: fixed;
+      top: 0;
       left: 0;
-      display: block;
-      width: 42px;
-      height: 42px;
-      margin-left: 0;
-      color: var(--mobile-button-text);
-      text-align: center;
-      border-color: var(--sidebar-border);
-      border-style: solid;
-      border-width: 1px;
+      z-index: var(--z-index-floating-ui);
+      display: flex;
+      flex-direction: column;
       transition: var(--transitions);
     }
 
-    button {
-      top: 0;
-      padding: 4px;
+    .active.aside-buttons {
+      left: var(--aside-width);
     }
 
-    .add-transaction {
-      top: 42px;
-      font-size: 28px;
+    .aside-buttons > * {
+      width: 42px;
+      height: 42px;
+      color: var(--mobile-button-text);
+      text-align: center;
+      background-color: var(--sidebar-background);
+      border: 1px solid var(--sidebar-border);
     }
 
-    .active.add-transaction,
-    button.active {
-      left: var(--aside-width);
-      background-color: var(--sidebar-background);
-      box-shadow: unset;
+    .aside-buttons a {
+      font-size: 28px;
     }
   }
 
   @media print {
     aside,
-    a,
-    button {
+    .aside-buttons {
       display: none;
     }
   }

diff --git a/frontend/src/sidebar/FilterForm.svelte b/frontend/src/sidebar/FilterForm.svelte
@@ -99,7 +99,7 @@
   form {
     display: flex;
     flex-wrap: wrap;
-    padding-top: 7px;
+    gap: 0.5em;
     margin: 0;
     color: var(--text-color);
 
@@ -109,7 +109,6 @@
 
   form > :global(span) {
     max-width: 18rem;
-    margin: 0 4px 6px 0;
   }
 
   form :global(input) {