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

improve header responsiveness with styleguide overrides

Browse Source
This commit is contained in:
Alina Beck 2019-12-19 11:44:55 +05:30
parent 2941b1392e
commit 03d4ce7ab4
1 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
webapp/layouts/default.vue
View File

@ -4,21 +4,21 @@
<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: '3.5%' }" /> <ds-flex-item :width="{ base: '142px' }">
<ds-flex-item :width="{ base: '80%', sm: '80%', md: '80%', lg: '15%' }">
<nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'"> <nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'">
<ds-logo /> <ds-logo />
</nuxt-link> </nuxt-link>
</ds-flex-item> </ds-flex-item>
<ds-flex-item <ds-flex-item
:width="{ base: '20%', sm: '20%', md: '20%', lg: '0%' }" :width="{ base: '40%', sm: '40%', md: '40%', lg: '0%' }"
class="mobile-hamburger-menu" class="mobile-hamburger-menu"
> >
<ds-button icon="bars" @click="toggleMobileMenuView" right /> <base-button icon="bars" @click="toggleMobileMenuView" circle />
</ds-flex-item> </ds-flex-item>
<ds-flex-item <ds-flex-item
:width="{ base: '85%', sm: '85%', md: '50%', lg: '50%' }" :width="{ base: '45%', sm: '45%', md: '45%', lg: '50%' }"
:class="{ 'hide-mobile-menu': !toggleMobileMenu }" :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
style="flex-shrink: 0; flex-grow: 1;"
> >
<div id="nav-search-box" v-if="isLoggedIn"> <div id="nav-search-box" v-if="isLoggedIn">
<search-input <search-input
@ -34,8 +34,8 @@
</ds-flex-item> </ds-flex-item>
<ds-flex-item <ds-flex-item
v-if="isLoggedIn" v-if="isLoggedIn"
:width="{ base: '15%', sm: '15%', md: '10%', lg: '10%' }"
:class="{ 'hide-mobile-menu': !toggleMobileMenu }" :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
style="flex-grow: 0; flex-basis: auto;"
> >
<client-only> <client-only>
<filter-posts <filter-posts
@ -46,10 +46,8 @@
/> />
</client-only> </client-only>
</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: '13%' }" style="background-color: white; flex-basis: auto;"
style="background-color:white"
:class="{ 'hide-mobile-menu': !toggleMobileMenu }" :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
> >
<div <div
@ -58,6 +56,7 @@
'desktop-view': !toggleMobileMenu, 'desktop-view': !toggleMobileMenu,
'hide-mobile-menu': !toggleMobileMenu, 'hide-mobile-menu': !toggleMobileMenu,
}" }"
style="flex-basis: auto;"
> >
<client-only> <client-only>
<locale-switch class="topbar-locale-switch" placement="top" offset="8" /> <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
@ -186,17 +185,21 @@ export default {
} }
.main-navigation-right { .main-navigation-right {
display: flex; display: flex;
flex: 1; justify-content: flex-end;
} }
.main-navigation-right .desktop-view { .main-navigation-right .desktop-view {
float: right; float: right;
} }
@media only screen and (min-width: 960px) { .ds-flex-item.mobile-hamburger-menu {
margin-left: auto;
text-align: right;
}
@media only screen and (min-width: 730px) {
.mobile-hamburger-menu { .mobile-hamburger-menu {
display: none; display: none;
} }
} }
@media only screen and (max-width: 960px) { @media only screen and (max-width: 730px) {
#nav-search-box, #nav-search-box,
.main-navigation-right { .main-navigation-right {
margin: 10px 0px; margin: 10px 0px;