hide some activities on calendar depending on screen width - #46

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;
+  }
+}

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>
     )
   }
 }