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 ( return (
<A href={`/image/${props.ID}`} class="w-full h-full"> <A href={`/image/${props.ID}`} class="w-full h-full">
<img <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}`} src={`${base}/image/${props.ID}`}
/> />
</A> </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 type { UserImage } from "../../network";
import { Show, type Component } from "solid-js"; import { Show, type Component } from "solid-js";
import SolidjsMarkdown from "solidjs-markdown"; import SolidjsMarkdown from "solidjs-markdown";
type Props = { type Props = {
item: UserImage; item: UserImage;
onClose: () => void;
}; };
const NullableParagraph: Component<{ 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) { switch (props.item.type) {
case "note": case "note":
return ( return (
@ -77,16 +75,8 @@ export const ConcreteItemModal: Component<Pick<Props, "item">> = (props) => {
export const ItemModal: Component<Props> = (props) => { export const ItemModal: Component<Props> = (props) => {
return ( return (
<div class="fixed z-10 inset-2 rounded-2xl p-4 bg-white border border-neutral-300"> <div class="rounded-2xl p-4 bg-white border border-neutral-300 flex flex-col gap-2 mb-2">
<div class="flex justify-between"> <ConcreteItemModal item={props.item} />
<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> </div>
); );
}; };

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

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