diff --git a/src/App.js b/src/App.js index 75fa3a3c0e2dff9d309458a0f9bec717f529e4fa..39ef62e700a16fe493021874556de3121d7696e5 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 e65f3b2acc1897c68bb1aec7b972fab67fa9079e..c8470c8a582e6e65802da79b163a52b2c445fd5b 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 b5f6e7d36e014323be31c6ce7bef650c33330b39..094a8ab98b61fe6013f84f40e9c90c935bd70131 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,7 +13,7 @@ <div id="content" class="app-layout container" - :class="[{ '-reverse': reverseLayout, '-no-sticky-headers': noSticky }, '-' + layoutType]" + :class="classes" > <div class="underlay"/> <div id="sidebar" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }"> diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js index a2789d2e085e54ce6d8fac5416019a2fb2a2bdf9..9a0ae10723ab8f6eb64a09350ecbbd75322b9a52 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 34a335fe3d1a062f6729092d7449168de3999b3e..1bad51b93bb54482d0f4b8cebf68814a77dd705e 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 4866ac577ebaefce4d14f62d5b46a2bb7893511d..ecf79b645a5cfcb52551dd960f58e7dc37ecb912 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