@trebired/frontend 14.3.0 → 14.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +5 -0
- package/dist/config/default/component-tokens.d.ts +1 -0
- package/dist/config/default/component-tokens.d.ts.map +1 -1
- package/dist/config/default/media-tokens.d.ts +1 -0
- package/dist/config/default/media-tokens.d.ts.map +1 -1
- package/dist/config/default/media-tokens.js +1 -0
- package/dist/config/default/media-tokens.js.map +1 -1
- package/dist/media/expandable-image.d.ts +1 -0
- package/dist/media/expandable-image.d.ts.map +1 -1
- package/dist/media/expandable-image.js +5 -2
- package/dist/media/expandable-image.js.map +1 -1
- package/dist/media/styles/lightbox.scss +1 -0
- package/dist/src/config/default/component-tokens.d.ts +1 -0
- package/dist/src/config/default/component-tokens.d.ts.map +1 -1
- package/dist/src/config/default/media-tokens.d.ts +1 -0
- package/dist/src/config/default/media-tokens.d.ts.map +1 -1
- package/dist/src/config/default/media-tokens.js +1 -0
- package/dist/src/config/default/media-tokens.js.map +1 -1
- package/dist/src/media/expandable-image.d.ts +1 -0
- package/dist/src/media/expandable-image.d.ts.map +1 -1
- package/dist/src/media/expandable-image.js +5 -2
- package/dist/src/media/expandable-image.js.map +1 -1
- package/dist/styles/utils/layout-grid.scss +20 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 14.4.0
|
|
4
|
+
|
|
5
|
+
- `ExpandableImage` takes a `ratio`. It is already its own media box — `position: relative`, its own background, an overlaid icon — so wrapping it in a `Frame` to give it a shape put the frame's cover layer inside the button instead of the frame, collapsing the button to nothing and leaving an empty box.
|
|
6
|
+
- The grid utility gained `cols-3` and `cols-4`. Both drop to two columns at 900px and to one at 560px, where three across stops being readable; `cols-2` stays two, since two fit a phone.
|
|
7
|
+
|
|
3
8
|
## 14.3.0
|
|
4
9
|
|
|
5
10
|
- A toned `Card` colours its border to match its ground. The muted, inverse and accent tones kept the root border colour, so a dark panel on a light page was outlined in the light page's hairline.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component-tokens.d.ts","sourceRoot":"","sources":["../../../../src/config/default/component-tokens.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,kCAAkC
|
|
1
|
+
{"version":3,"file":"component-tokens.d.ts","sourceRoot":"","sources":["../../../../src/config/default/component-tokens.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2YS,CAAC;AAElD,OAAO,EAAE,kCAAkC,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"media-tokens.d.ts","sourceRoot":"","sources":["../../../../src/config/default/media-tokens.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,+BAA+B
|
|
1
|
+
{"version":3,"file":"media-tokens.d.ts","sourceRoot":"","sources":["../../../../src/config/default/media-tokens.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCnC,CAAC;AAEH,OAAO,EAAE,+BAA+B,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"media-tokens.js","sourceRoot":"","sources":["../../../../src/config/default/media-tokens.ts"],"names":[],"mappings":"AAAA,MAAM,+BAA+B,GAAG,MAAM,CAAC,MAAM,CAAC;IAClD,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC;QAC3B,IAAI,EAAE;YACJ,UAAU,EAAE,wBAAwB;YACpC,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,GAAG;YACX,IAAI,EAAE,QAAQ;SACf;KACJ,CAAC;IACF,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC;QACpB,QAAQ,EAAE;YACR,UAAU,EAAE,wBAAwB;YACpC,IAAI,EAAE,KAAK;SACZ;QACD,OAAO,EAAE;YACP,KAAK,EAAE,uBAAuB;YAC9B,QAAQ,EAAE,UAAU;YACpB,UAAU,EAAE,KAAK;SAClB;QACD,OAAO,EAAE;YACP,UAAU,EAAE,wBAAwB;YACpC,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,GAAG;YACX,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,QAAQ;YAClB,MAAM,EAAE;gBACN,KAAK,EAAE,EAAE,UAAU,EAAE,0DAA0D,EAAE;aAClF;SACF;QACD,KAAK,EAAE;YACL,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,uCAAuC;SAChD;KACJ,CAAC;CACL,CAAC,CAAC;AAEH,OAAO,EAAE,+BAA+B,EAAE,CAAC"}
|
|
1
|
+
{"version":3,"file":"media-tokens.js","sourceRoot":"","sources":["../../../../src/config/default/media-tokens.ts"],"names":[],"mappings":"AAAA,MAAM,+BAA+B,GAAG,MAAM,CAAC,MAAM,CAAC;IAClD,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC;QAC3B,KAAK,EAAE,MAAM;QACb,IAAI,EAAE;YACJ,UAAU,EAAE,wBAAwB;YACpC,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,GAAG;YACX,IAAI,EAAE,QAAQ;SACf;KACJ,CAAC;IACF,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC;QACpB,QAAQ,EAAE;YACR,UAAU,EAAE,wBAAwB;YACpC,IAAI,EAAE,KAAK;SACZ;QACD,OAAO,EAAE;YACP,KAAK,EAAE,uBAAuB;YAC9B,QAAQ,EAAE,UAAU;YACpB,UAAU,EAAE,KAAK;SAClB;QACD,OAAO,EAAE;YACP,UAAU,EAAE,wBAAwB;YACpC,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,GAAG;YACX,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,QAAQ;YAClB,MAAM,EAAE;gBACN,KAAK,EAAE,EAAE,UAAU,EAAE,0DAA0D,EAAE;aAClF;SACF;QACD,KAAK,EAAE;YACL,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,uCAAuC;SAChD;KACJ,CAAC;CACL,CAAC,CAAC;AAEH,OAAO,EAAE,+BAA+B,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"expandable-image.d.ts","sourceRoot":"","sources":["../../../src/media/expandable-image.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"expandable-image.d.ts","sourceRoot":"","sources":["../../../src/media/expandable-image.tsx"],"names":[],"mappings":"AAWA,KAAK,oBAAoB,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAMF,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,+BAiDnD;AAED,OAAO,EAAE,eAAe,EAAE,CAAC;AAC3B,YAAY,EAAE,oBAAoB,EAAE,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useId } from "react";
|
|
3
3
|
import { Icon } from "../icons/react/index.js";
|
|
4
|
-
import { frontendClassName } from "../namespace/index.js";
|
|
4
|
+
import { FRONTEND_PREFIX, frontendClassName } from "../namespace/index.js";
|
|
5
5
|
import { sourceLanguageMessage } from "../language/messages.js";
|
|
6
6
|
import { ICON_MEDIA_MAXIMIZE } from "./icons.js";
|
|
7
7
|
import { useGalleryState } from "./gallery-state.js";
|
|
@@ -17,8 +17,11 @@ function ExpandableImage(props) {
|
|
|
17
17
|
const titleId = useId();
|
|
18
18
|
const state = useGalleryState(gallery.length, start);
|
|
19
19
|
const thumbnailAlt = galleryAlt(props.alt, gallery.length, start);
|
|
20
|
+
const ratioStyle = props.ratio
|
|
21
|
+
? { [`--${FRONTEND_PREFIX}-media-expandable-image-ratio`]: props.ratio }
|
|
22
|
+
: undefined;
|
|
20
23
|
const label = sourceLanguageMessage("mediaExpand", lang, { alt: thumbnailAlt });
|
|
21
|
-
return (_jsxs(_Fragment, { children: [_jsxs("button", { "aria-label": label, className: [frontendClassName("expandable-image"), props.className].filter(Boolean).join(" "), onClick: () => state.expand(start), type: "button", children: [_jsx("img", { alt: thumbnailAlt, className: [frontendClassName("expandable-image-img"), props.imageClassName].filter(Boolean).join(" "), loading: "lazy", src: props.src }), _jsx("span", { className: frontendClassName("expandable-image-icon"), children: _jsx(Icon, { spec: ICON_MEDIA_MAXIMIZE }) })] }), state.open && (_jsx(Lightbox, { alt: galleryAlt(props.alt, gallery.length, state.activeIndex), close: state.close, hasNext: state.activeIndex < gallery.length - 1, hasPrevious: state.activeIndex > 0, lang: lang, showNext: state.showNext, showPrevious: state.showPrevious, src: gallery[state.activeIndex] ?? props.src, titleId: titleId, visible: state.visible }))] }));
|
|
24
|
+
return (_jsxs(_Fragment, { children: [_jsxs("button", { "aria-label": label, className: [frontendClassName("expandable-image"), props.className].filter(Boolean).join(" "), onClick: () => state.expand(start), style: ratioStyle, type: "button", children: [_jsx("img", { alt: thumbnailAlt, className: [frontendClassName("expandable-image-img"), props.imageClassName].filter(Boolean).join(" "), loading: "lazy", src: props.src }), _jsx("span", { className: frontendClassName("expandable-image-icon"), children: _jsx(Icon, { spec: ICON_MEDIA_MAXIMIZE }) })] }), state.open && (_jsx(Lightbox, { alt: galleryAlt(props.alt, gallery.length, state.activeIndex), close: state.close, hasNext: state.activeIndex < gallery.length - 1, hasPrevious: state.activeIndex > 0, lang: lang, showNext: state.showNext, showPrevious: state.showPrevious, src: gallery[state.activeIndex] ?? props.src, titleId: titleId, visible: state.visible }))] }));
|
|
22
25
|
}
|
|
23
26
|
export { ExpandableImage };
|
|
24
27
|
//# sourceMappingURL=expandable-image.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"expandable-image.js","sourceRoot":"","sources":["../../../src/media/expandable-image.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"expandable-image.js","sourceRoot":"","sources":["../../../src/media/expandable-image.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component-tokens.d.ts","sourceRoot":"","sources":["../../../../src/config/default/component-tokens.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,kCAAkC
|
|
1
|
+
{"version":3,"file":"component-tokens.d.ts","sourceRoot":"","sources":["../../../../src/config/default/component-tokens.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2YS,CAAC;AAElD,OAAO,EAAE,kCAAkC,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"media-tokens.d.ts","sourceRoot":"","sources":["../../../../src/config/default/media-tokens.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,+BAA+B
|
|
1
|
+
{"version":3,"file":"media-tokens.d.ts","sourceRoot":"","sources":["../../../../src/config/default/media-tokens.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCnC,CAAC;AAEH,OAAO,EAAE,+BAA+B,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"media-tokens.js","sourceRoot":"","sources":["../../../../src/config/default/media-tokens.ts"],"names":[],"mappings":"AAAA,MAAM,+BAA+B,GAAG,MAAM,CAAC,MAAM,CAAC;IAClD,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC;QAC3B,IAAI,EAAE;YACJ,UAAU,EAAE,wBAAwB;YACpC,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,GAAG;YACX,IAAI,EAAE,QAAQ;SACf;KACJ,CAAC;IACF,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC;QACpB,QAAQ,EAAE;YACR,UAAU,EAAE,wBAAwB;YACpC,IAAI,EAAE,KAAK;SACZ;QACD,OAAO,EAAE;YACP,KAAK,EAAE,uBAAuB;YAC9B,QAAQ,EAAE,UAAU;YACpB,UAAU,EAAE,KAAK;SAClB;QACD,OAAO,EAAE;YACP,UAAU,EAAE,wBAAwB;YACpC,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,GAAG;YACX,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,QAAQ;YAClB,MAAM,EAAE;gBACN,KAAK,EAAE,EAAE,UAAU,EAAE,0DAA0D,EAAE;aAClF;SACF;QACD,KAAK,EAAE;YACL,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,uCAAuC;SAChD;KACJ,CAAC;CACL,CAAC,CAAC;AAEH,OAAO,EAAE,+BAA+B,EAAE,CAAC"}
|
|
1
|
+
{"version":3,"file":"media-tokens.js","sourceRoot":"","sources":["../../../../src/config/default/media-tokens.ts"],"names":[],"mappings":"AAAA,MAAM,+BAA+B,GAAG,MAAM,CAAC,MAAM,CAAC;IAClD,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC;QAC3B,KAAK,EAAE,MAAM;QACb,IAAI,EAAE;YACJ,UAAU,EAAE,wBAAwB;YACpC,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,GAAG;YACX,IAAI,EAAE,QAAQ;SACf;KACJ,CAAC;IACF,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC;QACpB,QAAQ,EAAE;YACR,UAAU,EAAE,wBAAwB;YACpC,IAAI,EAAE,KAAK;SACZ;QACD,OAAO,EAAE;YACP,KAAK,EAAE,uBAAuB;YAC9B,QAAQ,EAAE,UAAU;YACpB,UAAU,EAAE,KAAK;SAClB;QACD,OAAO,EAAE;YACP,UAAU,EAAE,wBAAwB;YACpC,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,GAAG;YACX,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,QAAQ;YAClB,MAAM,EAAE;gBACN,KAAK,EAAE,EAAE,UAAU,EAAE,0DAA0D,EAAE;aAClF;SACF;QACD,KAAK,EAAE;YACL,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,uCAAuC;SAChD;KACJ,CAAC;CACL,CAAC,CAAC;AAEH,OAAO,EAAE,+BAA+B,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"expandable-image.d.ts","sourceRoot":"","sources":["../../../src/media/expandable-image.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"expandable-image.d.ts","sourceRoot":"","sources":["../../../src/media/expandable-image.tsx"],"names":[],"mappings":"AAWA,KAAK,oBAAoB,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAMF,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,+BAiDnD;AAED,OAAO,EAAE,eAAe,EAAE,CAAC;AAC3B,YAAY,EAAE,oBAAoB,EAAE,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useId } from "react";
|
|
3
3
|
import { Icon } from "../../icons/react/index.js";
|
|
4
|
-
import { frontendClassName } from "../../namespace/index.js";
|
|
4
|
+
import { FRONTEND_PREFIX, frontendClassName } from "../../namespace/index.js";
|
|
5
5
|
import { sourceLanguageMessage } from "../../language/messages.js";
|
|
6
6
|
import { ICON_MEDIA_MAXIMIZE } from "./icons.js";
|
|
7
7
|
import { useGalleryState } from "./gallery-state.js";
|
|
@@ -17,8 +17,11 @@ function ExpandableImage(props) {
|
|
|
17
17
|
const titleId = useId();
|
|
18
18
|
const state = useGalleryState(gallery.length, start);
|
|
19
19
|
const thumbnailAlt = galleryAlt(props.alt, gallery.length, start);
|
|
20
|
+
const ratioStyle = props.ratio
|
|
21
|
+
? { [`--${FRONTEND_PREFIX}-media-expandable-image-ratio`]: props.ratio }
|
|
22
|
+
: undefined;
|
|
20
23
|
const label = sourceLanguageMessage("mediaExpand", lang, { alt: thumbnailAlt });
|
|
21
|
-
return (_jsxs(_Fragment, { children: [_jsxs("button", { "aria-label": label, className: [frontendClassName("expandable-image"), props.className].filter(Boolean).join(" "), onClick: () => state.expand(start), type: "button", children: [_jsx("img", { alt: thumbnailAlt, className: [frontendClassName("expandable-image-img"), props.imageClassName].filter(Boolean).join(" "), loading: "lazy", src: props.src }), _jsx("span", { className: frontendClassName("expandable-image-icon"), children: _jsx(Icon, { spec: ICON_MEDIA_MAXIMIZE }) })] }), state.open && (_jsx(Lightbox, { alt: galleryAlt(props.alt, gallery.length, state.activeIndex), close: state.close, hasNext: state.activeIndex < gallery.length - 1, hasPrevious: state.activeIndex > 0, lang: lang, showNext: state.showNext, showPrevious: state.showPrevious, src: gallery[state.activeIndex] ?? props.src, titleId: titleId, visible: state.visible }))] }));
|
|
24
|
+
return (_jsxs(_Fragment, { children: [_jsxs("button", { "aria-label": label, className: [frontendClassName("expandable-image"), props.className].filter(Boolean).join(" "), onClick: () => state.expand(start), style: ratioStyle, type: "button", children: [_jsx("img", { alt: thumbnailAlt, className: [frontendClassName("expandable-image-img"), props.imageClassName].filter(Boolean).join(" "), loading: "lazy", src: props.src }), _jsx("span", { className: frontendClassName("expandable-image-icon"), children: _jsx(Icon, { spec: ICON_MEDIA_MAXIMIZE }) })] }), state.open && (_jsx(Lightbox, { alt: galleryAlt(props.alt, gallery.length, state.activeIndex), close: state.close, hasNext: state.activeIndex < gallery.length - 1, hasPrevious: state.activeIndex > 0, lang: lang, showNext: state.showNext, showPrevious: state.showPrevious, src: gallery[state.activeIndex] ?? props.src, titleId: titleId, visible: state.visible }))] }));
|
|
22
25
|
}
|
|
23
26
|
export { ExpandableImage };
|
|
24
27
|
//# sourceMappingURL=expandable-image.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"expandable-image.js","sourceRoot":"","sources":["../../../src/media/expandable-image.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"expandable-image.js","sourceRoot":"","sources":["../../../src/media/expandable-image.tsx"],"names":[],"mappings":"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"}
|
|
@@ -40,7 +40,27 @@
|
|
|
40
40
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
+
&.cols-3 {
|
|
44
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&.cols-4 {
|
|
48
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
49
|
+
}
|
|
50
|
+
|
|
43
51
|
@media (max-width: 900px) {
|
|
44
52
|
grid-template-columns: 1fr;
|
|
53
|
+
|
|
54
|
+
&.cols-3,
|
|
55
|
+
&.cols-4 {
|
|
56
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@media (max-width: 560px) {
|
|
61
|
+
&.cols-3,
|
|
62
|
+
&.cols-4 {
|
|
63
|
+
grid-template-columns: 1fr;
|
|
64
|
+
}
|
|
45
65
|
}
|
|
46
66
|
}
|