Merge branch '46_calendar'

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 {
@@ -545,7 +552,6 @@ label {
   position: relative;
   height: 3em;
   border-right: 1px solid var(--border-color);
-  overflow: hidden;
   background: var(--neutral-color);
 }
 
@@ -598,3 +604,74 @@ label {
 .calendar .body .weekend {
   background: #f5f5f5;
 }
+
+.calendar-activity,
+.calendar-more {
+  display: none;
+}
+
+.calendar-more {
+  color: #405976;
+  font-size: .7em;
+  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) {
+    display: inline-block;
+  }
+
+  .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) {
+
+  .calendar-activity:nth-child(-n+4){
+    display: inline-block;
+  }
+
+  .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) {
+
+  .calendar-activity:nth-child(-n+6) {
+    display: inline-block;
+  }
+
+  .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/Calendar.jsx

@@ -13,13 +13,12 @@ import {
   subMonths,
 } from 'date-fns'
 import { enGB, fr } from 'date-fns/locale'
-import React, { Fragment } from 'react'
+import React from 'react'
 import { connect } from 'react-redux'
-import { Link } from 'react-router-dom'
 
+import CalendarActivities from './CalendarActivities'
 import { getMonthActivities } from '../../actions/activities'
 import { getDateWithTZ } from '../../utils'
-import { recordsLabels } from '../../utils/activities'
 
 const getStartAndEndMonth = (date, weekStartOnMonday) => {
   const monthStart = startOfMonth(date)
@@ -114,36 +113,11 @@ class Calendar extends React.Component {
           <div className={`col cell ${isWeekEnd ? ' weekend' : ''}`} key={day}>
             <div className={`img${isDisabled}`}>
               <span className="number">{formattedDate}</span>
-              {dayActivities.map(act => (
-                <Link key={act.id} to={`/activities/${act.id}`}>
-                  <Fragment>
-                    <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>
-                    )}
-                  </Fragment>
-                </Link>
-              ))}
+              <CalendarActivities
+                dayActivities={dayActivities}
+                isDisabled={isDisabled}
+                sports={sports}
+              />
             </div>
           </div>
         )

fittrackee_client/src/components/Dashboard/CalendarActivities.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+
+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,
+    })
+  }
+
+  render() {
+    const { dayActivities, isDisabled, sports } = this.props
+    const { isHidden } = this.state
+    return (
+      <div>
+        {dayActivities.map(act => (
+          <CalendarActivity
+            key={act.id}
+            activity={act}
+            isDisabled={isDisabled}
+            isMore=""
+            sportImg={sports.filter(s => s.id === act.sport_id).map(s => s.img)}
+          />
+        ))}
+        {dayActivities.length > 2 && (
+          <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>
+  )
+}