Skip to content

Commit

Permalink
Fixing address mobile styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@avenmia
avenmia committed Sep 25, 2024
1 parent 4b88a4d commit d3bce69
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 73 deletions.
165 changes: 93 additions & 72 deletions src/components/AddressSearch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import Link from "next/link";
import { api } from "../utils/api";
import NextButton from "./NextButton";
import PrevButton from "./PrevButton";
import PageHeader from "./PageHeader";
import PageLayout from "./PageLayout";

declare global {
interface Window {
Expand Down Expand Up @@ -263,81 +265,100 @@ const AddressSearch: React.FC = () => {
};

return (
<div className="container mx-auto flex h-screen items-center justify-center">
<div className="flex flex-col items-center py-2 sm:w-2/3 md:w-2/3 lg:w-1/2 xl:w-1/2">
<h1 className="py-4 text-lg font-semibold text-white md:mt-4 md:text-3xl">
Step 1: Type in your address
</h1>
<div className="card flex w-full flex-col justify-center space-y-2">
<section className="card-body w-full py-2">
<div className="relative w-full max-w-lg">
<input
type="text"
value={query}
onChange={handleInputChange}
placeholder="Enter address"
className="input-bordered input w-full bg-white text-primary-content"
/>
{suggestions.length > 0 && (
<ul
className="absolute left-0 right-0 top-full z-10 mt-1 max-h-60 w-full overflow-auto rounded-md border bg-white text-primary-content shadow-lg"
role="listbox"
>
{suggestions.map((suggestion, index) => (
<li
key={index}
className="cursor-pointer px-4 py-2 hover:bg-info"
role="option"
onClick={() => handleSuggestionClick(suggestion)}
>
{suggestion.text}
</li>
))}
</ul>
<>
<PageLayout>
<PageHeader title="Step 1: Type in your address" />
<section className="">
<div className="relative">
<input
type="text"
value={query}
onChange={handleInputChange}
placeholder="Enter address"
className="input-bordered input w-full bg-white text-primary-content sm:text-sm md:text-lg"
/>
{suggestions.length > 0 && (
<ul
className="absolute left-0 right-0 top-full z-10 mt-1 rounded-md bg-white text-primary-content shadow-lg"
role="listbox"
>
{suggestions.map((suggestion, index) => (
<li
key={index}
className="cursor-pointer px-4 py-2 hover:bg-info"
role="option"
onClick={() => handleSuggestionClick(suggestion)}
>
{suggestion.text}
</li>
))}
</ul>
)}
</div>
</section>
<section className="rounded-md bg-white shadow-xl sm:m-4 sm:p-4 md:m-4 md:p-4 lg:m-6 lg:p-6">
<div className="text-primary-content">
<p className="card-title sm:text-sm md:text-lg">
Your address will not be recorded, but will be used to return the
following information commonly used in planning:
</p>
<section className="card-body sm:text-sm md:text-lg lg:text-xl">
{zipCode && (
<div className="flex items-center">
<span className="font-bold">ZIP Code:</span>
<span className="ml-2">{zipCode}</span>
</div>
)}
</div>
</section>
<section className="card-body rounded-md bg-white/90 py-2 shadow-xl">
<div className="prose text-primary-content">
<p className="card-title">
Your address will not be recorded, but will be used to return
the following information commonly used in planning:
</p>
<section className="card-body">
{zipCode && <p className="">ZIP Code: {zipCode}</p>}
{censusTract && <p className="">Census Tract: {censusTract}</p>}
{island && <p className="">Island: {island}</p>}
{county && <p className="">County: {county}</p>}
{planningRegion && (
<p className="">
Planning Region: {planningRegion}
{censusTract && (
<div className="flex items-center">
<span className="font-bold">Census Tract:</span>
<span className="ml-2">{censusTract}</span>
</div>
)}
{island && (
<div className="flex items-center">
<span className="font-bold">Island:</span>
<span className="ml-2">{island}</span>
</div>
)}
{county && (
<div className="flex items-center">
<span className="font-bold">County:</span>
<span className="ml-2">{county}</span>
</div>
)}
{planningRegion && (
<div className="flex items-center">
<span className="font-bold">Planning Region:</span>
<span className="ml-2">
{planningRegion}
{dhhlRegion === "Yes" ? "-DHHL" : ""}
</p>
)}
</section>
</div>
</section>
<section className="py-2">
<div className="flex flex-row items-center justify-center gap-5">
<Link href={{ pathname: "./" }}>
<PrevButton text="Home" />
</Link>
{complete ? (
<Link href={{ pathname: "./survey" }}>
<NextButton
text={"Next"}
onClick={() => handleSubmit()}
disabled={false}
/>
</Link>
) : (
<NextButton text={"Next"} disabled={true} />
</span>
</div>
)}
</div>
</section>
</div>
</div>
</div>
</section>
</div>
</section>
<section className="">
<div className="flex flex-row justify-center gap-5">
<Link href={{ pathname: "./" }}>
<PrevButton text="Home" />
</Link>
{complete ? (
<Link href={{ pathname: "./survey" }}>
<NextButton
text={"Next"}
onClick={() => handleSubmit()}
disabled={false}
/>
</Link>
) : (
<NextButton text={"Next"} disabled={true} />
)}
</div>
</section>
</PageLayout>
</>
);
};

Expand Down
15 changes: 15 additions & 0 deletions src/components/PageHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from "react";

interface PageHeaderProps {
title: string;
}

const PageHeader = ({ title }: PageHeaderProps) => {
return (
<h1 className="py-4 text-lg font-semibold text-white md:mt-4 md:text-3xl">
{title}
</h1>
);
};

export default PageHeader;
17 changes: 17 additions & 0 deletions src/components/PageLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from "react";

interface PageLayoutProps {
children: React.ReactNode;
}

const PageLayout = ({ children }: PageLayoutProps) => {
return (
<div className="container mx-auto flex h-screen items-center justify-center">
<div className="flex flex-col items-center sm:w-3/4 md:w-2/3 lg:w-1/2">
{children}
</div>
</div>
);
};

export default PageLayout;
2 changes: 1 addition & 1 deletion tailwind.config.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ module.exports = {
theme: {
extend: {
screens: {
sm: "375px", //mobile M
sm: "350px", //mobile M
md: "768px", //tablet
lg: "1024px", //laptop
xl: "1280px", //laptop L
Expand Down

0 comments on commit d3bce69

Please sign in to comment.