Commit d60498c1 authored by Yassine Doghri's avatar Yassine Doghri
Browse files

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

parent 99a3b8d3

app/Libraries/Breadcrumb.php

+1 −3
Original line number Diff line number Diff line
@@ -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

+4 −4
Original line number Diff line number Diff line 
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

+1 −0
Original line number Diff line number Diff line
@@ -11,3 +11,4 @@ 
@import "./tabs.css";

@import "./radioToggler.css";

@import "./formInputTabs.css";

@import "./stickyHeader.css";

app/Resources/styles/stickyHeader.css

0 → 100644
+24 −0
Original line number Diff line number Diff line 
: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

+1 −1
Original line number Diff line number Diff line
@@ -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>