feat(admin): make header stick on scroll and show title + action buttons using css only

app/Libraries/Breadcrumb.php

@@ -89,9 +89,7 @@ class Breadcrumb
 
         return '<nav aria-label="' .
             lang('Breadcrumb.label') .
-            '"><ol class="breadcrumb ' .
-            $class .
-            '">' .
+            '" class="' . $class . '"><ol class="breadcrumb">' .
             $listItems .
             '</ol></nav>';
     }

app/Resources/js/modules/markdown-preview.ts

@@ -1,6 +1,6 @@
 import MarkdownToolbarElement from "@github/markdown-toolbar-element";
 import { html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import marked from "marked";
 
@@ -9,13 +9,13 @@ export class MarkdownPreview extends LitElement {
   @property()
   for!: string;
 
-  @property()
+  @state()
   _textarea!: HTMLTextAreaElement;
 
-  @property()
+  @state()
   _markdownToolbar!: MarkdownToolbarElement;
 
-  @property()
+  @state()
   _show = false;
 
   connectedCallback(): void {

app/Resources/styles/index.css

@@ -11,3 +11,4 @@
 @import "./tabs.css";
 @import "./radioToggler.css";
 @import "./formInputTabs.css";
+@import "./stickyHeader.css";

app/Resources/styles/stickyHeader.css

@@ -0,0 +1,24 @@
+:root {
+  --sticky-header-outer-height: 180px;
+  --sticky-header-inner-height: 84px;
+  --sticky-header-height-difference: calc(
+    var(--sticky-header-outer-height) - var(--sticky-header-inner-height)
+  );
+}
+
+/* Sticky header */
+.sticky-header-outer {
+  /* Make it stick */
+  height: var(--sticky-header-outer-height);
+  position: sticky;
+  top: calc(
+    var(--sticky-header-height-difference) * -1
+  ); /* Multiply by -1 to get a negative value */
+}
+
+.sticky-header-inner {
+  /* Make it stick */
+  height: var(--sticky-header-inner-height);
+  position: sticky;
+  top: 0;
+}

app/Views/Components/Forms/MarkdownEditor.php

@@ -64,7 +64,7 @@ class MarkdownEditor extends FormComponent
                     {$textarea}
                     <markdown-preview for="{$this->id}" class="absolute top-0 left-0 hidden w-full h-full p-2 overflow-y-auto prose bg-gray-50" showClass="bg-white" />
                 </div>
-                <footer class="flex px-2 py-1 bg-gray-100 border-t">
+                <footer class="flex px-2 py-1 border-t bg-gray-50">
                     <a href="https://commonmark.org/help/" class="inline-flex items-center text-xs font-semibold text-gray-500 hover:text-gray-700" target="_blank" rel="noopener noreferrer">{$icons['markdown']}{$translations['help']}</a>
                 </footer>
             </div>

package.json

@@ -28,62 +28,61 @@
   },
   "dependencies": {
     "@amcharts/amcharts4-geodata": "^4.1.21",
-    "@amcharts/amcharts4": "^4.10.21",
-    "@codemirror/basic-setup": "^0.18.2",
-    "@codemirror/commands": "^0.18.3",
-    "@codemirror/lang-xml": "^0.18.0",
-    "@codemirror/state": "^0.18.7",
-    "@codemirror/view": "^0.18.19",
+    "@amcharts/amcharts4": "^4.10.22",
+    "@codemirror/basic-setup": "^0.19.0",
+    "@codemirror/commands": "^0.19.5",
+    "@codemirror/lang-xml": "^0.19.1",
+    "@codemirror/state": "^0.19.2",
+    "@codemirror/view": "^0.19.7",
     "@github/clipboard-copy-element": "^1.1.2",
     "@github/markdown-toolbar-element": "^1.5.1",
     "@github/time-elements": "^3.1.2",
-    "@popperjs/core": "^2.9.3",
+    "@popperjs/core": "^2.10.1",
     "@vime/core": "^5.0.33",
     "choices.js": "^9.0.1",
     "flatpickr": "^4.6.9",
     "leaflet.markercluster": "^1.5.1",
     "leaflet": "^1.7.1",
-    "lit": "^2.0.0-rc.2",
-    "marked": "^2.1.3",
-    "xml-formatter": "^2.4.0"
+    "lit": "^2.0.0",
+    "marked": "^3.0.4",
+    "xml-formatter": "^2.4.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
-    "@semantic-release/changelog": "^5.0.1",
-    "@semantic-release/exec": "^5.0.0",
-    "@semantic-release/git": "^9.0.0",
-    "@semantic-release/gitlab": "^6.2.2",
+    "@semantic-release/changelog": "^6.0.0",
+    "@semantic-release/exec": "^6.0.1",
+    "@semantic-release/git": "^10.0.0",
+    "@semantic-release/gitlab": "^7.0.3",
     "@tailwindcss/forms": "^0.3.3",
     "@tailwindcss/line-clamp": "^0.2.1",
     "@tailwindcss/typography": "^0.4.1",
     "@types/leaflet": "^1.7.5",
-    "@types/marked": "^2.0.4",
-    "@typescript-eslint/eslint-plugin": "^4.29.1",
-    "@typescript-eslint/parser": "^4.29.1",
+    "@types/marked": "^3.0.1",
+    "@typescript-eslint/eslint-plugin": "^4.31.2",
+    "@typescript-eslint/parser": "^4.31.2",
     "cross-env": "^7.0.3",
-    "cssnano": "^5.0.7",
+    "cssnano": "^5.0.8",
     "cz-conventional-changelog": "^3.3.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "eslint": "^7.32.0",
-    "husky": "^7.0.1",
+    "husky": "^7.0.2",
     "is-ci": "^3.0.0",
     "lint-staged": "^11.1.2",
-    "lit": "^2.0.0-rc.2",
     "postcss-import": "^14.0.2",
     "postcss-preset-env": "^6.7.0",
     "postcss-reporter": "^7.0.2",
-    "prettier-plugin-organize-imports": "^2.3.3",
-    "prettier": "2.3.2",
-    "semantic-release": "^17.4.4",
+    "prettier-plugin-organize-imports": "^2.3.4",
+    "prettier": "2.4.1",
+    "semantic-release": "^18.0.0",
     "stylelint-config-standard": "^22.0.0",
     "stylelint": "^13.13.1",
-    "svgo": "^2.3.1",
+    "svgo": "^2.6.1",
     "tailwindcss-scroll-snap": "^1.1.0",
-    "tailwindcss": "^2.2.7",
-    "typescript": "^4.3.5",
-    "vite": "^2.4.4"
+    "tailwindcss": "^2.2.15",
+    "typescript": "^4.4.3",
+    "vite": "^2.5.10"
   },
   "lint-staged": {
     "*.{js,ts,css,md,json}": "prettier --write",

themes/cp_admin/_layout.php

@@ -80,10 +80,10 @@
         </footer>
     </aside>
     <main class="relative holy-grail__main">
-        <header class="flex-col py-10 bg-white">
-            <div class="container mx-auto">
-                <?= render_breadcrumb('text-gray-800 text-xs') ?>
-                <div class="flex justify-between">
+        <header class="z-40 flex items-center bg-white border-b sticky-header-outer border-pine-100">
+            <div class="container flex flex-col justify-end mx-auto -mt-4 sticky-header-inner">
+                <?= render_breadcrumb('text-gray-800 text-xs items-center flex') ?>
+                <div class="flex justify-between py-1">
                     <div class="flex flex-wrap items-center">
                         <Heading tagName="h1" size="large"><?= $this->renderSection('pageTitle') ?></Heading>
                         <?= $this->renderSection('headerLeft') ?>