From 45df54df1eb93307aa68b2ee82142e9d79a8a1ae Mon Sep 17 00:00:00 2001 From: Stefan Heinemann Date: Mon, 13 May 2024 16:41:22 +0200 Subject: [PATCH 01/12] PB-468 Fix style of time slider when reaching the ends of the slider The time band was so wide that the cursor was rendered weirdly when dragged to the very end of the time band. Narrowed the band so that the cursor will always have the necessary space to be displayed properly. --- .../map/components/toolbox/TimeSlider.vue | 33 ++++++++----------- 1 file changed, 14 insertions(+), 19 deletions(-) diff --git a/src/modules/map/components/toolbox/TimeSlider.vue b/src/modules/map/components/toolbox/TimeSlider.vue index 4a627409e..41995deef 100644 --- a/src/modules/map/components/toolbox/TimeSlider.vue +++ b/src/modules/map/components/toolbox/TimeSlider.vue @@ -76,22 +76,16 @@ const innerBarStyle = computed(() => { return { width: `${sliderWidth.value}px` } }) const yearPositionOnSlider = computed( - () => (1 + ALL_YEARS.indexOf(currentYear.value)) * distanceBetweenLabels.value + () => (1 + ALL_YEARS.indexOf(currentYear.value)) * distanceBetweenLabels.value + 42 ) const cursorPosition = computed(() => { const yearCursorWidth = yearCursor.value?.clientWidth || 0 - let left = yearPositionOnSlider.value - yearCursorWidth / 2 - // we give an overlap of 12px as there is some space between the play button and the end - // of the slider - if (left > sliderWidth.value - (yearCursorWidth - 12)) { - left = sliderWidth.value - (yearCursorWidth - 12) - } - if (left < 0) { - left = 0 - } - return { - left: `${left}px`, - } + // we need to add 4.5 pixels which is half the size of the arrow for the slider to + // really be in the middle of the arrow + // make sure it doesn't go below 0 + const left = Math.max(yearPositionOnSlider.value - yearCursorWidth / 2 + 4.5, 0) + + return `${left}px` }) const cursorArrowPosition = computed(() => { return { @@ -213,9 +207,10 @@ function setCurrentYearAndDispatchToStore(year, removePristineStatus = false) { } function setSliderWidth() { - // 19px of padding (7.5 on both side of the container with p-2 class and 4 with px-1) - - sliderWidth.value = sliderContainer.value.clientWidth - 19 - PLAY_BUTTON_SIZE + // the padding of the slider container (4px each side) + the padding of the + // slider bar (48px each side) = 112 + const padding = 112 + sliderWidth.value = sliderContainer.value.clientWidth - padding - PLAY_BUTTON_SIZE } function positionNodeLabel(year) { @@ -339,12 +334,12 @@ function setYearToInputIfValid() { :class="{ grabbed: yearCursorIsGrabbed }" >
-
+
Date: Tue, 14 May 2024 19:52:11 +0200 Subject: [PATCH 02/12] PB-507: Fix logging in production build In production build debug and info messages were printed when they shouldn't --- src/utils/logging.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/logging.js b/src/utils/logging.js index 2a92fccc8..89c4a64df 100644 --- a/src/utils/logging.js +++ b/src/utils/logging.js @@ -24,8 +24,8 @@ export const LogLevel = { * @param {...any} message */ const log = (level, ...message) => { - // In production we don't log debug level - if (ENVIRONMENT === 'production' && [LogLevel.ERROR, LogLevel.WARNING].includes(level)) { + // In production we don't log debug level and info level + if (ENVIRONMENT === 'production' && ![LogLevel.ERROR, LogLevel.WARNING].includes(level)) { return } From e4e8abdc335d86c0c204deb9ae2fc7d118ad2d4f Mon Sep 17 00:00:00 2001 From: Brice Schaffner Date: Tue, 14 May 2024 09:34:57 +0200 Subject: [PATCH 03/12] PB-503: Fix the location popup width This was an issue as depending on the content the size of the window changed and moved the arrow. Also set the tooltip for location share on top to avoid overlapping the position tab. --- src/modules/map/components/LocationPopup.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/modules/map/components/LocationPopup.vue b/src/modules/map/components/LocationPopup.vue index f5041ee69..597dac4ee 100644 --- a/src/modules/map/components/LocationPopup.vue +++ b/src/modules/map/components/LocationPopup.vue @@ -87,7 +87,7 @@ onMounted(() => { copyTooltipInstance = tippy(shareTabButton.value, { content: i18n.t('copy_success'), arrow: true, - placement: 'right', + placement: 'top', trigger: 'manual', onShow(instance) { setTimeout(() => { @@ -237,4 +237,8 @@ function clearClick() { From 266c00c1fdbc06702830a6d3dd230f6cbb195b82 Mon Sep 17 00:00:00 2001 From: Brice Schaffner Date: Tue, 14 May 2024 09:39:22 +0200 Subject: [PATCH 04/12] PB-503: Normalized some icon size for the mobile view Some icons are now bigger on mobile which ease their click on touch device. --- .../map/components/LocationPopupShare.vue | 8 +++++++- src/modules/menu/components/menu/MenuTray.vue | 6 +++++- .../menu/components/settings/HelpLink.vue | 2 +- .../menu/components/settings/MoreInfo.vue | 2 +- .../settings/ReportProblemButton.vue | 7 +------ .../settings/feedback/FeedbackButton.vue | 2 +- .../menu/components/share/MenuShareSection.vue | 7 +++++++ .../share/MenuShareSocialNetworks.vue | 18 ++++++++++-------- 8 files changed, 33 insertions(+), 19 deletions(-) diff --git a/src/modules/map/components/LocationPopupShare.vue b/src/modules/map/components/LocationPopupShare.vue index a978ee0a5..af87f2cf4 100644 --- a/src/modules/map/components/LocationPopupShare.vue +++ b/src/modules/map/components/LocationPopupShare.vue @@ -1,5 +1,6 @@ diff --git a/src/modules/menu/components/menu/MenuTray.vue b/src/modules/menu/components/menu/MenuTray.vue index df0016963..9504e2a31 100644 --- a/src/modules/menu/components/menu/MenuTray.vue +++ b/src/modules/menu/components/menu/MenuTray.vue @@ -12,7 +12,11 @@ > - + {{ i18n.t('help_label') }} - diff --git a/src/modules/menu/components/settings/MoreInfo.vue b/src/modules/menu/components/settings/MoreInfo.vue index 1457b7e90..2dd9a042d 100644 --- a/src/modules/menu/components/settings/MoreInfo.vue +++ b/src/modules/menu/components/settings/MoreInfo.vue @@ -20,7 +20,7 @@ function openCmsLink() { {{ i18n.t('cms_link_button_title') }} - diff --git a/src/modules/menu/components/settings/ReportProblemButton.vue b/src/modules/menu/components/settings/ReportProblemButton.vue index a53d0950a..bd36580b8 100644 --- a/src/modules/menu/components/settings/ReportProblemButton.vue +++ b/src/modules/menu/components/settings/ReportProblemButton.vue @@ -169,12 +169,7 @@ function toggleDrawingOverlay() { > {{ i18n.t('problem_announcement') }} -
@@ -40,6 +41,12 @@ export default { MenuShareSocialNetworks, MenuSection, }, + props: { + compact: { + type: Boolean, + default: false, + }, + }, emits: ['openMenuSection'], expose: ['close'], computed: { diff --git a/src/modules/menu/components/share/MenuShareSocialNetworks.vue b/src/modules/menu/components/share/MenuShareSocialNetworks.vue index 7486a23b9..31ca74753 100644 --- a/src/modules/menu/components/share/MenuShareSocialNetworks.vue +++ b/src/modules/menu/components/share/MenuShareSocialNetworks.vue @@ -4,7 +4,7 @@ * sharing to external social media will be done through a popup. */ -import { onUpdated, ref, toRefs } from 'vue' +import { computed, onUpdated, ref, toRefs } from 'vue' import { useI18n } from 'vue-i18n' import { ShareNetwork } from 'vue3-social-sharing' @@ -16,8 +16,12 @@ const props = defineProps({ type: String, default: null, }, + small: { + type: Boolean, + default: true, + }, }) -const { shortLink } = toRefs(props) +const { shortLink, small } = toRefs(props) const i18n = useI18n() const { refreshTippyAttachment } = useTippyTooltip('.share-network-button[data-tippy-content]') @@ -51,7 +55,9 @@ const networks = ref([ }, ]) -const buttonClass = 'btn btn-sm btn-light share-network-button' +const buttonClass = computed( + () => `btn ${small.value ? 'btn-sm' : ''} btn-light share-network-button m-2` +) const iconSize = '2x' function openQrcode() { @@ -71,7 +77,7 @@ onUpdated(() => refreshTippyAttachment())