From 633349ddff2fd96298ce26ac2d3c404edb1ebbf3 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 29 Oct 2020 21:13:31 +0200 Subject: Refactor desktop navbar into a component, change layout to grid for better compatibility with search field and simpler CSS --- src/App.js | 49 ++----------------------------------------------- 1 file changed, 2 insertions(+), 47 deletions(-) (limited to 'src/App.js') diff --git a/src/App.js b/src/App.js index ded772fa..4871b4ac 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,6 @@ import UserPanel from './components/user_panel/user_panel.vue' import NavPanel from './components/nav_panel/nav_panel.vue' import Notifications from './components/notifications/notifications.vue' -import SearchBar from './components/search_bar/search_bar.vue' import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue' import FeaturesPanel from './components/features_panel/features_panel.vue' import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue' @@ -11,6 +10,7 @@ import MediaModal from './components/media_modal/media_modal.vue' import SideDrawer from './components/side_drawer/side_drawer.vue' import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue' import MobileNav from './components/mobile_nav/mobile_nav.vue' +import DesktopNav from './components/desktop_nav/desktop_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 GlobalNoticeList from './components/global_notice_list/global_notice_list.vue' @@ -22,7 +22,6 @@ export default { UserPanel, NavPanel, Notifications, - SearchBar, InstanceSpecificPanel, FeaturesPanel, WhoToFollowPanel, @@ -31,6 +30,7 @@ export default { SideDrawer, MobilePostStatusButton, MobileNav, + DesktopNav, SettingsModal, UserReportingModal, PostStatusModal, @@ -38,14 +38,6 @@ export default { }, data: () => ({ mobileActivePanel: 'timeline', - searchBarHidden: true, - supportsMask: window.CSS && window.CSS.supports && ( - window.CSS.supports('mask-size', 'contain') || - window.CSS.supports('-webkit-mask-size', 'contain') || - window.CSS.supports('-moz-mask-size', 'contain') || - window.CSS.supports('-ms-mask-size', 'contain') || - window.CSS.supports('-o-mask-size', 'contain') - ) }), created () { // Load the locale from the storage @@ -61,28 +53,6 @@ export default { background () { return this.currentUser.background_image || this.$store.state.instance.background }, - enableMask () { return this.supportsMask && this.$store.state.instance.logoMask }, - logoStyle () { - return { - 'visibility': this.enableMask ? 'hidden' : 'visible' - } - }, - logoMaskStyle () { - return this.enableMask ? { - 'mask-image': `url(${this.$store.state.instance.logo})` - } : { - 'background-color': this.enableMask ? '' : 'transparent' - } - }, - logoBgStyle () { - return Object.assign({ - 'margin': `${this.$store.state.instance.logoMargin} 0`, - opacity: this.searchBarHidden ? 1 : 0 - }, this.enableMask ? {} : { - 'background-color': this.enableMask ? '' : 'transparent' - }) - }, - logo () { return this.$store.state.instance.logo }, bgStyle () { return { 'background-image': `url(${this.background})` @@ -93,9 +63,7 @@ export default { '--body-background-image': `url(${this.background})` } }, - sitename () { return this.$store.state.instance.name }, chat () { return this.$store.state.chat.channel.state === 'joined' }, - hideSitename () { return this.$store.state.instance.hideSitename }, suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled }, showInstanceSpecificPanel () { return this.$store.state.instance.showInstanceSpecificPanel && @@ -112,19 +80,6 @@ export default { } }, methods: { - scrollToTop () { - window.scrollTo(0, 0) - }, - logout () { - this.$router.replace('/main/public') - this.$store.dispatch('logout') - }, - onSearchBarToggled (hidden) { - this.searchBarHidden = hidden - }, - openSettingsModal () { - this.$store.dispatch('openSettingsModal') - }, updateMobileState () { const mobileLayout = windowWidth() <= 800 const layoutHeight = windowHeight() -- cgit v1.2.3-70-g09d2 From 8b1213ea1e75a2d0f824cc71992d4867a4ea0bb5 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 1 Nov 2020 16:44:57 +0200 Subject: lint --- src/App.js | 2 +- src/components/desktop_nav/desktop_nav.js | 4 +-- src/components/desktop_nav/desktop_nav.vue | 42 +++++++++++----------- src/components/mobile_nav/mobile_nav.vue | 2 +- .../post_status_form/post_status_form.vue | 3 +- src/components/react_button/react_button.vue | 2 +- src/components/search_bar/search_bar.vue | 26 +++++++------- 7 files changed, 41 insertions(+), 40 deletions(-) (limited to 'src/App.js') diff --git a/src/App.js b/src/App.js index 4871b4ac..52700319 100644 --- a/src/App.js +++ b/src/App.js @@ -37,7 +37,7 @@ export default { GlobalNoticeList }, data: () => ({ - mobileActivePanel: 'timeline', + mobileActivePanel: 'timeline' }), created () { // Load the locale from the storage diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js index ee99ec10..e048f53d 100644 --- a/src/components/desktop_nav/desktop_nav.js +++ b/src/components/desktop_nav/desktop_nav.js @@ -69,7 +69,7 @@ export default { hideSitename () { return this.$store.state.instance.hideSitename }, logoLeft () { return this.$store.state.instance.logoLeft }, currentUser () { return this.$store.state.users.currentUser }, - privateMode () { return this.$store.state.instance.private }, + privateMode () { return this.$store.state.instance.private } }, methods: { scrollToTop () { @@ -84,6 +84,6 @@ export default { }, openSettingsModal () { this.$store.dispatch('openSettingsModal') - }, + } } } diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue index d166be08..3a6e4033 100644 --- a/src/components/desktop_nav/desktop_nav.vue +++ b/src/components/desktop_nav/desktop_nav.vue @@ -4,7 +4,7 @@ class="DesktopNav" :class="{ '-logoLeft': logoLeft }" @click="scrollToTop()" - > + >
+ > {{ sitename }}
@@ -20,58 +20,58 @@ class="logo" :to="{ name: 'root' }" :style="logoBgStyle" - > + >
+ /> + >
+ /> + > + /> + > -
+ >
+
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue index 30b15149..6651fc8e 100644 --- a/src/components/mobile_nav/mobile_nav.vue +++ b/src/components/mobile_nav/mobile_nav.vue @@ -1,7 +1,7 @@