commit 5bf617cd7f07f443431b81f40835d3156bd8b1ff
parent a76ae0aa2584a0c294bc775f2c209c80550840c7
Author: MTRNord <mtrnord1@gmail.com>
Date: Fri, 31 Dec 2021 01:50:48 +0100
Prepare post page and do some css fixes
Diffstat:
6 files changed, 35 insertions(+), 18 deletions(-)
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -5,7 +5,7 @@ export default class Header extends Component {
render() {
return (
<>
- <header className='flex fixed top-0 left-0 right-0 bottom-0 lg:h-[108px] h-[216px] z-[100] items-center lg:flex-row flex-col'>
+ <header className='bg-[#f8f8f8] dark:bg-[#06070D] flex fixed top-0 left-0 right-0 bottom-0 lg:h-[108px] h-[216px] z-[100] items-center lg:flex-row flex-col'>
<span className='flex items-center h-full lg:mx-10 my-4 text-gray-900 dark:text-gray-200 font-bold'><Link href="/">Matrix Art</Link></span>
<div className='flex flex-1 items-center lg:flex-row flex-col'>
<div className='flex grow-[1] h-full relative items-center'>
diff --git a/pages/Home.tsx b/pages/Home.tsx
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import Client from "../helpers/matrix_client";
import { RingLoader } from 'react-spinners';
-import { ImageEvent, ImageGalleryEvent } from '../helpers/event_types';
+import { ImageEvent, ImageGalleryEvent, MatrixEvent, MatrixEventBase } from '../helpers/event_types';
import Link from 'next/link';
import Head from 'next/head';
import Header from '../components/Header';
@@ -138,7 +138,7 @@ export default class Home extends Component<Props, State>{
);
} else {
return (
- <>
+ <div className='h-full bg-[#f8f8f8] dark:bg-[#06070D]'>
<Head>
<title key="title">Matrix Art | Home</title>
</Head>
@@ -151,14 +151,14 @@ export default class Home extends Component<Props, State>{
</div>
<div className='m-10'>
<ul className='flex flex-wrap gap-1'>
- {image_events.map(event => isImageGalleryEvent(event) ? this.render_gallery(event) : isImageEvent(event) ? this.render_image(event) : <></>)}
+ {image_events.map(event => isImageGalleryEvent(event) ? this.render_gallery(event) : isImageEvent(event) ? this.render_image(event) : <div key={(event as MatrixEventBase).event_id}></div>)}
<li className='flex-grow-10'></li>
</ul>
</div>
</main>
<footer></footer>
- </>
+ </div>
);
};
}
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,8 +1,8 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import '../styles/globals.css';
+import type { AppProps } from 'next/app';
function MyApp({ Component, pageProps }: AppProps) {
- return <Component {...pageProps} />
+ return <Component {...pageProps} />;
}
-export default MyApp
+export default MyApp;
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
@@ -0,0 +1,23 @@
+import Head from "next/head";
+import { NextRouter, withRouter } from "next/router";
+import { Component, ReactNode } from "react";
+import Header from "../../components/Header";
+
+interface Props {
+ router: NextRouter;
+}
+
+class Post extends Component<Props> {
+ render() {
+ const post_title = "";
+ return (
+ <div className="h-full bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
+ <Head>
+ <title key="title">Matrix Art | {post_title}</title>
+ </Head>
+ <Header></Header>
+ </div>
+ );
+ }
+}
+export default withRouter(Post);
+\ No newline at end of file
diff --git a/styles/Home.module.css b/styles/Home.module.css
@@ -1,3 +0,0 @@
-#section-grid {
- grid-template-areas: "leftside navigation rightside";
-}
-\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
@@ -2,10 +2,7 @@
@tailwind components;
@tailwind utilities;
-html, body {
+html, body, #__next {
margin: 0;
-}
-
-body {
- @apply bg-[#f8f8f8] dark:bg-[#06070D];
+ @apply h-full;
}
\ No newline at end of file
