fix: web page style (#8)

* style: fix the footer at bottom * style: fix layouts fix FolderTree and DynamicGraph positions * refactor: format code
turtton · Feb 7, 2023 · 124e691 · 124e691
1 parent 9ddc09f
commit 124e691
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 12 deletions.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -0,0 +1,17 @@
+import React, { CSSProperties } from "react";
+
+const css: CSSProperties = {
+  position: "absolute",
+  bottom: 0,
+  width: "93%",
+};
+
+export default function Footer(): JSX.Element {
+  return (
+    <footer style={css}>
+      <p>
+        Powered by <a href="https://github.com/turtton/volglass">Volglass</a>, © 2022
+      </p>
+    </footer>
+  );
+}
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -1,6 +1,14 @@
+import { CSSProperties } from "react";
+
+const wrapper: CSSProperties = {
+  display: "grid",
+  gridTemplateRows: "1fr",
+  gridTemplateColumns: "100%",
+  minHeight: "100vh",
+};
 export default function Layout({ children }): JSX.Element {
   return (
-    <div>
+    <div style={wrapper} className="container">
       <main className="theme-light">{children}</main>
     </div>
   );

diff --git a/src/components/MDContentData.tsx b/src/components/MDContentData.tsx
@@ -3,6 +3,7 @@ import React from "react";
 // import AlertTitle from '@mui/material/AlertTitle';
 import { useRouter } from "next/router";
 import { CustomNode } from "../lib/graph";
+import Footer from "./Footer";
 
 function BackLinks({ linkList }: { linkList: CustomNode[] }): JSX.Element {
   return (
@@ -61,12 +62,7 @@ function MDContent({ content, backLinks }: MDContentData): JSX.Element {
       <div>
         <BackLinks linkList={backLinks} />
       </div>
-      <hr />
-      <footer>
-        <p>
-          Powered by <a href="https://github.com/turtton/volglass">Volglass</a>, © 2023
-        </p>
-      </footer>
+      <Footer />
     </div>
   );
 }

diff --git a/src/styles/style.css b/src/styles/style.css
@@ -19,7 +19,7 @@ a:hover {
     width: 100%;
     height: 100%;
     overflow: hidden;
-    position: relative;
+    position: fixed;
     flex-direction: row;
 }
 
@@ -95,9 +95,12 @@ a:hover {
 /* Foooter section END */
 
 .markdown-rendered {
+    position: relative;
+    overflow: auto;
     font-size: 18px;
     line-height: 1.6em;
-    width: 740px;
+    width: 100%;
+    height: 100%;
     background-color: var(--background-primary);
     color: var(--text-normal);
     font-family: var(--default-font);
@@ -114,16 +117,17 @@ a:hover {
 }
 
 .nav-bar {
+    position: relative;
+    height: 100%;
+    scrollbar-gutter: stable;
     width: 300px;
     flex: 0 0 300px;
-    position: relative;
     display: flex;
     background-color: var(--background-primary-alt);
     border-right: 1px solid var(--background-secondary-alt);
     font-family: var(--default-font);
     font-size: 14px;
     line-height: 1.6;
-    min-height: 0;
     padding-top: 20px;
     flex-direction: column;
 }
@@ -216,7 +220,7 @@ a:hover {
 
 .right-bar-container {
     display: block;
-    padding: 0em 1em;
+    padding: 0 3em;
 }
 
 footer {