nyne/nysoure
1
0
Fork 0
mirror of https://github.com/wgh136/nysoure.git synced 2025-09-27 12:17:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve the UI of resource details page.

Browse Source
This commit is contained in:
nyne
2025-06-19 10:57:30 +08:00
parent 190fcc23a3
commit 87782e8d3c
1 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/pages/resource_details_page.tsx
View File

@@ -25,7 +25,6 @@ import Loading from "../components/loading.tsx";
import {
MdAdd,
MdArrowDownward,
MdArrowRight,
MdArrowUpward,
MdOutlineArticle,
MdOutlineComment,
@@ -33,6 +32,7 @@ import {
MdOutlineDelete,
MdOutlineDownload,
MdOutlineEdit,
MdOutlineOpenInNew,
} from "react-icons/md";
import { app } from "../app.ts";
import { uploadingManager } from "../network/uploading.ts";
@@ -441,7 +441,7 @@ function Article({ resource }: { resource: ResourceDetails }) {
<div className={"flex items-center"}>
<span className={"flex-1"}>{second}</span>
<span>
<MdArrowRight size={24} />
<MdOutlineOpenInNew size={24} />
</span>
</div>
</div>
@@ -484,28 +484,41 @@ function Article({ resource }: { resource: ResourceDetails }) {
const id = path.substring("/resources/".length);
for (const r of resource.related ?? []) {
if (r.id.toString() === id) {
const imgHeight =
r.image && r.image.width > r.image.height ? 320 : 420;
const imgWidth = r.image
? (r.image.width / r.image.height) * imgHeight
: undefined;
return (
<span className={"inline-flex max-w-full"}>
<span
<a
href={"/resources/" + r.id}
className={
"mr-2 mb-2 max-w-full cursor-pointer inline-flex min-w-0 flex-col h-80 bg-base-100 shadow hover:shadow-md transition-shadow rounded-xl no-underline"
"mr-2 mb-2 max-w-full cursor-pointer inline-flex min-w-0 flex-col bg-base-100 shadow hover:shadow-md transition-shadow rounded-xl no-underline"
}
onClick={() => {
navigate(`/resources/${r.id}`, { replace: true });
onClick={(e) => {
e.preventDefault();
navigate(`/resources/${r.id}`);
}}
>
{r.image && (
<img
style={{
aspectRatio: r.image.width / r.image.height,
maxHeight: "100%",
width: imgWidth,
height: imgHeight,
}}
className={"h-full min-h-0 object-cover min-w-0"}
alt={"cover"}
src={network.getImageUrl(r.image?.id)}
/>
)}
<span className={"inline-flex flex-col p-4"}>
<span
className={"inline-flex flex-col p-4"}
style={{
width: imgWidth,
}}
>
<span
style={{
maxWidth: "100%",
@@ -529,7 +542,7 @@ function Article({ resource }: { resource: ResourceDetails }) {
{content}
</span>
</span>
</span>
</a>
</span>
);
}