IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5943 from Ocelot-Social-Community/5907-button-for-writing-new-post-more-to-the-top

Browse Source 
refactor(webapp): refacchange postion add content button, refactor mobile filter menu
This commit is contained in:
Moriz Wahl 2023-02-08 16:44:00 +01:00 committed by GitHub
commit 3dfcf4df9f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 168 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
webapp/components/FilterMenu/CategoriesFilter.vue
View File

@ -6,7 +6,7 @@
:filled="!filteredCategoryIds.length" :filled="!filteredCategoryIds.length"
:label="$t('filter-menu.all')" :label="$t('filter-menu.all')"
icon="check" icon="check"
@click="resetCategories" @click="setResetCategories"
/> />
</li> </li>
<li class="item item-save-topics"> <li class="item item-save-topics">
@ -47,9 +47,6 @@ export default {
LabeledButton, LabeledButton,
}, },
mixins: [SortCategories], mixins: [SortCategories],
props: {
showMobileMenu: { type: Boolean, default: false },
},
data() { data() {
return { return {
categories: [], categories: [],
@ -65,6 +62,10 @@ export default {
resetCategories: 'posts/RESET_CATEGORIES', resetCategories: 'posts/RESET_CATEGORIES',
toggleCategory: 'posts/TOGGLE_CATEGORY', toggleCategory: 'posts/TOGGLE_CATEGORY',
}), }),
setResetCategories() {
this.resetCategories()
this.$emit('showFilterMenu')
},
saveCategories() { saveCategories() {
this.$apollo this.$apollo
.mutate({ .mutate({
@ -72,6 +73,7 @@ export default {
variables: { activeCategories: this.filteredCategoryIds }, variables: { activeCategories: this.filteredCategoryIds },
}) })
.then(() => { .then(() => {
this.$emit('showFilterMenu')
this.$toast.success(this.$t('filter-menu.save.success')) this.$toast.success(this.$t('filter-menu.save.success'))
}) })
.catch(() => { .catch(() => {

3
webapp/components/FilterMenu/FilterMenu.vue
View File

@ -11,7 +11,7 @@
<base-icon class="dropdown-arrow" name="angle-down" /> <base-icon class="dropdown-arrow" name="angle-down" />
</base-button> </base-button>
<template slot="popover"> <template slot="popover">
<filter-menu-component :showMobileMenu="showMobileMenu" /> <filter-menu-component />
</template> </template>
</dropdown> </dropdown>
</template> </template>
@ -29,7 +29,6 @@ export default {
props: { props: {
placement: { type: String }, placement: { type: String },
offset: { type: [String, Number] }, offset: { type: [String, Number] },
showMobileMenu: { type: Boolean, default: false },
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({

5
webapp/components/FilterMenu/FilterMenuComponent.vue
View File

@ -3,7 +3,7 @@
<div class="filter-menu-options"> <div class="filter-menu-options">
<h2 class="title">{{ $t('filter-menu.filter-by') }}</h2> <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
<following-filter /> <following-filter />
<categories-filter v-if="categoriesActive" :showMobileMenu="showMobileMenu" /> <categories-filter v-if="categoriesActive" @showFilterMenu="$emit('showFilterMenu')" />
</div> </div>
<div class="filter-menu-options"> <div class="filter-menu-options">
<h2 class="title">{{ $t('filter-menu.order-by') }}</h2> <h2 class="title">{{ $t('filter-menu.order-by') }}</h2>
@ -28,9 +28,6 @@ export default {
categoriesActive: this.$env.CATEGORIES_ACTIVE, categoriesActive: this.$env.CATEGORIES_ACTIVE,
} }
}, },
props: {
showMobileMenu: { type: Boolean, default: false },
},
} }
</script> </script>

6
webapp/components/HeaderMenu/HeaderMenu.vue
View File

@ -149,7 +149,7 @@
style="flex-grow: 0; flex-basis: auto; padding: 20px 0" style="flex-grow: 0; flex-basis: auto; padding: 20px 0"
> >
<client-only> <client-only>
<filter-menu v-show="showFilterMenuDropdown" :showMobileMenu="showMobileMenu" /> <filter-menu v-if="showFilterMenuDropdown && SHOW_CONTENT_FILTER_HEADER_MENU" />
</client-only> </client-only>
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
@ -179,7 +179,9 @@
style="text-align: center" style="text-align: center"
> >
<client-only> <client-only>
<group-button /> <div @click="toggleMobileMenuView">
<group-button />
</div>
</client-only> </client-only>
</ds-flex-item> </ds-flex-item>
<!-- map button --> <!-- map button -->

1
webapp/constants/posts.js
View File

@ -1,2 +1,3 @@
export const first = 12 export const first = 12
export const offset = 0 export const offset = 0
export const POST_ADD_BUTTON_POSITION_TOP = true

2
webapp/layouts/default.vue
View File

@ -5,7 +5,7 @@
</div> </div>
<ds-container> <ds-container>
<div class="main-container"> <div class="main-container">
<nuxt :showMobileMenu="showMobileMenu" /> <nuxt />
</div> </div>
</ds-container> </ds-container>
<page-footer v-if="!isMobile" /> <page-footer v-if="!isMobile" />

229
webapp/pages/index.vue
View File

@ -1,64 +1,89 @@
<template> <template>
<div> <div>
<!-- create post -->
<div :class="POST_ADD_BUTTON_POSITION_TOP ? 'box-add-button-top' : ''">
<client-only>
<nuxt-link :to="{ name: 'post-create' }" :class="{ 'hide-filter': hideByScroll }">
<base-button
v-tooltip="{
content: $t('contribution.newPost'),
placement: 'left',
}"
class="post-add-button"
:class="POST_ADD_BUTTON_POSITION_TOP ? 'post-add-button-top' : 'post-add-button-bottom'"
icon="plus"
filled
circle
/>
</nuxt-link>
</client-only>
</div>
<masonry-grid> <masonry-grid>
<ds-grid-item v-if="hashtag" :row-span="2" column-span="fullWidth">
<hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" />
</ds-grid-item>
<!--Filter Button--> <!--Filter Button-->
<ds-grid-item <ds-grid-item
v-if="categoriesActive && SHOW_CONTENT_FILTER_MASONRY_GRID" v-if="categoriesActive && SHOW_CONTENT_FILTER_MASONRY_GRID"
:row-span="1" :row-span="1"
column-span="fullWidth" column-span="fullWidth"
class="filterButtonMenu" class="top-filter-menu"
:class="{ 'hide-filter': hideFilter }"
> >
<base-button <div class="filterButtonBox">
class="my-filter-button" <div class="filterButtonMenu" :class="{ 'hide-filter': hideByScroll }">
v-if="!postsFilter['categories_some'] && !postsFilter['author']" <base-button
right class="my-filter-button"
@click="showFilter = !showFilter" v-if="!postsFilter['categories_some'] && !postsFilter['author']"
filled right
> @click="showFilter = !showFilter"
{{ $t('contribution.filterMasonryGrid.noFilter') }} filled
&nbsp; >
<base-icon class="my-filter-button" :name="filterButtonIcon"></base-icon> {{ $t('contribution.filterMasonryGrid.noFilter') }}
</base-button> &nbsp;
<span v-if="postsFilter['categories_some']"> <base-icon class="my-filter-button" :name="filterButtonIcon"></base-icon>
<base-button class="my-filter-button" right @click="showFilter = !showFilter" filled> </base-button>
{{ $t('contribution.filterMasonryGrid.myTopics') }} <span v-if="postsFilter['categories_some']">
</base-button> <base-button class="my-filter-button" right @click="showFilter = !showFilter" filled>
<base-button {{ $t('contribution.filterMasonryGrid.myTopics') }}
class="filter-remove" </base-button>
@click="resetCategories" <base-button
icon="close" class="filter-remove"
:title="$t('filter-menu.deleteFilter')" @click="resetCategories"
style="margin-left: -8px" icon="close"
filled :title="$t('filter-menu.deleteFilter')"
/> style="margin-left: -8px"
</span> filled
<span v-if="postsFilter['author']"> />
<base-button class="my-filter-button" right @click="showFilter = !showFilter" filled> </span>
{{ $t('contribution.filterMasonryGrid.myFriends') }} <span v-if="postsFilter['author']">
</base-button> <base-button class="my-filter-button" right @click="showFilter = !showFilter" filled>
<base-button {{ $t('contribution.filterMasonryGrid.myFriends') }}
class="filter-remove" </base-button>
@click="resetByFollowed" <base-button
icon="close" class="filter-remove"
:title="$t('filter-menu.deleteFilter')" @click="resetByFollowed"
style="margin-left: -8px" icon="close"
filled :title="$t('filter-menu.deleteFilter')"
/> style="margin-left: -8px"
</span> filled
/>
</span>
<div id="my-filter" v-if="showFilter"> <div id="my-filter" v-if="showFilter">
<filter-menu-component :showMobileMenu="showMobileMenu" /> <div @mouseleave="showFilter = false">
<filter-menu-component @showFilterMenu="showFilterMenu" />
</div>
</div>
</div>
</div> </div>
</ds-grid-item> </ds-grid-item>
<ds-space :margin-bottom="{ base: 'small', md: 'base', lg: 'large' }" /> <ds-space :margin-bottom="{ base: 'small', md: 'base', lg: 'large' }" />
<ds-grid-item v-if="hashtag" :row-span="2" column-span="fullWidth">
<hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" />
</ds-grid-item>
<ds-space :margin-bottom="{ base: 'small', md: 'base', lg: 'large' }" />
<!-- donation info --> <!-- donation info -->
<ds-grid-item v-if="showDonations" class="top-info-bar" :row-span="1" column-span="fullWidth"> <ds-grid-item v-if="showDonations" class="top-info-bar" :row-span="1" column-span="fullWidth">
<donation-info :goal="goal" :progress="progress" /> <donation-info :goal="goal" :progress="progress" />
</ds-grid-item> </ds-grid-item>
<ds-space :margin-bottom="{ base: 'small', md: 'base', lg: 'large' }" />
<!-- news feed --> <!-- news feed -->
<template v-if="hasResults"> <template v-if="hasResults">
<masonry-grid-item <masonry-grid-item
@ -82,21 +107,7 @@
</ds-grid-item> </ds-grid-item>
</template> </template>
</masonry-grid> </masonry-grid>
<!-- create post -->
<client-only>
<nuxt-link :to="{ name: 'post-create' }">
<base-button
v-tooltip="{
content: $t('contribution.newPost'),
placement: 'left',
}"
class="post-add-button"
icon="plus"
filled
circle
/>
</nuxt-link>
</client-only>
<!-- infinite loading --> <!-- infinite loading -->
<client-only> <client-only>
<infinite-loading v-if="hasMore" @infinite="showMoreContributions" /> <infinite-loading v-if="hasMore" @infinite="showMoreContributions" />
@ -118,6 +129,7 @@ import { filterPosts } from '~/graphql/PostQuery.js'
import UpdateQuery from '~/components/utils/UpdateQuery' import UpdateQuery from '~/components/utils/UpdateQuery'
import FilterMenuComponent from '~/components/FilterMenu/FilterMenuComponent' import FilterMenuComponent from '~/components/FilterMenu/FilterMenuComponent'
import { SHOW_CONTENT_FILTER_MASONRY_GRID } from '~/constants/filter.js' import { SHOW_CONTENT_FILTER_MASONRY_GRID } from '~/constants/filter.js'
import { POST_ADD_BUTTON_POSITION_TOP } from '~/constants/posts.js'
export default { export default {
components: { components: {
@ -130,13 +142,10 @@ export default {
FilterMenuComponent, FilterMenuComponent,
}, },
mixins: [postListActions], mixins: [postListActions],
props: {
showMobileMenu: { type: Boolean, default: false },
},
data() { data() {
const { hashtag = null } = this.$route.query const { hashtag = null } = this.$route.query
return { return {
hideFilter: false, hideByScroll: false,
revScrollpos: 0, revScrollpos: 0,
showFilter: false, showFilter: false,
showDonations: true, showDonations: true,
@ -150,6 +159,7 @@ export default {
hashtag, hashtag,
categoriesActive: this.$env.CATEGORIES_ACTIVE, categoriesActive: this.$env.CATEGORIES_ACTIVE,
SHOW_CONTENT_FILTER_MASONRY_GRID, SHOW_CONTENT_FILTER_MASONRY_GRID,
POST_ADD_BUTTON_POSITION_TOP,
} }
}, },
computed: { computed: {
@ -196,7 +206,7 @@ export default {
toggleCategory: 'posts/TOGGLE_CATEGORY', toggleCategory: 'posts/TOGGLE_CATEGORY',
}), }),
showFilterMenu(e) { showFilterMenu(e) {
if (!e.target.closest('#my-filter') && !e.target.closest('.my-filter-button')) { if (!e || (!e.target.closest('#my-filter') && !e.target.closest('.my-filter-button'))) {
if (!this.showFilter) return if (!this.showFilter) return
this.showFilter = false this.showFilter = false
} }
@ -204,14 +214,17 @@ export default {
handleScroll() { handleScroll() {
const currentScrollPos = window.pageYOffset const currentScrollPos = window.pageYOffset
if (this.prevScrollpos > currentScrollPos) { if (this.prevScrollpos > currentScrollPos) {
this.hideFilter = false this.hideByScroll = false
} else { } else {
this.hideFilter = true if (!this.showFilter) {
this.hideByScroll = true
}
} }
this.prevScrollpos = currentScrollPos this.prevScrollpos = currentScrollPos
}, },
beforeDestroy() { beforeDestroy() {
document.removeEventListener('click', this.showFilterMenu) document.removeEventListener('click', this.showFilterMenu)
window.removeEventListener('scroll', this.handleScroll)
}, },
clearSearch() { clearSearch() {
this.$router.push({ path: '/' }) this.$router.push({ path: '/' })
@ -283,13 +296,6 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
#my-filter {
background-color: white;
box-shadow: rgb(189 189 189) 1px 9px 15px 1px;
max-height: 480px;
overflow: auto;
}
.masonry-grid { .masonry-grid {
display: grid; display: grid;
grid-gap: 10px; grid-gap: 10px;
@ -309,7 +315,11 @@ export default {
display: none; display: none;
} }
.base-button.--circle.post-add-button { .box-add-button-top {
float: right;
}
.base-button.--circle.post-add-button-bottom {
height: 54px; height: 54px;
width: 54px; width: 54px;
font-size: 26px; font-size: 26px;
@ -321,7 +331,18 @@ export default {
box-shadow: $box-shadow-x-large; box-shadow: $box-shadow-x-large;
} }
.top-info-bar { .base-button.--circle.post-add-button-top {
height: 54px;
width: 54px;
font-size: 26px;
z-index: 100;
position: fixed;
top: 80px;
box-shadow: $box-shadow-x-large;
}
.top-info-bar,
.top-filter-menu {
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -333,4 +354,62 @@ export default {
border-radius: 7px; border-radius: 7px;
background-color: #f5f4f6; background-color: #f5f4f6;
} }
#my-filter {
background-color: white;
box-shadow: rgb(189 189 189) 1px 9px 15px 1px;
max-height: 950px;
overflow: auto;
padding-bottom: 0px;
}
@media screen and (min-height: 401px) {
#my-filter {
max-height: 330px;
}
}
@media screen and (min-height: 501px) {
#my-filter {
max-height: 440px;
}
}
@media screen and (min-height: 601px) {
#my-filter {
max-height: 550px;
}
}
@media screen and (min-height: 701px) {
#my-filter {
max-height: 640px;
}
}
@media screen and (min-height: 801px) {
#my-filter {
max-height: 750px;
}
}
@media screen and (min-height: 950px) {
#my-filter {
max-height: 830px;
}
}
@media screen and (min-height: 1025px) {
#my-filter {
max-height: 870px;
}
}
@media screen and (min-width: 800px) and (min-height: 500px) {
#my-filter {
padding-bottom: 80px;
}
}
@media screen and (max-width: 1200px) {
.box-add-button-top {
padding-right: 40px;
}
.base-button.--circle.post-add-button-top {
height: 44px;
width: 44px;
font-size: 23px;
z-index: 10;
}
}
</style> </style>