From 972a5d4469dfe470ee182dd6330d4f4e7732d6b5 Mon Sep 17 00:00:00 2001 From: graymur Date: Tue, 24 Oct 2017 18:53:24 +0200 Subject: [PATCH 1/5] "Back to calendar" link in event page when opened in new tab/window --- .../events/event-details/EventDetails.jsx | 9 +++++++-- .../events/event-details/EventDetails.scss | 7 +++++++ src/shared/reducers/reducer.js | 16 ++++++++++++---- 3 files changed, 26 insertions(+), 6 deletions(-) diff --git a/src/client/calendar/events/event-details/EventDetails.jsx b/src/client/calendar/events/event-details/EventDetails.jsx index 190bbfdd..d2a73a51 100644 --- a/src/client/calendar/events/event-details/EventDetails.jsx +++ b/src/client/calendar/events/event-details/EventDetails.jsx @@ -104,6 +104,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 +314,7 @@ class EventDetails extends Component { : ( // eslint-disable-next-line
+ Back to {calendar.name} {eventDetailsComponent}
) @@ -321,6 +324,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 +332,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 +341,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..d036d662 100644 --- a/src/client/calendar/events/event-details/EventDetails.scss +++ b/src/client/calendar/events/event-details/EventDetails.scss @@ -16,6 +16,13 @@ width: 100%; max-width: 100%; } + + .back-to-calendar { + position: absolute; + z-index: 1; + left: 4rem; + top: 1rem; + } } .EventDetails { diff --git a/src/shared/reducers/reducer.js b/src/shared/reducers/reducer.js index 048a2f65..af29e7f1 100644 --- a/src/shared/reducers/reducer.js +++ b/src/shared/reducers/reducer.js @@ -26,6 +26,8 @@ const toByIdMap = objects => objects.reduce((map, x) => { return map }, {}) +const setEventsCalendarId = calendarId => event => Object.assign({}, event, {calendarId}) + const toArrayOfIds = objects => objects.map(x => x.id) const initialState = { @@ -60,16 +62,17 @@ const initialState = { }, events: toByIdMap( - norcalMtb2016Events - .concat(ncnca2016Events) - .concat(ncnca2017Events) - .concat(usac2017Events) + norcalMtb2016Events.map(setEventsCalendarId('cal-norcal-mtb-2016')) + .concat(ncnca2016Events.map(setEventsCalendarId('cal-ncnca-2016'))) + .concat(ncnca2017Events.map(setEventsCalendarId('cal-ncnca-2017'))) + .concat(usac2017Events.map(setEventsCalendarId('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 +85,7 @@ const initialState = { }, ['cal-ncnca-2017-draft']: { id: 'cal-ncnca-2017-draft', + slug: 'ncnca-2017', year: 2017, name: '2017 NCNCA Calendar', // highlight: { @@ -97,6 +101,7 @@ const initialState = { }, ['cal-ncnca-2018-draft']: { id: 'cal-ncnca-2018-draft', + slug: 'ncnca-2017', year: 2018, name: '2018 NCNCA Calendar', // highlight: { @@ -113,6 +118,7 @@ const initialState = { }, ['cal-ncnca-2016']: { id: 'cal-ncnca-2016', + slug: 'ncnca-2016', year: 2016, name: '2016 NCNCA Calendar', // highlight: { @@ -127,6 +133,7 @@ const initialState = { }, ['cal-ncnca-2017']: { id: 'cal-ncnca-2017', + slug: 'ncnca-2017', year: 2017, name: '2017 NCNCA Calendar', // highlight: { @@ -141,6 +148,7 @@ const initialState = { }, ['cal-usac-2017']: { id: 'cal-usac-2017', + slug: 'usac-2017', year: 2017, name: '2017 USA Cycling Calendar', // highlight: { From e21c2e1621eb7fa2eb9d80e1d510c304461a0807 Mon Sep 17 00:00:00 2001 From: graymur Date: Thu, 26 Oct 2017 18:35:16 +0200 Subject: [PATCH 2/5] replaces Object.assign with object spread --- src/shared/reducers/reducer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/reducers/reducer.js b/src/shared/reducers/reducer.js index af29e7f1..e3cd222c 100644 --- a/src/shared/reducers/reducer.js +++ b/src/shared/reducers/reducer.js @@ -26,7 +26,7 @@ const toByIdMap = objects => objects.reduce((map, x) => { return map }, {}) -const setEventsCalendarId = calendarId => event => Object.assign({}, event, {calendarId}) +const setEventsCalendarId = calendarId => event => ({...event, calendarId}) const toArrayOfIds = objects => objects.map(x => x.id) From b6211f6937183676d71d29982ca03dedfda1b11d Mon Sep 17 00:00:00 2001 From: graymur Date: Thu, 26 Oct 2017 18:43:32 +0200 Subject: [PATCH 3/5] Refactored settings calendat's id on event --- src/shared/reducers/reducer.js | 23 +++++++++-------------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/src/shared/reducers/reducer.js b/src/shared/reducers/reducer.js index e3cd222c..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,15 +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 setEventsCalendarId = calendarId => event => ({...event, calendarId}) - +const toByIdMap = partialRight(keyBy, 'id') +const setCalendarId = calendarId => event => ({...event, calendarId}) const toArrayOfIds = objects => objects.map(x => x.id) const initialState = { @@ -62,10 +55,12 @@ const initialState = { }, events: toByIdMap( - norcalMtb2016Events.map(setEventsCalendarId('cal-norcal-mtb-2016')) - .concat(ncnca2016Events.map(setEventsCalendarId('cal-ncnca-2016'))) - .concat(ncnca2017Events.map(setEventsCalendarId('cal-ncnca-2017'))) - .concat(usac2017Events.map(setEventsCalendarId('cal-usac-2017'))) + 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 From 449168a6a5d2747bcbee3baf229b86698eba9850 Mon Sep 17 00:00:00 2001 From: graymur Date: Fri, 27 Oct 2017 15:07:51 +0200 Subject: [PATCH 4/5] getCalendarSlug util function --- src/client/calendar/events/event-details/EventDetails.jsx | 3 ++- src/client/calendar/utils/get-calendar-slug.js | 3 +++ 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 src/client/calendar/utils/get-calendar-slug.js diff --git a/src/client/calendar/events/event-details/EventDetails.jsx b/src/client/calendar/events/event-details/EventDetails.jsx index d2a73a51..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' @@ -314,7 +315,7 @@ class EventDetails extends Component { : ( // eslint-disable-next-line
- Back to {calendar.name} + Back to {calendar.name} {eventDetailsComponent}
) 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 From 2e3725b1921eb86ee9af29b654035151623794a8 Mon Sep 17 00:00:00 2001 From: graymur Date: Tue, 14 Nov 2017 18:24:48 +0100 Subject: [PATCH 5/5] Styling Back button --- docs/img/event-edit-1.png | Bin 256040 -> 256035 bytes .../events/event-details/EventDetails.scss | 19 +++++++++++++--- yarn.lock | 21 +++--------------- 3 files changed, 19 insertions(+), 21 deletions(-) diff --git a/docs/img/event-edit-1.png b/docs/img/event-edit-1.png index 28b926bd02b2a4be7789d9d0284ea0973c68f2d5..ffd960894af2b06c1bb498993eca0a95340c0210 100644 GIT binary patch delta 46 zcmV+}0MY-b&<~@~4+M!&PDg|numAu6 delta 55 zcmZ2{fq%sXe%8(aKX=|nmaQy|XQnaowqKaWxc$O3rdv&nyxUhvGC$S?(!I{iwk$yU Jlsj|e0su#t6XXB@ diff --git a/src/client/calendar/events/event-details/EventDetails.scss b/src/client/calendar/events/event-details/EventDetails.scss index d036d662..1b04753c 100644 --- a/src/client/calendar/events/event-details/EventDetails.scss +++ b/src/client/calendar/events/event-details/EventDetails.scss @@ -10,18 +10,31 @@ 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: 4rem; - top: 1rem; + 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; + } } } 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"