godzhigella/void.cat
1
0
Fork 0
forked from Kieran/void.cat
Code Pull Requests Activity

Adjust styles

Browse Source
This commit is contained in:
Kieran 2023-06-09 01:49:58 +02:00
parent 583c66a00a
commit 5f4b43b189
Signed by: Kieran
GPG Key ID: DE71CEB3925BE941
3 changed files with 8 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
VoidCat/spa/src/app/src/Components/Shared/ImageGrid.css
View File

@ -4,7 +4,7 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.image-grid > div { .image-grid > a {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;

10
VoidCat/spa/src/app/src/Components/Shared/ImageGrid.tsx
View File

@ -2,17 +2,17 @@ import "./ImageGrid.css";
import {ApiError, PagedRequest, PagedResponse, PagedSortBy, PageSortOrder, VoidFileResponse} from "@void-cat/api"; import {ApiError, PagedRequest, PagedResponse, PagedSortBy, PageSortOrder, VoidFileResponse} from "@void-cat/api";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import {Link} from "react-router-dom";
import {useDispatch} from "react-redux"; import {useDispatch} from "react-redux";
import {logout} from "../../LoginState"; import {logout} from "../../LoginState";
import {PageSelector} from "./PageSelector"; import {PageSelector} from "./PageSelector";
import {useNavigate} from "react-router-dom";
interface ImageGridProps { interface ImageGridProps {
loadPage: (req: PagedRequest) => Promise<PagedResponse<any>> loadPage: (req: PagedRequest) => Promise<PagedResponse<any>>
} }
export default function ImageGrid(props: ImageGridProps) { export default function ImageGrid(props: ImageGridProps) {
const navigate = useNavigate();
const loadPage = props.loadPage; const loadPage = props.loadPage;
const dispatch = useDispatch(); const dispatch = useDispatch();
const [files, setFiles] = useState<PagedResponse<VoidFileResponse>>(); const [files, setFiles] = useState<PagedResponse<VoidFileResponse>>();
@ -69,7 +69,7 @@ export default function ImageGrid(props: ImageGridProps) {
case "audio/midi": case "audio/midi":
case "audio/mpeg": case "audio/mpeg":
case "audio/ogg": { case "audio/ogg": {
return <audio src={link} controls/>; return <audio src={link}/>;
} }
case "video/x-msvideo": case "video/x-msvideo":
case "video/mpeg": case "video/mpeg":
@ -95,9 +95,9 @@ export default function ImageGrid(props: ImageGridProps) {
return <> return <>
<div className="image-grid"> <div className="image-grid">
{files?.results.map(v => <div key={v.id} onClick={() => navigate(`/${v.id}`)}> {files?.results.map(v => <Link key={v.id} to={`/${v.id}`}>
{renderPreview(v)} {renderPreview(v)}
</div>)} </Link>)}
</div> </div>
<PageSelector onSelectPage={(x) => setPage(x)} page={page} total={files?.totalResults ?? 0} <PageSelector onSelectPage={(x) => setPage(x)} page={page} total={files?.totalResults ?? 0}
pageSize={pageSize}/> pageSize={pageSize}/>

6
VoidCat/spa/src/app/src/Pages/FilePreview.css
View File

@ -2,11 +2,9 @@
margin-top: 2vh; margin-top: 2vh;
} }
.preview img, .preview video, .preview object { .preview img, .preview video, .preview object, .preview audio {
width: 100%; width: 100%;
} max-height: 100vh;
.preview object {
height: 1018px;
} }
.preview .file-stats { .preview .file-stats {