mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
merged master in
This commit is contained in:
Grzegorz Leoniec
commit
d93c360cb7
@ -78,6 +78,10 @@ blockquote {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
|
||||
a {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hc-editor-content {
|
||||
@ -156,3 +160,19 @@ hr {
|
||||
padding: $space-base;
|
||||
}
|
||||
}
|
||||
|
||||
[class$="menu-popover"] {
|
||||
a, button {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
|
||||
.ds-icon {
|
||||
padding-right: $space-xx-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-popover.open .trigger a {
|
||||
color: $text-color-link-active;
|
||||
}
|
||||
|
||||
@ -4,54 +4,48 @@
|
||||
:placement="placement"
|
||||
:offset="offset"
|
||||
>
|
||||
<template
|
||||
<a
|
||||
slot="default"
|
||||
slot-scope="{toggleMenu}"
|
||||
>
|
||||
<a
|
||||
class="locale-menu"
|
||||
href="#"
|
||||
@click.prevent="toggleMenu()"
|
||||
>
|
||||
<img
|
||||
:alt="current.name"
|
||||
:title="current.name"
|
||||
:src="`/img/locale-flags/${current.code}.svg`"
|
||||
height="26"
|
||||
>
|
||||
<ds-icon
|
||||
style="margin-top: -2px; margin-right: 2px;"
|
||||
name="globe"
|
||||
/> {{ current.code.toUpperCase() }}
|
||||
<ds-icon
|
||||
style="margin-top: -2px; margin-left: 2px"
|
||||
size="xx-small"
|
||||
name="angle-down"
|
||||
/>
|
||||
</a>
|
||||
</template>
|
||||
<template slot="popover">
|
||||
<ul class="locale-menu-popover">
|
||||
<li
|
||||
v-for="locale in locales"
|
||||
:key="locale.code"
|
||||
<ds-menu
|
||||
slot="popover"
|
||||
slot-scope="{toggleMenu}"
|
||||
class="locale-menu-popover"
|
||||
:is-exact="isExact"
|
||||
:routes="routes"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
style="display: flex; align-items: center;"
|
||||
:class="[
|
||||
locale.code,
|
||||
current.code === locale.code && 'active'
|
||||
]"
|
||||
@click.prevent="changeLanguage(locale.code)"
|
||||
<ds-menu-item
|
||||
slot="Navigation"
|
||||
slot-scope="item"
|
||||
class="locale-menu-item"
|
||||
:route="item.route"
|
||||
:parents="item.parents"
|
||||
@click.stop.prevent="changeLanguage(item.route.path, toggleMenu)"
|
||||
>
|
||||
<img
|
||||
:alt="locale.name"
|
||||
:title="locale.name"
|
||||
:src="`/img/locale-flags/${locale.code}.svg`"
|
||||
width="20"
|
||||
> {{ locale.name }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
{{ item.route.name }}
|
||||
</ds-menu-item>
|
||||
</ds-menu>
|
||||
</dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Dropdown from '~/components/Dropdown'
|
||||
import find from 'lodash/find'
|
||||
import orderBy from 'lodash/orderBy'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -63,18 +57,30 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
locales: process.env.locales
|
||||
locales: orderBy(process.env.locales, 'name')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
current() {
|
||||
return find(this.locales, { code: this.$i18n.locale() })
|
||||
},
|
||||
routes() {
|
||||
let routes = this.locales.map(locale => {
|
||||
return {
|
||||
name: locale.name,
|
||||
path: locale.code
|
||||
}
|
||||
})
|
||||
return routes
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeLanguage(locale) {
|
||||
changeLanguage(locale, toggleMenu) {
|
||||
this.$i18n.set(locale)
|
||||
this.$refs.menu.toggleMenu()
|
||||
toggleMenu()
|
||||
},
|
||||
isExact(locale) {
|
||||
return locale === this.$i18n.locale()
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -83,32 +89,20 @@ export default {
|
||||
<style lang="scss">
|
||||
.locale-menu {
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: $space-xx-small;
|
||||
color: $text-color-soft;
|
||||
}
|
||||
|
||||
ul.locale-menu-popover {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
nav.locale-menu-popover {
|
||||
margin-left: -$space-small !important;
|
||||
margin-right: -$space-small !important;
|
||||
|
||||
li {
|
||||
a {
|
||||
opacity: 0.8;
|
||||
|
||||
display: block;
|
||||
padding: 0.3rem 0;
|
||||
|
||||
img {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
&.active {
|
||||
opacity: 1;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
padding: $space-x-small $space-small;
|
||||
padding-right: $space-base;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,19 +1,21 @@
|
||||
<template>
|
||||
<div class="layout-default">
|
||||
<div class="main-navigation">
|
||||
<ds-container style="padding: .5rem 3rem .2rem;">
|
||||
<ds-container style="padding: .5rem 2rem .2rem; display: flex;">
|
||||
<div class="main-navigation-left">
|
||||
<a
|
||||
v-router-link
|
||||
href="/"
|
||||
>
|
||||
<ds-logo />
|
||||
</a>
|
||||
<div style="float: right">
|
||||
</div>
|
||||
<div class="main-navigation-right">
|
||||
<no-ssr>
|
||||
<locale-switch
|
||||
class="topbar-locale-switch"
|
||||
placement="bottom"
|
||||
offset="24"
|
||||
offset="12"
|
||||
/>
|
||||
</no-ssr>
|
||||
<template v-if="isLoggedIn">
|
||||
@ -33,6 +35,10 @@
|
||||
:name="user.name"
|
||||
size="42"
|
||||
/>
|
||||
<ds-icon
|
||||
size="xx-small"
|
||||
name="angle-down"
|
||||
/>
|
||||
</a>
|
||||
</template>
|
||||
<template
|
||||
@ -41,6 +47,7 @@
|
||||
>
|
||||
<div class="avatar-menu-popover">
|
||||
{{ $t('login.hello') }} <b>{{ user.name }}</b>
|
||||
<hr>
|
||||
<ds-menu
|
||||
:routes="routes"
|
||||
:matcher="matcher"
|
||||
@ -55,10 +62,10 @@
|
||||
<ds-icon :name="item.route.icon" /> {{ item.route.name }}
|
||||
</ds-menu-item>
|
||||
</ds-menu>
|
||||
<ds-space margin="xx-small" />
|
||||
<hr>
|
||||
<nuxt-link
|
||||
class="logout-link"
|
||||
:to="{ name: 'logout'}"
|
||||
style="margin-left: 0"
|
||||
>
|
||||
<ds-icon name="sign-out" /> {{ $t('login.logout') }}
|
||||
</nuxt-link>
|
||||
@ -137,28 +144,55 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
.topbar-locale-switch {
|
||||
display: inline-block;
|
||||
top: 8px;
|
||||
right: 10px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-right: $space-xx-small;
|
||||
}
|
||||
.avatar-menu {
|
||||
float: right;
|
||||
|
||||
.main-navigation {
|
||||
a {
|
||||
color: $text-color-soft;
|
||||
}
|
||||
}
|
||||
|
||||
.main-navigation-left {
|
||||
display: flex;
|
||||
margin-right: auto;
|
||||
}
|
||||
.main-navigation-right {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.avatar-menu-trigger {
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: $space-xx-small;
|
||||
}
|
||||
.avatar-menu-popover {
|
||||
display: inline-block;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
|
||||
hr {
|
||||
color: $color-neutral-90;
|
||||
background-color: $color-neutral-90;
|
||||
}
|
||||
|
||||
.logout-link {
|
||||
margin-left: -$space-small;
|
||||
margin-right: -$space-small;
|
||||
margin-bottom: -$space-xx-small;
|
||||
padding: $space-xx-small $space-small;
|
||||
}
|
||||
|
||||
nav {
|
||||
margin-left: -16px;
|
||||
margin-right: -10px;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
margin-left: -$space-small;
|
||||
margin-right: -$space-small;
|
||||
margin-top: -$space-xx-small;
|
||||
margin-bottom: -$space-xx-small;
|
||||
// padding-top: $space-xx-small;
|
||||
// padding-bottom: $space-xx-small;
|
||||
|
||||
a {
|
||||
padding-left: 12px;
|
||||
|
||||
@ -36,7 +36,7 @@ module.exports = [
|
||||
enabled: true
|
||||
},
|
||||
{
|
||||
name: 'Portuguese',
|
||||
name: 'Português',
|
||||
code: 'pt',
|
||||
iso: 'pt-PT',
|
||||
enabled: true
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user