display a popup to show more activities - fix #46

fittrackee_client/src/components/App.css

@@ -552,7 +552,6 @@ label {
   position: relative;
   height: 3em;
   border-right: 1px solid var(--border-color);
-  overflow: hidden;
   background: var(--neutral-color);
 }
 
@@ -617,6 +616,21 @@ label {
   margin-left: 0.3em;
 }
 
+.calendar-display-more {
+  background: whitesmoke;
+  border-radius: 4px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  margin-bottom: 10px;
+  padding: 10px 15px;
+  position: absolute;
+  min-width: 52px;
+  z-index: 1000;
+}
+
+.calendar-activity-more {
+  display: none;
+}
+
 @media only screen and (max-width: 992px) {
 
   .calendar-activity:nth-child(-n+2) {
@@ -626,6 +640,10 @@ label {
   .calendar-activity:nth-child(n+3) ~ .calendar-more {
     display: inline-block;
   }
+
+  .calendar-activity-more:nth-child(n+3){
+    display: inline-block;
+  }
 }
 
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
@@ -637,6 +655,10 @@ label {
   .calendar-activity:nth-child(n+5) ~ .calendar-more {
     display: inline-block;
   }
+
+  .calendar-activity-more:nth-child(n+5){
+    display: inline-block;
+  }
 }
 
 @media only screen and (min-width: 1200px) {
@@ -648,4 +670,8 @@ label {
   .calendar-activity:nth-child(n+7) ~ .calendar-more {
     display: inline-block;
   }
+
+  .calendar-activity-more:nth-child(n+7){
+    display: inline-block;
+  }
 }

fittrackee_client/src/components/Dashboard/CalendarActivities.jsx

@@ -1,47 +1,57 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
 
-import { recordsLabels } from '../../utils/activities'
+import CalendarActivity from './CalendarActivity'
+
+export default class CalendarActivities extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+    this.state = {
+      isHidden: true,
+    }
+  }
+
+  handleDisplayMore() {
+    this.setState({
+      isHidden: !this.state.isHidden,
+    })
+  }
 
-export default class CalendarActivities extends React.PureComponent {
   render() {
     const { dayActivities, isDisabled, sports } = this.props
+    const { isHidden } = this.state
     return (
       <div>
         {dayActivities.map(act => (
-          <Link
+          <CalendarActivity
-            className="calendar-activity"
             key={act.id}
-            to={`/activities/${act.id}`}
+            activity={act}
-          >
+            isDisabled={isDisabled}
-            <>
+            isMore=""
-              <img
+            sportImg={sports.filter(s => s.id === act.sport_id).map(s => s.img)}
-                alt="activity sport logo"
-                className={`activity-sport ${isDisabled}`}
-                src={sports.filter(s => s.id === act.sport_id).map(s => s.img)}
-                title={act.title}
           />
-              {act.records.length > 0 && (
-                <sup>
-                  <i
-                    className="fa fa-trophy custom-fa-small"
-                    aria-hidden="true"
-                    title={act.records.map(
-                      rec =>
-                        ` ${
-                          recordsLabels.filter(
-                            r => r.record_type === rec.record_type
-                          )[0].label
-                        }`
-                    )}
-                  />
-                </sup>
-              )}
-            </>
-          </Link>
         ))}
         {dayActivities.length > 2 && (
-          <i className="fa fa-plus-circle calendar-more" aria-hidden="true" />
+          <i
+            className="fa fa-plus calendar-more"
+            aria-hidden="true"
+            onClick={() => this.handleDisplayMore()}
+            title="show more activities"
+          />
+        )}
+        {!isHidden && (
+          <div className="calendar-display-more">
+            {dayActivities.map(act => (
+              <CalendarActivity
+                key={act.id}
+                activity={act}
+                isDisabled={isDisabled}
+                isMore="-more"
+                sportImg={sports
+                  .filter(s => s.id === act.sport_id)
+                  .map(s => s.img)}
+              />
+            ))}
+          </div>
         )}
       </div>
     )

fittrackee_client/src/components/Dashboard/CalendarActivity.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+import { recordsLabels } from '../../utils/activities'
+
+export default function CalendarActivity(props) {
+  const { activity, isDisabled, isMore, sportImg } = props
+  return (
+    <Link
+      className={`calendar-activity${isMore}`}
+      to={`/activities/${activity.id}`}
+    >
+      <>
+        <img
+          alt="activity sport logo"
+          className={`activity-sport ${isDisabled}`}
+          src={sportImg}
+          title={activity.title}
+        />
+        {activity.records.length > 0 && (
+          <sup>
+            <i
+              className="fa fa-trophy custom-fa-small"
+              aria-hidden="true"
+              title={activity.records.map(
+                rec =>
+                  ` ${
+                    recordsLabels.filter(
+                      r => r.record_type === rec.record_type
+                    )[0].label
+                  }`
+              )}
+            />
+          </sup>
+        )}
+      </>
+    </Link>
+  )
+}