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 #933 from Human-Connection/907-Mobile-Responsive-Menu-Navbar

Browse Source 
907 mobile responsive menu navbar
This commit is contained in:
mattwr18 2019-07-02 12:18:59 -03:00 committed by GitHub
commit 82c08b17b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 99 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
webapp/components/SearchInput.vue
View File

@ -10,9 +10,7 @@
>
<div class="field">
<div class="control">
<a v-if="isActive" class="search-clear-btn" @click="clear">
&nbsp;
</a>
<a v-if="isActive" class="search-clear-btn" @click="clear">&nbsp;</a>
<ds-select
:id="id"
ref="input"
@ -41,9 +39,7 @@
<template slot="option" slot-scope="{ option }">
<ds-flex>
<ds-flex-item class="search-option-label">
<ds-text>
{{ option.label | truncate(70) }}
</ds-text>
<ds-text>{{ option.label | truncate(70) }}</ds-text>
</ds-flex-item>
<ds-flex-item class="search-option-meta" width="280px">
<ds-flex>

192
webapp/layouts/default.vue
View File

@ -1,88 +1,98 @@
<template>
<div class="layout-default">
<div class="main-navigation">
<ds-container class="main-navigation-container">
<div class="main-navigation-left">
<a v-router-link style="display: inline-flex" href="/">
<ds-logo />
</a>
</div>
<div class="main-navigation-center hc-navbar-search">
<search-input
id="nav-search"
:delay="300"
:pending="quickSearchPending"
:results="quickSearchResults"
@clear="quickSearchClear"
@search="value => quickSearch({ value })"
@select="goToPost"
/>
</div>
<div class="main-navigation-right">
<no-ssr>
<locale-switch class="topbar-locale-switch" placement="bottom" offset="23" />
</no-ssr>
<template v-if="isLoggedIn">
<no-ssr>
<notification-menu />
</no-ssr>
<no-ssr>
<dropdown class="avatar-menu">
<template slot="default" slot-scope="{ toggleMenu }">
<a
class="avatar-menu-trigger"
:href="
$router.resolve({
name: 'profile-id-slug',
params: { id: user.id, slug: user.slug },
}).href
"
@click.prevent="toggleMenu"
>
<hc-avatar :user="user" />
<ds-icon size="xx-small" name="angle-down" />
</a>
<ds-container class="main-navigation-container" style="padding: 10px 10px;">
<div>
<ds-flex>
<ds-flex-item :width="{ base: '49px', md: '150px' }">
<a v-router-link style="display: inline-flex" href="/">
<ds-logo />
</a>
</ds-flex-item>
<ds-flex-item>
<div id="nav-search-box" v-on:click="unfolded" @blur.capture="foldedup">
<search-input
id="nav-search"
:delay="300"
:pending="quickSearchPending"
:results="quickSearchResults"
@clear="quickSearchClear"
@search="value => quickSearch({ value })"
@select="goToPost"
/>
</div>
</ds-flex-item>
<ds-flex-item width="200px" style="background-color:white">
<div class="main-navigation-right" style="float:right">
<no-ssr>
<locale-switch class="topbar-locale-switch" placement="bottom" offset="23" />
</no-ssr>
<template v-if="isLoggedIn">
<no-ssr>
<notification-menu />
</no-ssr>
<no-ssr>
<dropdown class="avatar-menu">
<template slot="default" slot-scope="{ toggleMenu }">
<a
class="avatar-menu-trigger"
:href="
$router.resolve({
name: 'profile-id-slug',
params: { id: user.id, slug: user.slug },
}).href
"
@click.prevent="toggleMenu"
>
<hc-avatar :user="user" />
<ds-icon size="xx-small" name="angle-down" />
</a>
</template>
<template slot="popover" slot-scope="{ closeMenu }">
<div class="avatar-menu-popover">
{{ $t('login.hello') }}
<b>{{ userName }}</b>
<template v-if="user.role !== 'user'">
<ds-text color="softer" size="small" style="margin-bottom: 0">
{{ user.role | camelCase }}
</ds-text>
</template>
<hr />
<ds-menu :routes="routes" :matcher="matcher">
<ds-menu-item
slot="menuitem"
slot-scope="item"
:route="item.route"
:parents="item.parents"
@click.native="closeMenu(false)"
>
<ds-icon :name="item.route.icon" />
{{ item.route.name }}
</ds-menu-item>
</ds-menu>
<hr />
<nuxt-link class="logout-link" :to="{ name: 'logout' }">
<ds-icon name="sign-out" />
{{ $t('login.logout') }}
</nuxt-link>
</div>
</template>
</dropdown>
</no-ssr>
</template>
<template slot="popover" slot-scope="{ closeMenu }">
<div class="avatar-menu-popover">
{{ $t('login.hello') }}
<b>{{ userName }}</b>
<template v-if="user.role !== 'user'">
<ds-text color="softer" size="small" style="margin-bottom: 0">
{{ user.role | camelCase }}
</ds-text>
</template>
<hr />
<ds-menu :routes="routes" :matcher="matcher">
<ds-menu-item
slot="menuitem"
slot-scope="item"
:route="item.route"
:parents="item.parents"
@click.native="closeMenu(false)"
>
<ds-icon :name="item.route.icon" />
{{ item.route.name }}
</ds-menu-item>
</ds-menu>
<hr />
<nuxt-link class="logout-link" :to="{ name: 'logout' }">
<ds-icon name="sign-out" />
{{ $t('login.logout') }}
</nuxt-link>
</div>
</template>
</dropdown>
</no-ssr>
</template>
</div>
</ds-flex-item>
</ds-flex>
</div>
</ds-container>
</div>
<ds-container>
<div style="padding: 6rem 2rem 5rem;">
<nuxt />
</div>
</ds-container>
<div id="overlay" />
<no-ssr>
<modal />
@ -181,9 +191,23 @@ export default {
}
return this.$route.path.indexOf(url) === 0
},
unfolded: function() {
document.getElementById('nav-search-box').classList.add('unfolded')
},
foldedup: function() {
document.getElementById('nav-search-box').classList.remove('unfolded')
},
},
}
</script>
<style>
.unfolded {
position: absolute;
right: 0px;
left: 0px;
z-index: 1;
}
</style>
<style lang="scss">
.topbar-locale-switch {
@ -199,28 +223,6 @@ export default {
}
}
.main-navigation-container {
padding: $space-x-small $space-large !important;
width: 100%;
align-items: center;
display: flex;
}
.main-navigation-left {
display: flex;
flex: 1;
width: 100%;
align-items: center;
}
.main-navigation-center {
display: flex;
flex: auto;
width: 100%;
padding-right: $space-large;
padding-left: $space-large;
}
.main-navigation-right {
display: flex;
flex: 1;