From d60498c1beb970a14eeb3bbe02d1b1d8116624b0 Mon Sep 17 00:00:00 2001 From: Yassine Doghri Date: Thu, 23 Sep 2021 14:59:30 +0000 Subject: [PATCH] feat(admin): make header stick on scroll and show title + action buttons using css only --- app/Libraries/Breadcrumb.php | 4 +- app/Resources/js/modules/markdown-preview.ts | 8 +- app/Resources/styles/index.css | 1 + app/Resources/styles/stickyHeader.css | 24 + app/Views/Components/Forms/MarkdownEditor.php | 2 +- package-lock.json | 1742 ++++++++--------- package.json | 55 +- themes/cp_admin/_layout.php | 8 +- 8 files changed, 922 insertions(+), 922 deletions(-) create mode 100644 app/Resources/styles/stickyHeader.css diff --git a/app/Libraries/Breadcrumb.php b/app/Libraries/Breadcrumb.php index 1aa69dc8..a07cbe6d 100644 --- a/app/Libraries/Breadcrumb.php +++ b/app/Libraries/Breadcrumb.php @@ -89,9 +89,7 @@ class Breadcrumb return ''; } diff --git a/app/Resources/js/modules/markdown-preview.ts b/app/Resources/js/modules/markdown-preview.ts index f93b5dc5..fef612fb 100644 --- a/app/Resources/js/modules/markdown-preview.ts +++ b/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 { diff --git a/app/Resources/styles/index.css b/app/Resources/styles/index.css index 37bc69b1..ec4dd949 100644 --- a/app/Resources/styles/index.css +++ b/app/Resources/styles/index.css @@ -11,3 +11,4 @@ @import "./tabs.css"; @import "./radioToggler.css"; @import "./formInputTabs.css"; +@import "./stickyHeader.css"; diff --git a/app/Resources/styles/stickyHeader.css b/app/Resources/styles/stickyHeader.css new file mode 100644 index 00000000..d58f604c --- /dev/null +++ b/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; +} diff --git a/app/Views/Components/Forms/MarkdownEditor.php b/app/Views/Components/Forms/MarkdownEditor.php index 1c064ae5..a42bc041 100644 --- a/app/Views/Components/Forms/MarkdownEditor.php +++ b/app/Views/Components/Forms/MarkdownEditor.php @@ -64,7 +64,7 @@ class MarkdownEditor extends FormComponent {$textarea}