nyne/nysoure
1
0
Fork 0
mirror of https://github.com/wgh136/nysoure.git synced 2025-09-27 04:17:23 +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 { import {
MdAdd, MdAdd,
MdArrowDownward, MdArrowDownward,
MdArrowRight,
MdArrowUpward, MdArrowUpward,
MdOutlineArticle, MdOutlineArticle,
MdOutlineComment, MdOutlineComment,
@@ -33,6 +32,7 @@ import {
MdOutlineDelete, MdOutlineDelete,
MdOutlineDownload, MdOutlineDownload,
MdOutlineEdit, MdOutlineEdit,
MdOutlineOpenInNew,
} from "react-icons/md"; } from "react-icons/md";
import { app } from "../app.ts"; import { app } from "../app.ts";
import { uploadingManager } from "../network/uploading.ts"; import { uploadingManager } from "../network/uploading.ts";
@@ -441,7 +441,7 @@ function Article({ resource }: { resource: ResourceDetails }) {
<div className={"flex items-center"}> <div className={"flex items-center"}>
<span className={"flex-1"}>{second}</span> <span className={"flex-1"}>{second}</span>
<span> <span>
<MdArrowRight size={24} /> <MdOutlineOpenInNew size={24} />
</span> </span>
</div> </div>
</div> </div>
@@ -484,28 +484,41 @@ function Article({ resource }: { resource: ResourceDetails }) {
const id = path.substring("/resources/".length); const id = path.substring("/resources/".length);
for (const r of resource.related ?? []) { for (const r of resource.related ?? []) {
if (r.id.toString() === id) { 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 ( return (
<span className={"inline-flex max-w-full"}> <span className={"inline-flex max-w-full"}>
<span <a
href={"/resources/" + r.id}
className={ 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={() => { onClick={(e) => {
navigate(`/resources/${r.id}`, { replace: true }); e.preventDefault();
navigate(`/resources/${r.id}`);
}} }}
> >
{r.image && ( {r.image && (
<img <img
style={{ style={{
aspectRatio: r.image.width / r.image.height, width: imgWidth,
maxHeight: "100%", height: imgHeight,
}} }}
className={"h-full min-h-0 object-cover min-w-0"} className={"h-full min-h-0 object-cover min-w-0"}
alt={"cover"} alt={"cover"}
src={network.getImageUrl(r.image?.id)} 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 <span
style={{ style={{
maxWidth: "100%", maxWidth: "100%",
@@ -529,7 +542,7 @@ function Article({ resource }: { resource: ResourceDetails }) {
{content} {content}
</span> </span>
</span> </span>
</span> </a>
</span> </span>
); );
} }