mirror of
https://gitlab.com/MisterBiggs/brain-quartz.git
synced 2025-06-15 17:26:40 +00:00
fix(flex): respect DesktopOnly and MobileOnly components (#1971)
* fix(flex): respect DesktopOnly and MobileOnly components * Use classNames util function * fix(ofm): allow wikilink alias to be empty (#1984) This is in line with Obsidian's behavior. * fix(style): Katex adding scrollbars on non-overflowing content (#1989) * feat(i18n): Bahasa Indonesia translations (#1981) * fix(a11y): increased content-meta text contrast (#1980) * fix(analytics): streamline posthog script loading and event capturing (#1974) * css: adjust color blend for search bg * feat(links): added ofm option to style unresolved or broken links differently (#1992) * feat: add option to disable broken wikilinks * fix(style): update hover color for broken links and introduce new class * feat: add "disableBrokenWikilinks" option to ObsidianFlavoredMarkdown * chore(deps): replace `chalk` and `rimraf` with builtin functions (#1879) Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * chore(deps): bump the production-dependencies group across 1 directory with 9 updates (#1996) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Node 22 (#1997) * docs: showcase housekeeping * docs: fix explorernode references (closes #1985) * fix: tz-less date parse in local tz instead of utc (closes #1615) * docs: added note to not forget to add https:// to the plausible-host (for #1337) (#2000) * docs: added note to not forget to add https:// to the plausible-host (for #1337) * Update docs/configuration.md --------- Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * Updated documentation --------- Co-authored-by: Nizav <106657905+Ni-zav@users.noreply.github.com> Co-authored-by: Aswanth <aswanth366@gmail.com> Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> Co-authored-by: Keisuke ANDO <g.kei0429@gmail.com> Co-authored-by: fl0werpowers <47599466+fl0werpowers@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Sebastian Moser <64004956+c2vi@users.noreply.github.com>
This commit is contained in:
parent
7b052e8844
commit
b48aa91728
@ -41,6 +41,15 @@ Component.Flex({
|
||||
})
|
||||
```
|
||||
|
||||
> [!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.
|
||||
|
@ -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 @@ export default ((config: FlexConfig) => {
|
||||
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
|
||||
|
@ -132,16 +132,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;
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user