ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix styling of navbar

Browse Source 
- Follow @Tirokk suggestions

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
This commit is contained in:
Matt Rider 2019-07-15 11:06:56 -03:00
parent d42083a32e
commit b0f999ac05
3 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/components/FilterPosts/FilterPosts.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<dropdown ref="menu" :placement="placement" :offset="offset"> <dropdown ref="menu" :placement="placement" :offset="offset">
<a slot="default" slot-scope="{ toggleMenu }" href="#" @click.prevent="toggleMenu()"> <a slot="default" slot-scope="{ toggleMenu }" href="#" @click.prevent="toggleMenu()">
<ds-icon style="margin: 5px 0px 0px 10px;" name="filter" size="large" /> <ds-icon style="margin: 12px 0px 0px 10px;" name="filter" size="large" />
<ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" /> <ds-icon style="margin: 7px 0px 0px 2px" size="xx-small" name="angle-down" />
</a> </a>
<template slot="popover"> <template slot="popover">
<filter-posts-menu-items :chunk="chunk" @filterPosts="filterPosts" /> <filter-posts-menu-items :chunk="chunk" @filterPosts="filterPosts" />

6
webapp/components/FilterPosts/FilterPostsMenuItems.vue
View File

@ -117,4 +117,10 @@ export default {
margin: 9px 0px 40px 0px; margin: 9px 0px 40px 0px;
} }
} }
@media only screen and (max-width: 960px) {
#filter-posts-header {
text-align: center;
}
}
</style> </style>

17
webapp/layouts/default.vue
View File

@ -4,7 +4,7 @@
<ds-container class="main-navigation-container" style="padding: 10px 10px;"> <ds-container class="main-navigation-container" style="padding: 10px 10px;">
<div> <div>
<ds-flex class="main-navigation-flex"> <ds-flex class="main-navigation-flex">
<ds-flex-item :width="{ lg: '5%' }" /> <ds-flex-item :width="{ lg: '3.5%' }" />
<ds-flex-item :width="{ base: '80%', sm: '80%', md: '80%', lg: '15%' }"> <ds-flex-item :width="{ base: '80%', sm: '80%', md: '80%', lg: '15%' }">
<a @click="redirectToRoot"> <a @click="redirectToRoot">
<ds-logo /> <ds-logo />
@ -17,7 +17,7 @@
<ds-button icon="bars" @click="toggleMobileMenuView" right /> <ds-button icon="bars" @click="toggleMobileMenuView" right />
</ds-flex-item> </ds-flex-item>
<ds-flex-item <ds-flex-item
:width="{ base: '100%', sm: '100%', md: '50%', lg: '45%' }" :width="{ base: '100%', sm: '100%', md: '50%', lg: '50%' }"
:class="{ 'hide-mobile-menu': !toggleMobileMenu }" :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
> >
<div id="nav-search-box" v-on:click="unfolded" @blur.capture="foldedup"> <div id="nav-search-box" v-on:click="unfolded" @blur.capture="foldedup">
@ -37,11 +37,12 @@
:class="{ 'hide-mobile-menu': !toggleMobileMenu }" :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
> >
<no-ssr> <no-ssr>
<filter-posts placement="bottom-end" offset="23" :categories="categories" /> <filter-posts placement="top-start" offset="8" :categories="categories" />
</no-ssr> </no-ssr>
</ds-flex-item> </ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: '100%', md: '10%', lg: '2%' }" />
<ds-flex-item <ds-flex-item
:width="{ base: '100%', sm: '100%', md: '100%', lg: '20%' }" :width="{ base: '100%', sm: '100%', md: '100%', lg: '13%' }"
style="background-color:white" style="background-color:white"
:class="{ 'hide-mobile-menu': !toggleMobileMenu }" :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
> >
@ -53,14 +54,14 @@
}" }"
> >
<no-ssr> <no-ssr>
<locale-switch class="topbar-locale-switch" placement="bottom" offset="23" /> <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
</no-ssr> </no-ssr>
<template v-if="isLoggedIn"> <template v-if="isLoggedIn">
<no-ssr> <no-ssr>
<notification-menu /> <notification-menu />
</no-ssr> </no-ssr>
<no-ssr> <no-ssr>
<dropdown class="avatar-menu"> <dropdown class="avatar-menu" offset="8">
<template slot="default" slot-scope="{ toggleMenu }"> <template slot="default" slot-scope="{ toggleMenu }">
<a <a
class="avatar-menu-trigger" class="avatar-menu-trigger"
@ -300,6 +301,10 @@ export default {
float: right; float: right;
} }
.avatar-menu {
margin: 2px 0px 0px 5px;
}
.avatar-menu-trigger { .avatar-menu-trigger {
user-select: none; user-select: none;
display: flex; display: flex;