optimizing forms for mobile screens

mrswastik-robot · Apr 18, 2024 · 7142076 · 7142076
1 parent beb2f5e
commit 7142076
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 43 deletions.
diff --git a/app/homepage2/createEvent/layout.tsx b/app/homepage2/createEvent/layout.tsx
@@ -28,23 +28,8 @@ export default function SettingsLayout({ children }: SettingsLayoutProps) {
   return (
     <>
     <div className="md:container md:max-w-7xl md:mx-auto ">
-      <div className="md:hidden">
-        <Image
-          src="/examples/forms-light.png"
-          width={1280}
-          height={791}
-          alt="Forms"
-          className="block dark:hidden"
-        />
-        <Image
-          src="/examples/forms-dark.png"
-          width={1280}
-          height={791}
-          alt="Forms"
-          className="hidden dark:block"
-        />
-      </div>
-      <div className="hidden space-y-6 p-10 pb-16 md:block bg-white dark:bg-[#262626] rounded-md font-dmsans">
+
+      <div className=" space-y-6 p-10 pb-16  bg-white dark:bg-[#262626] rounded-md font-dmsans">
         <div className="space-y-0.5">
           <h2 className="text-2xl font-bold tracking-tight">Create your Event here</h2>
           <p className="text-muted-foreground">
@@ -53,7 +38,7 @@ export default function SettingsLayout({ children }: SettingsLayoutProps) {
         </div>
         <Separator className="my-6" />
         <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
-          <aside className="-mx-4 lg:w-1/5">
+          <aside className="-mx-4 lg:w-1/5 overflow-auto">
             <SidebarNav items={sidebarNavItems} />
           </aside>
           <div className="flex-1 lg:max-w-2xl">{children}</div>

diff --git a/app/homepage2/page.tsx b/app/homepage2/page.tsx
@@ -1069,7 +1069,7 @@ export default function MusicPage() {
                               })
                             ):(
                               posts.map((post, index) => (
-                                <div key={index} className="mb-1">
+                                <div key={index} className="mb-1 mx-auto md:mx-0">
                               <AlbumArtwork
                                 post={post}
                               />

diff --git a/app/profilePage/page.tsx b/app/profilePage/page.tsx
@@ -701,7 +701,7 @@ useEffect(() => {
 
         //followerList
 
-        <div>
+        <div className="">
           {
             postType=='followers'?<div>
             {
@@ -741,15 +741,15 @@ useEffect(() => {
         </div>
       ))
     ) : (
-      <div className="flex items-center justify-center flex-col mt-5 w-full">
+      <div className="absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 ">
         <Image
           src="/trash.png"
           width={300}
           height={300}
-          className=" w-[10rem] h-[9rem] rounded-full"
+          className=" w-[10rem] h-[9rem] items-center justify-center flex mx-auto rounded-full"
           alt="Profile Pic"
         />
-        <h1 className=" text-2xl text-zinc-500">You have no Saved Events</h1>
+        <h1 className=" text-2xl text-zinc-500 text-center">You have no Saved Events</h1>
       </div>
     )}
     </div>:<div>Invalid Tab</div>

diff --git a/app/settings/layout.tsx b/app/settings/layout.tsx
@@ -5,7 +5,7 @@ import { Separator } from '../../components/ui/separator'
 import { SidebarNav } from "./components/sidebar-nav"
 
 export const metadata: Metadata = {
-  title: "Forms",
+  title: "Settings",
   description: "Advanced form example using react-hook-form and Zod.",
 }
 
@@ -35,24 +35,9 @@ interface SettingsLayoutProps {
 export default function SettingsLayout({ children }: SettingsLayoutProps) {
   return (
     <>
-    <div className="md:container md:max-w-7xl md:mx-auto ">
-      <div className="md:hidden">
-        <Image
-          src="/examples/forms-light.png"
-          width={1280}
-          height={791}
-          alt="Forms"
-          className="block dark:hidden"
-        />
-        <Image
-          src="/examples/forms-dark.png"
-          width={1280}
-          height={791}
-          alt="Forms"
-          className="hidden dark:block"
-        />
-      </div>
-      <div className="hidden space-y-6 p-10 pb-16 md:block bg-white dark:bg-[#262626] rounded-md font-dmsans">
+    <div className="w-full md:container md:max-w-7xl md:mx-auto ">
+
+      <div className=" space-y-6 p-10 pb-16  bg-white dark:bg-[#262626] rounded-md font-dmsans">
         <div className="space-y-0.5">
           <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
           <p className="text-muted-foreground">
@@ -61,7 +46,7 @@ export default function SettingsLayout({ children }: SettingsLayoutProps) {
         </div>
         <Separator className="my-6" />
         <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
-          <aside className="-mx-4 lg:w-1/5">
+          <aside className="-mx-4 lg:w-1/5 overflow-auto">
             <SidebarNav items={sidebarNavItems} />
           </aside>
           <div className="flex-1 lg:max-w-2xl">{children}</div>