immich-app/drift
1
0
Fork 0
mirror of https://github.com/immich-app/drift.git synced 2026-09-30 13:22:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix details block

Browse Source
This commit is contained in:
Simon Binder
2025-10-04 22:18:03 +02:00
parent 95793d9a65
commit e12a13a3ba
10 changed files with 310 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
drift_website/content/setup.md
+1 -1
View File
@@ -143,7 +143,7 @@ so it now looks like this:
If you need to customize how databases are opened, you can also set the connection
up manually:
<Collapsible title="Just testing">
<Collapsible title="Manual database setup">
<Snippet href="/lib/src/snippets/setup/custom_flutter_setup.dart" name="custom" />
The Android-specific workarounds are necessary because sqlite3 attempts to use `/tmp` to store
drift_website/lib/_style.scss
+17 -3
View File
@@ -2,6 +2,7 @@
@use "package:jaspr_content_snippets/dracula" as dracula;
@use "src/styles/base";
@use "src/styles/details";
@use "src/styles/header";
@use "src/jaspr";
@@ -18,6 +19,19 @@
}
}
pre code {
display: block;
}
.code-block {
pre {
margin-top: 0.25rem;
border-radius: 0.375rem;
font-size: 0.875em;
line-height: 1.71em;
code {
padding: 0.857em 1.14em 0.857em 1.14em;
display: block;
overflow-x: scroll;
white-space: pre;
}
}
}
drift_website/lib/src/_jaspr.scss
-52
View File
@@ -211,9 +211,6 @@
-webkit-appearance: button;
font: inherit;
}
summary {
display: list-item;
}
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
margin: 0;
}
@@ -384,38 +381,6 @@
font-family: inherit;
font-weight: 500;
}
.content :where(code):not(:where([class~=not-content],[class~=not-content] *)) {
color: var(--content-code);
font-weight: 600;
}
.content :where(code::before):not(:where([class~=not-content],[class~=not-content] *)) {
content: "`";
}
.content :where(code::after):not(:where([class~=not-content],[class~=not-content] *)) {
content: "`";
}
.content :where(a code):not(:where([class~=not-content],[class~=not-content] *)) {
color: inherit;
}
.content :where(h1 code):not(:where([class~=not-content],[class~=not-content] *)) {
color: inherit;
}
.content :where(h2 code):not(:where([class~=not-content],[class~=not-content] *)) {
color: inherit;
}
.content :where(h3 code):not(:where([class~=not-content],[class~=not-content] *)) {
color: inherit;
}
.content :where(h4 code):not(:where([class~=not-content],[class~=not-content] *)) {
color: inherit;
}
.content :where(blockquote code):not(:where([class~=not-content],[class~=not-content] *)) {
color: inherit;
}
.content :where(thead th code):not(:where([class~=not-content],[class~=not-content] *)) {
color: inherit;
}
.content :where(table):not(:where([class~=not-content],[class~=not-content] *)) {
width: 100%;
margin-top: 2em;
@@ -511,23 +476,6 @@
border-radius: 0.3125rem;
font-size: 0.875em;
}
.content :where(code):not(:where([class~=not-content],[class~=not-content] *)) {
font-size: 0.875em;
}
.content :where(h2 code):not(:where([class~=not-content],[class~=not-content] *)) {
font-size: 0.875em;
}
.content :where(h3 code):not(:where([class~=not-content],[class~=not-content] *)) {
font-size: 0.9em;
}
.content :where(pre):not(:where([class~=not-content],[class~=not-content] *)) {
padding: 0.857em 1.14em 0.857em 1.14em;
margin-top: 1.71em;
margin-bottom: 1.71em;
border-radius: 0.375rem;
font-size: 0.875em;
line-height: 1.71em;
}
.content :where(ol):not(:where([class~=not-content],[class~=not-content] *)) {
padding-left: 1.625em;
margin-top: 1.25em;
drift_website/lib/src/components/code.dart
+1 -5
View File
@@ -9,11 +9,7 @@ final class DriftCodeBlock implements CustomComponent {
tag: 'pre',
children: [ElementNode(tag: 'code', :final children)],
)) {
return CodeSnippetContainer(
child: pre([
code([builder.build(children)]),
]),
);
return CodeSnippetContainer(child: builder.build(children));
}
return null;
drift_website/lib/src/components/collapsible.dart
+1 -1
View File
@@ -9,7 +9,7 @@ final class Collapsible extends StatelessComponent {
@override
Component build(BuildContext context) {
return details([
return details(classes: 'note', [
summary([text(title)]),
...children,
]);
drift_website/lib/src/styles/_admonition.scss
+174
View File
@@ -0,0 +1,174 @@
// https://github.com/squidfunk/mkdocs-material/blob/c68fac7fb3071fa4f45cc823e2ca2ea82fd67b43/src/templates/assets/stylesheets/main/extensions/markdown/_admonition.scss
@use "sass:color";
@use "sass:list";
@use "constants" as *;
// ----------------------------------------------------------------------------
// Variables
// ----------------------------------------------------------------------------
/// Admonition flavours
$admonitions: (
"note": pencil-circle $clr-blue-a200,
"abstract": clipboard-text $clr-light-blue-a400,
"info": information $clr-cyan-a700,
"tip": fire $clr-teal-a700,
"success": check $clr-green-a700,
"question": help-circle $clr-light-green-a700,
"warning": alert $clr-orange-a400,
"failure": close $clr-red-a200,
"danger": lightning-bolt-circle $clr-red-a400,
"bug": shield-bug $clr-pink-a400,
"example": test-tube $clr-deep-purple-a200,
"quote": format-quote-close $clr-grey
) !default;
// ----------------------------------------------------------------------------
// Rules: layout
// ----------------------------------------------------------------------------
// Admonition variables
:root {
@each $name, $props in $admonitions {
--md-admonition-icon--#{$name}: url("/images/#{list.nth($props, 1)}.svg");
}
}
// ----------------------------------------------------------------------------
// Admonition - note that all styles also apply to details tags, which are
// rendered as collapsible admonitions with summary elements as titles.
.admonition {
display: flow-root;
line-height: 1.35rem;
padding: 0 px2rem(12px);
margin: px2em(20px, 12.8px) 0;
font-size: px2rem(12.8px);
background-color: var(--background-card);
border: px2rem(1.5px) solid $clr-blue-a200;
border-radius: px2rem(4px);
box-shadow: 0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.05),
0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.1);
transition: box-shadow 125ms;
page-break-inside: avoid;
// [print]: Omit shadow as it may lead to rendering errors
@media print {
box-shadow: none;
}
// Admonition on focus
&:focus-within {
box-shadow: 0 0 0 px2rem(4px) color.adjust($clr-blue-a200, $alpha: -0.9);
}
// Hack: Chrome exhibits a weird issue where it will set nested elements to
// content-box. Doesn't happen in other browsers, so looks like a bug.
> * {
box-sizing: border-box;
}
// Adjust vertical spacing for nested admonitions
.admonition {
margin-top: 1em;
margin-bottom: 1em;
}
// Adjust spacing for contained table wrappers
.md-typeset__scrollwrap {
margin: 1em px2rem(-12px);
}
// Adjust spacing for contained tables
.md-typeset__table {
padding: 0 px2rem(12px);
}
// Adjust spacing for single-child tabbed block container
> .tabbed-set:only-child {
margin-top: 0;
}
// Adjust spacing on last child
html & > :last-child {
margin-bottom: px2rem(12px);
}
}
// Admonition title
.admonition-title {
position: relative;
padding-block: px2rem(8px);
padding-inline: px2rem(40px) px2rem(12px);
margin-block: 0;
margin-inline: px2rem(-12px);
font-weight: 700;
background-color: color.adjust($clr-blue-a200, $alpha: -0.9);
border: none;
border-inline-start-width: px2rem(4px);
border-start-start-radius: px2rem(2px);
border-start-end-radius: px2rem(2px);
// Adjust spacing for title-only admonitions
html &:last-child {
margin-bottom: 0;
}
// Admonition icon
&::before {
position: absolute;
inset-inline-start: px2rem(12px);
top: px2em(10px);
width: px2rem(20px);
height: px2rem(20px);
content: "";
background-color: $clr-blue-a200;
mask-image: var(--md-admonition-icon--note);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
// Inline code block
code {
box-shadow: 0 0 0 px2rem(1px) var(--md-default-fg-color--lightest);
}
}
// ----------------------------------------------------------------------------
// Rules: flavours
// ----------------------------------------------------------------------------
// Define admonition flavors
@each $name, $props in $admonitions {
$tint: list.nth($props, 2);
// Admonition flavour
.admonition.#{$name} {
border-color: $tint;
// Admonition on focus
&:focus-within {
box-shadow: 0 0 0 px2rem(4px) color.adjust($tint, $alpha: -0.9);
}
}
// Admonition flavour title
.#{$name} > .admonition-title {
background-color: color.adjust($tint, $alpha: -0.9);
// Admonition icon
&::before {
background-color: $tint;
mask-image: var(--md-admonition-icon--#{$name});
}
// Details marker
&::after {
color: $tint;
}
}
}
drift_website/lib/src/styles/_base.scss
+2
View File
@@ -1,6 +1,7 @@
:root {
--primary: oklch(0.623 0.214 259.815);
--background: oklch(0.984 0.003 247.858);
--background-card: #fefefe;
--text: oklch(0.373 0.034 259.733);
--content-headings: oklch(0.21 0.034 264.665);
--content-lead: oklch(0.446 0.03 256.802);
@@ -23,6 +24,7 @@
@media (prefers-color-scheme: dark) {
--primary: oklch(0.809 0.105 251.813);
--background: oklch(0.141 0.005 285.823);
--background-card: #3f3f2f;
--text: oklch(0.928 0.006 264.531);
--content-headings: white;
--content-lead: oklch(0.707 0.022 261.325);
drift_website/lib/src/styles/_constants.scss
+22
View File
@@ -1,3 +1,6 @@
@use "sass:math";
$header-height: 4rem;
$color-separator: #0000000d;
@@ -21,3 +24,22 @@ $break-large: 1024px;
@content;
}
}
@function px2rem($value) {
$remValue: math.div($value, 16px) + rem;
@return $remValue;
}
// Used by components copied from Material for MkDocs
$clr-blue-a200: #448AFF;
$clr-light-blue-a400: #29B6F6;
$clr-cyan-a700: #0097A7;
$clr-teal-a700: #00796B;
$clr-green-a700: #388E3C;
$clr-light-green-a700: #689F38;
$clr-orange-a400: #FFA726;
$clr-red-a200: #EF9A9A;
$clr-red-a400: #EF5350;
$clr-pink-a400: #EC407A;
$clr-deep-purple-a200: #B39DDB;
$clr-grey: #BDBDBD;
drift_website/lib/src/styles/_details.scss
+91
View File
@@ -0,0 +1,91 @@
// https://github.com/squidfunk/mkdocs-material/blob/c68fac7fb3071fa4f45cc823e2ca2ea82fd67b43/src/templates/assets/stylesheets/main/extensions/pymdownx/_details.scss#L4
@use "admonition";
// Details
details {
@extend .admonition;
display: flow-root;
padding-top: 0;
overflow: visible;
// Details title icon - rotate icon on transition to open state
&[open] > summary::after {
transform: rotate(90deg);
}
// Adjust spacing for details in closed state
&:not([open]) {
padding-bottom: 0;
box-shadow: none;
// Hack: we cannot set `overflow: hidden` on the `details` element (which
// is why we set it to `overflow: visible`, as the outline would not be
// visible when focusing. Therefore, we must set the border radius on the
// summary explicitly.
> summary {
border-radius: px2rem(2px);
}
}
}
// Details title
summary {
@extend .admonition-title;
display: block;
min-height: px2rem(20px);
padding-inline-end: px2rem(36px);
// Hack: Work around Firefox bug that renders a subpixel outline when
// rotating a mask image element - see https://t.ly/qA1s4
overflow: hidden;
cursor: pointer;
border-start-start-radius: px2rem(2px);
border-start-end-radius: px2rem(2px);
// Show outline for keyboard devices
&.focus-visible {
outline-color: var(--md-accent-fg-color);
outline-offset: px2rem(4px);
}
// Hide outline for pointer devices
&:not(.focus-visible) {
outline: none;
-webkit-tap-highlight-color: transparent;
}
// Details marker
&::after {
position: absolute;
inset-inline-end: px2rem(8px);
top: px2em(10px);
width: px2rem(20px);
height: px2rem(20px);
content: "";
background-color: currentcolor;
mask-image: var(--md-details-icon);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
transition: transform 250ms;
transform: rotate(0deg);
// Adjust for right-to-left languages
[dir="rtl"] & {
transform: rotate(180deg);
}
}
// Hide native details marker - modern
&::marker {
display: none;
}
// Hide native details marker - legacy, must be split into a separate rule,
// so older browsers don't consider the selector list as invalid
&::-webkit-details-marker {
display: none;
}
}
drift_website/web/images/pencil-circle.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m3.1 5.07c.14 0 .28.05.4.16l1.27 1.27c.23.22.23.57 0 .78l-1 1-2.05-2.05 1-1c.1-.11.24-.16.38-.16m-1.97 1.74 2.06 2.06-6.06 6.06H7.07v-2.06z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 282 B