From 67908905df8345503a61c622d50f073bf6a3533e Mon Sep 17 00:00:00 2001
From: Qaseem Wakeel Lodhi <qaseemlodhi93@gmail.com>
Date: Sat, 8 Dec 2018 16:29:09 +0500
Subject: [PATCH 1/2] truncate event detail on home page.

https://github.com/recurship/event-manager/issues/195
---
 .../EventList/EventCard/EventCard.css         | 45 +++++++++++++++++++
 .../EventList/EventCard/EventCard.js          | 42 +++++++++++------
 2 files changed, 74 insertions(+), 13 deletions(-)
 create mode 100644 client/src/components/EventList/EventCard/EventCard.css

diff --git a/client/src/components/EventList/EventCard/EventCard.css b/client/src/components/EventList/EventCard/EventCard.css
new file mode 100644
index 0000000..20fc5ae
--- /dev/null
+++ b/client/src/components/EventList/EventCard/EventCard.css
@@ -0,0 +1,45 @@
+.read-more-state {
+  display: none;
+}
+
+.read-more-target {
+  opacity: 0;
+  max-height: 0;
+  font-size: 0;
+  transition: 0.25s ease;
+}
+
+.read-more-state:checked ~ .read-more-wrap .read-more-target {
+  opacity: 1;
+  font-size: inherit;
+  max-height: 999em;
+}
+
+.dotspan {
+  opacity: 1;
+}
+
+.read-more-state:checked ~ .read-more-wrap .dotspan {
+  display: none;
+}
+
+.read-more-state ~ .read-more-trigger:before {
+  content: 'read more';
+  color: #0d7ec4;
+}
+
+.read-more-state:checked ~ .read-more-trigger:before {
+  content: 'read less';
+  color: #0d7ec4;
+}
+
+.read-more-trigger {
+  cursor: pointer;
+  display: block;
+  padding: 0 0.5em;
+  color: #666;
+  height: 30px;
+  font-size: 0.9em;
+  line-height: 2;
+  text-align: right;
+}
diff --git a/client/src/components/EventList/EventCard/EventCard.js b/client/src/components/EventList/EventCard/EventCard.js
index b7ebdbe..a705c30 100644
--- a/client/src/components/EventList/EventCard/EventCard.js
+++ b/client/src/components/EventList/EventCard/EventCard.js
@@ -11,13 +11,19 @@ import {
 import moment from 'moment';
 import { Link } from 'react-router-dom';
 
+import './EventCard.css';
+
 const DATE_FORMAT = 'LLLL';
 const EventCard = props => {
   const card = props.event;
+
+  const startingDesc = card.description.slice(0, 35);
+  const remainingDesc = card.description.slice(35, card.description.length);
+
   return (
     <Col md="4" className="col-padding">
-      <Link to={`/events/${props.event.id}`}>
-        <Card>
+      <Card>
+        <Link to={`/events/${props.event.id}`}>
           <CardImg
             top
             width="100%"
@@ -25,17 +31,27 @@ const EventCard = props => {
             alt="Card image cap"
             height="180"
           />
-          <CardBody>
-            <CardTitle>{card.title}</CardTitle>
-            <CardText>{card.description}</CardText>
-            <CardSubtitle>
-              <small className="text-muted">
-                {moment(card.startDatetime).format(DATE_FORMAT)}
-              </small>
-            </CardSubtitle>
-          </CardBody>
-        </Card>
-      </Link>
+        </Link>
+        <CardBody>
+          <CardTitle>{card.title}</CardTitle>
+          {startingDesc.length === 35 && (
+            <input type="checkbox" class="read-more-state" id={card.id} />
+          )}
+          <CardText className="read-more-wrap">
+            {startingDesc}
+            {startingDesc.length === 35 && (
+              <span className="dotspan">&nbsp;...</span>
+            )}
+            <span className="read-more-target">{remainingDesc}</span>
+          </CardText>
+          <label htmlFor={card.id} className="read-more-trigger" />
+          <CardSubtitle>
+            <small className="text-muted">
+              {moment(card.startDatetime).format(DATE_FORMAT)}
+            </small>
+          </CardSubtitle>
+        </CardBody>
+      </Card>
     </Col>
   );
 };

From 8b1bb39097115bd5cfeff5a20e8d622f419ed55a Mon Sep 17 00:00:00 2001
From: Qaseem Wakeel Lodhi <qaseemlodhi93@gmail.com>
Date: Sat, 19 Jan 2019 11:06:58 +0500
Subject: [PATCH 2/2] resolve codacy issuue.

---
 client/src/components/EventList/EventCard/EventCard.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/EventList/EventCard/EventCard.js b/client/src/components/EventList/EventCard/EventCard.js
index a705c30..d836ac6 100644
--- a/client/src/components/EventList/EventCard/EventCard.js
+++ b/client/src/components/EventList/EventCard/EventCard.js
@@ -35,7 +35,7 @@ const EventCard = props => {
         <CardBody>
           <CardTitle>{card.title}</CardTitle>
           {startingDesc.length === 35 && (
-            <input type="checkbox" class="read-more-state" id={card.id} />
+            <input type="checkbox" className="read-more-state" id={card.id} />
           )}
           <CardText className="read-more-wrap">
             {startingDesc}