From 71863061c691df7f59cf4be283a3e0772d485378 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 4 Apr 2022 19:41:09 +0300 Subject: fixed tons of stuff, at least it looks normalish on desktop --- src/components/chat/chat.scss | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) (limited to 'src/components/chat/chat.scss') diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss index 3a26686c..c1f2dcf2 100644 --- a/src/components/chat/chat.scss +++ b/src/components/chat/chat.scss @@ -1,19 +1,12 @@ .chat-view { display: flex; - height: calc(100vh - 60px); - width: 100%; - - .chat-title { - // prevents chat header jumping on when the user avatar loads - height: 28px; - } + height: 100%; .chat-view-inner { height: auto; width: 100%; overflow: visible; display: flex; - margin: 0.5em 0.5em 0 0.5em; } .chat-view-body { @@ -32,11 +25,9 @@ } } - .scrollable-message-list { + .message-list { padding: 0 0.8em; height: 100%; - overflow-y: scroll; - overflow-x: hidden; display: flex; flex-direction: column; } @@ -44,12 +35,13 @@ .footer { position: sticky; bottom: 0; + background-color: $fallback--bg; + background-color: var(--bg, $fallback--bg); } .chat-view-heading { align-items: center; justify-content: space-between; - top: 50px; display: flex; z-index: 2; position: sticky; -- cgit v1.2.3-70-g09d2 From cfa8edf2c075d16e3b04f4a6463657eb777c623c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 5 Apr 2022 13:19:12 +0300 Subject: chats work and look a bit better --- src/App.scss | 2 +- src/components/chat/chat.js | 24 +++++++++++++----------- src/components/chat/chat.scss | 1 + src/components/chat/chat_layout_utils.js | 1 - 4 files changed, 15 insertions(+), 13 deletions(-) (limited to 'src/components/chat/chat.scss') diff --git a/src/App.scss b/src/App.scss index dbea74a0..5df4d57b 100644 --- a/src/App.scss +++ b/src/App.scss @@ -494,7 +494,7 @@ i[class*=icon-], bottom: 0; left: 0; right: 0; - z-index: 2; + z-index: 100; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); box-shadow: var(--panelShadow); pointer-events: none; diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js index 59e884c4..91e5c98e 100644 --- a/src/components/chat/chat.js +++ b/src/components/chat/chat.js @@ -19,6 +19,8 @@ library.add( faChevronLeft ) +const scroller = () => document.getElementById('content') + const BOTTOMED_OUT_OFFSET = 10 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 10 const SAFE_RESIZE_TIME_OFFSET = 100 @@ -46,7 +48,7 @@ const Chat = { window.addEventListener('resize', this.handleLayoutChange) }, mounted () { - window.addEventListener('scroll', this.handleScroll) + scroller().addEventListener('scroll', this.handleScroll) if (typeof document.hidden !== 'undefined') { document.addEventListener('visibilitychange', this.handleVisibilityChange, false) } @@ -57,7 +59,7 @@ const Chat = { this.setChatLayout() }, unmounted () { - window.removeEventListener('scroll', this.handleScroll) + scroller().removeEventListener('scroll', this.handleScroll) window.removeEventListener('resize', this.handleLayoutChange) this.unsetChatLayout() if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false) @@ -177,13 +179,13 @@ const Chat = { this.$nextTick(() => { const { offsetHeight = undefined } = this.lastScrollPosition - this.lastScrollPosition = getScrollPosition(document.getElementById('content')) + this.lastScrollPosition = getScrollPosition(scroller()) const diff = this.lastScrollPosition.offsetHeight - offsetHeight if (diff < 0 || (!this.bottomedOut() && expand)) { this.$nextTick(() => { - document.getElementById('content').scrollTo({ - top: document.getElementById('content').scrollTop - diff, + scroller().scrollTo({ + top: scroller().scrollTop - diff, left: 0 }) }) @@ -192,7 +194,7 @@ const Chat = { }, scrollDown (options = {}) { const { behavior = 'auto', forceRead = false } = options - const scrollable = document.getElementById('content') + const scrollable = scroller() if (!scrollable) { return } this.$nextTick(() => { scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior }) @@ -211,10 +213,10 @@ const Chat = { }) }, bottomedOut (offset) { - return isBottomedOut(document.getElementById('content'), offset) + return isBottomedOut(scroller(), offset) }, reachedTop () { - const scrollable = document.getElementById('content') + const scrollable = scroller() return scrollable && scrollable.scrollTop <= 0 }, cullOlderCheck () { @@ -246,8 +248,8 @@ const Chat = { } }, 200), handleScrollUp (positionBeforeLoading) { - const positionAfterLoading = getScrollPosition(document.getElementById('content')) - this.$refs.scrollable.scrollTo({ + const positionAfterLoading = getScrollPosition(scroller()) + scroller().scrollTo({ top: getNewTopPosition(positionBeforeLoading, positionAfterLoading), left: 0 }) @@ -268,7 +270,7 @@ const Chat = { chatService.clear(chatMessageService) } - const positionBeforeUpdate = getScrollPosition(document.getElementById('content')) + const positionBeforeUpdate = getScrollPosition(scroller()) this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => { this.$nextTick(() => { if (fetchOlderMessages) { diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss index c1f2dcf2..51bb3ea6 100644 --- a/src/components/chat/chat.scss +++ b/src/components/chat/chat.scss @@ -37,6 +37,7 @@ bottom: 0; background-color: $fallback--bg; background-color: var(--bg, $fallback--bg); + z-index: 10; } .chat-view-heading { diff --git a/src/components/chat/chat_layout_utils.js b/src/components/chat/chat_layout_utils.js index 5c4aa5bf..50a933ac 100644 --- a/src/components/chat/chat_layout_utils.js +++ b/src/components/chat/chat_layout_utils.js @@ -1,6 +1,5 @@ // Captures a scroll position export const getScrollPosition = (el) => { - console.log(el) return { scrollTop: el.scrollTop, scrollHeight: el.scrollHeight, -- cgit v1.2.3-70-g09d2 From 6109fab14e4dac3a85ffa51ddfcd7e3aaef5149a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 8 Apr 2022 10:17:23 +0300 Subject: cleanup, fix some things, try to disable scrollbars on mobile --- src/App.scss | 28 ++++++++++++++++------------ src/App.vue | 2 +- src/components/chat/chat.scss | 9 --------- src/components/media_modal/media_modal.vue | 2 +- src/components/modal/modal.vue | 2 +- 5 files changed, 19 insertions(+), 24 deletions(-) (limited to 'src/components/chat/chat.scss') diff --git a/src/App.scss b/src/App.scss index dd3d8cbb..0deac2b1 100644 --- a/src/App.scss +++ b/src/App.scss @@ -116,7 +116,7 @@ nav { #content { overscroll-behavior-y: none; - overflow-y: auto; + overflow-y: scroll; overflow-x: hidden; position: sticky; } @@ -198,19 +198,23 @@ nav { margin-left: -2em; padding-left: 2.5em; - &:not(.-show-scrollbar) { - scrollbar-width: none; - margin-right: -2em; - padding-right: 2.5em; - - &::-webkit-scrollbar { - display: block; - width: 0; + // Only show custom scrollbars on devices which + // have a cursor/pointer to operate them + @media (pointer: fine) { + &:not(.-show-scrollbar) { + scrollbar-width: none; + margin-right: -2em; + padding-right: 2.5em; + + &::-webkit-scrollbar { + display: block; + width: 0; + } } - } - .panel-heading.-sticky { - top: -10px; + .panel-heading.-sticky { + top: -10px; + } } } } diff --git a/src/App.vue b/src/App.vue index 243a3314..b5f6e7d3 100644 --- a/src/App.vue +++ b/src/App.vue @@ -41,8 +41,8 @@
-
+ .modal-view { - z-index: 1000; + z-index: 2000; position: fixed; top: 0; left: 0; -- cgit v1.2.3-70-g09d2 From 282e6812b38b5354b1f5a77297cf77ca7365397e Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 8 Apr 2022 13:31:29 +0300 Subject: fix chats, boost popover's z-index some more --- src/components/chat/chat.scss | 43 -------------------------------------- src/components/popover/popover.vue | 2 +- 2 files changed, 1 insertion(+), 44 deletions(-) (limited to 'src/components/chat/chat.scss') diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss index 85e9f59d..34a335fe 100644 --- a/src/components/chat/chat.scss +++ b/src/components/chat/chat.scss @@ -108,47 +108,4 @@ } } } - - @media all and (max-width: 800px) { - height: 100%; - overflow: hidden; - - .chat-view-inner { - overflow: hidden; - height: 100%; - margin-top: 0; - margin-left: 0; - margin-right: 0; - } - - .chat-view-body { - display: flex; - min-height: auto; - overflow: hidden; - height: 100%; - margin: 0; - border-radius: 0; - } - - .chat-view-heading { - box-sizing: border-box; - position: static; - top: 0; - margin-top: 0; - border-radius: 0; - height: 50px; - } - - .scrollable-message-list { - display: unset; - overflow-y: scroll; - overflow-x: hidden; - -webkit-overflow-scrolling: touch; - } - - .footer { - position: sticky; - bottom: auto; - } - } } diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 4b3ad7da..3f2a81f5 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -37,7 +37,7 @@ } .popover { - z-index: 90; + z-index: 500; position: absolute; min-width: 0; } -- cgit v1.2.3-70-g09d2 From 3e1b40ce29feae8ab2b13da35eece15df8a7697c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 10 Apr 2022 20:18:54 +0300 Subject: fix new post button not working day1, minor stylistic fixes --- src/App.js | 14 ++++++++++++++ src/App.scss | 6 ++++++ src/App.vue | 2 +- src/components/chat/chat.js | 1 + src/components/chat/chat.scss | 3 +++ .../mobile_post_status_button/mobile_post_status_button.js | 2 +- 6 files changed, 26 insertions(+), 2 deletions(-) (limited to 'src/components/chat/chat.scss') diff --git a/src/App.js b/src/App.js index 75fa3a3c..39ef62e7 100644 --- a/src/App.js +++ b/src/App.js @@ -50,6 +50,16 @@ export default { window.removeEventListener('resize', this.updateMobileState) }, computed: { + classes () { + return [ + { + '-reverse': this.reverseLayout, + '-no-sticky-headers': this.noSticky, + '-has-new-post-button': this.newPostButtonShown + }, + '-' + this.layoutType + ] + }, currentUser () { return this.$store.state.users.currentUser }, userBackground () { return this.currentUser.background_image }, instanceBackground () { @@ -72,6 +82,10 @@ export default { !this.$store.getters.mergedConfig.hideISP && this.$store.state.instance.instanceSpecificPanelContent }, + newPostButtonShown () { + if (this.$route.name === 'chat' || this.$route.name === 'chats') return false + return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile' + }, showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }, shoutboxPosition () { return this.$store.getters.mergedConfig.showNewPostButton || false diff --git a/src/App.scss b/src/App.scss index e65f3b2a..c8470c8a 100644 --- a/src/App.scss +++ b/src/App.scss @@ -222,6 +222,12 @@ nav { } } + &.-has-new-post-button { + .column { + padding-bottom: 20em; + } + } + &.-no-sticky-headers { .column { .panel-heading.-sticky { diff --git a/src/App.vue b/src/App.vue index b5f6e7d3..094a8ab9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,7 +13,7 @@
diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js index a2789d2e..9a0ae107 100644 --- a/src/components/chat/chat.js +++ b/src/components/chat/chat.js @@ -91,6 +91,7 @@ const Chat = { ...mapState({ backendInteractor: state => state.api.backendInteractor, mastoUserSocketStatus: state => state.api.mastoUserSocketStatus, + mobileLayout: state => state.interface.layoutType === 'mobile', currentUser: state => state.users.currentUser }) }, diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss index 34a335fe..1bad51b9 100644 --- a/src/components/chat/chat.scss +++ b/src/components/chat/chat.scss @@ -1,6 +1,9 @@ .chat-view { display: flex; height: 100%; + // Stick the form to the top/bottom of screen + margin-bottom: calc(var(--___columnMargin) / -2); + margin-top: calc(var(--___columnMargin) / -2); .chat-view-inner { height: auto; diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.js b/src/components/mobile_post_status_button/mobile_post_status_button.js index 4866ac57..ecf79b64 100644 --- a/src/components/mobile_post_status_button/mobile_post_status_button.js +++ b/src/components/mobile_post_status_button/mobile_post_status_button.js @@ -45,7 +45,7 @@ const MobilePostStatusButton = { return this.autohideFloatingPostButton && (this.hidden || this.inputActive) }, isPersistent () { - return !!this.$store.getters.mergedConfig.showNewPostButton + return !!this.$store.getters.mergedConfig.alwaysShowNewPostButton }, autohideFloatingPostButton () { return !!this.$store.getters.mergedConfig.autohideFloatingPostButton -- cgit v1.2.3-70-g09d2 From 4f617a7293922fdce85462009feb7e52770a7e62 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 11 Apr 2022 23:30:41 +0300 Subject: fix for chat shadow --- src/App.js | 5 ++++- src/App.scss | 5 +++++ src/App.vue | 2 +- src/components/chat/chat.scss | 4 +++- 4 files changed, 13 insertions(+), 3 deletions(-) (limited to 'src/components/chat/chat.scss') diff --git a/src/App.js b/src/App.js index 39ef62e7..9cfaf4fa 100644 --- a/src/App.js +++ b/src/App.js @@ -82,8 +82,11 @@ export default { !this.$store.getters.mergedConfig.hideISP && this.$store.state.instance.instanceSpecificPanelContent }, + isChats () { + return this.$route.name === 'chat' || this.$route.name === 'chats' + }, newPostButtonShown () { - if (this.$route.name === 'chat' || this.$route.name === 'chats') return false + if (this.isChats) return false return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile' }, showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }, diff --git a/src/App.scss b/src/App.scss index b5411585..31d7fac2 100644 --- a/src/App.scss +++ b/src/App.scss @@ -207,6 +207,11 @@ nav { z-index: 2; } + &.-full-height { + margin-top: 0; + margin-bottom: 0; + } + &.-scrollable { --___paddingIncrease: calc(var(--columnGap) / 2); diff --git a/src/App.vue b/src/App.vue index 094a8ab9..707b91e5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -26,7 +26,7 @@
-
+