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