From 1f5f612163bd1c359212c2e6832806f0dd606977 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 25 Apr 2021 12:46:13 +0300 Subject: remove Vue.component, just export an object. Seems to be working --- src/hocs/with_load_more/with_load_more.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'src/hocs/with_load_more') diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js index 671b2b6f..537f5720 100644 --- a/src/hocs/with_load_more/with_load_more.js +++ b/src/hocs/with_load_more/with_load_more.js @@ -1,4 +1,3 @@ -import Vue from 'vue' import isEmpty from 'lodash/isEmpty' import { getComponentProps } from '../../services/component_utils/component_utils' import './with_load_more.scss' @@ -23,7 +22,7 @@ const withLoadMore = ({ const originalProps = Object.keys(getComponentProps(WrappedComponent)) const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames) - return Vue.component('withLoadMore', { + return { props, data () { return { @@ -106,7 +105,7 @@ const withLoadMore = ({ ) } - }) + } } export default withLoadMore -- cgit v1.2.3-70-g09d2 From 76a2e6befb3aea6e890bb3c2e001a4635d05091a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 25 Apr 2021 12:50:17 +0300 Subject: remove Vue.component from hooks --- src/hocs/with_load_more/with_load_more.js | 111 ----------------------- src/hocs/with_load_more/with_load_more.jsx | 111 +++++++++++++++++++++++ src/hocs/with_subscription/with_subscription.js | 94 ------------------- src/hocs/with_subscription/with_subscription.jsx | 93 +++++++++++++++++++ 4 files changed, 204 insertions(+), 205 deletions(-) delete mode 100644 src/hocs/with_load_more/with_load_more.js create mode 100644 src/hocs/with_load_more/with_load_more.jsx delete mode 100644 src/hocs/with_subscription/with_subscription.js create mode 100644 src/hocs/with_subscription/with_subscription.jsx (limited to 'src/hocs/with_load_more') diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js deleted file mode 100644 index 537f5720..00000000 --- a/src/hocs/with_load_more/with_load_more.js +++ /dev/null @@ -1,111 +0,0 @@ -import isEmpty from 'lodash/isEmpty' -import { getComponentProps } from '../../services/component_utils/component_utils' -import './with_load_more.scss' - -import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome' -import { library } from '@fortawesome/fontawesome-svg-core' -import { - faCircleNotch -} from '@fortawesome/free-solid-svg-icons' - -library.add( - faCircleNotch -) - -const withLoadMore = ({ - fetch, // function to fetch entries and return a promise - select, // function to select data from store - destroy, // function called at "destroyed" lifecycle - childPropName = 'entries', // name of the prop to be passed into the wrapped component - additionalPropNames = [] // additional prop name list of the wrapper component -}) => (WrappedComponent) => { - const originalProps = Object.keys(getComponentProps(WrappedComponent)) - const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames) - - return { - props, - data () { - return { - loading: false, - bottomedOut: false, - error: false, - entries: [] - } - }, - created () { - window.addEventListener('scroll', this.scrollLoad) - if (this.entries.length === 0) { - this.fetchEntries() - } - }, - destroyed () { - window.removeEventListener('scroll', this.scrollLoad) - destroy && destroy(this.$props, this.$store) - }, - methods: { - // Entries is not a computed because computed can't track the dynamic - // selector for changes and won't trigger after fetch. - updateEntries () { - this.entries = select(this.$props, this.$store) || [] - }, - fetchEntries () { - if (!this.loading) { - this.loading = true - this.error = false - fetch(this.$props, this.$store) - .then((newEntries) => { - this.loading = false - this.bottomedOut = isEmpty(newEntries) - }) - .catch(() => { - this.loading = false - this.error = true - }) - .finally(() => { - this.updateEntries() - }) - } - }, - scrollLoad (e) { - const bodyBRect = document.body.getBoundingClientRect() - const height = Math.max(bodyBRect.height, -(bodyBRect.y)) - if (this.loading === false && - this.bottomedOut === false && - this.$el.offsetHeight > 0 && - (window.innerHeight + window.pageYOffset) >= (height - 750) - ) { - this.fetchEntries() - } - } - }, - render (h) { - const props = { - props: { - ...this.$props, - [childPropName]: this.entries - }, - on: this.$listeners, - scopedSlots: this.$scopedSlots - } - const children = Object.entries(this.$slots).map(([key, value]) => h('template', { slot: key }, value)) - return ( -
- - {children} - -
- {this.error && - - } - {!this.error && this.loading && } - {!this.error && !this.loading && !this.bottomedOut && {this.$t('general.more')}} -
-
- ) - } - } -} - -export default withLoadMore diff --git a/src/hocs/with_load_more/with_load_more.jsx b/src/hocs/with_load_more/with_load_more.jsx new file mode 100644 index 00000000..7f491558 --- /dev/null +++ b/src/hocs/with_load_more/with_load_more.jsx @@ -0,0 +1,111 @@ +import isEmpty from 'lodash/isEmpty' +import { getComponentProps } from '../../services/component_utils/component_utils' +import './with_load_more.scss' + +import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faCircleNotch +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faCircleNotch +) + +const withLoadMore = ({ + fetch, // function to fetch entries and return a promise + select, // function to select data from store + destroy, // function called at "destroyed" lifecycle + childPropName = 'entries', // name of the prop to be passed into the wrapped component + additionalPropNames = [] // additional prop name list of the wrapper component +}) => (WrappedComponent) => { + const originalProps = Object.keys(getComponentProps(WrappedComponent)) + const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames) + + return { + props, + data () { + return { + loading: false, + bottomedOut: false, + error: false, + entries: [] + } + }, + created () { + window.addEventListener('scroll', this.scrollLoad) + if (this.entries.length === 0) { + this.fetchEntries() + } + }, + unmounted () { + window.removeEventListener('scroll', this.scrollLoad) + destroy && destroy(this.$props, this.$store) + }, + methods: { + // Entries is not a computed because computed can't track the dynamic + // selector for changes and won't trigger after fetch. + updateEntries () { + this.entries = select(this.$props, this.$store) || [] + }, + fetchEntries () { + if (!this.loading) { + this.loading = true + this.error = false + fetch(this.$props, this.$store) + .then((newEntries) => { + this.loading = false + this.bottomedOut = isEmpty(newEntries) + }) + .catch(() => { + this.loading = false + this.error = true + }) + .finally(() => { + this.updateEntries() + }) + } + }, + scrollLoad (e) { + const bodyBRect = document.body.getBoundingClientRect() + const height = Math.max(bodyBRect.height, -(bodyBRect.y)) + if (this.loading === false && + this.bottomedOut === false && + this.$el.offsetHeight > 0 && + (window.innerHeight + window.pageYOffset) >= (height - 750) + ) { + this.fetchEntries() + } + } + }, + render (h) { + const props = { + props: { + ...this.$props, + [childPropName]: this.entries + }, + on: this.$listeners, + scopedSlots: this.$scopedSlots + } + const children = Object.entries(this.$slots).map(([key, value]) => h('template', { slot: key }, value)) + return ( +
+ + {children} + +
+ {this.error && + + } + {!this.error && this.loading && } + {!this.error && !this.loading && !this.bottomedOut && {this.$t('general.more')}} +
+
+ ) + } + } +} + +export default withLoadMore diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js deleted file mode 100644 index b1244276..00000000 --- a/src/hocs/with_subscription/with_subscription.js +++ /dev/null @@ -1,94 +0,0 @@ -import Vue from 'vue' -import isEmpty from 'lodash/isEmpty' -import { getComponentProps } from '../../services/component_utils/component_utils' -import './with_subscription.scss' - -import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome' -import { library } from '@fortawesome/fontawesome-svg-core' -import { - faCircleNotch -} from '@fortawesome/free-solid-svg-icons' - -library.add( - faCircleNotch -) - -const withSubscription = ({ - fetch, // function to fetch entries and return a promise - select, // function to select data from store - childPropName = 'content', // name of the prop to be passed into the wrapped component - additionalPropNames = [] // additional prop name list of the wrapper component -}) => (WrappedComponent) => { - const originalProps = Object.keys(getComponentProps(WrappedComponent)) - const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames) - - return Vue.component('withSubscription', { - props: [ - ...props, - 'refresh' // boolean saying to force-fetch data whenever created - ], - data () { - return { - loading: false, - error: false - } - }, - computed: { - fetchedData () { - return select(this.$props, this.$store) - } - }, - created () { - if (this.refresh || isEmpty(this.fetchedData)) { - this.fetchData() - } - }, - methods: { - fetchData () { - if (!this.loading) { - this.loading = true - this.error = false - fetch(this.$props, this.$store) - .then(() => { - this.loading = false - }) - .catch(() => { - this.error = true - this.loading = false - }) - } - } - }, - render (h) { - if (!this.error && !this.loading) { - const props = { - props: { - ...this.$props, - [childPropName]: this.fetchedData - }, - on: this.$listeners, - scopedSlots: this.$scopedSlots - } - const children = Object.entries(this.$slots).map(([key, value]) => h('template', { slot: key }, value)) - return ( -
- - {children} - -
- ) - } else { - return ( -
- {this.error - ? {this.$t('general.generic_error')} - : - } -
- ) - } - } - }) -} - -export default withSubscription diff --git a/src/hocs/with_subscription/with_subscription.jsx b/src/hocs/with_subscription/with_subscription.jsx new file mode 100644 index 00000000..7e590f73 --- /dev/null +++ b/src/hocs/with_subscription/with_subscription.jsx @@ -0,0 +1,93 @@ +import isEmpty from 'lodash/isEmpty' +import { getComponentProps } from '../../services/component_utils/component_utils' +import './with_subscription.scss' + +import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faCircleNotch +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faCircleNotch +) + +const withSubscription = ({ + fetch, // function to fetch entries and return a promise + select, // function to select data from store + childPropName = 'content', // name of the prop to be passed into the wrapped component + additionalPropNames = [] // additional prop name list of the wrapper component +}) => (WrappedComponent) => { + const originalProps = Object.keys(getComponentProps(WrappedComponent)) + const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames) + + return { + props: [ + ...props, + 'refresh' // boolean saying to force-fetch data whenever created + ], + data () { + return { + loading: false, + error: false + } + }, + computed: { + fetchedData () { + return select(this.$props, this.$store) + } + }, + created () { + if (this.refresh || isEmpty(this.fetchedData)) { + this.fetchData() + } + }, + methods: { + fetchData () { + if (!this.loading) { + this.loading = true + this.error = false + fetch(this.$props, this.$store) + .then(() => { + this.loading = false + }) + .catch(() => { + this.error = true + this.loading = false + }) + } + } + }, + render (h) { + if (!this.error && !this.loading) { + const props = { + props: { + ...this.$props, + [childPropName]: this.fetchedData + }, + on: this.$listeners, + scopedSlots: this.$scopedSlots + } + const children = Object.entries(this.$slots).map(([key, value]) => h('template', { slot: key }, value)) + return ( +
+ + {children} + +
+ ) + } else { + return ( +
+ {this.error + ? {this.$t('general.generic_error')} + : + } +
+ ) + } + } + } +} + +export default withSubscription -- cgit v1.2.3-70-g09d2 From 72956e23436b5fb352652b25707a51be3a823b3d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 25 Apr 2021 13:40:08 +0300 Subject: fix HOCs --- src/hocs/with_load_more/with_load_more.jsx | 4 +++- src/hocs/with_subscription/with_subscription.jsx | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) (limited to 'src/hocs/with_load_more') diff --git a/src/hocs/with_load_more/with_load_more.jsx b/src/hocs/with_load_more/with_load_more.jsx index 7f491558..6cd198ed 100644 --- a/src/hocs/with_load_more/with_load_more.jsx +++ b/src/hocs/with_load_more/with_load_more.jsx @@ -1,3 +1,5 @@ +// eslint-disable-next-line no-unused +import { h } from 'vue' import isEmpty from 'lodash/isEmpty' import { getComponentProps } from '../../services/component_utils/component_utils' import './with_load_more.scss' @@ -78,7 +80,7 @@ const withLoadMore = ({ } } }, - render (h) { + render () { const props = { props: { ...this.$props, diff --git a/src/hocs/with_subscription/with_subscription.jsx b/src/hocs/with_subscription/with_subscription.jsx index 7e590f73..4529399e 100644 --- a/src/hocs/with_subscription/with_subscription.jsx +++ b/src/hocs/with_subscription/with_subscription.jsx @@ -1,3 +1,5 @@ +// eslint-disable-next-line no-unused +import { h } from 'vue' import isEmpty from 'lodash/isEmpty' import { getComponentProps } from '../../services/component_utils/component_utils' import './with_subscription.scss' @@ -58,7 +60,7 @@ const withSubscription = ({ } } }, - render (h) { + render () { if (!this.error && !this.loading) { const props = { props: { -- cgit v1.2.3-70-g09d2 From b3ed29ff02fa3db46a1ec7b5856f2c9131b8fa33 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 18 Mar 2022 13:32:36 +0200 Subject: made withLoadMore work... sorta --- src/boot/after_store.js | 4 +++- src/boot/routes.js | 2 +- src/components/gallery/gallery.js | 4 ++-- src/components/tab_switcher/tab_switcher.jsx | 6 +++--- src/hocs/with_load_more/with_load_more.jsx | 11 ++++------- 5 files changed, 13 insertions(+), 14 deletions(-) (limited to 'src/hocs/with_load_more') diff --git a/src/boot/after_store.js b/src/boot/after_store.js index 5ddc7465..91a13174 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -17,7 +17,9 @@ import FaviconService from '../services/favicon_service/favicon_service.js' // disable compat for certain features configureCompat({ - COMPONENT_V_MODEL: false + COMPONENT_V_MODEL: false, + INSTANCE_SET: false, + RENDER_FUNCTION: false }) let staticInitialResults = null diff --git a/src/boot/routes.js b/src/boot/routes.js index 1bc1f9f7..e5bdd1f0 100644 --- a/src/boot/routes.js +++ b/src/boot/routes.js @@ -69,7 +69,7 @@ export default (store) => { { name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) }, { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute }, { name: 'about', path: '/about', component: About }, - { name: 'user-profile', path: '/(users/)?:name', component: UserProfile } + { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile } ] if (store.state.instance.pleromaChatMessagesAvailable) { diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js index 094b3e57..4e1bda55 100644 --- a/src/components/gallery/gallery.js +++ b/src/components/gallery/gallery.js @@ -1,5 +1,5 @@ import Attachment from '../attachment/attachment.vue' -import { sumBy } from 'lodash' +import { sumBy, set } from 'lodash' const Gallery = { props: [ @@ -85,7 +85,7 @@ const Gallery = { }, methods: { onNaturalSizeLoad ({ id, width, height }) { - this.$set(this.sizes, id, { width, height }) + set(this.sizes, id, { width, height }) }, rowStyle (row) { if (row.audio) { diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx index d9df42ce..db82e075 100644 --- a/src/components/tab_switcher/tab_switcher.jsx +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -43,14 +43,14 @@ export default { }, data () { return { - active: findFirstUsable(this.$slots.default) + active: findFirstUsable(this.$slots.default()) } }, computed: { activeIndex () { // In case of controlled component if (this.activeTab) { - return this.$slots.default.findIndex(slot => this.activeTab === slot.key) + return this.$slots.default().findIndex(slot => this.activeTab === slot.key) } else { return this.active } @@ -74,7 +74,7 @@ export default { }, // DO NOT put it to computed, it doesn't work (caching?) slots () { - return this.$slots.default + return this.$slots.default() }, setTab (index) { if (typeof this.onSwitch === 'function') { diff --git a/src/hocs/with_load_more/with_load_more.jsx b/src/hocs/with_load_more/with_load_more.jsx index 6cd198ed..e57f9b20 100644 --- a/src/hocs/with_load_more/with_load_more.jsx +++ b/src/hocs/with_load_more/with_load_more.jsx @@ -82,14 +82,11 @@ const withLoadMore = ({ }, render () { const props = { - props: { - ...this.$props, - [childPropName]: this.entries - }, - on: this.$listeners, - scopedSlots: this.$scopedSlots + ...this.$props, + [childPropName]: this.entries + // on: this.$listeners // TODO fix listeners } - const children = Object.entries(this.$slots).map(([key, value]) => h('template', { slot: key }, value)) + const children = this.$slots return (
-- cgit v1.2.3-70-g09d2 From 7afa6c9f406795a4fddb3c40a4011b321ee460bc Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 22 Mar 2022 20:22:28 +0200 Subject: listeners aren't actually used --- src/hocs/with_load_more/with_load_more.jsx | 2 +- src/hocs/with_subscription/with_subscription.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'src/hocs/with_load_more') diff --git a/src/hocs/with_load_more/with_load_more.jsx b/src/hocs/with_load_more/with_load_more.jsx index e57f9b20..360b439a 100644 --- a/src/hocs/with_load_more/with_load_more.jsx +++ b/src/hocs/with_load_more/with_load_more.jsx @@ -81,10 +81,10 @@ const withLoadMore = ({ } }, render () { + console.log(this.$listeners) const props = { ...this.$props, [childPropName]: this.entries - // on: this.$listeners // TODO fix listeners } const children = this.$slots return ( diff --git a/src/hocs/with_subscription/with_subscription.jsx b/src/hocs/with_subscription/with_subscription.jsx index 5ba2662b..da1b2cc9 100644 --- a/src/hocs/with_subscription/with_subscription.jsx +++ b/src/hocs/with_subscription/with_subscription.jsx @@ -61,11 +61,11 @@ const withSubscription = ({ } }, render () { + console.log(this.$listeners) if (!this.error && !this.loading) { const props = { ...this.$props, [childPropName]: this.fetchedData - // on: this.$listeners // TODO } const children = this.$slots return ( -- cgit v1.2.3-70-g09d2 From 3fb647b34bd0cb6eafd61c4a21dcb0e6e2c22675 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 24 Mar 2022 13:50:22 +0200 Subject: fix minor renames --- src/components/image_cropper/image_cropper.js | 4 ++-- src/hocs/with_load_more/with_load_more.jsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'src/hocs/with_load_more') diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js index e8d5ec6d..e72ed0e8 100644 --- a/src/components/image_cropper/image_cropper.js +++ b/src/components/image_cropper/image_cropper.js @@ -66,7 +66,7 @@ const ImageCropper = { } }, methods: { - destroy () { + unmounted () { if (this.cropper) { this.cropper.destroy() } @@ -117,7 +117,7 @@ const ImageCropper = { const fileInput = this.$refs.input fileInput.addEventListener('change', this.readFile) }, - beforeDestroy: function () { + beforeUnmount: function () { // remove the event listeners const trigger = this.getTriggerDOM() if (trigger) { diff --git a/src/hocs/with_load_more/with_load_more.jsx b/src/hocs/with_load_more/with_load_more.jsx index 360b439a..705991ca 100644 --- a/src/hocs/with_load_more/with_load_more.jsx +++ b/src/hocs/with_load_more/with_load_more.jsx @@ -17,7 +17,7 @@ library.add( const withLoadMore = ({ fetch, // function to fetch entries and return a promise select, // function to select data from store - destroy, // function called at "destroyed" lifecycle + unmounted, // function called at "destroyed" lifecycle childPropName = 'entries', // name of the prop to be passed into the wrapped component additionalPropNames = [] // additional prop name list of the wrapper component }) => (WrappedComponent) => { @@ -42,7 +42,7 @@ const withLoadMore = ({ }, unmounted () { window.removeEventListener('scroll', this.scrollLoad) - destroy && destroy(this.$props, this.$store) + unmounted && unmounted(this.$props, this.$store) }, methods: { // Entries is not a computed because computed can't track the dynamic -- cgit v1.2.3-70-g09d2 From afbe1a96ac9356202f7533d7178ce3a1e6f2ece1 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 30 Mar 2022 23:48:06 +0300 Subject: fix some mishaps i noticed during self-review --- src/components/chat_message/chat_message.js | 1 + src/components/post_status_form/post_status_form.js | 6 ++++++ src/components/selectable_list/selectable_list.vue | 4 ++-- src/components/user_reporting_modal/user_reporting_modal.vue | 2 +- src/hocs/with_load_more/with_load_more.jsx | 1 - 5 files changed, 10 insertions(+), 4 deletions(-) (limited to 'src/hocs/with_load_more') diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js index eb195bc1..5bac7736 100644 --- a/src/components/chat_message/chat_message.js +++ b/src/components/chat_message/chat_message.js @@ -27,6 +27,7 @@ const ChatMessage = { 'chatViewItem', 'hoveredMessageChain' ], + emits: ['hover'], components: { Popover, Attachment, diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index fe07309f..42c1335e 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -78,6 +78,12 @@ const PostStatusForm = { 'emojiPickerPlacement', 'optimisticPosting' ], + emits: [ + 'posted', + 'resize', + 'mediaplay' + 'mediapause' + ], components: { MediaUpload, EmojiInput, diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue index 6d4d0629..3c80660e 100644 --- a/src/components/selectable_list/selectable_list.vue +++ b/src/components/selectable_list/selectable_list.vue @@ -8,7 +8,7 @@ {{ $t('selectable_list.select_all') }} @@ -32,7 +32,7 @@
diff --git a/src/hocs/with_load_more/with_load_more.jsx b/src/hocs/with_load_more/with_load_more.jsx index 705991ca..c0ae1856 100644 --- a/src/hocs/with_load_more/with_load_more.jsx +++ b/src/hocs/with_load_more/with_load_more.jsx @@ -81,7 +81,6 @@ const withLoadMore = ({ } }, render () { - console.log(this.$listeners) const props = { ...this.$props, [childPropName]: this.entries -- 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/hocs/with_load_more') 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