smyalygames/quartz
Template
1
0
Fork 0
mirror of https://github.com/jackyzha0/quartz.git synced 2025-05-18 06:24:22 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(flex): respect DesktopOnly and MobileOnly components

Browse Source
This commit is contained in:
Emile Bangma 2025-05-10 15:28:18 +00:00 committed by GitHub
parent e98d97a271
commit 2e1f7df7e6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
quartz/components/Flex.tsx
View File

@ -21,9 +21,13 @@ export default ((config: FlexConfig) => {
const direction = config.direction ?? "row"
const wrap = config.wrap ?? "nowrap"
const gap = config.gap ?? "1rem"
const displayClass = `${props.displayClass ?? ""} flex-component`
return (
<div style={`display: flex; flex-direction: ${direction}; flex-wrap: ${wrap}; gap: ${gap};`}>
<div
class={`${displayClass}`}
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

16
quartz/styles/base.scss
View File

@ -123,16 +123,32 @@ a {
}
}
.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;
}
}