Page MenuHomeSealhub
Files F10360965

No OneTemporary
Actions

View Options

diff --git a/src/back/routes/common/show-first-row/show-first-row.css b/src/back/routes/common/show-first-row/show-first-row.css
index 40da3ab..d82206c 100644
--- a/src/back/routes/common/show-first-row/show-first-row.css
+++ b/src/back/routes/common/show-first-row/show-first-row.css
@@ -1,30 +1,44 @@
.show-first-row {
container-type: inline-size;
text-align: center;
.show-first-row__items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
justify-content: center;
gap: var(--column-gap);
transition: row-gap 200ms, overflow 200ms;
overflow: hidden;
input:not(:checked) + & {
grid-template-rows: 1fr repeat(calc(var(--items-count) - 1), 0px);
row-gap: 0;
}
}
.show-first-row__default-button {
background: blue;
color: white;
height: 40px;
display: inline-block;
padding: 0 20px;
line-height: 40px;
cursor: pointer;
margin: 0 auto;
margin-top: 20px;
}
+
+ .show-first-row__show-less-button {
+ display: none;
+ }
+
+ &:has(input:checked) {
+ .show-first-row__show-less-button {
+ display: block;
+ }
+
+ .show-first-row__show-more-button {
+ display: none;
+ }
+ }
}
diff --git a/src/back/routes/common/show-first-row/show-first-row.tsx b/src/back/routes/common/show-first-row/show-first-row.tsx
index cccee3d..616d486 100644
--- a/src/back/routes/common/show-first-row/show-first-row.tsx
+++ b/src/back/routes/common/show-first-row/show-first-row.tsx
@@ -1,71 +1,89 @@
import { TempstreamJSX } from "tempstream";
import type { FlatTemplatable } from "tempstream";
const showFirstRowIds = (function* () {
let i = 0;
while (true) {
yield i++;
if (i == 999999999) {
i = 0;
}
}
})();
export async function showFirstRow({
items,
min_column_width_px = 250,
column_gap_px = 10,
make_show_more_button = () => (
<span class="show-first-row__default-button">Show more</span>
),
- add_button_to_content = (content, button) => (
+ make_show_less_button = () => (
+ <span class="show-first-row__default-button">Show less</span>
+ ),
+ add_button_to_content = (content, show_more_button, show_less_button) => (
<>
{content}
- {button}
+ {show_more_button}
+ {show_less_button}
</>
),
}: {
items: FlatTemplatable[];
min_column_width_px?: number;
make_show_more_button?: () => JSX.Element;
+ make_show_less_button?: () => JSX.Element;
column_gap_px?: number;
- add_button_to_content?: (content: JSX.Element, button: JSX.Element) => JSX.Element;
+ add_button_to_content?: (
+ content: JSX.Element,
+ show_more_button: JSX.Element,
+ show_less_button: JSX.Element
+ ) => JSX.Element;
}): Promise<string> {
const id = showFirstRowIds.next().value;
const checkbox_id = "show-first-row__checkbox--" + id;
return (
<div
class={[
"show-first-row",
`show-first-row--id-${id}`,
`show-first-row--items-count-${items.length}`,
]}
style={`--min-column-width: ${min_column_width_px}px; --items-count: ${items.length}; --column-gap: ${column_gap_px}px`}
>
{
/* HTML */ `<style>
${[1, 2, 3, 4, 5, 6, 7, 8, 9]
.reverse()
.map(
(n) => `@container (min-width: ${
n * min_column_width_px + (n - 1) * column_gap_px
}px) {
.show-first-row--id-${id}:not(:has(.show-first-row__items > *:nth-child(${n + 1})))
.show-first-row__button {
display: none;
}
}`
)
.join("\n")}
</style>`
}
<input type="checkbox" id={checkbox_id} style="display: none" />
{add_button_to_content(
<div class={["show-first-row__items"]}>{items}</div>,
- <label for={checkbox_id} class={["show-first-row__button"]}>
+ <label
+ for={checkbox_id}
+ class={["show-first-row__button", "show-first-row__show-more-button"]}
+ >
{make_show_more_button()}
+ </label>,
+ <label
+ for={checkbox_id}
+ class={["show-first-row__button", "show-first-row__show-less-button"]}
+ >
+ {make_show_less_button()}
</label>
)}
</div>
);
}

File Metadata

Mime Type
text/x-diff
Expires
Sat, Nov 8, 10:17 (1 d, 5 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1033394
Default Alt Text
(3 KB)

Event Timeline