From b6e8c12dbcd7d9f4cf50e10bfd3c85fe691c2640 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 25 Apr 2021 14:51:00 +0300 Subject: emoji picker fix --- src/components/emoji_picker/emoji_picker.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'src/components/emoji_picker') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 2716d93f..6b589079 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -1,3 +1,4 @@ +import { defineAsyncComponent } from 'vue' import Checkbox from '../checkbox/checkbox.vue' import { library } from '@fortawesome/fontawesome-svg-core' import { @@ -57,7 +58,7 @@ const EmojiPicker = { } }, components: { - StickerPicker: () => import('../sticker_picker/sticker_picker.vue'), + StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')), Checkbox }, methods: { @@ -79,7 +80,7 @@ const EmojiPicker = { }, highlight (key) { const ref = this.$refs['group-' + key] - const top = ref[0].offsetTop + const top = ref.offsetTop this.setShowStickers(false) this.activeGroup = key this.$nextTick(() => { @@ -96,7 +97,7 @@ const EmojiPicker = { } }, triggerLoadMore (target) { - const ref = this.$refs['group-end-custom'][0] + const ref = this.$refs['group-end-custom'] if (!ref) return const bottom = ref.offsetTop + ref.offsetHeight @@ -119,7 +120,7 @@ const EmojiPicker = { this.$nextTick(() => { this.emojisView.forEach(group => { const ref = this.$refs['group-' + group.id] - if (ref[0].offsetTop <= top) { + if (ref.offsetTop <= top) { this.activeGroup = group.id } }) -- cgit v1.2.3-70-g09d2 From 666498e7b76144b35d245d4b1c09e1dc62fac84b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 10 Apr 2022 21:54:02 +0300 Subject: fix main post form having hidden emoji picker --- src/App.scss | 12 ++++++------ src/components/attachment/attachment.scss | 2 +- src/components/desktop_nav/desktop_nav.scss | 8 ++++---- src/components/emoji_picker/emoji_picker.scss | 2 +- src/components/media_modal/media_modal.vue | 2 +- src/components/post_status_form/post_status_form.vue | 1 + src/components/user_panel/user_panel.vue | 1 + src/hocs/with_load_more/with_load_more.scss | 2 +- src/hocs/with_subscription/with_subscription.scss | 2 +- 9 files changed, 17 insertions(+), 15 deletions(-) (limited to 'src/components/emoji_picker') diff --git a/src/App.scss b/src/App.scss index d8396562..cc8ef592 100644 --- a/src/App.scss +++ b/src/App.scss @@ -2,7 +2,7 @@ @import './_variables.scss'; :root { - --navbar-height: 50px; + --navbar-height: 3.5em; } html { @@ -159,8 +159,8 @@ nav { } .app-layout { - --miniColumn: 25em; - --maxiColumn: minmax(var(--miniColumn), 45em); + --miniColumn: 25rem; + --maxiColumn: minmax(var(--miniColumn), 45rem); --columnGap: 1em; --status-margin: 0.75em; @@ -227,7 +227,7 @@ nav { &.-has-new-post-button { .column { - padding-bottom: 20em; + padding-bottom: 10rem; } } @@ -301,7 +301,7 @@ nav { cursor: pointer; box-shadow: $fallback--buttonShadow; box-shadow: var(--buttonShadow); - font-size: 14px; + font-size: 1rem; font-family: sans-serif; font-family: var(--interfaceFont, sans-serif); @@ -429,7 +429,7 @@ textarea, color: var(--inputText, $fallback--lightText); font-family: sans-serif; font-family: var(--inputFont, sans-serif); - font-size: 14px; + font-size: 1rem; margin: 0; box-sizing: border-box; display: inline-block; diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss index dfda15bf..b2dea98d 100644 --- a/src/components/attachment/attachment.scss +++ b/src/components/attachment/attachment.scss @@ -173,7 +173,7 @@ margin: 8px; word-break: break-all; h1 { - font-size: 14px; + font-size: 1rem; margin: 0px; } } diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss index 1e731c70..3c2e70b5 100644 --- a/src/components/desktop_nav/desktop_nav.scss +++ b/src/components/desktop_nav/desktop_nav.scss @@ -9,7 +9,7 @@ .inner-nav { display: grid; - grid-template-rows: 50px; + grid-template-rows: var(--navbar-height); grid-template-columns: 2fr auto 2fr; grid-template-areas: "sitename logo actions"; box-sizing: border-box; @@ -75,7 +75,7 @@ img { display: inline-block; - height: 50px; + height: var(--navbar-height); } } @@ -101,8 +101,8 @@ .item { flex: 1; - line-height: 50px; - height: 50px; + line-height: var(--navbar-height); + height: var(--navbar-height); overflow: hidden; display: flex; flex-wrap: wrap; diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index ec711758..1a696584 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -7,7 +7,7 @@ right: 0; left: 0; margin: 0 !important; - z-index: 1; + z-index: 100; background-color: $fallback--bg; background-color: var(--popover, $fallback--bg); color: $fallback--link; diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue index c7dcd007..8b76aafb 100644 --- a/src/components/media_modal/media_modal.vue +++ b/src/components/media_modal/media_modal.vue @@ -234,7 +234,7 @@ $modal-view-button-icon-margin: 0.5em; position: absolute; height: $modal-view-button-icon-height; width: $modal-view-button-icon-width; - font-size: 14px; + font-size: 1rem; line-height: $modal-view-button-icon-height; color: #FFF; text-align: center; diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 0fdb6dc7..d6595354 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -509,6 +509,7 @@ flex-direction: column; padding: 0.25em 0.5em 0.5em; line-height:24px; + z-index: 50; } form textarea.form-cw { diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue index 50949b98..243de387 100644 --- a/src/components/user_panel/user_panel.vue +++ b/src/components/user_panel/user_panel.vue @@ -24,5 +24,6 @@ diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss index 1a26eb8d..de86ed4a 100644 --- a/src/hocs/with_load_more/with_load_more.scss +++ b/src/hocs/with_load_more/with_load_more.scss @@ -10,7 +10,7 @@ border-top-color: var(--border, $fallback--border); .error { - font-size: 14px; + font-size: 1rem; } a { diff --git a/src/hocs/with_subscription/with_subscription.scss b/src/hocs/with_subscription/with_subscription.scss index 52c7d94c..7fd83802 100644 --- a/src/hocs/with_subscription/with_subscription.scss +++ b/src/hocs/with_subscription/with_subscription.scss @@ -4,7 +4,7 @@ text-align: center; .error { - font-size: 14px; + font-size: 1rem; } } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 7f513fe46fbf631190445b21b7cb4b7cb431d019 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 20 Apr 2022 23:44:33 +0300 Subject: more em-sized fonts --- src/components/emoji_input/emoji_input.vue | 2 +- src/components/emoji_picker/emoji_picker.scss | 6 ++++-- src/components/link-preview/link-preview.vue | 2 +- src/components/notifications/notifications.scss | 8 ++++---- src/components/registration/registration.vue | 2 +- src/components/status/status.scss | 9 ++++----- src/components/still-image/still-image.vue | 8 ++++---- src/components/user_card/user_card.scss | 5 ++--- src/components/user_list_popover/user_list_popover.vue | 2 +- 9 files changed, 22 insertions(+), 22 deletions(-) (limited to 'src/components/emoji_picker') diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index aa2950ce..7d95ab7e 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -78,7 +78,7 @@ top: 0; right: 0; margin: .2em .25em; - font-size: 16px; + font-size: 1.3em; cursor: pointer; line-height: 24px; diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 1a696584..2055e02e 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -73,12 +73,13 @@ &-item { padding: 0 7px; cursor: pointer; - font-size: 24px; + font-size: 1.85em; &.disabled { opacity: 0.5; pointer-events: none; } + &.active { border-bottom: 4px solid; @@ -151,9 +152,10 @@ justify-content: left; &-title { - font-size: 12px; + font-size: 0.85em; width: 100%; margin: 0; + &.disabled { display: none; } diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue index d3ca39b8..220527f2 100644 --- a/src/components/link-preview/link-preview.vue +++ b/src/components/link-preview/link-preview.vue @@ -63,7 +63,7 @@ } .card-host { - font-size: 12px; + font-size: 0.85em; } .card-description { diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index a285027d..aa4ae346 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -113,13 +113,13 @@ } .emoji-reaction-emoji { - font-size: 16px; + font-size: 1.3em; } .notification-details { - min-width: 0px; + min-width: 0; word-wrap: break-word; - line-height:18px; + line-height: 1.4; position: relative; overflow: hidden; width: 100%; @@ -142,7 +142,7 @@ } .timeago { - margin-right: .2em; + margin-right: 0.2em; } .status-content { diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index 1c83a47e..c3fee6f8 100644 --- a/src/components/registration/registration.vue +++ b/src/components/registration/registration.vue @@ -318,7 +318,7 @@ $validations-cRed: #f04124; text-align: left; span { - font-size: 12px; + font-size: 0.85em; } } diff --git a/src/components/status/status.scss b/src/components/status/status.scss index e38e2a53..36a2cca1 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -82,7 +82,6 @@ .status-username { white-space: nowrap; - font-size: 14px; overflow: hidden; max-width: 85%; font-weight: bold; @@ -160,7 +159,7 @@ & .heading-reply-row { position: relative; align-content: baseline; - font-size: 12px; + font-size: 0.85em; margin-top: 0.2em; line-height: 130%; max-width: 100%; @@ -229,7 +228,7 @@ .replies { margin-top: 0.25em; line-height: 18px; - font-size: 12px; + font-size: 0.85em; display: flex; flex-wrap: wrap; @@ -389,14 +388,14 @@ .stat-title { color: var(--faint, $fallback--faint); - font-size: 12px; + font-size: 0.85em; text-transform: uppercase; position: relative; } .stat-number { font-weight: bolder; - font-size: 16px; + font-size: 1.1em; line-height: 1em; } diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue index e939b532..ab3080c8 100644 --- a/src/components/still-image/still-image.vue +++ b/src/components/still-image/still-image.vue @@ -58,10 +58,10 @@ zoom: var(--_still_image-label-scale, 1); content: 'gif'; position: absolute; - line-height: 10px; - font-size: 10px; - top: 5px; - left: 5px; + line-height: 1; + font-size: 0.7em; + top: 0.5em; + left: 0.5em; background: rgba(127, 127, 127, 0.5); color: #fff; display: block; diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 4dabafa2..44657bdf 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -189,12 +189,12 @@ overflow: hidden; flex: 1 1 auto; margin-right: 1em; - font-size: 15px; + font-size: 1.1em; } .bottom-line { font-weight: light; - font-size: 15px; + font-size: 1.1em; align-items: baseline; .lock-icon { @@ -232,7 +232,6 @@ margin-bottom: .15em; display: flex; align-items: baseline; - font-size: 14px; line-height: 22px; flex-wrap: wrap; diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue index 8706d0ff..bdc3aa92 100644 --- a/src/components/user_list_popover/user_list_popover.vue +++ b/src/components/user_list_popover/user_list_popover.vue @@ -73,7 +73,7 @@ } .user-list-screen-name { - font-size: 9px; + font-size: 0.65em; } } } -- cgit v1.2.3-70-g09d2 From 9c8738ff22a0563b16b19e57e8042c65c4a0b7e2 Mon Sep 17 00:00:00 2001 From: Lain Soykaf Date: Sun, 12 Jun 2022 13:38:12 +0200 Subject: EmojiPicker: Workaround to search immediately on mobile See https://github.com/vuejs/vue/pull/9814 --- src/components/emoji_picker/emoji_picker.js | 5 +++-- src/components/emoji_picker/emoji_picker.vue | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) (limited to 'src/components/emoji_picker') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 6b589079..bd5c2e39 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -6,6 +6,7 @@ import { faStickyNote, faSmileBeam } from '@fortawesome/free-solid-svg-icons' +import { trim } from 'lodash' library.add( faBoxOpen, @@ -176,7 +177,7 @@ const EmojiPicker = { filteredEmoji () { return filterByKeyword( this.$store.state.instance.customEmoji || [], - this.keyword + trim(this.keyword) ) }, customEmojiBuffer () { @@ -197,7 +198,7 @@ const EmojiPicker = { id: 'standard', text: this.$t('emoji.unicode'), icon: 'box-open', - emojis: filterByKeyword(standardEmojis, this.keyword) + emojis: filterByKeyword(standardEmojis, trim(this.keyword)) } ] }, diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 3262a3d9..a7269120 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -47,6 +47,7 @@ type="text" class="form-control" :placeholder="$t('emoji.search_emoji')" + @input="$event.target.composing = false" >