Update styles to be more mobile friendly, add favicon

This commit is contained in:
Aaron William Po
2023-04-18 21:40:34 -04:00
parent 95778333df
commit dffbc5cdfb
21 changed files with 83 additions and 51 deletions

View File

@@ -21,6 +21,7 @@ export default function App({ Component, pageProps }: AppProps) {
}
`}
</style>
<UserContext.Provider value={{ user, isLoading, error, mutate }}>
<Component {...pageProps} />
</UserContext.Provider>

View File

@@ -3,7 +3,26 @@ import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html lang="en">
<Head />
<Head>
<link
rel="apple-touch-icon"
sizes="180x180"
href="favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="favicon/favicon-16x16.png"
/>
<link rel="manifest" href="favicon/site.webmanifest" />
</Head>
<body>
<Main />
<NextScript />

View File

@@ -47,17 +47,21 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }
infiniteLoop
showThumbs={false}
>
{beerPost.beerImages.map((image, index) => (
<div key={image.id} id={`image-${index}}`} className="w-full">
<Image
alt={image.alt}
src={image.path}
height={1080}
width={1920}
className="h-[42rem] w-full object-cover"
/>
</div>
))}
{beerPost.beerImages.length
? beerPost.beerImages.map((image, index) => (
<div key={image.id} id={`image-${index}}`} className="w-full">
<Image
alt={image.alt}
src={image.path}
height={1080}
width={1920}
className="h-[42rem] w-full object-cover"
/>
</div>
))
: Array.from({ length: 1 }).map((_, i) => (
<div className="h-[42rem] bg-base-300" key={i} />
))}
</Carousel>
<div className="mb-12 mt-10 flex w-full items-center justify-center ">

View File

@@ -11,7 +11,7 @@ import Spinner from '@/components/ui/Spinner';
import useBeerPosts from '@/hooks/useBeerPosts';
import BeerPostLoadingCard from '@/components/BeerIndex/BeerPostLoadingCard';
import { FaArrowUp } from 'react-icons/fa';
import { FaArrowUp, FaPlus } from 'react-icons/fa';
const BeerPage: NextPage = () => {
const { user } = useContext(UserContext);
@@ -39,14 +39,15 @@ const BeerPage: NextPage = () => {
</Head>
<div className="flex items-center justify-center bg-base-100" ref={pageRef}>
<div className="my-10 flex w-11/12 flex-col space-y-4 lg:w-8/12 2xl:w-7/12">
<header className="my-10 flex flex-col justify-between lg:flex-row">
<div className="space-y-2">
<h1 className="text-6xl font-bold">The Biergarten Index</h1>
</div>
<header className="my-10 flex justify-between lg:flex-row">
<h1 className="text-6xl font-bold">The Biergarten Index</h1>
{!!user && (
<div className="mt-6 lg:mt-0">
<Link href="/beers/create" className="btn-primary btn">
Create a new beer post
<div
className="tooltip tooltip-left h-full"
data-tip="Create a new beer post"
>
<Link href="/beers/create" className="btn-ghost btn-sm btn">
<FaPlus />
</Link>
</div>
)}

View File

@@ -16,7 +16,7 @@ const Home: NextPage = () => {
The Biergarten App
</h1>
<p className="mt-4 text-lg lg:text-2xl">
An app for beer lovers to share their favorite brews and breweries with
An app for beer lovers to share their favourite brews and breweries with
like-minded people online.
</p>
</div>