From c8c10746040a97cd033216d0da9e3516c88976f3 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Tue, 28 Jan 2020 19:34:10 +0100
Subject: [PATCH] hide some activities on calendar depending on screen width -
 #46

---
 fittrackee_client/src/components/App.css      | 51 +++++++++++++++++++
 .../Dashboard/CalendarActivities.jsx          | 13 +++--
 2 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/fittrackee_client/src/components/App.css b/fittrackee_client/src/components/App.css
index 82490c71..473d8806 100644
--- a/fittrackee_client/src/components/App.css
+++ b/fittrackee_client/src/components/App.css
@@ -248,6 +248,13 @@ label {
 
 .custom-fa-small {
   font-size: 0.8em;
+  margin-left: -0.8em;
+}
+
+@media only screen and (max-width: 992px) {
+  .custom-fa-small {
+    font-size: 0.6em;
+  }
 }
 
 .custom-tooltip {
@@ -598,3 +605,47 @@ label {
 .calendar .body .weekend {
   background: #f5f5f5;
 }
+
+.calendar-activity,
+.calendar-more {
+  display: none;
+}
+
+.calendar-more {
+  color: #405976;
+  font-size: .7em;
+  margin-left: 0.3em;
+}
+
+@media only screen and (max-width: 992px) {
+
+  .calendar-activity:nth-child(-n+2) {
+    display: inline-block;
+  }
+
+  .calendar-activity:nth-child(n+3) ~ .calendar-more {
+    display: inline-block;
+  }
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1200px) {
+
+  .calendar-activity:nth-child(-n+4){
+      display: inline-block;
+  }
+
+  .calendar-activity:nth-child(n+5) ~ .calendar-more {
+      display: inline-block;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+
+  .calendar-activity:nth-child(-n+6) {
+    display: inline-block;
+  }
+
+  .calendar-activity:nth-child(n+7) ~ .calendar-more {
+    display: inline-block;
+  }
+}
diff --git a/fittrackee_client/src/components/Dashboard/CalendarActivities.jsx b/fittrackee_client/src/components/Dashboard/CalendarActivities.jsx
index f27056a3..c6c56732 100644
--- a/fittrackee_client/src/components/Dashboard/CalendarActivities.jsx
+++ b/fittrackee_client/src/components/Dashboard/CalendarActivities.jsx
@@ -7,9 +7,13 @@ export default class CalendarActivities extends React.PureComponent {
   render() {
     const { dayActivities, isDisabled, sports } = this.props
     return (
-      <>
+      <div>
         {dayActivities.map(act => (
-          <Link key={act.id} to={`/activities/${act.id}`}>
+          <Link
+            className="calendar-activity"
+            key={act.id}
+            to={`/activities/${act.id}`}
+          >
             <>
               <img
                 alt="activity sport logo"
@@ -36,7 +40,10 @@ export default class CalendarActivities extends React.PureComponent {
             </>
           </Link>
         ))}
-      </>
+        {dayActivities.length > 2 && (
+          <i className="fa fa-plus-circle calendar-more" aria-hidden="true" />
+        )}
+      </div>
     )
   }
 }