make list responsive

Author: vinaypuppal

src/components/CrowdFund/index.tsx

@@ -25,7 +25,7 @@ export const CrowdFundList: FunctionComponent<Props> = ({ hideHeader = false, in
           <TerminalIcon />
           <span className="inline-block ml-2">Crowdfunding Campaigns</span>
         </h1>
-        <CampaignList />
+        <CampaignList inline={inline} />
       </div>
     </div>
   );

src/components/CrowdFund/list.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, FunctionComponent } from 'react';
 import Link from 'next/link';
 import useSWR from 'swr';
 
@@ -10,8 +10,13 @@ import { CampaignEmptyState } from '../empty-states/campaign';
 import fetch from '../../lib/fetch';
 import { ShareContext } from '../../services/share';
 import { truncateString } from '../../utils';
+import clsx from 'clsx';
 
-export const CampaignList = () => {
+interface Props {
+  inline?: boolean;
+}
+
+export const CampaignList: FunctionComponent<Props> = ({ inline = false }) => {
   const { isOpen, openShareDialog } = useContext(ShareContext);
   const { data, error } = useSWR<Campaign[]>('/api/campaigns', fetch);
 
@@ -39,15 +44,15 @@ export const CampaignList = () => {
     <ul className="w-full md:flex md:flex-wrap">
       {data.map(item => {
         return (
-          <li key={item.id} className="mx-0 my-4 md:mx-4">
+          <li key={item.id} className={clsx('mx-0 my-4 md:mx-4', inline && 'inline')}>
             <Link href="/crowdfund/[slug]" as={`/crowdfund/${item.slug}`}>
-              <a className="block p-4 px-6 bg-white shadow-lg rounded-lg" style={{ maxWidth: 420 }}>
+              <a className="block p-4 px-6 bg-white shadow-lg rounded-lg list-item">
                 <h3 className="text-xl mb-1 font-medium text-gray-800">
                   <span className="hidden md:block">{truncateString(item.title, 30)}</span>
                   <span className="md:hidden">{item.title}</span>
                 </h3>
-                <p className="text-sm mb-4 text-gray-700">
-                  <span className="hidden md:block">{truncateString(item.short_description, 45)}</span>
+                <p className="text-sm mb-4 text-gray-700 md:h-8">
+                  <span className="hidden md:block">{truncateString(item.short_description, 91)}</span>
                   <span className="md:hidden">{item.short_description}</span>
                 </p>
                 <CampaignProgress campaign={item} />
@@ -66,6 +71,26 @@ export const CampaignList = () => {
                 </div>
               </a>
             </Link>
+            <style jsx>{`
+              li {
+                width: calc(50% - 32px);
+              }
+              @media (max-width: 1224px) {
+                li.inline {
+                  width: 80%;
+                }
+              }
+              @media (max-width: 1000px) {
+                li.inline {
+                  width: 100%;
+                }
+              }
+              @media (max-width: 900px) {
+                li {
+                  width: 100%;
+                }
+              }
+            `}</style>
           </li>
         );
       })}

src/components/Home/index.tsx

@@ -5,7 +5,7 @@ import { EmojiIcon } from '../Icons/common';
 
 export const HomeContent = () => {
   return (
-    <div className="py-4 pb-6 pb-20 md:pb-0">
+    <div className="py-4 pb-6 pb-20 md:pb-0 xs:max-w-xs sm:xs-auto sm:max-w-md sm:mx-auto">
       <p className="px-6 mb-4 md:mb-6 text-sm md:text-base font-medium leading-relaxed">
         <span className="text-base font-bold text-purple-700">Coderplex Foundation</span> is a registered non-profit
         organization that is working towards improving the state of tech in India.

src/styles/index.css

@@ -41,6 +41,12 @@ body {
 .markdown h3 {
   @apply leading-tight text-lg font-bold text-black mt-8 -mb-2;
 }
+.markdown p {
+  @apply text-sm font-medium leading-relaxed;
+  @media (min-width: 768px) {
+    @apply text-base;
+  }
+}
 .markdown code {
   @apply font-mono text-sm inline bg-gray-500 px-1;
 }