From 38c0856c203d68adbfe8d27f8d5002314f64633b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sat, 28 Dec 2024 16:43:49 +0200 Subject: [PATCH 1/4] default values --- src/components/emoji_picker/emoji_picker.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 9f415f79c..055291875 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -143,11 +143,11 @@ const EmojiPicker = { const fontSize = css.getPropertyValue('font-size') const emojiSize = css.getPropertyValue('--emojiSize') - const fontSizeUnit = fontSize.replace(/[0-9,.]+/, '') - const fontSizeValue = Number(fontSize.replace(/[^0-9,.]+/, '')) + const fontSizeUnit = fontSize.replace(/[0-9,.]+/, '') || 'px' + const fontSizeValue = Number(fontSize.replace(/[^0-9,.]+/, '')) || 14 - const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '') - const emojiSizeValue = Number(emojiSize.replace(/[^0-9,.]+/, '')) + const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '') || 'rem' + const emojiSizeValue = Number(emojiSize.replace(/[^0-9,.]+/, '')) || 2.2 let fontSizeMultiplier if (fontSizeUnit.endsWith('em')) { @@ -155,8 +155,6 @@ const EmojiPicker = { } else { fontSizeMultiplier = fontSizeValue / 14 } - console.log('Multiplier', fontSizeMultiplier) - console.log('Result', fontSizeMultiplier * 14) let emojiSizeReal if (emojiSizeUnit.endsWith('em')) { From 984dfd06c2feff4fecb6a05c9bc4f1da3ea9e009 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sat, 28 Dec 2024 16:48:33 +0200 Subject: [PATCH 2/4] alternatively --- src/components/emoji_picker/emoji_picker.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 055291875..8f6f1a0d0 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -140,14 +140,14 @@ const EmojiPicker = { }, updateEmojiSize () { const css = window.getComputedStyle(this.$refs.popover.$el) - const fontSize = css.getPropertyValue('font-size') - const emojiSize = css.getPropertyValue('--emojiSize') + const fontSize = css.getPropertyValue('font-size') || '14px' + const emojiSize = css.getPropertyValue('--emojiSize') || '2.2rem' - const fontSizeUnit = fontSize.replace(/[0-9,.]+/, '') || 'px' - const fontSizeValue = Number(fontSize.replace(/[^0-9,.]+/, '')) || 14 + const fontSizeUnit = fontSize.replace(/[0-9,.]+/, '') + const fontSizeValue = Number(fontSize.replace(/[^0-9,.]+/, '')) - const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '') || 'rem' - const emojiSizeValue = Number(emojiSize.replace(/[^0-9,.]+/, '')) || 2.2 + const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '') + const emojiSizeValue = Number(emojiSize.replace(/[^0-9,.]+/, '')) let fontSizeMultiplier if (fontSizeUnit.endsWith('em')) { From d3474e171e4f768ccc8fe4aff919421582c5e453 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 29 Dec 2024 18:48:58 +0200 Subject: [PATCH 3/4] fix confirmation modal overflows --- src/App.js | 4 +++ src/components/dialog_modal/dialog_modal.vue | 35 ++++++++++++++++++-- 2 files changed, 36 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index befcece80..3142d0629 100644 --- a/src/App.js +++ b/src/App.js @@ -47,6 +47,9 @@ export default { watch: { themeApplied (value) { this.removeSplash() + }, + layoutType (value) { + document.getElementById('modal').classList = ['-' + this.layoutType] } }, created () { @@ -54,6 +57,7 @@ export default { const val = this.$store.getters.mergedConfig.interfaceLanguage this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val }) window.addEventListener('resize', this.updateMobileState) + document.getElementById('modal').classList = ['-' + this.layoutType] }, mounted () { if (this.$store.state.interface.themeApplied) { diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue index 93b8ac0fa..baae36204 100644 --- a/src/components/dialog_modal/dialog_modal.vue +++ b/src/components/dialog_modal/dialog_modal.vue @@ -69,12 +69,41 @@ margin: 0; padding: 0.5em; border-top: 1px solid var(--border); - display: flex; - justify-content: flex-end; + display: grid; + grid-gap: 0.5em; + grid-auto-columns: minmax(max-content, 1fr); + height: auto; button { width: auto; - margin-left: 0.5rem; + padding-left: 2em; + padding-right: 2em; + } + } +} + +#modal.-mobile { + .dialog-modal.panel { + top: auto; + left: 0; + right: 0; + bottom: 0; + max-width: none; + transform: none; + width: 100vw; + margin: auto; + z-index: 2001; + + .dialog-modal-footer { + flex-direction: column; + justify-content: flex-end; + grid-auto-columns: initial; + grid-auto-rows: 1fr; + + button { + grid-column: 1; + height: 2em; + } } } } From d5d7582741d43640e8a8f320a01e214a9182da21 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 29 Dec 2024 18:55:41 +0200 Subject: [PATCH 4/4] changelog --- changelog.d/modals-mobile.change | 1 + changelog.d/modals.fix | 1 + 2 files changed, 2 insertions(+) create mode 100644 changelog.d/modals-mobile.change create mode 100644 changelog.d/modals.fix diff --git a/changelog.d/modals-mobile.change b/changelog.d/modals-mobile.change new file mode 100644 index 000000000..e6a768c57 --- /dev/null +++ b/changelog.d/modals-mobile.change @@ -0,0 +1 @@ +modal layout for mobile has new layout to make it easy to use diff --git a/changelog.d/modals.fix b/changelog.d/modals.fix new file mode 100644 index 000000000..68278bfc0 --- /dev/null +++ b/changelog.d/modals.fix @@ -0,0 +1 @@ +fixed modals buttons overflow