Improved the mobile view a lot

sublinks · Dec 14, 2023 · 5aea49a · 5aea49a
1 parent edb154b
commit 5aea49a
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 14 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -6,7 +6,8 @@ import cx from 'classnames';
 
 import Header from '@/components/header';
 import BottomNav from '@/components/bottom-nav';
-import { ThemeProvider } from '@/utils/TailwindMaterial';
+
+import { ThemeProvider } from '@/components/TailwindMaterial';
 
 const inter = Inter({ subsets: ['latin'] });
 

diff --git a/src/app/user/page.tsx → src/app/user/[userslug]/page.tsx b/src/app/user/page.tsx → src/app/user/[userslug]/page.tsx
@@ -5,14 +5,14 @@ import { PersonBio, PersonHeader } from '@/components/person-detail';
 import MainCard from '@/components/main-card';
 import { ModeratesList, ModeratesProps } from '@/components/moderates-list';
 import { PersonDetailSelection } from '@/components/person-comments-posts';
-import * as testData from '../../../test-person-data.json';
+import * as testData from '../../../../test-person-data.json';
 
 const User = () => (
   <div>
     <div className="mb-12">
       <MainCard>
-        <div className="flex">
-          <div className="w-8/12 lg:w-9/12 relative mr-16">
+        <div className="flex sm:flex-col md:flex-row">
+          <div className="w-full md:w-8/12 relative mr-16">
             <PersonHeader
               avatar={testData.person_view.person.avatar}
               is_admin={testData.person_view.is_admin}
@@ -21,7 +21,7 @@ const User = () => (
             />
             <PersonBio bio={testData.person_view.person.bio} />
           </div>
-          <div className="w-4/12 lg:w-3/12 relative">
+          <div className="mt-8 sm:w-full md:mt-0 md:w-4/12 relative">
             <ModeratesList moderates={testData.moderates as ModeratesProps[]} />
           </div>
         </div>

diff --git a/src/utils/TailwindMaterial.ts → src/components/TailwindMaterial.ts b/src/utils/TailwindMaterial.ts → src/components/TailwindMaterial.ts
diff --git a/src/components/moderates-list/index.tsx b/src/components/moderates-list/index.tsx
@@ -18,7 +18,7 @@ export const ModeratesListItem = (props: ModeratesListItemProps) => {
       {communityAvatar && (
       <Image
         src={communityAvatar}
-        className="hidden lg:flex rounded-md h-32 w-32 mr-2"
+        className="rounded-md h-32 w-32 mr-2"
         alt="Avatar"
         width={32}
         height={32}
@@ -39,7 +39,7 @@ export interface ModeratesProps {
 }
 
 export const ModeratesList = ({ moderates }: { moderates: ModeratesProps[] }) => (
-  <div className="w-full border-l-2 pl-16 ">
+  <div className="w-full border-l-2 pl-16">
     <H1 className="mb-4 border-collapse border-b dark:border-gray-400 border-gray-800">Moderates:</H1>
     <div className="max-h-500 overflow-y-scroll">
       {moderates.map(moderate => (

diff --git a/src/components/person-comments-posts/index.tsx b/src/components/person-comments-posts/index.tsx
@@ -5,7 +5,7 @@ import {
   TabsBody,
   Tab,
   TabPanel
-} from '@/utils/TailwindMaterial';
+} from '@/components/TailwindMaterial';
 
 const tabs = [
   { label: 'Posts', value: 'posts' },
@@ -29,7 +29,7 @@ export const PersonDetailSelection = () => (
       </TabsHeader>
       <TabsBody>
         {tabs.map(({ value }) => (
-          <TabPanel key={value} value={value} className="">
+          <TabPanel key={value} value={value}>
             TODO:
             {' '}
             {value}

diff --git a/src/components/post-header/index.tsx b/src/components/post-header/index.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, { useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,4 +1,4 @@
-import type { Config } from 'tailwindcss';
+import withMT from '@material-tailwind/react/utils/withMT';
 
 const spacing = {
   0: '0',
@@ -32,7 +32,7 @@ const spacing = {
   500: '500px'
 };
 
-const config: Config = {
+const config = withMT({
   content: [
     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
@@ -80,6 +80,6 @@ const config: Config = {
     }
   },
   plugins: []
-};
+});
 
 export default config;