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
......@@ -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>';
}
......
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 {
......
......@@ -11,3 +11,4 @@
@import "./tabs.css";
@import "./radioToggler.css";
@import "./formInputTabs.css";
@import "./stickyHeader.css";
: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;
}
......@@ -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>
......
This diff is collapsed.
......@@ -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",
......
......@@ -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') ?>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment