commit 6bf6e849e8d7a27a8aa5ba04b27c75154a16517f
parent c9bedc0d4bbee83baaefd1b1f9c046093d793314
Author: MTRNord <mtrnord1@gmail.com>
Date: Fri, 7 Jan 2022 02:29:39 +0100
Various small fixes to the mobile design
Diffstat:
6 files changed, 16 insertions(+), 18 deletions(-)
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -4,7 +4,7 @@ import { PureComponent } from "react";
export default class Footer extends PureComponent {
render() {
return (
- <footer className="relative left-0 right-0 bottom-0 h-[25rem] bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95] flex justify-center items-center">
+ <footer className="w-full min-h-[25rem] bg-[#FEFEFE] dark:bg-[#12161D] flex justify-center items-center z-0">
<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>
diff --git a/pages/Home.tsx b/pages/Home.tsx
@@ -133,14 +133,14 @@ export default class Home extends PureComponent<Props, State>{
);
} else {
return (
- <div className='h-full bg-[#f8f8f8] dark:bg-[#06070D]'>
+ <div className='h-full flex flex-col justify-between bg-[#f8f8f8] dark:bg-[#06070D]'>
<Head>
<title key="title">Matrix Art | Home</title>
<meta property="og:title" content="Matrix Art | Home" key="og-title" />
<meta property="og:type" content="website" key="og-type" />
</Head>
<Header></Header>
- <main className='h-full lg:pt-20 pt-52 z-0'>
+ <main className='mb-auto lg:pt-20 pt-52 z-0'>
<div className='z-[100] sticky lg:top-20 top-52 bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
<div className='h-16 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>
@@ -152,7 +152,6 @@ export default class Home extends PureComponent<Props, State>{
<li className='grow-[10]'></li>
</ul>
</div>
-
</main>
<Footer></Footer>
</div>
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
@@ -128,7 +128,7 @@ class Post extends PureComponent<Props, State> {
if (!this.props.event_id || !this.props.event_id?.startsWith("$")) {
return (
- <div className="h-full bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
+ <div className="h-full flex flex-col justify-between bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
<Head>
<title key="title">Matrix Art | Post not Found</title>
<meta property="og:title" content="Matrix Art | Post not Found" key="og-title" />
@@ -137,7 +137,7 @@ class Post extends PureComponent<Props, State> {
<meta property="og:type" content="website" key="og-type" />
</Head>
<Header></Header>
- <main className='h-full lg:pt-20 pt-56 z-0 flex items-center justify-center'>
+ <main className='mb-auto lg:pt-20 pt-56 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>
@@ -155,7 +155,7 @@ class Post extends PureComponent<Props, State> {
post_title = (caption[0] as { body: string; mimetype: string; }).body;
}
return (
- <div className="h-full bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
+ <div className="h-full flex flex-col justify-between bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
<Head>
<title key="title">Matrix Art | {post_title}</title>
<meta property="og:title" content={`Matrix Art | ${post_title}`} key="og-title" />
@@ -165,7 +165,7 @@ class Post extends PureComponent<Props, State> {
</Head>
<Header></Header>
- <main className='flex-col h-full flex lg:pt-20 pt-56 z-0'>
+ <main className='flex-col mb-auto flex lg:pt-20 pt-56 z-0'>
{isImageGalleryEvent(image_event) ? this.renderImageGalleryEvent(image_event, post_title) : (isImageEvent(image_event) ? this.renderSingleImageEvent(image_event, post_title) : <div key={(image_event as MatrixEventBase).event_id}></div>)}
<div className="grow bg-[#f8f8f8] dark:bg-[#06070D] min-h-[25rem] flex flex-col items-center">
<div className="flex flex-col items-start lg:min-w-[60rem] lg:w-[60rem]">
@@ -184,7 +184,7 @@ class Post extends PureComponent<Props, State> {
);
} else {
return (
- <div className="h-full bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
+ <div className="h-full flex flex-col justify-between bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
<Head>
<title key="title">Matrix Art | Post not Found</title>
<meta property="og:title" content="Matrix Art | Post not Found" key="og-title" />
@@ -193,7 +193,7 @@ class Post extends PureComponent<Props, State> {
<meta property="og:type" content="website" key="og-type" />
</Head>
<Header></Header>
- <main className='h-full lg:pt-20 pt-56 z-0 flex items-center justify-center'>
+ <main className='mb-auto lg:pt-20 pt-56 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>
diff --git a/pages/profile/[userid].tsx b/pages/profile/[userid].tsx
@@ -105,7 +105,7 @@ class Profile extends PureComponent<Props, State> {
renderNotFound() {
return (
- <div className="h-full bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
+ <div className="h-full flex flex-col justify-between bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
<Head>
<title key="title">Matrix Art | User not Found</title>
<meta property="og:title" content="Matrix Art | User not Found" key="og-title" />
@@ -114,7 +114,7 @@ class Profile extends PureComponent<Props, State> {
<meta property="og:type" content="website" key="og-type" />
</Head>
<Header></Header>
- <main className='h-full lg:pt-20 pt-56 z-0 flex items-center justify-center'>
+ <main className='mb-auto lg:pt-20 pt-56 z-0 flex items-center justify-center'>
<h1 className="text-6xl text-gray-900 dark:text-gray-200 font-bold">The User you wanted does not exist!</h1>
</main>
</div>
@@ -131,7 +131,7 @@ class Profile extends PureComponent<Props, State> {
const image_events = this.state.events.filter((event) => event.type == "m.image_gallery" || event.type == "m.image") as MatrixImageEvents[];
// TODO opengraph shows mxid instead of displayname
return (
- <div className="h-full bg-[#f8f8f8] dark:bg-[#06070D]">
+ <div className="h-full flex flex-col justify-between bg-[#f8f8f8] dark:bg-[#06070D]">
<Head>
<title key="title">Matrix Art | {this.state.displayname}</title>
<meta property="og:title" content={`Matrix Art | ${this.state.displayname}`} key="og-title" />
@@ -140,13 +140,13 @@ class Profile extends PureComponent<Props, State> {
<meta property="og:type" content="website" key="og-type" />
</Head>
<Header></Header>
- <main className='lg:pt-20 pt-56 z-0 bg-[#f8f8f8] dark:bg-[#06070D]'>
+ <main className='w-full mb-auto lg:pt-20 pt-56 z-0 bg-[#f8f8f8] dark:bg-[#06070D]'>
{banner_event ? <div style={{
backgroundImage: `url(${this.context.client.downloadLink((banner_event as BannerEvent).content["m.file"].url)})`
}}
className="fixed top-14 w-full h-[32.5rem] bg-cover bg-[position:50%]"
></div> : undefined}
- <div className="relative">
+ <div className="relative w-full">
<div className="relative mb-0 min-h-[43.75rem]">
<div id="transparent_gradient" className="absolute left-0 right-0 top-[39rem] bottom-0 bg-[#f8f8f8] dark:bg-[#06070D]"></div>
<div className="px-14 relative pt-[15.5rem] pb-96 ">
@@ -159,7 +159,7 @@ class Profile extends PureComponent<Props, State> {
</div>
</span>
<div className="ml-5 flex flex-col justify-center">
- <h1 className="font-extrabold text-5xl text-gray-900 dark:text-gray-200 mt-[-1rem] flex items-end">{this.state.displayname}</h1>
+ <h1 className="font-extrabold text-5xl text-gray-200 mt-[-1rem] flex items-end">{this.state.displayname}</h1>
</div>
</div>
</div>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,5 @@
module.exports = {
content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}",],
- important: true,
theme: {
extend: {},
},
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,6 @@
{
"compilerOptions": {
- "target": "es5",
+ "target": "ES2015",
"lib": [
"dom",
"dom.iterable",
