diff --git a/src/App.js b/src/App.js index 75fa3a3c0..39ef62e70 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 678c44104..c8470c8a5 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,16 +1,15 @@ // stylelint-disable rscss/class-format @import './_variables.scss'; +:root { + --navbar-height: 50px; +} + html { font-size: 14px; - overflow: hidden; - max-height: 100vh; } body { - overflow: hidden; - max-height: 100vh; - max-width: 100vw; font-family: sans-serif; font-family: var(--interfaceFont, sans-serif); margin: 0; @@ -19,6 +18,7 @@ body { overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + overscroll-behavior-y: none; &.hidden { display: none; @@ -26,6 +26,10 @@ body { } @media (any-pointer: fine) { + body { + background: var(--bg); + } + * { scrollbar-color: var(--btn) transparent; @@ -106,33 +110,26 @@ nav { box-shadow: var(--topBarShadow); box-sizing: border-box; height: var(--navbar-height); -} - -#app-loaded { - min-height: 100vh; - min-width: 100vw; - overflow: hidden; - - --navbar-height: 50px; -} - -#content { - overscroll-behavior-y: none; - overflow-y: scroll; - overflow-x: hidden; - position: sticky; + position: fixed; } #sidebar { grid-area: sidebar; } -#notifs-column { - grid-area: notifs; +.column.-scrollable { + top: var(--navbar-height); + position: sticky; } #main-scroller { + margin-top: var(--navbar-height); grid-area: content; + position: relative; +} + +#notifs-column { + grid-area: notifs; } .app-bg-wrapper { @@ -175,11 +172,11 @@ nav { grid-template-rows: 1fr; box-sizing: border-box; margin: 0 auto; - height: calc(100vh - var(--navbar-height)); align-content: flex-start; flex-wrap: wrap; - padding: 0 10px; + padding: 0 calc(var(--columnGap) / 2); justify-content: center; + min-height: 100vh; .column { --___columnMargin: var(--columnGap); @@ -187,19 +184,19 @@ nav { display: grid; grid-template-columns: 100%; box-sizing: border-box; - padding-top: 10px; grid-row-start: 1; grid-row-end: 1; margin: 0 calc(var(--___columnMargin) / 2); + padding: calc(var(--___columnMargin) / 2) 0; row-gap: var(--___columnMargin); align-content: start; &.-scrollable { --___paddingIncrease: calc(var(--columnGap) / 2); - padding-top: 10px; + padding-top: calc(var(--columnGap) / 2); position: sticky; - top: 0; + top: var(--navbar-height); max-height: calc(100vh - var(--navbar-height)); overflow-y: auto; overflow-x: hidden; @@ -220,11 +217,17 @@ nav { } .panel-heading.-sticky { - top: -10px; + top: calc(var(--columnGap) / -2); } } } + &.-has-new-post-button { + .column { + padding-bottom: 20em; + } + } + &.-no-sticky-headers { .column { .panel-heading.-sticky { @@ -271,6 +274,12 @@ nav { display: none; } } + + &.-normal { + #notifs-column { + display: none; + } + } } .text-center { @@ -728,35 +737,6 @@ i[class*=icon-], flex: 1; } -@media all and (min-width: 800px) { - .sidebar-bounds { - overflow: hidden; - max-height: 100vh; - width: 345px; - position: fixed; - margin-top: -10px; - - .sidebar-scroller { - height: 96vh; - width: 365px; - padding-top: 10px; - padding-right: 50px; - overflow-x: hidden; - overflow-y: scroll; - } - - .sidebar { - width: 345px; - } - } - - .sidebar-flexer { - max-height: 96vh; - flex-shrink: 0; - flex-grow: 0; - } -} - @media all and (max-width: 800px) { .mobile-hidden { display: none; diff --git a/src/App.vue b/src/App.vue index b5f6e7d36..094a8ab98 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 5d2c1d095..9a0ae1072 100644 --- a/src/components/chat/chat.js +++ b/src/components/chat/chat.js @@ -19,8 +19,6 @@ 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 @@ -45,10 +43,9 @@ const Chat = { }, created () { this.startFetching() - window.addEventListener('resize', this.handleLayoutChange) }, mounted () { - scroller().addEventListener('scroll', this.handleScroll) + window.addEventListener('scroll', this.handleScroll) if (typeof document.hidden !== 'undefined') { document.addEventListener('visibilitychange', this.handleVisibilityChange, false) } @@ -56,12 +53,9 @@ const Chat = { this.$nextTick(() => { this.handleResize() }) - this.setChatLayout() }, unmounted () { - scroller().removeEventListener('scroll', this.handleScroll) - window.removeEventListener('resize', this.handleLayoutChange) - this.unsetChatLayout() + window.removeEventListener('scroll', this.handleScroll) if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false) this.$store.dispatch('clearCurrentChat') }, @@ -97,8 +91,7 @@ const Chat = { ...mapState({ backendInteractor: state => state.api.backendInteractor, mastoUserSocketStatus: state => state.api.mastoUserSocketStatus, - mobileLayout: state => state.interface.mobileLayout, - layoutHeight: state => state.interface.layoutHeight, + mobileLayout: state => state.interface.layoutType === 'mobile', currentUser: state => state.users.currentUser }) }, @@ -116,9 +109,6 @@ const Chat = { '$route': function () { this.startFetching() }, - layoutHeight () { - this.handleResize({ expand: true }) - }, mastoUserSocketStatus (newValue) { if (newValue === WSConnectionStatus.JOINED) { this.fetchChat({ isFirstFetch: true }) @@ -142,30 +132,6 @@ const Chat = { } }) }, - setChatLayout () { - // This is a hacky way to adjust the global layout to the mobile chat (without modifying the rest of the app). - // This layout prevents empty spaces from being visible at the bottom - // of the chat on iOS Safari (`safe-area-inset`) when - // - the on-screen keyboard appears and the user starts typing - // - the user selects the text inside the input area - // - the user selects and deletes the text that is multiple lines long - // TODO: unify the chat layout with the global layout. - let html = document.querySelector('html') - if (html) { - html.classList.add('chat-layout') - } - }, - unsetChatLayout () { - let html = document.querySelector('html') - if (html) { - html.classList.remove('chat-layout') - } - }, - handleLayoutChange () { - this.$nextTick(() => { - this.scrollDown() - }) - }, // Preserves the scroll position when OSK appears or the posting form changes its height. handleResize (opts = {}) { const { expand = false, delayed = false } = opts @@ -179,25 +145,20 @@ const Chat = { this.$nextTick(() => { const { offsetHeight = undefined } = this.lastScrollPosition - this.lastScrollPosition = getScrollPosition(scroller()) + this.lastScrollPosition = getScrollPosition() const diff = this.lastScrollPosition.offsetHeight - offsetHeight if (diff < 0 || (!this.bottomedOut() && expand)) { this.$nextTick(() => { - scroller().scrollTo({ - top: scroller().scrollTop - diff, - left: 0 - }) + window.scrollTo({ top: window.scrollY - diff }) }) } }) }, scrollDown (options = {}) { const { behavior = 'auto', forceRead = false } = options - const scrollable = scroller() - if (!scrollable) { return } this.$nextTick(() => { - scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior }) + window.scrollTo({ top: document.documentElement.scrollHeight, behavior }) }) if (forceRead) { this.readChat() @@ -213,11 +174,10 @@ const Chat = { }) }, bottomedOut (offset) { - return isBottomedOut(scroller(), offset) + return isBottomedOut(offset) }, reachedTop () { - const scrollable = scroller() - return scrollable && scrollable.scrollTop <= 0 + return window.scrollY <= 0 }, cullOlderCheck () { window.setTimeout(() => { @@ -248,10 +208,9 @@ const Chat = { } }, 200), handleScrollUp (positionBeforeLoading) { - const positionAfterLoading = getScrollPosition(scroller()) - scroller().scrollTo({ - top: getNewTopPosition(positionBeforeLoading, positionAfterLoading), - left: 0 + const positionAfterLoading = getScrollPosition() + window.scrollTo({ + top: getNewTopPosition(positionBeforeLoading, positionAfterLoading) }) }, fetchChat ({ isFirstFetch = false, fetchLatest = false, maxId }) { @@ -270,7 +229,7 @@ const Chat = { chatService.clear(chatMessageService) } - const positionBeforeUpdate = getScrollPosition(scroller()) + const positionBeforeUpdate = getScrollPosition() this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => { this.$nextTick(() => { if (fetchOlderMessages) { @@ -281,7 +240,7 @@ const Chat = { // full height of the scrollable container. // If this is the case, we want to fetch the messages until the scrollable container // is fully populated so that the user has the ability to scroll up and load the history. - if (!isScrollable(scroller()) && messages.length > 0) { + if (!isScrollable() && messages.length > 0) { this.fetchChat({ maxId: this.currentChatMessageService.minId }) } }) diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss index 34a335fe3..1bad51b93 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/chat/chat.vue b/src/components/chat/chat.vue index 3b0129fa4..d909bed93 100644 --- a/src/components/chat/chat.vue +++ b/src/components/chat/chat.vue @@ -2,7 +2,6 @@
diff --git a/src/components/chat/chat_layout_utils.js b/src/components/chat/chat_layout_utils.js index 50a933ac7..c187892d9 100644 --- a/src/components/chat/chat_layout_utils.js +++ b/src/components/chat/chat_layout_utils.js @@ -1,9 +1,9 @@ // Captures a scroll position -export const getScrollPosition = (el) => { +export const getScrollPosition = () => { return { - scrollTop: el.scrollTop, - scrollHeight: el.scrollHeight, - offsetHeight: el.offsetHeight + scrollTop: window.scrollY, + scrollHeight: document.documentElement.scrollHeight, + offsetHeight: window.innerHeight } } @@ -13,21 +13,12 @@ export const getNewTopPosition = (previousPosition, newPosition) => { return previousPosition.scrollTop + (newPosition.scrollHeight - previousPosition.scrollHeight) } -export const isBottomedOut = (el, offset = 0) => { - if (!el) { return } - const scrollHeight = el.scrollTop + offset - const totalHeight = el.scrollHeight - el.offsetHeight +export const isBottomedOut = (offset = 0) => { + const scrollHeight = window.scrollY + offset + const totalHeight = document.documentElement.scrollHeight - window.innerHeight return totalHeight <= scrollHeight } - -// Height of the scrollable container. The dynamic height is needed to ensure the mobile browser panel doesn't overlap or hide the posting form. -export const scrollableContainerHeight = (inner, header, footer) => { - return inner.offsetHeight - header.clientHeight - footer.clientHeight -} - // Returns whether or not the scrollbar is visible. -export const isScrollable = (el) => { - if (!el) return - - return el.scrollHeight > el.clientHeight +export const isScrollable = () => { + return document.documentElement.scrollHeight > window.innerHeight } diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue index f3894a3a9..0790bb372 100644 --- a/src/components/chat_new/chat_new.vue +++ b/src/components/chat_new/chat_new.vue @@ -1,6 +1,5 @@