src/client/component/contentinfo.tsx

@@ -90,8 +90,7 @@ export const ContentInfo = (props: {
         <Paper
             sx={{
                 display: "flex",
-                height: props.short ? "400px" : "auto",
-                overflow: "hidden",
+                height: "400px",
                 [theme.breakpoints.down("sm")]: {
                     flexDirection: "column",
                     alignItems: "center",
@@ -129,7 +128,8 @@ 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,7 +138,9 @@ export const ContentInfo = (props: {
                             onClick={() => {
                                 documentDelete(document.id);
                             }}
-                        >Delete</Button>
+                        >
+                            Delete
+                        </Button>
                     )}
             </Box>
         </Paper>

src/client/component/headline.tsx

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

src/client/component/pagepad.tsx

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

src/client/page/404.tsx

@@ -2,15 +2,12 @@ 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,7 +6,6 @@ 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`;
@@ -80,7 +79,7 @@ export const DocumentAbout = (prop?: {}) => {
     if (match == null) {
         throw new Error("unreachable");
     }
-    const id = Number.parseInt(match.id ?? "NaN");
+    const id = Number.parseInt(match.id);
     const [info, setInfo] = useState<DocumentState>({ doc: undefined, notfound: false });
     const menu_list = (link?: string) => <CommonMenuList url={link}></CommonMenuList>;
 
@@ -96,33 +95,25 @@ 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,7 +3,6 @@ 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: {
@@ -128,7 +127,6 @@ export function DifferencePage() {
     const menu = CommonMenuList();
     return (
         <Headline menu={menu}>
-            <PagePad>
             {(ctx.username == "admin")
                 ? (
                     <div>
@@ -138,7 +136,6 @@ export function DifferencePage() {
                     </div>
                 )
                 : <Typography variant="h2">Not Allowed : please login as an admin</Typography>}
-            </PagePad>
         </Headline>
     );
 }

src/client/page/gallery.tsx

@@ -8,7 +8,6 @@ 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;
@@ -71,7 +70,8 @@ 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,9 +126,7 @@ 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,7 +16,6 @@ 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();
@@ -49,7 +48,6 @@ 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>
@@ -83,7 +81,6 @@ export const LoginPage = () => {
                     <Button onClick={handleDialogClose} color="primary" autoFocus>Close</Button>
                 </DialogActions>
             </Dialog>
-            </PagePad>
         </Headline>
     );
 };

src/client/page/profile.tsx

@@ -16,7 +16,6 @@ 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: {
@@ -78,8 +77,6 @@ export function ProfilePage() {
     };
     return (
         <Headline menu={menu}>
-            <PagePad>
-
             <Paper /*className={classes.paper}*/>
                 <Grid container direction="column" alignItems="center">
                     <Grid item>
@@ -145,7 +142,6 @@ 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, styled } from "@mui/material";
+import { Typography, useTheme } from "@mui/material";
 import React, { useEffect, useState } from "react";
 import { Document } from "../../accessor/document";
 
@@ -13,21 +13,6 @@ 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);
@@ -36,13 +21,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(() => {
@@ -53,14 +38,14 @@ export const ComicReader = (props: { doc: Document }) => {
     });
     // theme.mixins.toolbar.minHeight;
     return (
-        <ViewMain>
-            <div onClick={PageDown} style={{left:"0", width: "50%", position:"absolute", height: "100%", zIndex:100}}></div>
-            <CurrentView
-                onClick={PageUp}
+        <div style={{ overflow: "hidden", alignSelf: "center" }}>
+            <img
+                onClick={PageUP}
                 src={`/api/doc/${props.doc.id}/comic/${curPage}`}
-            ></CurrentView>
-            <div onClick={PageUp} style={{right:"0", width: "50%", position:"absolute", height: "100%", zIndex:100}}></div>
-        </ViewMain>
+                style={{ maxWidth: "100%", maxHeight: "calc(100vh - 64px)" }}
+            >
+            </img>
+        </div>
     );
 };
 

src/client/page/setting.tsx

@@ -2,17 +2,14 @@ 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,7 +3,6 @@ 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;
@@ -68,9 +67,7 @@ export const TagsPage = () => {
     const menu = CommonMenuList();
     return (
         <Headline menu={menu}>
-            <PagePad>
             <TagTable></TagTable>
-            </PagePad>
         </Headline>
     );
 };