add: comic reader page up/down btn

src/client/component/contentinfo.tsx

@@ -90,7 +90,8 @@ export const ContentInfo = (props: {
         <Paper
             sx={{
                 display: "flex",
-                height: "400px",
+                height: props.short ? "400px" : "auto",
+                overflow: "hidden",
                 [theme.breakpoints.down("sm")]: {
                     flexDirection: "column",
                     alignItems: "center",
@@ -128,8 +129,7 @@ export const ContentInfo = (props: {
                                 path={document.basepath + "/" + document.filename}
                                 createdAt={document.created_at}
                                 deletedAt={document.deleted_at != null ? document.deleted_at : undefined}
-                            >
+                            />
-                            </ComicDetailTag>
                         )}
                 </Box>
                 {document.deleted_at != null
@@ -138,9 +138,7 @@ export const ContentInfo = (props: {
                             onClick={() => {
                                 documentDelete(document.id);
                             }}
-                        >
+                        >Delete</Button>
-                            Delete
-                        </Button>
                     )}
             </Box>
         </Paper>

src/client/component/headline.tsx

@@ -198,8 +198,7 @@ export const Headline = (prop: {
                                 }
                             }}
                             value={search}
-                        >
+                        />
-                        </StyledInputBase>
                     </StyledSearchBar>
                     {isLogin
                         ? (
@@ -250,12 +249,10 @@ export const Headline = (prop: {
                     display: "flex",
                     flexFlow: "column",
                     flexGrow: 1,
-                    padding: theme.spacing(3),
+                    padding: "0px",
-                    marginTop: theme.spacing(6),
+                    marginTop: "64px",
                 }}
-            >
+            >{prop.children}
-                <div style={{}}></div>
-                {prop.children}
             </main>
         </div>
     );

src/client/component/pagepad.tsx

@@ -0,0 +1,5 @@
+import { styled } from "@mui/material";
+
+export const PagePad = styled("div")(({theme})=>({
+    padding: theme.spacing(3)
+}))

src/client/page/404.tsx

@@ -2,12 +2,15 @@ import { ArrowBack as ArrowBackIcon } from "@mui/icons-material";
 import { Typography } from "@mui/material";
 import React from "react";
 import { BackItem, CommonMenuList, Headline, NavList } from "../component/mod";
+import { PagePad } from "../component/pagepad";
 
 export const NotFoundPage = () => {
     const menu = CommonMenuList();
     return (
         <Headline menu={menu}>
+            <PagePad>
                 <Typography variant="h2">404 Not Found</Typography>
+            </PagePad>
         </Headline>
     );
 };

src/client/page/contentinfo.tsx

@@ -6,6 +6,7 @@ import { LoadingCircle } from "../component/loading";
 import { CommonMenuList, ContentInfo, Headline } from "../component/mod";
 import { NotFoundPage } from "./404";
 import { getPresenter } from "./reader/reader";
+import { PagePad } from "../component/pagepad";
 
 export const makeContentInfoUrl = (id: number) => `/doc/${id}`;
 export const makeComicReaderUrl = (id: number) => `/doc/${id}/reader`;
@@ -79,7 +80,7 @@ export const DocumentAbout = (prop?: {}) => {
     if (match == null) {
         throw new Error("unreachable");
     }
-    const id = Number.parseInt(match.id);
+    const id = Number.parseInt(match.id ?? "NaN");
     const [info, setInfo] = useState<DocumentState>({ doc: undefined, notfound: false });
     const menu_list = (link?: string) => <CommonMenuList url={link}></CommonMenuList>;
 
@@ -95,25 +96,33 @@ export const DocumentAbout = (prop?: {}) => {
     if (isNaN(id)) {
         return (
             <Headline menu={menu_list()}>
+                <PagePad>
                 <Typography variant="h2">Oops. Invalid ID</Typography>
+                </PagePad>
             </Headline>
         );
     } else if (info.notfound) {
         return (
             <Headline menu={menu_list()}>
+                <PagePad>
                 <Typography variant="h2">Content has been removed.</Typography>
+                </PagePad>
             </Headline>
         );
     } else if (info.doc === undefined) {
         return (
             <Headline menu={menu_list()}>
+                <PagePad>
                 <LoadingCircle />
+                </PagePad>
             </Headline>
         );
     } else {
         return (
             <Headline menu={menu_list()}>
+                <PagePad>
                 <ContentInfo document={info.doc}></ContentInfo>
+                </PagePad>
             </Headline>
         );
     }

src/client/page/difference.tsx

@@ -3,6 +3,7 @@ import { Stack } from "@mui/material";
 import React, { useContext, useEffect, useState } from "react";
 import { CommonMenuList, Headline } from "../component/mod";
 import { UserContext } from "../state";
+import { PagePad } from "../component/pagepad";
 
 const useStyles = (theme: Theme) => ({
     paper: {
@@ -127,6 +128,7 @@ export function DifferencePage() {
     const menu = CommonMenuList();
     return (
         <Headline menu={menu}>
+            <PagePad>
             {(ctx.username == "admin")
                 ? (
                     <div>
@@ -136,6 +138,7 @@ export function DifferencePage() {
                     </div>
                 )
                 : <Typography variant="h2">Not Allowed : please login as an admin</Typography>}
+            </PagePad>
         </Headline>
     );
 }

src/client/page/gallery.tsx

@@ -8,6 +8,7 @@ import { toQueryString } from "../accessor/util";
 import { useLocation } from "react-router-dom";
 import { QueryStringToMap } from "../accessor/util";
 import { useIsElementInViewport } from "./reader/reader";
+import { PagePad } from "../component/pagepad";
 
 export type GalleryProp = {
     option?: QueryListOption;
@@ -70,8 +71,7 @@ export const GalleryInfo = (props: GalleryProp) => {
                         )}
                         {props.option.allow_tag !== undefined
                             && props.option.allow_tag.map(x => (
-                                <TagChip key={x} tagname={decodeURIComponent(x)} label={decodeURIComponent(x)}>
+                                <TagChip key={x} tagname={decodeURIComponent(x)} label={decodeURIComponent(x)}/>
-                                </TagChip>
                             ))}
                     </Box>
                 )}
@@ -126,7 +126,9 @@ export const Gallery = () => {
     option.limit = typeof query["limit"] === "string" ? parseInt(query["limit"]) : undefined;
     return (
         <Headline menu={menu_list}>
+            <PagePad>
             <GalleryInfo diff={location.search} option={query}></GalleryInfo>
+            </PagePad>
         </Headline>
     );
 };

src/client/page/login.tsx

@@ -16,6 +16,7 @@ import { useNavigate } from "react-router-dom";
 import { CommonMenuList, Headline } from "../component/mod";
 import { UserContext } from "../state";
 import { doLogin as doSessionLogin } from "../state";
+import { PagePad } from "../component/pagepad";
 
 export const LoginPage = () => {
     const theme = useTheme();
@@ -48,6 +49,7 @@ export const LoginPage = () => {
     const menu = CommonMenuList();
     return (
         <Headline menu={menu}>
+            <PagePad>
                 <Paper style={{ width: theme.spacing(40), padding: theme.spacing(4), alignSelf: "center" }}>
                     <Typography variant="h4">Login</Typography>
                     <div style={{ minHeight: theme.spacing(2) }}></div>
@@ -81,6 +83,7 @@ export const LoginPage = () => {
                         <Button onClick={handleDialogClose} color="primary" autoFocus>Close</Button>
                     </DialogActions>
                 </Dialog>
+            </PagePad>
         </Headline>
     );
 };

src/client/page/profile.tsx

@@ -16,6 +16,7 @@ import {
 import React, { useContext, useState } from "react";
 import { CommonMenuList, Headline } from "../component/mod";
 import { UserContext } from "../state";
+import { PagePad } from "../component/pagepad";
 
 const useStyles = (theme: Theme) => ({
     paper: {
@@ -77,6 +78,8 @@ export function ProfilePage() {
     };
     return (
         <Headline menu={menu}>
+            <PagePad>
+
                 <Paper /*className={classes.paper}*/>
                     <Grid container direction="column" alignItems="center">
                         <Grid item>
@@ -142,6 +145,7 @@ export function ProfilePage() {
                         <Button onClick={() => set_msg_dialog({ opened: false, msg: "" })} color="primary">Close</Button>
                     </DialogActions>
                 </Dialog>
+            </PagePad>
         </Headline>
     );
 }

src/client/page/reader/comic.tsx

@@ -1,4 +1,4 @@
-import { Typography, useTheme } from "@mui/material";
+import { Typography, styled } from "@mui/material";
 import React, { useEffect, useState } from "react";
 import { Document } from "../../accessor/document";
 
@@ -13,6 +13,21 @@ export type PresentableTag = {
     tags: string[];
 };
 
+const ViewMain = styled("div")(({ theme }) => ({
+    overflow: "hidden",
+    width: "100%",
+    height: "calc(100vh - 64px)",
+    position: "relative",
+}));
+const CurrentView = styled("img")(({theme})=>({
+    maxWidth: "100%", 
+    maxHeight: "100%", 
+    top:"50%", 
+    left:"50%",
+    transform: "translate(-50%,-50%)",
+    position: "absolute"
+})); 
+
 export const ComicReader = (props: { doc: Document }) => {
     const additional = props.doc.additional;
     const [curPage, setCurPage] = useState(0);
@@ -21,13 +36,13 @@ export const ComicReader = (props: { doc: Document }) => {
         return <Typography>Error. DB error. page restriction</Typography>;
     }
     const PageDown = () => setCurPage(Math.max(curPage - 1, 0));
-    const PageUP = () => setCurPage(Math.min(curPage + 1, page - 1));
+    const PageUp = () => setCurPage(Math.min(curPage + 1, page - 1));
     const page: number = additional["page"] as number;
     const onKeyUp = (e: KeyboardEvent) => {
         if (e.code === "ArrowLeft") {
             PageDown();
         } else if (e.code === "ArrowRight") {
-            PageUP();
+            PageUp();
         }
     };
     useEffect(() => {
@@ -38,14 +53,14 @@ export const ComicReader = (props: { doc: Document }) => {
     });
     // theme.mixins.toolbar.minHeight;
     return (
-        <div style={{ overflow: "hidden", alignSelf: "center" }}>
+        <ViewMain>
-            <img
+            <div onClick={PageDown} style={{left:"0", width: "50%", position:"absolute", height: "100%", zIndex:100}}></div>
-                onClick={PageUP}
+            <CurrentView
+                onClick={PageUp}
                 src={`/api/doc/${props.doc.id}/comic/${curPage}`}
-                style={{ maxWidth: "100%", maxHeight: "calc(100vh - 64px)" }}
+            ></CurrentView>
-            >
+            <div onClick={PageUp} style={{right:"0", width: "50%", position:"absolute", height: "100%", zIndex:100}}></div>
-            </img>
+        </ViewMain>
-        </div>
     );
 };
 

src/client/page/setting.tsx

@@ -2,14 +2,17 @@ import { ArrowBack as ArrowBackIcon } from "@mui/icons-material";
 import { Paper, Typography } from "@mui/material";
 import React from "react";
 import { BackItem, CommonMenuList, Headline, NavList } from "../component/mod";
+import { PagePad } from "../component/pagepad";
 
 export const SettingPage = () => {
     const menu = CommonMenuList();
     return (
         <Headline menu={menu}>
+            <PagePad>
                 <Paper>
                     <Typography variant="h2">Setting</Typography>
                 </Paper>
+            </PagePad>
         </Headline>
     );
 };

src/client/page/tags.tsx

@@ -3,6 +3,7 @@ import { DataGrid, GridColDef } from "@mui/x-data-grid";
 import React, { useEffect, useState } from "react";
 import { LoadingCircle } from "../component/loading";
 import { CommonMenuList, Headline } from "../component/mod";
+import { PagePad } from "../component/pagepad";
 
 type TagCount = {
     tag_name: string;
@@ -67,7 +68,9 @@ export const TagsPage = () => {
     const menu = CommonMenuList();
     return (
         <Headline menu={menu}>
+            <PagePad>
                 <TagTable></TagTable>
+            </PagePad>
         </Headline>
     );
 };