nyne/nysoure
1
0
Fork 0
mirror of https://github.com/wgh136/nysoure.git synced 2025-12-16 07:51:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve UI

Browse Source
This commit is contained in:
nyne
2025-11-12 21:51:58 +08:00
parent 8e2f326532
commit 05777ddb7f
2 changed files with 31 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/pages/about_page.tsx
View File

@@ -26,13 +26,13 @@ export default function AboutPage() {
return (
<a
className={
"inline-block card card-border border-base-300 no-underline bg-base-200 hover:shadow transition-shadow"
"inline-block card card-border border-base-200 no-underline bg-base-100 shadow-xs hover:shadow-sm transition-shadow mr-1 sm:mr-2 mb-2 w-52 sm:w-64"
}
target={"_blank"}
href={href}
>
<figure className={"max-h-60 max-w-80"}>{img}</figure>
<div className={"card-body text-base-content text-lg"}>
<figure className={"max-h-60 w-full"}>{img}</figure>
<div className={"text-base-content text-lg p-4"}>
{second}
</div>
</a>

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

@@ -1926,6 +1926,27 @@ function Gallery({ images, nsfw }: { images: number[], nsfw: number[] }) {
}
return (
<>
<dialog
id="fullscreen_image_dialog"
onClick={() => {
const dialog = document.getElementById("fullscreen_image_dialog") as HTMLDialogElement;
dialog.close();
}}
className="modal"
>
<div className="modal-box max-w-7xl w-full h-full max-h-screen p-4 bg-transparent shadow-none flex items-center justify-center">
<motion.img
src={network.getImageUrl(images[currentIndex])}
alt=""
className="max-w-full max-h-full object-contain rounded-xl"
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.8 }}
transition={{ duration: 0.2 }}
/>
</div>
</dialog>
<div
className="relative w-full overflow-hidden rounded-xl bg-base-100-tr82 shadow-sm"
style={{ aspectRatio: "16/9" }}
@@ -1933,7 +1954,10 @@ function Gallery({ images, nsfw }: { images: number[], nsfw: number[] }) {
onMouseLeave={() => setIsHovered(false)}
>
{/* 图片区域 */}
<div ref={containerRef} className="w-full h-full relative">
<div ref={containerRef} className="w-full h-full relative" onClick={() => {
const dialog = document.getElementById("fullscreen_image_dialog") as HTMLDialogElement;
dialog.showModal();
}}>
{width > 0 && (
<AnimatePresence initial={false} custom={direction} mode="sync">
<motion.div
@@ -2006,6 +2030,7 @@ function Gallery({ images, nsfw }: { images: number[], nsfw: number[] }) {
</div>
)}
</div>
</>
);
}
@@ -2021,8 +2046,9 @@ function GalleryImage({src, nfsw}: {src: string, nfsw: boolean}) {
/>
{!show && (
<>
<div className="absolute inset-0 bg-base-content/20 cursor-pointer" onClick={() => {
<div className="absolute inset-0 bg-base-content/20 cursor-pointer" onClick={(event) => {
setShow(true)
event.stopPropagation();
}} />
<div className="absolute top-4 left-4">
<Badge className="badge-error shadow-lg">