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>
+            <Typography variant="h2">404 Not Found</Typography>
         </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,41 +48,39 @@ 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>
+            <Paper style={{ width: theme.spacing(40), padding: theme.spacing(4), alignSelf: "center" }}>
+                <Typography variant="h4">Login</Typography>
+                <div style={{ minHeight: theme.spacing(2) }}></div>
+                <form style={{ display: "flex", flexFlow: "column", alignItems: "stretch" }}>
+                    <TextField
+                        label="username"
+                        onChange={(e) => setUserLoginInfo({ ...userLoginInfo, username: e.target.value ?? "" })}
+                    >
+                    </TextField>
+                    <TextField
+                        label="password"
+                        type="password"
+                        onKeyDown={(e) => {
+                            if (e.key === "Enter") doLogin();
+                        }}
+                        onChange={(e) => setUserLoginInfo({ ...userLoginInfo, password: e.target.value ?? "" })}
+                    />
                     <div style={{ minHeight: theme.spacing(2) }}></div>
-                    <form style={{ display: "flex", flexFlow: "column", alignItems: "stretch" }}>
-                        <TextField
-                            label="username"
-                            onChange={(e) => setUserLoginInfo({ ...userLoginInfo, username: e.target.value ?? "" })}
-                        >
-                        </TextField>
-                        <TextField
-                            label="password"
-                            type="password"
-                            onKeyDown={(e) => {
-                                if (e.key === "Enter") doLogin();
-                            }}
-                            onChange={(e) => setUserLoginInfo({ ...userLoginInfo, password: e.target.value ?? "" })}
-                        />
-                        <div style={{ minHeight: theme.spacing(2) }}></div>
-                        <div style={{ display: "flex" }}>
-                            <Button onClick={doLogin}>login</Button>
-                            <Button>signin</Button>
-                        </div>
-                    </form>
-                </Paper>
-                <Dialog open={openDialog.open} onClose={handleDialogClose}>
-                    <DialogTitle>Login Failed</DialogTitle>
-                    <DialogContent>
-                        <DialogContentText>detail : {openDialog.message}</DialogContentText>
-                    </DialogContent>
-                    <DialogActions>
-                        <Button onClick={handleDialogClose} color="primary" autoFocus>Close</Button>
-                    </DialogActions>
-                </Dialog>
-            </PagePad>
+                    <div style={{ display: "flex" }}>
+                        <Button onClick={doLogin}>login</Button>
+                        <Button>signin</Button>
+                    </div>
+                </form>
+            </Paper>
+            <Dialog open={openDialog.open} onClose={handleDialogClose}>
+                <DialogTitle>Login Failed</DialogTitle>
+                <DialogContent>
+                    <DialogContentText>detail : {openDialog.message}</DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={handleDialogClose} color="primary" autoFocus>Close</Button>
+                </DialogActions>
+            </Dialog>
         </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,74 +77,71 @@ export function ProfilePage() {
     };
     return (
         <Headline menu={menu}>
-            <PagePad>
-
-                <Paper /*className={classes.paper}*/>
-                    <Grid container direction="column" alignItems="center">
-                        <Grid item>
-                            <Typography variant="h4">{userctx.username}</Typography>
-                        </Grid>
-                        <Divider></Divider>
-                        <Grid item>
-                            Permission
-                        </Grid>
-                        <Grid item>
-                            {permission_list.length == 0 ? "-" : permission_list}
-                        </Grid>
-                        <Grid item>
-                            <Button onClick={handle_open}>Password Reset</Button>
-                        </Grid>
+            <Paper /*className={classes.paper}*/>
+                <Grid container direction="column" alignItems="center">
+                    <Grid item>
+                        <Typography variant="h4">{userctx.username}</Typography>
                     </Grid>
-                </Paper>
-                <Dialog open={pw_open} onClose={handle_close}>
-                    <DialogTitle>Password Reset</DialogTitle>
-                    <DialogContent>
-                        <Typography>type the old and new password</Typography>
-                        <div /*className={classes.formfield}*/>
-                            {(!isElectronContent) && (
-                                <TextField
-                                    autoFocus
-                                    margin="dense"
-                                    type="password"
-                                    label="old password"
-                                    value={oldpw}
-                                    onChange={(e) => setOldpw(e.target.value)}
-                                >
-                                </TextField>
-                            )}
+                    <Divider></Divider>
+                    <Grid item>
+                        Permission
+                    </Grid>
+                    <Grid item>
+                        {permission_list.length == 0 ? "-" : permission_list}
+                    </Grid>
+                    <Grid item>
+                        <Button onClick={handle_open}>Password Reset</Button>
+                    </Grid>
+                </Grid>
+            </Paper>
+            <Dialog open={pw_open} onClose={handle_close}>
+                <DialogTitle>Password Reset</DialogTitle>
+                <DialogContent>
+                    <Typography>type the old and new password</Typography>
+                    <div /*className={classes.formfield}*/>
+                        {(!isElectronContent) && (
                             <TextField
+                                autoFocus
                                 margin="dense"
                                 type="password"
-                                label="new password"
-                                value={newpw}
-                                onChange={e => setNewpw(e.target.value)}
+                                label="old password"
+                                value={oldpw}
+                                onChange={(e) => setOldpw(e.target.value)}
                             >
                             </TextField>
-                            <TextField
-                                margin="dense"
-                                type="password"
-                                label="new password check"
-                                value={newpwch}
-                                onChange={e => setNewpwch(e.target.value)}
-                            >
-                            </TextField>
-                        </div>
-                    </DialogContent>
-                    <DialogActions>
-                        <Button onClick={handle_close} color="primary">Cancel</Button>
-                        <Button onClick={handle_ok} color="primary">Ok</Button>
-                    </DialogActions>
-                </Dialog>
-                <Dialog open={msg_dialog.opened} onClose={() => set_msg_dialog({ opened: false, msg: "" })}>
-                    <DialogTitle>Alert!</DialogTitle>
-                    <DialogContent>
-                        <DialogContentText>{msg_dialog.msg}</DialogContentText>
-                    </DialogContent>
-                    <DialogActions>
-                        <Button onClick={() => set_msg_dialog({ opened: false, msg: "" })} color="primary">Close</Button>
-                    </DialogActions>
-                </Dialog>
-            </PagePad>
+                        )}
+                        <TextField
+                            margin="dense"
+                            type="password"
+                            label="new password"
+                            value={newpw}
+                            onChange={e => setNewpw(e.target.value)}
+                        >
+                        </TextField>
+                        <TextField
+                            margin="dense"
+                            type="password"
+                            label="new password check"
+                            value={newpwch}
+                            onChange={e => setNewpwch(e.target.value)}
+                        >
+                        </TextField>
+                    </div>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={handle_close} color="primary">Cancel</Button>
+                    <Button onClick={handle_ok} color="primary">Ok</Button>
+                </DialogActions>
+            </Dialog>
+            <Dialog open={msg_dialog.opened} onClose={() => set_msg_dialog({ opened: false, msg: "" })}>
+                <DialogTitle>Alert!</DialogTitle>
+                <DialogContent>
+                    <DialogContentText>{msg_dialog.msg}</DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => set_msg_dialog({ opened: false, msg: "" })} color="primary">Close</Button>
+                </DialogActions>
+            </Dialog>
         </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>
+            <Paper>
+                <Typography variant="h2">Setting</Typography>
+            </Paper>
         </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>
+            <TagTable></TagTable>
         </Headline>
     );
 };