From abf54335131db4fc5b42306ee1d5931aaa4b14cb Mon Sep 17 00:00:00 2001
From: nicolastorres <nicolas@adornis.de>
Date: Fri, 16 May 2025 09:21:57 +0000
Subject: [PATCH] feat: fixes
---
.../client/extensions/ImageExtension.ts | 2 +-
.../client/extensions/ListExtension.ts | 30 ++++++++++++-------
2 files changed, 21 insertions(+), 11 deletions(-)
diff --git a/modules/buildify/client/extensions/ImageExtension.ts b/modules/buildify/client/extensions/ImageExtension.ts
index 189012ba69..44f2fed0d1 100644
--- a/modules/buildify/client/extensions/ImageExtension.ts
+++ b/modules/buildify/client/extensions/ImageExtension.ts
@@ -112,7 +112,7 @@ export class XImageExtension extends ExtensionBoilerplate<BaseImage> {
.fileEntity=${this.fileClass}
.value=${content.fileID}
${css({
- width: content.width ? content.width : '100%',
+ width: content.width ? `min(${content.width}, 100%)` : '100%',
height: content.viewMode !== 'width' ? '100%' : 'unset',
aspectRatio: content.viewMode !== 'width' ? content.aspectRatio ?? '' : 'unset',
...(content.borderRadius ? { borderRadius: content.borderRadius, overflow: 'hidden' } : {}),
diff --git a/modules/buildify/client/extensions/ListExtension.ts b/modules/buildify/client/extensions/ListExtension.ts
index 21f256d9a7..797da8e7b3 100644
--- a/modules/buildify/client/extensions/ListExtension.ts
+++ b/modules/buildify/client/extensions/ListExtension.ts
@@ -1,5 +1,7 @@
import type { Styles } from '@adornis/ass/style.js';
+import { BreakPoint } from '@adornis/base/client/frontend-helpers/window-size.js';
import type { Maybe } from '@adornis/base/utilTypes.js';
+import { WindowSizeController } from '@adornis/chemistry/controllers/window-size-controller.js';
import { css } from '@adornis/chemistry/directives/css.js';
import '@adornis/chemistry/elements/components/x-flex.js';
import '@adornis/chemistry/elements/components/x-grid.js';
@@ -9,7 +11,7 @@ import '@adornis/fonts/fonts.js';
import '@adornis/forms/x-checkbox.js';
import '@adornis/forms/x-input.js';
import { html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import type { BaseIcon } from '../../db/extensions/BaseIcon.js';
import { BaseList } from '../../db/extensions/BaseList.js';
@@ -101,36 +103,35 @@ export const ListExtension = ({
export class XListExtension extends ExtensionBoilerplate<BaseList> {
@property({ attribute: false }) textExtension: Maybe<BuildifyExtension>;
@property({ attribute: false }) iconExtension: Maybe<BuildifyExtension>;
+ @state() private readonly size = new WindowSizeController(this);
protected override _content(content: BaseList) {
const listSymbol = this._listSymbol(content);
return html`
- <x-grid columns="max-content 1fr" ${css({ gap: '20px 16px' })}>
+ <x-flex>
${repeat(
content.items,
item => item._id,
textContent => html`
- <!-- list symbol -->
- ${listSymbol}
-
- <!-- text -->
<x-flex
+ horizontal
+ space="sm"
${css({
height: 'min-content',
})}
>
- ${this.TextExtension.render(textContent, { isSubelement: true })}
+ ${listSymbol} ${this.TextExtension.render(textContent, { isSubelement: true })}
</x-flex>
`,
)}
- </x-grid>
+ </x-flex>
`;
}
protected _listSymbol(content: BaseList) {
- if (content.isHyphen) return html` <x-text> - </x-text> `;
+ if (content.isHyphen) return html` <x-text ${css({ marginTop: this._listSymbolMarginTop() })}> - </x-text> `;
return html`
- <x-flex ${css({ position: 'relative', height: '100%' })} start crossaxis-center>
+ <x-flex ${css({ position: 'relative' })}>
${this.IconExtension.render(content.icon, {
isSubelement: true,
defaultValues: {
@@ -143,6 +144,15 @@ export class XListExtension extends ExtensionBoilerplate<BaseList> {
`;
}
+ protected _listSymbolMarginTop() {
+ const device = this.size.value?.device;
+ if (!device || device >= BreakPoint.laptop) {
+ return '1.4em';
+ } else {
+ return '1em';
+ }
+ }
+
protected get TextExtension() {
if (!this.textExtension) throw new Error('text extension in list is mandatory');
return this.textExtension;
--
GitLab