From b48aa917281c7c23f92c490b751f2b68f387277d Mon Sep 17 00:00:00 2001
From: Emile Bangma <github@emilebangma.com>
Date: Mon, 02 Jun 2025 16:36:57 +0000
Subject: [PATCH] fix(flex): respect DesktopOnly and MobileOnly components (#1971)
---
quartz/styles/base.scss | 16 ++++++++++++++++
quartz/components/Flex.tsx | 6 +++++-
docs/layout-components.md | 9 +++++++++
3 files changed, 30 insertions(+), 1 deletions(-)
diff --git a/docs/layout-components.md b/docs/layout-components.md
index 09c2d76..9a0b639 100644
--- a/docs/layout-components.md
+++ b/docs/layout-components.md
@@ -41,6 +41,15 @@
})
```
+> [!note] Overriding behavior
+> Components inside `Flex` get an additional CSS class `flex-component` that add the `display: flex` property. If you want to override this behavior, you can add a `display` property to the component's CSS class in your custom CSS file.
+>
+> ```scss
+> .flex-component {
+> display: block; // or any other display type
+> }
+> ```
+
## `MobileOnly` Component
The `MobileOnly` component is a wrapper that makes its child component only visible on mobile devices. This is useful for creating responsive layouts where certain components should only appear on smaller screens.
diff --git a/quartz/components/Flex.tsx b/quartz/components/Flex.tsx
index 1cf151e..70d2149 100644
--- a/quartz/components/Flex.tsx
+++ b/quartz/components/Flex.tsx
@@ -1,4 +1,5 @@
import { concatenateResources } from "../util/resources"
+import { classNames } from "../util/lang"
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
type FlexConfig = {
@@ -23,7 +24,10 @@
const gap = config.gap ?? "1rem"
return (
- <div style={`display: flex; flex-direction: ${direction}; flex-wrap: ${wrap}; gap: ${gap};`}>
+ <div
+ class={classNames(props.displayClass, "flex-component")}
+ style={`flex-direction: ${direction}; flex-wrap: ${wrap}; gap: ${gap};`}
+ >
{config.components.map((c) => {
const grow = c.grow ? 1 : 0
const shrink = (c.shrink ?? true) ? 1 : 0
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index f534e37..820b9ab 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -132,16 +132,32 @@
}
}
+.flex-component {
+ display: flex;
+}
+
.desktop-only {
display: initial;
+ &.flex-component {
+ display: flex;
+ }
@media all and ($mobile) {
+ &.flex-component {
+ display: none;
+ }
display: none;
}
}
.mobile-only {
display: none;
+ &.flex-component {
+ display: none;
+ }
@media all and ($mobile) {
+ &.flex-component {
+ display: flex;
+ }
display: initial;
}
}
--
Gitblit v1.10.0