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 lint

Browse Source
This commit is contained in:
ogerly 2022-10-22 09:36:18 +02:00
parent 401f59ae8d
commit 15561cb94f
2 changed files with 177 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

363
webapp/components/HeaderMenu/HeaderMenu.vue
View File

@ -1,202 +1,188 @@
<template> <template>
<ds-container class="main-navigation-container" style="padding: 10px 10px"> <ds-container class="main-navigation-container" style="padding: 10px 10px">
<div> <div>
<!-- header menu --> <!-- header menu -->
<ds-flex v-if="!showMobileMenu" class="main-navigation-flex"> <ds-flex v-if="!showMobileMenu" class="main-navigation-flex">
<!-- logo --> <!-- logo -->
<ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px"> <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
<a <a
v-if="LOGOS.LOGO_HEADER_CLICK.externalLink" v-if="LOGOS.LOGO_HEADER_CLICK.externalLink"
:href="LOGOS.LOGO_HEADER_CLICK.externalLink" :href="LOGOS.LOGO_HEADER_CLICK.externalLink"
> >
<logo logoType="header" /> <logo logoType="header" />
</a> </a>
<nuxt-link <nuxt-link
v-else v-else
:to="LOGOS.LOGO_HEADER_CLICK.internalPath.to" :to="LOGOS.LOGO_HEADER_CLICK.internalPath.to"
v-scroll-to="LOGOS.LOGO_HEADER_CLICK.internalPath.scrollTo" v-scroll-to="LOGOS.LOGO_HEADER_CLICK.internalPath.scrollTo"
> >
<logo logoType="header" /> <logo logoType="header" />
</nuxt-link> </nuxt-link>
</ds-flex-item> </ds-flex-item>
<!-- dynamic-brand-menu --> <!-- dynamic-brand-menu -->
<ds-flex-item <ds-flex-item
v-for="item in menu" v-for="item in menu"
:key="item.name" :key="item.name"
class="branding-menu" class="branding-menu"
:width="{ base: 'auto' }" :width="{ base: 'auto' }"
style="margin-right: 20px" style="margin-right: 20px"
> >
<a v-if="item.url" :href="item.url" target="_blank"> <a v-if="item.url" :href="item.url" target="_blank">
<ds-text size="large" bold> <ds-text size="large" bold>
{{ $t(item.nameIdent) }} {{ $t(item.nameIdent) }}
</ds-text> </ds-text>
</a> </a>
<nuxt-link v-else :to="item.path"> <nuxt-link v-else :to="item.path">
<ds-text size="large" bold> <ds-text size="large" bold>
{{ $t(item.nameIdent) }} {{ $t(item.nameIdent) }}
</ds-text> </ds-text>
</nuxt-link> </nuxt-link>
</ds-flex-item> </ds-flex-item>
<!-- search-field --> <!-- search-field -->
<ds-flex-item <ds-flex-item
v-if="isLoggedIn" v-if="isLoggedIn"
id="nav-search-box" id="nav-search-box"
class="header-search" class="header-search"
:width="{ :width="{
base: '45%', base: '45%',
sm: '40%', sm: '40%',
md: isHeaderMenu ? 'auto' : '40%', md: isHeaderMenu ? 'auto' : '40%',
lg: isHeaderMenu ? 'auto' : '50%', lg: isHeaderMenu ? 'auto' : '50%',
}" }"
style="flex-shrink: 0; flex-grow: 1" style="flex-shrink: 0; flex-grow: 1"
> >
<search-field /> <search-field />
</ds-flex-item> </ds-flex-item>
<!-- filter-menu <!-- filter-menu
TODO: Filter is only visible on index TODO: Filter is only visible on index
--> -->
<ds-flex-item <ds-flex-item v-if="isLoggedIn" style="flex-grow: 0; flex-basis: auto">
v-if="isLoggedIn" <client-only>
style="flex-grow: 0; flex-basis: auto" <filter-menu v-show="showFilterMenuDropdown" />
> </client-only>
</ds-flex-item>
<!-- locale-switch -->
<ds-flex-item style="flex-basis: auto">
<div class="main-navigation-right" style="flex-basis: auto">
<locale-switch class="topbar-locale-switch" placement="top" offset="8" />
<template v-if="isLoggedIn">
<client-only>
<!-- notification-menu -->
<notification-menu placement="top" />
</client-only>
<div v-if="inviteRegistration">
<client-only> <client-only>
<filter-menu v-show="showFilterMenuDropdown" /> <!-- invite-button -->
<invite-button placement="top" />
</client-only> </client-only>
</ds-flex-item> </div>
<!-- locale-switch --> <client-only>
<ds-flex-item <!-- avatar-menu -->
style="flex-basis: auto" <avatar-menu placement="top" />
> </client-only>
<div </template>
class="main-navigation-right" </div>
style="flex-basis: auto" </ds-flex-item>
> </ds-flex>
<locale-switch class="topbar-locale-switch" placement="top" offset="8" />
<template v-if="isLoggedIn">
<client-only>
<!-- notification-menu -->
<notification-menu placement="top" />
</client-only>
<div v-if="inviteRegistration">
<client-only>
<!-- invite-button -->
<invite-button placement="top" />
</client-only>
</div>
<client-only>
<!-- avatar-menu -->
<avatar-menu placement="top" />
</client-only>
</template>
</div>
</ds-flex-item>
</ds-flex>
<!-- mobile header menu --> <!-- mobile header menu -->
<div v-else> <div v-else>
<!-- logo, hamburger--> <!-- logo, hamburger-->
<ds-flex> <ds-flex>
<ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px"> <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
<nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'"> <nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'">
<logo logoType="header" /> <logo logoType="header" />
</nuxt-link> </nuxt-link>
</ds-flex-item> </ds-flex-item>
<!-- hamburger button --> <!-- hamburger button -->
<ds-flex-item class="mobile-hamburger-menu"> <ds-flex-item class="mobile-hamburger-menu">
<client-only> <client-only>
<div style="display: inline-flex; padding-right: 20px"> <div style="display: inline-flex; padding-right: 20px">
<notification-menu /> <notification-menu />
</div> </div>
</client-only> </client-only>
<base-button icon="bars" @click="toggleMobileMenuView" circle /> <base-button icon="bars" @click="toggleMobileMenuView" circle />
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
<!-- search, filter--> <!-- search, filter-->
<ds-flex class="mobile-menu"> <ds-flex class="mobile-menu">
<!-- search-field mobile--> <!-- search-field mobile-->
<ds-flex-item <ds-flex-item
v-if="isLoggedIn" v-if="isLoggedIn"
:class="{ 'hide-mobile-menu': !toggleMobileMenu }" :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
style="padding: 20px" style="padding: 20px"
> >
<search-field /> <search-field />
</ds-flex-item> </ds-flex-item>
<!-- filter menu mobile--> <!-- filter menu mobile-->
<ds-flex-item <ds-flex-item
v-if="isLoggedIn" v-if="isLoggedIn"
:class="{ 'hide-mobile-menu': !toggleMobileMenu }" :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
style="flex-grow: 0; flex-basis: auto; padding: 20px 0" style="flex-grow: 0; flex-basis: auto; padding: 20px 0"
> >
<client-only> <client-only>
<filter-menu v-show="showFilterMenuDropdown" /> <filter-menu v-show="showFilterMenuDropdown" />
</client-only> </client-only>
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
<!-- switch language, notification, invite, profil --> <!-- switch language, notification, invite, profil -->
<ds-flex style="margin: 0 20px"> <ds-flex style="margin: 0 20px">
<!-- locale-switch mobile--> <!-- locale-switch mobile-->
<ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }"> <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }">
<locale-switch class="topbar-locale-switch" placement="top" offset="8" /> <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
</ds-flex-item> </ds-flex-item>
<!-- invite-button mobile--> <!-- invite-button mobile-->
<ds-flex-item <ds-flex-item
:class="{ 'hide-mobile-menu': !toggleMobileMenu }" :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
style="text-align: center" style="text-align: center"
> >
<client-only> <client-only>
<invite-button placement="top" /> <invite-button placement="top" />
</client-only> </client-only>
</ds-flex-item> </ds-flex-item>
<ds-flex-item <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }" style="text-align: end">
:class="{ 'hide-mobile-menu': !toggleMobileMenu }" <client-only>
style="text-align: end" <!-- avatar-menu mobile-->
> <avatar-menu placement="top" />
<client-only> </client-only>
<!-- avatar-menu mobile--> </ds-flex-item>
<avatar-menu placement="top" /> </ds-flex>
</client-only> <div :class="{ 'hide-mobile-menu': !toggleMobileMenu }" class="mobile-menu footer-mobile">
</ds-flex-item> <!-- dynamic branding menu -->
</ds-flex> <ul v-if="isHeaderMenu" class="dynamic-branding-mobil">
<div <li v-for="item in menu" :key="item.name">
:class="{ 'hide-mobile-menu': !toggleMobileMenu }" <a v-if="item.url" :href="item.url" target="_blank">
class="mobile-menu footer-mobile" <ds-text size="large" bold>
> {{ $t(item.nameIdent) }}
<!-- dynamic branding menu --> </ds-text>
<ul v-if="isHeaderMenu" class="dynamic-branding-mobil"> </a>
<li v-for="item in menu" :key="item.name"> <nuxt-link v-else :to="item.path">
<a v-if="item.url" :href="item.url" target="_blank"> <ds-text size="large" bold>
<ds-text size="large" bold> {{ $t(item.nameIdent) }}
{{ $t(item.nameIdent) }} </ds-text>
</ds-text> </nuxt-link>
</a> </li>
<nuxt-link v-else :to="item.path"> </ul>
<ds-text size="large" bold> <hr />
{{ $t(item.nameIdent) }} <!-- dynamic footer menu in header -->
</ds-text> <ul class="dynamic-footer-mobil">
</nuxt-link> <li v-for="pageParams in links.FOOTER_LINK_LIST" :key="pageParams.name">
</li> <page-params-link :pageParams="pageParams">
</ul> {{ $t(pageParams.internalPage.footerIdent) }}
<hr /> </page-params-link>
<!-- dynamic footer menu in header --> </li>
<ul class="dynamic-footer-mobil"> </ul>
<li v-for="pageParams in links.FOOTER_LINK_LIST" :key="pageParams.name">
<page-params-link :pageParams="pageParams">
{{ $t(pageParams.internalPage.footerIdent) }}
</page-params-link>
</li>
</ul>
</div>
</div>
</div> </div>
</ds-container> </div>
</div>
</ds-container>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import LOGOS from '~/constants/logos.js' import LOGOS from '~/constants/logos.js'
import headerMenu from '~/constants/headerMenu.js' import headerMenu from '~/constants/headerMenu.js'
import AvatarMenu from '~/components/AvatarMenu/AvatarMenu' import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
import FilterMenu from '~/components/FilterMenu/FilterMenu.vue' import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
import InviteButton from '~/components/InviteButton/InviteButton' import InviteButton from '~/components/InviteButton/InviteButton'
@ -251,7 +237,6 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.margin-right-20 { .margin-right-20 {
margin-right: 20px; margin-right: 20px;
} }
@ -295,6 +280,6 @@ export default {
margin: 17px 0; margin: 17px 0;
} }
.hide-mobile-menu { .hide-mobile-menu {
display: none; display: none;
} }
</style> </style>

7
webapp/layouts/default.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<div class="layout-default"> <div class="layout-default">
<div class="main-navigation"> <div class="main-navigation">
<HeaderMenu :showMobileMenu="showMobileMenu" /> <header-menu :showMobileMenu="showMobileMenu" />
</div> </div>
<ds-container> <ds-container>
<div class="main-container"> <div class="main-container">
<nuxt /> <nuxt />
</div> </div>
</ds-container> </ds-container>
<page-footer v-if="!showMobileMenu"/> <page-footer v-if="!showMobileMenu" />
<div id="overlay" /> <div id="overlay" />
<client-only> <client-only>
<modal /> <modal />
@ -32,7 +32,7 @@ export default {
data() { data() {
return { return {
windowWidth: null, windowWidth: null,
maxMobileWidth: 811 maxMobileWidth: 811,
} }
}, },
computed: { computed: {
@ -57,5 +57,4 @@ export default {
padding-top: 6rem; padding-top: 6rem;
padding-bottom: 5rem; padding-bottom: 5rem;
} }
</style> </style>