JohnCosta27/Haystack
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix: entity page looking bussin

Browse Source 
whoops
This commit is contained in:
John Costa
2025-07-21 14:09:09 +01:00
parent ad4967a97d
commit 5d0fa51e01
3 changed files with 11 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/image/index.tsx
View File

@ -6,7 +6,7 @@ export const ImageComponent: Component<{ ID: string }> = (props) => {
return (
<A href={`/image/${props.ID}`} class="w-full h-full">
<img
class="w-full object-contain rounded-xl max-h-[400px]"
class="w-full object-contain rounded-xl max-w-[700px] max-h-[400px]"
src={`${base}/image/${props.ID}`}
/>
</A>

16
frontend/src/components/item-modal/ItemModal.tsx
View File

@ -1,11 +1,9 @@
import { IconX } from "@tabler/icons-solidjs";
import type { UserImage } from "../../network";
import { Show, type Component } from "solid-js";
import SolidjsMarkdown from "solidjs-markdown";
type Props = {
item: UserImage;
onClose: () => void;
};
const NullableParagraph: Component<{
@ -24,7 +22,7 @@ const NullableParagraph: Component<{
);
};
export const ConcreteItemModal: Component<Pick<Props, "item">> = (props) => {
const ConcreteItemModal: Component<Props> = (props) => {
switch (props.item.type) {
case "note":
return (
@ -77,16 +75,8 @@ export const ConcreteItemModal: Component<Pick<Props, "item">> = (props) => {
export const ItemModal: Component<Props> = (props) => {
return (
<div class="fixed z-10 inset-2 rounded-2xl p-4 bg-white border border-neutral-300">
<div class="flex justify-between">
<h1 class="text-2xl font-bold">{props.item.data.Name}</h1>
<button type="button" onClick={props.onClose}>
<IconX size={24} class="text-neutral-500" />
</button>
</div>
<div class="flex flex-col gap-2 mb-2">
<ConcreteItemModal item={props.item} />
</div>
<div class="rounded-2xl p-4 bg-white border border-neutral-300 flex flex-col gap-2 mb-2">
<ConcreteItemModal item={props.item} />
</div>
);
};

12
frontend/src/pages/entity/index.tsx
View File

@ -1,5 +1,5 @@
import { ImageComponent } from "@components/image";
import { ConcreteItemModal } from "@components/item-modal/ItemModal";
import { ItemModal } from "@components/item-modal/ItemModal";
import { useSearchImageContext } from "@contexts/SearchImageContext";
import { useParams } from "@solidjs/router";
import { Component, For, Show } from "solid-js";
@ -19,10 +19,12 @@ export const Entity: Component = () => {
>
{(e) => (
<div>
<ConcreteItemModal item={e()} />
<For each={e().data.Images}>
{(imageId) => <ImageComponent ID={imageId} />}
</For>
<ItemModal item={e()} />
<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-4">
<For each={e().data.Images}>
{(imageId) => <ImageComponent ID={imageId} />}
</For>
</div>
</div>
)}
</Show>