diff --git a/index.html b/index.html index a8681c8b4c..fd4e795e73 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ - +
diff --git a/package.json b/package.json index 0f6ae9c822..f039d41247 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@chenfengyuan/vue-qrcode": "^1.0.0", "babel-plugin-add-module-exports": "^0.2.1", "babel-plugin-lodash": "^3.2.11", + "body-scroll-lock": "^2.6.4", "chromatism": "^3.0.0", "cropperjs": "^1.4.3", "diff": "^3.0.1", diff --git a/src/App.js b/src/App.js index e9cd5917d3..fe63b54c53 100644 --- a/src/App.js +++ b/src/App.js @@ -8,9 +8,10 @@ import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_pan import ChatPanel from './components/chat_panel/chat_panel.vue' import MediaModal from './components/media_modal/media_modal.vue' import SideDrawer from './components/side_drawer/side_drawer.vue' -import MobilePostStatusModal from './components/mobile_post_status_modal/mobile_post_status_modal.vue' +import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue' import MobileNav from './components/mobile_nav/mobile_nav.vue' import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue' +import PostStatusModal from './components/post_status_modal/post_status_modal.vue' import { windowWidth } from './services/window_utils/window_utils' export default { @@ -26,9 +27,10 @@ export default { ChatPanel, MediaModal, SideDrawer, - MobilePostStatusModal, + MobilePostStatusButton, MobileNav, - UserReportingModal + UserReportingModal, + PostStatusModal }, data: () => ({ mobileActivePanel: 'timeline', diff --git a/src/App.scss b/src/App.scss index fac800bcd2..2190f91a3b 100644 --- a/src/App.scss +++ b/src/App.scss @@ -10,13 +10,14 @@ position: fixed; z-index: -1; height: 100%; - width: 100%; + left: 0; + right: -20px; background-size: cover; background-repeat: no-repeat; background-position: 0 50%; } -i { +i[class^='icon-'] { user-select: none; } @@ -49,6 +50,10 @@ body { overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + + &.hidden { + display: none; + } } a { @@ -343,6 +348,7 @@ i[class*=icon-] { align-items: center; position: fixed; height: 50px; + box-sizing: border-box; .logo { display: flex; @@ -382,6 +388,7 @@ i[class*=icon-] { } .inner-nav { + position: relative; margin: auto; box-sizing: border-box; padding-left: 10px; diff --git a/src/App.vue b/src/App.vue index 719e00a4d7..8d7f6c79cf 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,6 +4,7 @@ :style="bgAppStyle" >
@@ -14,20 +15,20 @@ class="nav-bar container" @click="scrollToTop()" > -