From 000e1e1afc24888f0f7b5bd1570edf83caa16633 Mon Sep 17 00:00:00 2001 From: Devesh Date: Tue, 23 Mar 2021 23:50:10 +0530 Subject: [PATCH 1/5] filter cards were made as per designs and done with responsiveness upto 300px width --- src/components/dashBoard/filterCards/index.js | 78 +++++++++++++++--- src/components/dashBoard/filterCards/style.js | 79 +++++++++++++------ src/pages/filterPage/index.js | 13 ++- 3 files changed, 132 insertions(+), 38 deletions(-) diff --git a/src/components/dashBoard/filterCards/index.js b/src/components/dashBoard/filterCards/index.js index e2972e8..f9c21fe 100644 --- a/src/components/dashBoard/filterCards/index.js +++ b/src/components/dashBoard/filterCards/index.js @@ -1,9 +1,11 @@ import React, { useState } from 'react'; -import { Card, CardActions, Collapse, IconButton } from '@material-ui/core'; +import { Card, CardActions, Collapse, IconButton, CardContent } from '@material-ui/core'; import useStyles from './style'; import Grid from '@material-ui/core/Grid'; +import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward'; +import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward'; -const MessageFilterCard = ({ index,body,date }) => { +const MessageFilterCard = ({ index, body, date, question, name }) => { const classes = useStyles(); const [expanded, setExpanded] = useState(false); const [showPrimaryText, setShowPrimaryText] = useState(false); @@ -14,14 +16,29 @@ const MessageFilterCard = ({ index,body,date }) => {
- -
- Q + +
+
+
+ + + +
+
+ 69 + +
+
- - + + +
-
+ {question}? +
+ + +
{!showPrimaryText ? body.length > 80 @@ -43,13 +60,54 @@ const MessageFilterCard = ({ index,body,date }) => { setShowPrimaryText(!showPrimaryText); }} > - {body.length > 80 ? (!expanded ? 'View More' : 'View Less') : ''} + {body.length > 80 ? (!expanded ? 'Read More' : 'Read Less') : ''} + + +
+ + + +
+ + + + + +
+
+
+ + + +
+
+ 69 + +
+
+
+ + + + +
-

{date}

+ + +
+ +
+
+ {name} +
+ asked 1d ago +
+ +
diff --git a/src/components/dashBoard/filterCards/style.js b/src/components/dashBoard/filterCards/style.js index 866f70f..5401ed3 100644 --- a/src/components/dashBoard/filterCards/style.js +++ b/src/components/dashBoard/filterCards/style.js @@ -1,7 +1,7 @@ import { makeStyles } from '@material-ui/core/styles'; -const useStyles = makeStyles({ +const useStyles = makeStyles((theme) =>({ msgCard: { padding: '15px', marginTop: '20px', @@ -12,8 +12,59 @@ const useStyles = makeStyles({ transform: 'translateY(-2px)', }, }, + photodabba:{ + //marginLeft: '100px', + height:'45px', + width:'45px', + backgroundColor:'red', + marginRight:'3px', + '@media(max-width: 600px)': { + height:'35px', + width:'35px', + }, + '@media(max-width: 400px)': { + height:'28px', + width:'28px', + }, + }, + cardFooter: { + width:'100%', + display:'flex', + justifyContent:'flex-end', + //border: '1px solid #2d2d2d' + }, + manfont:{ + fontSize:'14px', + '@media(max-width: 600px)': { + fontSize:'12px', + }, + }, cardLeftavatar:{ - fontSize:'20px', + display:'flex', + flexDirection:'column', + alignItems:'center', + '@media(max-width: 420px)': { + marginLeft:'-10px', + }, + '@media(max-width: 600px)': { + marginLeft:'-10px', + }, + minHeight:'10vh', + }, + cardwrap:{ + //minHeight:'80px' + }, + cardLefty:{ + // marginBottom:'100px', + }, + cardLeftyflex:{ + fontSize:'15px', + marginBottom:'20px', + // marginBottom:'100px', + }, + cardLefty1:{ + //marginTop:'10vh', + //marginBottom:'100%x', }, cardContent: { margin: 0, @@ -37,32 +88,10 @@ const useStyles = makeStyles({ fontWeight: 700, padding: 0, }, - cardFooter: { - display: 'flex', - justifyContent: 'space-between', - padding: 0, - }, - date: { - margin: '30px 15px 0 0', - fontStyle: 'italic', - fontFamily: 'Roboto, sans-serif', - fontWeight: 700, - }, - '@media(min-width: 320px)': { - date: { - margin: '20px 15px 0 0', - }, - }, - '@media(min-width: 720px)': { - date: { - margin: '30px 15px 0 0', - fontSize: '16px', - }, - }, iconButton: { padding: 0, margin: '5px 10px', }, - }); + })); export default useStyles; \ No newline at end of file diff --git a/src/pages/filterPage/index.js b/src/pages/filterPage/index.js index f2238c3..6b7a174 100644 --- a/src/pages/filterPage/index.js +++ b/src/pages/filterPage/index.js @@ -25,14 +25,19 @@ const FilterPage = () => { const [DashData, setDashData] = useState( Array(50) .fill({ - body: - 'Lorem Ipsum is simply dummy Lorem Ipsum is simply dummyLorem Ipsum is simply dummyLorem Ipsum is simply dummyLorem Ipsum is simply dummyLorem Ipsum is simply dummy.', + question: + 'Lorem Ipsum is simply dummy Lorem Ipsum is ', + body: + 'Lorem Ipsum is simply dummy Lorem Ipsum is Lorem Ipsum is simply dummy Lorem Ipsum is Lorem Ipsum is simply dummy Lorem Ipsum is ', date: ' 28th Dec 2020, 2:31 a.m.', + name:'hemlo rendi' }) .map((obj) => { return { body: obj.body, - date: obj.data + 'aaj ka din', + question: obj.question, + date: obj.date, + name: obj.name }; }) ); @@ -115,6 +120,8 @@ return( ).map((message, index) => ( Date: Thu, 25 Mar 2021 12:59:02 +0530 Subject: [PATCH 2/5] fixed filter cards height --- src/components/dashBoard/filterCards/index.js | 11 +---------- src/components/dashBoard/filterCards/style.js | 2 +- 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/src/components/dashBoard/filterCards/index.js b/src/components/dashBoard/filterCards/index.js index f9c21fe..19377d2 100644 --- a/src/components/dashBoard/filterCards/index.js +++ b/src/components/dashBoard/filterCards/index.js @@ -63,13 +63,6 @@ const MessageFilterCard = ({ index, body, date, question, name }) => { {body.length > 80 ? (!expanded ? 'Read More' : 'Read Less') : ''} - -
- - - - -
@@ -106,9 +99,7 @@ const MessageFilterCard = ({ index, body, date, question, name }) => { asked 1d ago
- - - +
diff --git a/src/components/dashBoard/filterCards/style.js b/src/components/dashBoard/filterCards/style.js index 5401ed3..1008115 100644 --- a/src/components/dashBoard/filterCards/style.js +++ b/src/components/dashBoard/filterCards/style.js @@ -49,7 +49,7 @@ const useStyles = makeStyles((theme) =>({ '@media(max-width: 600px)': { marginLeft:'-10px', }, - minHeight:'10vh', + //minHeight:'10vh', }, cardwrap:{ //minHeight:'80px' From ecdc0f410cde03f1e1d207859c1613ce892466a3 Mon Sep 17 00:00:00 2001 From: Devesh Date: Sun, 28 Mar 2021 19:00:19 +0530 Subject: [PATCH 3/5] added changes to mobile view of answer cards --- src/components/dashBoard/answerCards/index.js | 2 +- src/components/dashBoard/answerCards/style.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/dashBoard/answerCards/index.js b/src/components/dashBoard/answerCards/index.js index c5d5ba5..4f3c2e8 100644 --- a/src/components/dashBoard/answerCards/index.js +++ b/src/components/dashBoard/answerCards/index.js @@ -29,7 +29,7 @@ const AnswerCards = ({ index, name, body, date }) => {

{date}

- {body} + {window.innerWidth>600?body.slice(0,80):body.slice(0,49)}
diff --git a/src/components/dashBoard/answerCards/style.js b/src/components/dashBoard/answerCards/style.js index af8616f..3308de1 100644 --- a/src/components/dashBoard/answerCards/style.js +++ b/src/components/dashBoard/answerCards/style.js @@ -80,7 +80,7 @@ const useStyles = makeStyles({ }, '@media(min-width: 200px)': { date: { - margin: '20px 15px 0 -40px', + margin: '0px 15px 0 -20px', fontSize: '12px', }, icon: { @@ -92,7 +92,7 @@ const useStyles = makeStyles({ }, '@media(min-width: 720px)': { date: { - margin: '30px 15px 0 0', + margin: '0px 15px 0 0', fontSize: '16px', }, icon: { From 11df7b928a070d9c0097d6e6171e4adfed22755c Mon Sep 17 00:00:00 2001 From: Devesh Date: Sun, 28 Mar 2021 19:05:17 +0530 Subject: [PATCH 4/5] changed filtercards mobile view --- src/components/dashBoard/filterCards/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/dashBoard/filterCards/index.js b/src/components/dashBoard/filterCards/index.js index 19377d2..c6cee74 100644 --- a/src/components/dashBoard/filterCards/index.js +++ b/src/components/dashBoard/filterCards/index.js @@ -42,7 +42,8 @@ const MessageFilterCard = ({ index, body, date, question, name }) => { {!showPrimaryText ? body.length > 80 - ? `${body.substr(0, 80)}...` + ? window.innerWidth<600?`${body.substr(0, 21)}...` + :`${body.substr(0, 80)}...` : `${body}` : ''} Date: Sun, 28 Mar 2021 19:31:58 +0530 Subject: [PATCH 5/5] minor width tweak --- src/pages/filterPage/styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/filterPage/styles.js b/src/pages/filterPage/styles.js index fcc3d95..f277a9c 100644 --- a/src/pages/filterPage/styles.js +++ b/src/pages/filterPage/styles.js @@ -8,7 +8,7 @@ import { makeStyles } from '@material-ui/core/styles'; overflowX: 'hidden', }, messages: { - width: '90%', + width: '100%', display: 'flex', justifyContent: 'center', padding: '10px',