diff --git a/docs/img/event-edit-1.png b/docs/img/event-edit-1.png index 28b926bd..ffd96089 100644 Binary files a/docs/img/event-edit-1.png and b/docs/img/event-edit-1.png differ diff --git a/src/client/calendar/events/event-details/EventDetails.jsx b/src/client/calendar/events/event-details/EventDetails.jsx index 190bbfdd..2bab6c3c 100644 --- a/src/client/calendar/events/event-details/EventDetails.jsx +++ b/src/client/calendar/events/event-details/EventDetails.jsx @@ -11,6 +11,7 @@ import GoogleStaticMap from './GoogleStaticMap.jsx' import AddressLink from './AddressLink.jsx' import Icon from 'atoms/Icon.jsx' import { getEventColor } from 'client/calendar/utils/event-colors.js' +import getCalendarSlug from 'client/calendar/utils/get-calendar-slug.js' import { locationToAddressStr } from 'client/calendar/utils/location.js' import { Statuses, EventTypes } from 'client/calendar/events/types.js' import classnames from 'classnames' @@ -104,6 +105,8 @@ class EventDetails extends Component { promoterInfo, } = this.props.event + const { calendar } = this.props + // TODO: migrate old events to have flyer section and not just "flyerUrl" property const { movedToEvent } = this.props @@ -312,6 +315,7 @@ class EventDetails extends Component { : ( // eslint-disable-next-line
+ Back to {calendar.name} {eventDetailsComponent}
) @@ -321,6 +325,7 @@ class EventDetails extends Component { EventDetails.propTypes = { event: PropTypes.object.isRequired, + calendar: PropTypes.object, // if event status is "Moved" this would contain event it's moved to movedToEvent: PropTypes.object, } @@ -328,7 +333,7 @@ EventDetails.propTypes = { export { EventDetails } import { connect } from 'react-redux' -import { getEvent } from 'shared/reducers/reducer.js' +import { getEvent, getCalendar } from 'shared/reducers/reducer.js' import { replaceRoutedModal } from 'shared/actions/actions.js' export default connect( @@ -337,13 +342,14 @@ export default connect( // calendar: getCalendar() const event = getEvent(state, ownProps.params.eventId) + const calendar = getCalendar(state, {calendarId: event.calendarId}) let movedToEvent if (event.status === Statuses.moved && event.movedToEventId) { movedToEvent = getEvent(state, event.movedToEventId) } - return { event, movedToEvent } + return { event, movedToEvent, calendar } }, (dispatch, ownProps) => ({ replaceRoutedModal: (path) => dispatch(replaceRoutedModal({path, hasPadding: false})) diff --git a/src/client/calendar/events/event-details/EventDetails.scss b/src/client/calendar/events/event-details/EventDetails.scss index 3774f4dc..1b04753c 100644 --- a/src/client/calendar/events/event-details/EventDetails.scss +++ b/src/client/calendar/events/event-details/EventDetails.scss @@ -10,12 +10,32 @@ margin-right: auto; border-radius: pxToRem(3); @include box-shadow-soft(); - border-radius: pxToRem(3); @include phone { width: 100%; max-width: 100%; } + + @media (max-width: #{map-get($grid-breakpoints, "lg")}) { + margin-top: 9rem; + } + + .back-to-calendar { + position: absolute; + z-index: 1; + left: 0; + top: -8.5rem; + @include box-shadow-soft(); + border-radius: pxToRem(3); + padding: 1.5rem 4rem; + color: #757575; + + &:before { + content: '\2190'; + position: absolute; + left: 1.5rem; + } + } } .EventDetails { diff --git a/src/client/calendar/utils/get-calendar-slug.js b/src/client/calendar/utils/get-calendar-slug.js new file mode 100644 index 00000000..4b4f6a02 --- /dev/null +++ b/src/client/calendar/utils/get-calendar-slug.js @@ -0,0 +1,3 @@ +const getCalendarSlug = calendar => calendar.id.replace('cal-', '') + +export default getCalendarSlug diff --git a/src/shared/reducers/reducer.js b/src/shared/reducers/reducer.js index 048a2f65..1142b51f 100644 --- a/src/shared/reducers/reducer.js +++ b/src/shared/reducers/reducer.js @@ -9,7 +9,7 @@ import { } from 'client/temp/events.js' import { createSelector } from 'reselect' import Colors from 'client/styles/colors' - +import { partialRight, concat, keyBy } from 'lodash' /* current event flow: => read from file @@ -19,13 +19,8 @@ import Colors from 'client/styles/colors' => selector: create event's map by date */ -//TODO bc: set calendar ID to every event, but don't do it in this function -// it should be done at the time of creation of imported events -const toByIdMap = objects => objects.reduce((map, x) => { - map[x.id] = x - return map -}, {}) - +const toByIdMap = partialRight(keyBy, 'id') +const setCalendarId = calendarId => event => ({...event, calendarId}) const toArrayOfIds = objects => objects.map(x => x.id) const initialState = { @@ -60,16 +55,19 @@ const initialState = { }, events: toByIdMap( - norcalMtb2016Events - .concat(ncnca2016Events) - .concat(ncnca2017Events) - .concat(usac2017Events) + concat( + norcalMtb2016Events.map(setCalendarId('cal-norcal-mtb-2016')), + ncnca2016Events.map(setCalendarId('cal-ncnca-2016')), + ncnca2017Events.map(setCalendarId('cal-ncnca-2017')), + usac2017Events.map(setCalendarId('cal-usac-2017')), + ) ), //calenars map by id calendars: { ['cal-norcal-mtb-2016']: { id: 'cal-norcal-mtb-2016', + slug: 'norcal-mtb', year: 2016, name: '2016 NorCal MTB Calendar', highlight: { @@ -82,6 +80,7 @@ const initialState = { }, ['cal-ncnca-2017-draft']: { id: 'cal-ncnca-2017-draft', + slug: 'ncnca-2017', year: 2017, name: '2017 NCNCA Calendar', // highlight: { @@ -97,6 +96,7 @@ const initialState = { }, ['cal-ncnca-2018-draft']: { id: 'cal-ncnca-2018-draft', + slug: 'ncnca-2017', year: 2018, name: '2018 NCNCA Calendar', // highlight: { @@ -113,6 +113,7 @@ const initialState = { }, ['cal-ncnca-2016']: { id: 'cal-ncnca-2016', + slug: 'ncnca-2016', year: 2016, name: '2016 NCNCA Calendar', // highlight: { @@ -127,6 +128,7 @@ const initialState = { }, ['cal-ncnca-2017']: { id: 'cal-ncnca-2017', + slug: 'ncnca-2017', year: 2017, name: '2017 NCNCA Calendar', // highlight: { @@ -141,6 +143,7 @@ const initialState = { }, ['cal-usac-2017']: { id: 'cal-usac-2017', + slug: 'usac-2017', year: 2017, name: '2017 USA Cycling Calendar', // highlight: { diff --git a/yarn.lock b/yarn.lock index 517ba9fc..e298f3f7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -952,16 +952,9 @@ boom@2.x.x: dependencies: hoek "2.x.x" -bootstrap@4.0.0-alpha.6: - version "4.0.0-alpha.6" - resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0-alpha.6.tgz#4f54dd33ac0deac3b28407bc2df7ec608869c9c8" - dependencies: - jquery ">=1.9.1" - tether "^1.4.0" - -bower@^1.7.9: - version "1.8.0" - resolved "https://registry.yarnpkg.com/bower/-/bower-1.8.0.tgz#55dbebef0ad9155382d9e9d3e497c1372345b44a" +bootstrap@4.0.0-alpha.2: + version "4.0.0-alpha.2" + resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0-alpha.2.tgz#1238dd5c482d2545f2be78ab0d98731eb93e50c1" brace-expansion@^1.0.0, brace-expansion@^1.1.7: version "1.1.7" @@ -2648,10 +2641,6 @@ joi@^10.6.0: items "2.x.x" topo "2.x.x" -jquery@>=1.9.1: - version "3.2.1" - resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787" - js-base64@^2.1.9: version "2.1.9" resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce" @@ -4496,10 +4485,6 @@ tar@^2.0.0, tar@^2.2.1: fstream "^1.0.2" inherits "2" -tether@^1.4.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/tether/-/tether-1.4.0.tgz#0f9fa171f75bf58485d8149e94799d7ae74d1c1a" - text-table@~0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"