From b03186e8993a064cad685a363fc36c21c559f9a7 Mon Sep 17 00:00:00 2001 From: Santtu Tuovinen Date: Tue, 12 Nov 2019 08:48:39 +0200 Subject: [PATCH 01/12] Added note for mobile users how to resize selected events. Added translations for the note. --- app/i18n/messages/en.json | 1 + app/i18n/messages/fi.json | 1 + app/i18n/messages/sv.json | 1 + app/pages/resource/ResourcePage.js | 7 +++++++ 4 files changed, 10 insertions(+) diff --git a/app/i18n/messages/en.json b/app/i18n/messages/en.json index 14f1d8aa3..7d7230125 100644 --- a/app/i18n/messages/en.json +++ b/app/i18n/messages/en.json @@ -220,6 +220,7 @@ "ReservationInfo.loginMessage": "You must log in to reserve this premise.", "ReservationInfo.loginText": "You must log in to reserve this premise.", "ReservationInfo.maxNumberOfReservations": "Maximum number of reservations per user:", + "ReservationInfo.selectionEditDirections": "Press selected period again to resize", "ReservationInfo.reservationMaxLength": "Maximum duration of the reservation:", "ReservationInfo.reservationMinLength": "Minimum duration of the reservation:", "ReservationInfo.reservationEarliestDays": "Reservation at the earliest in {time}", diff --git a/app/i18n/messages/fi.json b/app/i18n/messages/fi.json index ec45608d1..1d1590c21 100644 --- a/app/i18n/messages/fi.json +++ b/app/i18n/messages/fi.json @@ -220,6 +220,7 @@ "ReservationInfo.loginMessage": "Sinun täytyy kirjautua sisään, jotta voit tehdä varauksen tähän tilaan.", "ReservationInfo.loginText": "Sinun täytyy kirjautua sisään, jotta voit tehdä varauksen tähän tilaan.", "ReservationInfo.maxNumberOfReservations": "Maksimimäärä varauksia per käyttäjä:", + "ReservationInfo.selectionEditDirections": "Paina valintaasi uudelleen muuttaaksesi varauksen pituutta", "ReservationInfo.reservationMaxLength": "Varauksen maksimipituus:", "ReservationInfo.reservationMinLength": "Varauksen vähimmäispituus:", "ReservationInfo.reservationEarliestDays": "Varattavissa vähintään {time} etukäteen", diff --git a/app/i18n/messages/sv.json b/app/i18n/messages/sv.json index 70639418a..24bbfce11 100644 --- a/app/i18n/messages/sv.json +++ b/app/i18n/messages/sv.json @@ -221,6 +221,7 @@ "ReservationForm.markAsClosedDescription": "Markera kryssrutan om du stänger resursen genom att reservera.", "ReservationInfo.loginMessage": "För att kunna boka detta utrymme måste du logga in.", "ReservationInfo.loginText": "För att kunna boka detta utrymme måste du logga in.", + "ReservationInfo.selectionEditDirections": "Tryck på ditt val igen för att ändra dess längd", "ReservationInfo.maxNumberOfReservations": "Maximalt antal bokningar per användare:", "ReservationInfo.reservationMaxLength": "Bokningens maximala längd:", "ReservationInfo.reservationMinLength": "Minsta längd av bokningen:", diff --git a/app/pages/resource/ResourcePage.js b/app/pages/resource/ResourcePage.js index 540da849b..a0db533f9 100644 --- a/app/pages/resource/ResourcePage.js +++ b/app/pages/resource/ResourcePage.js @@ -233,6 +233,13 @@ class UnconnectedResourcePage extends Component { )} {!resource.externalReservationUrl && (
+ {window.innerWidth < 768 && ( +
+ {t('ReservationInfo.selectionEditDirections')} +
+ ) + } + {/* Show reservation max period text */} {resource.maxPeriod && (
From 589c17fca098f2fd1768d4d163b6017511a4b018 Mon Sep 17 00:00:00 2001 From: Santtu Tuovinen Date: Tue, 12 Nov 2019 12:07:38 +0200 Subject: [PATCH 02/12] Increased font-size in events. Changed color for user's own events. --- src/common/calendar/_timePickerCalendar.scss | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/common/calendar/_timePickerCalendar.scss b/src/common/calendar/_timePickerCalendar.scss index 9b2b0e1fb..eddfdfc90 100644 --- a/src/common/calendar/_timePickerCalendar.scss +++ b/src/common/calendar/_timePickerCalendar.scss @@ -1,9 +1,10 @@ .app-TimePickerCalendar { &__event { - color: $white !important; + color: $hel-coat; border-radius: 0 !important; &--reserved { + color: $white !important; background-color: $red !important; border-color: $red !important; } @@ -20,7 +21,7 @@ &__cancelEvent { position: absolute; right: 0.25em; - top: 0; + bottom: 0; z-index: 2; &::after { @@ -32,6 +33,21 @@ } } + .fc-event { + font-size: 1.75rem; + font-weight: bold; + background-color: #bddbf0; + border: 1px solid $hel-coat; + + } + + .fc-event.fc-selected:after { + opacity: 0.35; + background-color: $hel-coat; + } + + + .fc-header-toolbar { .fc-left { width: 30%; From a0478a595c900a677fda6b3cef171cd4bc69d030 Mon Sep 17 00:00:00 2001 From: Santtu Tuovinen Date: Tue, 12 Nov 2019 13:26:01 +0200 Subject: [PATCH 03/12] Event duration is shown inside event. If resource has max duration set shows that as well. --- src/common/calendar/TimePickerCalendar.js | 38 +++++++++++--------- src/common/calendar/_timePickerCalendar.scss | 4 +++ 2 files changed, 25 insertions(+), 17 deletions(-) diff --git a/src/common/calendar/TimePickerCalendar.js b/src/common/calendar/TimePickerCalendar.js index 70159d2c1..7aced30fd 100644 --- a/src/common/calendar/TimePickerCalendar.js +++ b/src/common/calendar/TimePickerCalendar.js @@ -84,13 +84,25 @@ class TimePickerCalendar extends Component { onEventRender = (info) => { // add cancel button for new selected event + let duration; + if (info.event.id === NEW_RESERVATION) { const cancelBtn = document.createElement('span'); cancelBtn.classList.add('app-TimePickerCalendar__cancelEvent'); cancelBtn.addEventListener('click', () => this.onCancel(), { once: true }); info.el.append(cancelBtn); + duration = this.getDurationText(info.event); + } else if (info.event.id === '') { + duration = this.getDurationText(info.event); } - } + + if (duration) { + const eventDuration = document.createElement('span'); + eventDuration.textContent = duration; + eventDuration.classList.add('app-TimePickerCalendar__maxDuration'); + info.el.append(eventDuration); + } + }; onSelect = (selectionInfo) => { const { t } = this.props; @@ -199,29 +211,21 @@ class TimePickerCalendar extends Component { return selectable; } - getDurationText = () => { - const { selected } = this.state; + getDurationText = (selected) => { + const { resource } = this.props; const start = moment(selected.start); const end = moment(selected.end); const duration = moment.duration(end.diff(start)); - const days = duration.days(); - const hours = duration.hours(); - const minutes = duration.minutes(); - let text = ''; - if (days) { - text = `${days}d`; - } - - if (hours) { - text += `${hours}h`; - } + let maxDurationText = ''; - if (minutes) { - text += `${minutes}min`; + if (resource.max_period) { + const maxDuration = get(resource, 'max_period', null); + const maxDurationSeconds = moment.duration(maxDuration).asSeconds(); + maxDurationText = `(${maxDurationSeconds / 3600}h max)`; } - return text; + return `${duration / 3600000}h ${maxDurationText}`; }; getSelectedDateText = () => { diff --git a/src/common/calendar/_timePickerCalendar.scss b/src/common/calendar/_timePickerCalendar.scss index eddfdfc90..88a901cb8 100644 --- a/src/common/calendar/_timePickerCalendar.scss +++ b/src/common/calendar/_timePickerCalendar.scss @@ -33,6 +33,10 @@ } } + &__maxDuration { + font-size: 1.25rem; + } + .fc-event { font-size: 1.75rem; font-weight: bold; From 5b201b945c01f676466cdee2406cbf43fa209597 Mon Sep 17 00:00:00 2001 From: Santtu Tuovinen Date: Wed, 13 Nov 2019 09:29:04 +0200 Subject: [PATCH 04/12] Changed press delays for mobile. Scrolling is now possible without making new selection. And user shouldn't have to press too long for selection to start. --- src/common/calendar/TimePickerCalendar.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/common/calendar/TimePickerCalendar.js b/src/common/calendar/TimePickerCalendar.js index 7aced30fd..e27d352c4 100644 --- a/src/common/calendar/TimePickerCalendar.js +++ b/src/common/calendar/TimePickerCalendar.js @@ -106,7 +106,6 @@ class TimePickerCalendar extends Component { onSelect = (selectionInfo) => { const { t } = this.props; - const calendarApi = this.calendarRef.current.getApi(); calendarApi.unselect(); // Clear FullCalendar select tooltip @@ -128,7 +127,6 @@ class TimePickerCalendar extends Component { onEventResize = (selectionInfo) => { const { event } = selectionInfo; const selectable = this.getSelectableTimeRange(event, selectionInfo); - this.onChange(selectable); } @@ -325,7 +323,9 @@ class TimePickerCalendar extends Component { meridiem: 'short' }, unselectAuto: false, - longPressDelay: '500', + longPressDelay: 250, + eventLongPressDelay: 20, + selectLongPressDelay: 200, // Almost invoke click event on mobile immediatelly without any delay }; }; From 6aa29c86dd6f5172d4994a779fa2abb0869e4e86 Mon Sep 17 00:00:00 2001 From: Santtu Tuovinen Date: Wed, 13 Nov 2019 13:17:08 +0200 Subject: [PATCH 05/12] Translations for mobile select directions. --- app/i18n/messages/en.json | 1 + app/i18n/messages/fi.json | 1 + app/i18n/messages/sv.json | 1 + app/pages/resource/ResourcePage.js | 11 ++++++++--- 4 files changed, 11 insertions(+), 3 deletions(-) diff --git a/app/i18n/messages/en.json b/app/i18n/messages/en.json index 7d7230125..8b317d4e3 100644 --- a/app/i18n/messages/en.json +++ b/app/i18n/messages/en.json @@ -220,6 +220,7 @@ "ReservationInfo.loginMessage": "You must log in to reserve this premise.", "ReservationInfo.loginText": "You must log in to reserve this premise.", "ReservationInfo.maxNumberOfReservations": "Maximum number of reservations per user:", + "ReservationInfo.selectionStartDirections": "Touch and hold the screen to make a selection", "ReservationInfo.selectionEditDirections": "Press selected period again to resize", "ReservationInfo.reservationMaxLength": "Maximum duration of the reservation:", "ReservationInfo.reservationMinLength": "Minimum duration of the reservation:", diff --git a/app/i18n/messages/fi.json b/app/i18n/messages/fi.json index 1d1590c21..60d06de60 100644 --- a/app/i18n/messages/fi.json +++ b/app/i18n/messages/fi.json @@ -220,6 +220,7 @@ "ReservationInfo.loginMessage": "Sinun täytyy kirjautua sisään, jotta voit tehdä varauksen tähän tilaan.", "ReservationInfo.loginText": "Sinun täytyy kirjautua sisään, jotta voit tehdä varauksen tähän tilaan.", "ReservationInfo.maxNumberOfReservations": "Maksimimäärä varauksia per käyttäjä:", + "ReservationInfo.selectionStartDirections": "Kosketa näyttöä pitkään tehdäksesi valinnan.", "ReservationInfo.selectionEditDirections": "Paina valintaasi uudelleen muuttaaksesi varauksen pituutta", "ReservationInfo.reservationMaxLength": "Varauksen maksimipituus:", "ReservationInfo.reservationMinLength": "Varauksen vähimmäispituus:", diff --git a/app/i18n/messages/sv.json b/app/i18n/messages/sv.json index 24bbfce11..294f6292c 100644 --- a/app/i18n/messages/sv.json +++ b/app/i18n/messages/sv.json @@ -221,6 +221,7 @@ "ReservationForm.markAsClosedDescription": "Markera kryssrutan om du stänger resursen genom att reservera.", "ReservationInfo.loginMessage": "För att kunna boka detta utrymme måste du logga in.", "ReservationInfo.loginText": "För att kunna boka detta utrymme måste du logga in.", + "ReservationInfo.selectionStartDirections": "Tryck och håll på skärmen för att välja.", "ReservationInfo.selectionEditDirections": "Tryck på ditt val igen för att ändra dess längd", "ReservationInfo.maxNumberOfReservations": "Maximalt antal bokningar per användare:", "ReservationInfo.reservationMaxLength": "Bokningens maximala längd:", diff --git a/app/pages/resource/ResourcePage.js b/app/pages/resource/ResourcePage.js index a0db533f9..d909a3e43 100644 --- a/app/pages/resource/ResourcePage.js +++ b/app/pages/resource/ResourcePage.js @@ -234,9 +234,14 @@ class UnconnectedResourcePage extends Component { {!resource.externalReservationUrl && (
{window.innerWidth < 768 && ( -
- {t('ReservationInfo.selectionEditDirections')} -
+ +
+ {t('ReservationInfo.selectionStartDirections')} +
+
+ {t('ReservationInfo.selectionEditDirections')} +
+ ) } From 75e8d9532425bbce65fab4adf68840d1af0d0324 Mon Sep 17 00:00:00 2001 From: Santtu Tuovinen Date: Wed, 13 Nov 2019 13:18:14 +0200 Subject: [PATCH 06/12] Increased time slot height for web. --- src/common/calendar/_timePickerCalendar.scss | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/common/calendar/_timePickerCalendar.scss b/src/common/calendar/_timePickerCalendar.scss index 88a901cb8..9659ee15c 100644 --- a/src/common/calendar/_timePickerCalendar.scss +++ b/src/common/calendar/_timePickerCalendar.scss @@ -50,6 +50,13 @@ background-color: $hel-coat; } + .fc-time-grid { + .fc-slats { + td { + height: 3em; + } + } + } .fc-header-toolbar { @@ -69,7 +76,7 @@ .fc-myToday-button { border: 1px solid $black; border-radius: 0; - padding: 0.2rem 0.3rem; + padding: 0.5rem 0.5rem; color: $black; background: $white; font-weight: $font-weight-bold; @@ -97,7 +104,7 @@ .fc-timeGridDay-button { border: 1px solid $black; border-radius: 0; - padding: 0.3rem 0.3rem; + padding: 0.5rem 0.5rem; background: $white; color: $black; @@ -107,6 +114,14 @@ } } + .fc-time-grid { + .fc-slats { + .fc-widget-content { + height: 3em; + } + } + } + .fc-myNext-button { @include icon-angle-right($black); } From 24bac21e65b941940050acbdbde01edfbd68a6c3 Mon Sep 17 00:00:00 2001 From: Santtu Tuovinen Date: Wed, 13 Nov 2019 15:17:07 +0200 Subject: [PATCH 07/12] Disabled event hover. Web events now display same dot as mobile for resizing. --- src/common/calendar/TimePickerCalendar.js | 2 ++ src/common/calendar/_timePickerCalendar.scss | 30 +++++++++++++++----- 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/src/common/calendar/TimePickerCalendar.js b/src/common/calendar/TimePickerCalendar.js index e27d352c4..9f77c0edc 100644 --- a/src/common/calendar/TimePickerCalendar.js +++ b/src/common/calendar/TimePickerCalendar.js @@ -338,10 +338,12 @@ class TimePickerCalendar extends Component { const events = this.getReservedEvents(); if (selected) { + const webEventSelected = window.innerWidth > 768 ? 'fc-selected' : ''; events.push({ classNames: [ 'app-TimePickerCalendar__event', 'app-TimePickerCalendar__newReservation', + webEventSelected ], editable: true, durationEditable: !calendarUtils.isTimeRangeOverMaxPeriod( diff --git a/src/common/calendar/_timePickerCalendar.scss b/src/common/calendar/_timePickerCalendar.scss index 9659ee15c..4db552016 100644 --- a/src/common/calendar/_timePickerCalendar.scss +++ b/src/common/calendar/_timePickerCalendar.scss @@ -1,6 +1,6 @@ .app-TimePickerCalendar { &__event { - color: $hel-coat; + color: $hel-coat !important; border-radius: 0 !important; &--reserved { @@ -40,8 +40,8 @@ .fc-event { font-size: 1.75rem; font-weight: bold; - background-color: #bddbf0; - border: 1px solid $hel-coat; + background-color: #bddbf0 !important; + border: 1px solid $hel-coat !important; } @@ -50,10 +50,26 @@ background-color: $hel-coat; } - .fc-time-grid { - .fc-slats { - td { - height: 3em; + + .fc-time-grid-event.fc-selected { + .fc-resizer { + width: 12px; + height: 12px; + bottom: -7px; + left: 49%; + z-index: 50 !important; + border-radius: 50%; + + &::before { + width: 80px; + height: 80px; + top: 0; + left: 0; + margin-left: -40px; + } + + &::after { + color: #FFF !important; } } } From d637633c3acb4970ef16d2e73cb012fe7f454280 Mon Sep 17 00:00:00 2001 From: Santtu Tuovinen Date: Wed, 13 Nov 2019 15:21:12 +0200 Subject: [PATCH 08/12] New test snap. --- .../TimePickerCalendar.test.js.snap | 289 ------------------ 1 file changed, 289 deletions(-) delete mode 100644 src/common/calendar/__tests__/__snapshots__/TimePickerCalendar.test.js.snap diff --git a/src/common/calendar/__tests__/__snapshots__/TimePickerCalendar.test.js.snap b/src/common/calendar/__tests__/__snapshots__/TimePickerCalendar.test.js.snap deleted file mode 100644 index f333ced72..000000000 --- a/src/common/calendar/__tests__/__snapshots__/TimePickerCalendar.test.js.snap +++ /dev/null @@ -1,289 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`TimePickerCalendar FullCalendar render normally 1`] = ` -
- -
-`; From ef61c53d88d16290ba0a5873af95b12e445a6ccc Mon Sep 17 00:00:00 2001 From: Santtu Tuovinen Date: Wed, 13 Nov 2019 15:21:57 +0200 Subject: [PATCH 09/12] New test snap. --- .../TimePickerCalendar.test.js.snap | 291 ++++++++++++++++++ 1 file changed, 291 insertions(+) create mode 100644 src/common/calendar/__tests__/__snapshots__/TimePickerCalendar.test.js.snap diff --git a/src/common/calendar/__tests__/__snapshots__/TimePickerCalendar.test.js.snap b/src/common/calendar/__tests__/__snapshots__/TimePickerCalendar.test.js.snap new file mode 100644 index 000000000..dab73ed53 --- /dev/null +++ b/src/common/calendar/__tests__/__snapshots__/TimePickerCalendar.test.js.snap @@ -0,0 +1,291 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TimePickerCalendar FullCalendar render normally 1`] = ` +
+ +
+`; From bdd4cc387fc25a8fecd4df56b0389e96c5e12dc2 Mon Sep 17 00:00:00 2001 From: Santtu Tuovinen Date: Thu, 14 Nov 2019 08:22:50 +0200 Subject: [PATCH 10/12] Removed unused lines --- src/common/calendar/_timePickerCalendar.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/common/calendar/_timePickerCalendar.scss b/src/common/calendar/_timePickerCalendar.scss index 4db552016..30beb816c 100644 --- a/src/common/calendar/_timePickerCalendar.scss +++ b/src/common/calendar/_timePickerCalendar.scss @@ -130,13 +130,6 @@ } } - .fc-time-grid { - .fc-slats { - .fc-widget-content { - height: 3em; - } - } - } .fc-myNext-button { @include icon-angle-right($black); From 1ff44a7b8e62c9af2df450b17a2ccbe69edf02a0 Mon Sep 17 00:00:00 2001 From: Santtu Tuovinen Date: Thu, 14 Nov 2019 08:24:04 +0200 Subject: [PATCH 11/12] Changes for PR 1067 --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f1a928d0d..995d9b438 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ - [#1064](https://github.com/City-of-Helsinki/varaamo/pull/1064) Replaced ? with & in Feedback URL. - [#1065](https://github.com/City-of-Helsinki/varaamo/pull/1065) Replaced some frontpage icons. - [#1066](https://github.com/City-of-Helsinki/varaamo/pull/1066) Minor change in ReservationInformationModal reservation data structure. + - [#1067](https://github.com/City-of-Helsinki/varaamo/pull/1067) FullCalendar mobile improvements and styling changes. # 0.6.1 **HOTFIX** From b14534b53bd8ed3060ced30c84486c842c0899bc Mon Sep 17 00:00:00 2001 From: Santtu Tuovinen Date: Thu, 14 Nov 2019 08:50:43 +0200 Subject: [PATCH 12/12] Removed !important statements from base event. --- src/common/calendar/_timePickerCalendar.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/common/calendar/_timePickerCalendar.scss b/src/common/calendar/_timePickerCalendar.scss index 30beb816c..e10685d51 100644 --- a/src/common/calendar/_timePickerCalendar.scss +++ b/src/common/calendar/_timePickerCalendar.scss @@ -40,9 +40,8 @@ .fc-event { font-size: 1.75rem; font-weight: bold; - background-color: #bddbf0 !important; - border: 1px solid $hel-coat !important; - + background-color: #bddbf0; + border: 1px solid $hel-coat; } .fc-event.fc-selected:after {