commit 1af94bf82380177cddec65c18939ade5382133f5
parent 4b1a46a32c6ae31c55b3cba9697b9cf9846191ee
Author: MTRNord <mtrnord1@gmail.com>
Date: Wed, 5 Jan 2022 01:03:00 +0100
Fix front page image gallery and add basic footer
Diffstat:
6 files changed, 31 insertions(+), 7 deletions(-)
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -0,0 +1,14 @@
+import Link from "next/link";
+import { Component } from "react";
+
+export default class Footer extends Component {
+ render() {
+ return (
+ <footer className="relative left-0 right-0 bottom-0 h-[400px] bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95] flex justify-center items-center">
+ <Link href={`https://github.com/MTRNord/matrix-art`} passHref><a className="px-16 text-lg text-gray-700 dark:text-gray-400 font-bold">Github</a></Link>
+ <Link href={`https://matrix.to/#/#matrix-art:nordgedanken.dev`} passHref><a className="px-16 text-lg text-gray-700 dark:text-gray-400 font-bold">Matrix</a></Link>
+ <Link href={`/profile/${encodeURIComponent("@mtrnord:nordgedanken.dev")}`} passHref><a className="px-16 text-lg text-gray-700 dark:text-gray-400 font-bold">Developer</a></Link>
+ </footer>
+ );
+ }
+}
+\ No newline at end of file
diff --git a/components/FrontPageImage.tsx b/components/FrontPageImage.tsx
@@ -105,11 +105,11 @@ export default class FrontPageImage extends Component<Props, State> {
// TODO proper alt text
const direct_link = `/post/${encodeURIComponent(post_id)}`;
return (
- <li style={{ height: this.props.imageHeight }} key={id}>
+ <li style={{ height: this.state.imageHeight }} key={id}>
<Link href={direct_link} passHref>
- <div style={{height: this.props.imageHeight}} className={`relative cursor-pointer`}>
- <img alt={caption} title={caption} style={{ height: this.props.imageHeight }} className={`relative max-w-full object-cover align-bottom z-0`} src={this.context.client?.thumbnailLink(thumbnail_url, "scale", parseInt(this.state.imageHeight?.replace("px", "")!), parseInt(this.state.imageHeight?.replace("px", "")!))}></img>
- <div style={{ height: this.props.imageHeight }} className={`flex-col max-w-full opacity-0 hover:opacity-100 duration-300 absolute bg-gradient-to-b from-transparent to-black/[.25] inset-0 z-10 flex justify-end items-start text-white p-4`}>
+ <div style={{ height: this.state.imageHeight }} className={`relative cursor-pointer`}>
+ <img alt={caption} title={caption} style={{ height: this.state.imageHeight }} className={`relative max-w-full object-cover align-bottom z-0`} src={this.context.client?.thumbnailLink(thumbnail_url, "scale", parseInt(this.state.imageHeight?.replace("px", "")!), parseInt(this.state.imageHeight?.replace("px", "")!))}></img>
+ <div style={{ height: this.state.imageHeight }} className={`flex-col max-w-full opacity-0 hover:opacity-100 duration-300 absolute bg-gradient-to-b from-transparent to-black/[.25] inset-0 z-10 flex justify-end items-start text-white p-4`}>
<h2 className='truncate max-w-full text-base font-semibold'>{caption}</h2>
<p className='truncate max-w-full text-sm'>{this.state.displayname}</p>
</div>
diff --git a/pages/Home.tsx b/pages/Home.tsx
@@ -6,6 +6,7 @@ import Header from '../components/Header';
import { ClientContext } from '../components/ClientContext';
import { constMatrixArtServer } from '../helpers/matrix_client';
import FrontPageImage from '../components/FrontPageImage';
+import Footer from '../components/Footer';
type Props = {
};
@@ -137,7 +138,7 @@ export default class Home extends Component<Props, State>{
<meta property="og:type" content="website" key="og-type" />
</Head>
<Header></Header>
- <main className='lg:pt-[108px] pt-[216px] z-0'>
+ <main className='h-full lg:pt-[108px] pt-[216px] z-0'>
<div className='z-[100] sticky lg:top-[108px] top-[216px] bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
<div className='h-[72px] px-10 w-full relative grid grid-cols-[1fr_auto_1fr] items-center' id='section-grid'>
<h1 className='text-xl text-gray-900 dark:text-gray-200 font-bold'>Home</h1>
@@ -151,7 +152,7 @@ export default class Home extends Component<Props, State>{
</div>
</main>
- <footer></footer>
+ <Footer></Footer>
</div>
);
};
diff --git a/pages/login.tsx b/pages/login.tsx
@@ -2,6 +2,7 @@ import Head from "next/head";
import { NextRouter, withRouter } from "next/router";
import { Component, ReactNode } from "react";
import { ClientContext } from "../components/ClientContext";
+import Footer from "../components/Footer";
import Header from "../components/Header";
import { constMatrixArtServer } from "../helpers/matrix_client";
@@ -158,6 +159,7 @@ class Login extends Component<Props, State> {
</form>
</div>
</main>
+ <Footer></Footer>
</div>
</>
);
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
@@ -16,6 +16,7 @@ import { constMatrixArtServer } from "../../helpers/matrix_client";
import { get_data } from "../api/directory";
import { isImageEvent, isImageGalleryEvent } from '../../components/FrontPageImage';
import Link from 'next/link';
+import Footer from '../../components/Footer';
const centerSpinner = `
position: fixed;
@@ -135,6 +136,7 @@ class Post extends Component<Props, State> {
<main className='h-full lg:pt-[108px] pt-[216px] z-0 flex items-center justify-center'>
<h1 className="text-6xl text-gray-900 dark:text-gray-200 font-bold">The Post you wanted does not exist!</h1>
</main>
+ <Footer></Footer>
</div>
);
}
@@ -169,6 +171,7 @@ class Post extends Component<Props, State> {
</div>
</div>
</main>
+ <Footer></Footer>
</div>
);
} else if (error) {
@@ -189,6 +192,7 @@ class Post extends Component<Props, State> {
<main className='h-full lg:pt-[108px] pt-[216px] z-0 flex items-center justify-center'>
<h1 className="text-6xl text-gray-900 dark:text-gray-200 font-bold">The Post you wanted does not exist!</h1>
</main>
+ <Footer></Footer>
</div>
);
}
diff --git a/pages/profile/[userid].tsx b/pages/profile/[userid].tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
import { NextRouter, withRouter } from "next/router";
import { Component } from "react";
import { ClientContext } from "../../components/ClientContext";
+import Footer from "../../components/Footer";
import FrontPageImage from "../../components/FrontPageImage";
import Header from "../../components/Header";
import { BannerEvent, MatrixEvent, MatrixEventBase, MatrixImageEvents } from "../../helpers/event_types";
@@ -148,7 +149,7 @@ class Profile extends Component<Props, State> {
<div className="relative">
<div className="relative mb-0 min-h-[700px]">
<div id="transparent_gradient" className="absolute left-0 right-0 top-[626px] bottom-0 bg-[#f8f8f8] dark:bg-[#06070D]"></div>
- <div className="px-[60px] relative pt-[250px]">
+ <div className="px-[60px] relative pt-[250px] pb-96 ">
<div className="relative mt-0">
<div className="relative inline-flex z-[1] mb-[40px]">
<span>
@@ -244,6 +245,7 @@ class Profile extends Component<Props, State> {
</div>
</div>
</main>
+ <Footer></Footer>
</div>
);
}
