Fix responsiveness on search card, #110

BCIT-SSD-2020-21 · Apr 16, 2021 · d4c2e6d · d4c2e6d
1 parent 5fa2e7a
commit d4c2e6d
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 53 deletions.
diff --git a/client/src/components/CommunityCard.js b/client/src/components/CommunityCard.js
@@ -23,9 +23,7 @@ const CommunityCard = ({ community }) => {
                 <Typography gutterBottom variant='h5' component='h2'>
                   {community?.title}
                 </Typography>
-                <Typography variant='body2' color='textSecondary' component='p'>
-                  {community?.description}
-                </Typography>
+                <p className='comm-card-desc'>{community?.description}</p>
               </div>
             </CardContent>
           </CardActionArea>

diff --git a/client/src/components/SearchResultCard.js b/client/src/components/SearchResultCard.js
@@ -1,10 +1,4 @@
-import {
-  Card,
-  CardHeader,
-  CardContent,
-  Avatar,
-  IconButton,
-} from '@material-ui/core';
+import { Card, CardHeader, Avatar, IconButton } from '@material-ui/core';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 // import PeopleIcon from '@material-ui/icons/People';
 import RoomIcon from '@material-ui/icons/Room';
@@ -17,51 +11,44 @@ const SearchResultCard = ({ community, handleJoinCommunity }) => {
 
   return (
     <Card className='my-3 search-result-card col-xs-10 col-md-5'>
-      <CardHeader
-        avatar={
-          <Avatar
-            style={{ backgroundColor: '#192935' }}
-            alt={community.title}
-            className='mx-3'
+      <div className='d-flex justify-content-between pt-2'>
+        <Avatar
+          style={{ backgroundColor: '#192935' }}
+          alt={community.title}
+          className='mx-3'
+        >
+          {community.title.slice(0, 1)}
+        </Avatar>
+
+        <div>
+          <IconButton
+            aria-label='settings'
+            onClick={() => handleJoinCommunity(community._id)}
+          >
+            <AddIcon style={{ color: '#0acf83' }} />
+          </IconButton>
+
+          <IconButton
+            aria-label='add to favorites'
+            onClick={() => setLiked(!liked)}
           >
-            {community.title.slice(0, 1)}
-          </Avatar>
-        }
-        action={
-          <>
-            <IconButton
-              aria-label='settings'
-              onClick={() => handleJoinCommunity(community._id)}
-            >
-              <AddIcon style={{ color: '#0acf83' }} />
-            </IconButton>
+            {liked ? (
+              <FavoriteIcon style={{ color: '#0acf83' }} />
+            ) : (
+              <FavoriteBorderIcon style={{ color: '#0acf83' }} />
+            )}
+          </IconButton>
+        </div>
+      </div>
+      <div style={{ fontSize: '1.35rem' }}>{community.title}</div>
+
+      <div className='row mt-2'>
+        <div className='mx-2'>
+          <RoomIcon style={{ color: '#0acf83' }} /> {community?.location}
+        </div>
+      </div>
 
-            <IconButton
-              aria-label='add to favorites'
-              onClick={() => setLiked(!liked)}
-            >
-              {liked ? (
-                <FavoriteIcon style={{ color: '#0acf83' }} />
-              ) : (
-                <FavoriteBorderIcon style={{ color: '#0acf83' }} />
-              )}
-            </IconButton>
-          </>
-        }
-        title={<div style={{ fontSize: '1.35rem' }}>{community.title}</div>}
-        subheader={
-          <div className='row mt-2'>
-            <div className='mx-2'>
-              <RoomIcon style={{ color: '#0acf83' }} /> {community.location}
-            </div>
-            {/* <div className='mx-2'>
-              <PeopleIcon style={{ color: '#0acf83' }} />{' '}
-              {community.members.length}
-            </div> */}
-          </div>
-        }
-      />
-      <CardContent>{community.description}</CardContent>
+      <p className='comm-card-desc'>{community?.description}</p>
     </Card>
   );
 };

diff --git a/client/src/styles/_userCommunities.scss b/client/src/styles/_userCommunities.scss
@@ -22,3 +22,10 @@
 .create-com-button {
   @include brand-button-lg;
 }
+
+.comm-card-desc {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
diff --git a/client/src/views/dashboard/Dashboard.js b/client/src/views/dashboard/Dashboard.js
@@ -15,6 +15,8 @@ const Dashboard = ({ children }) => {
 
   useEffect(() => {
     const communityId = location.pathname.substr(18, 35);
+    // console.log('community ID >>', communityId);
+    // console.log('location', location);
     communityId &&
       (async () => {
         const response = await getCommunity({ id: communityId, token });