mirror of
https://code.castopod.org/adaures/castopod
synced 2025-04-19 13:01:19 +00:00
feat(admin): make header stick on scroll and show title + action buttons using css only
This commit is contained in:
Yassine Doghri
parent
99a3b8d33e
commit
d60498c1be
@ -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>';
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -11,3 +11,4 @@
|
||||
@import "./tabs.css";
|
||||
@import "./radioToggler.css";
|
||||
@import "./formInputTabs.css";
|
||||
@import "./stickyHeader.css";
|
||||
|
||||
24
app/Resources/styles/stickyHeader.css
Normal file
24
app/Resources/styles/stickyHeader.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
|
||||
1742
package-lock.json
generated
1742
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
55
package.json
55
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",
|
||||
|
||||
@ -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') ?>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user