Merge pull request #26 from aaronpo97/mobile-style-updates-for-beer-pages

Mobile style updates for beer pages

src/components/BeerById/BeerInfoHeader.tsx

@@ -27,12 +27,12 @@ const BeerInfoHeader: FC<{
       <article className="card-body">
         <div className="flex justify-between">
           <header>
-            <h1 className="text-4xl font-bold">{beerPost.name}</h1>
-            <h2 className="text-2xl font-semibold">
+            <h1 className="text-2xl font-bold lg:text-4xl">{beerPost.name}</h1>
+            <h2 className="text-lg font-semibold lg:text-2xl">
               by{' '}
               <Link
                 href={`/breweries/${beerPost.brewery.id}`}
-                className="link-hover link text-2xl font-semibold"
+                className="link-hover link font-semibold"
               >
                 {beerPost.brewery.name}
               </Link>

src/components/BeerById/BeerPostCommentsSection.tsx

@@ -46,9 +46,9 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
 
   const sectionRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
   return (
-    <div className="w-full space-y-3">
-      <div className="card h-96 bg-base-300">
-        <div className="card-body h-full" ref={sectionRef}>
+    <div className="w-full space-y-3" ref={sectionRef}>
+      <div className="card bg-base-300">
+        <div className="card-body h-full">
           {user ? (
             <BeerCommentForm beerPost={beerPost} mutate={mutate} />
           ) : (

src/components/BeerById/BeerPostLikeButton.tsx

@@ -31,7 +31,7 @@ const BeerPostLikeButton: FC<{
   return (
     <button
       type="button"
-      className={`btn gap-2 rounded-2xl ${
+      className={`btn-sm btn gap-2 rounded-2xl lg:btn-md ${
         !isLiked ? 'btn-ghost outline' : 'btn-primary'
       }`}
       onClick={() => {
@@ -41,12 +41,12 @@ const BeerPostLikeButton: FC<{
     >
       {isLiked ? (
         <>
-          <FaThumbsUp className="text-2xl" />
+          <FaThumbsUp className="lg:text-2xl" />
           Liked
         </>
       ) : (
         <>
-          <FaRegThumbsUp className="text-2xl" />
+          <FaRegThumbsUp className="lg:text-2xl" />
           Like
         </>
       )}

src/components/BeerById/BeerRecommendations.tsx

@@ -15,15 +15,21 @@ const BeerRecommendations: FunctionComponent<BeerRecommendationsProps> = ({
           <div key={beerPost.id} className="w-full">
             <div>
               <Link className="link-hover" href={`/beers/${beerPost.id}`} scroll={false}>
-                <h2 className="text-2xl font-bold">{beerPost.name}</h2>
+                <h2 className="truncate text-lg font-bold lg:text-2xl">
+                  {beerPost.name}
+                </h2>
               </Link>
               <Link href={`/breweries/${beerPost.brewery.id}`} className="link-hover">
-                <p className="text-lg font-semibold">{beerPost.brewery.name}</p>
+                <p className="truncate text-lg font-semibold lg:text-xl">
+                  {beerPost.brewery.name}
+                </p>
               </Link>
             </div>
 
-            <p>{beerPost.abv}% ABV</p>
-            <p>{beerPost.ibu} IBU</p>
+            <div className="text-md space-x-3 lg:text-lg">
+              <span>{beerPost.abv}% ABV</span>
+              <span>{beerPost.ibu} IBU</span>
+            </div>
           </div>
         ))}
       </div>

src/components/BeerById/CommentCardBody.tsx

@@ -62,7 +62,7 @@ const CommentCardBody: FC<CommentCardProps> = ({ comment, mutate, ref }) => {
 
   return (
     <div className="card-body animate-in fade-in-10" ref={ref}>
-      <div className="flex flex-col justify-between sm:flex-row">
+      <div className="flex flex-row justify-between">
         <div>
           <h3 className="font-semibold sm:text-2xl">
             <Link href={`/users/${comment.postedBy.id}`} className="link-hover link">

src/components/BeerIndex/BeerCard.tsx

@@ -27,12 +27,12 @@ const BeerCard: FC<{ post: z.infer<typeof beerPostQueryResult> }> = ({ post }) =
       <div className="card-body justify-between">
         <div className="space-y-1">
           <Link href={`/beers/${post.id}`}>
-            <h2 className="link-hover link truncate text-2xl font-bold lg:text-3xl">
+            <h2 className="link-hover link overflow-hidden text-ellipsis whitespace-normal text-2xl font-bold lg:text-3xl">
               {post.name}
             </h2>
           </Link>
           <Link href={`/breweries/${post.brewery.id}`}>
-            <h3 className="text-md link-hover link truncate lg:text-xl">
+            <h3 className="text-md link-hover link overflow-hidden text-ellipsis lg:text-xl">
               {post.brewery.name}
             </h3>
           </Link>

src/pages/beers/[id]/index.tsx

@@ -76,10 +76,10 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }
               ) : (
                 <Tab.Group>
                   <Tab.List className="tabs tabs-boxed items-center justify-center rounded-2xl bg-base-300">
-                    <Tab className="tab tab-lg w-1/2 uppercase ui-selected:tab-active">
+                    <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
                       Comments
                     </Tab>
-                    <Tab className="tab tab-lg w-1/2 uppercase ui-selected:tab-active">
+                    <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
                       Other Beers
                     </Tab>
                   </Tab.List>

src/pages/beers/index.tsx

@@ -16,7 +16,7 @@ import { FaArrowUp } from 'react-icons/fa';
 const BeerPage: NextPage = () => {
   const { user } = useContext(UserContext);
 
-  const PAGE_SIZE = 2;
+  const PAGE_SIZE = 6;
 
   const { beerPosts, setSize, size, isLoading, isLoadingMore, isAtEnd } = useBeerPosts({
     pageSize: PAGE_SIZE,
@@ -39,12 +39,12 @@ 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 justify-between">
+          <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>
             {!!user && (
-              <div>
+              <div className="mt-6 lg:mt-0">
                 <Link href="/beers/create" className="btn-primary btn">
                   Create a new beer post
                 </Link>