mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-12 23:35:58 +00:00
change color and scss in branding
This commit is contained in:
ogerly
parent
bfcfb8462e
commit
52070b8c57
@ -4,11 +4,17 @@
|
||||
.main-navigation .ds-menu-item-link {
|
||||
color: #a6ff00;
|
||||
}
|
||||
|
||||
.main-navigation .ds-menu-item-link:hover {
|
||||
color: #f2f2f1;
|
||||
}
|
||||
|
||||
.main-navigation a {
|
||||
color: #a6ff00;
|
||||
}
|
||||
.main-navigation a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.main-navigation .locale-menu {
|
||||
color: #a6ff00;
|
||||
}
|
||||
@ -17,14 +23,11 @@
|
||||
color: #a6ff00;
|
||||
}
|
||||
|
||||
.header-menu {
|
||||
// background-color: #748885;
|
||||
}
|
||||
.ds-menu-item-link {
|
||||
color: antiquewhite;
|
||||
}
|
||||
.ds-menu-item-link.router-link-exact-active {
|
||||
color: #a6ff00;
|
||||
color: #6a8ee1;
|
||||
background-color: #faf9fa;
|
||||
border-left: 2px solid #a6ff00;
|
||||
}
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
<template>
|
||||
<dropdown ref="category-menu" placement="top-start" :offset="8" class="category-menu">
|
||||
<base-button
|
||||
<a
|
||||
href="#"
|
||||
slot="default"
|
||||
:filled="filterActive"
|
||||
:ghost="!filterActive"
|
||||
slot-scope="{ toggleMenu }"
|
||||
@click.prevent="toggleMenu()"
|
||||
>
|
||||
<ds-text uppercase>{{ $t('admin.categories.name') }}</ds-text>
|
||||
</base-button>
|
||||
<ds-text bold size="large">{{ $t('admin.categories.name') }}</ds-text>
|
||||
</a>
|
||||
<template slot="popover">
|
||||
<div class="category-menu-options">
|
||||
<h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
|
||||
|
||||
@ -1,6 +1,21 @@
|
||||
<template>
|
||||
<div class="header-menu">
|
||||
<ds-menu v-if="show" :routes="menu" navbar style="margin-right: 20px"></ds-menu>
|
||||
<div class="display-flex">
|
||||
<!-- <ds-flex v-if="show"> -->
|
||||
|
||||
<ds-flex-item v-for="item in menu" :key="item.name">
|
||||
<a v-if="item.url" :href="item.url" target="_blank" class="margin-x">
|
||||
<ds-text size="large" bold>
|
||||
{{ item.name }}
|
||||
</ds-text>
|
||||
</a>
|
||||
<nuxt-link v-else :to="item.path" class="margin-x">
|
||||
<ds-text size="large" bold>
|
||||
{{ item.name }}
|
||||
</ds-text>
|
||||
</nuxt-link>
|
||||
</ds-flex-item>
|
||||
|
||||
<!-- </ds-flex> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -16,3 +31,13 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.display-flex {
|
||||
display: flex;
|
||||
}
|
||||
.margin-x {
|
||||
margin-left: $space-small;
|
||||
margin-right: $space-small;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -79,6 +79,7 @@ export default {
|
||||
<style lang="scss">
|
||||
@import '~/assets/_new/styles/mixins/buttonStates.scss';
|
||||
|
||||
|
||||
.base-button {
|
||||
@include buttonStates;
|
||||
display: inline-flex;
|
||||
@ -141,4 +142,5 @@ export default {
|
||||
color: $color-neutral-100;
|
||||
}
|
||||
}
|
||||
@import '~/assets/styles/imports/_branding.scss';
|
||||
</style>
|
||||
|
||||
@ -5,27 +5,32 @@ export default {
|
||||
name: 'Beiträge',
|
||||
path: '/#',
|
||||
},
|
||||
{
|
||||
name: 'Themen',
|
||||
path: '/#',
|
||||
},
|
||||
{
|
||||
name: 'Gruppen',
|
||||
path: '/#',
|
||||
},
|
||||
// {
|
||||
// name: 'Themen',
|
||||
// path: '/#',
|
||||
// },
|
||||
// {
|
||||
// name: 'Gruppen',
|
||||
// path: '/#',
|
||||
// },
|
||||
{
|
||||
name: 'Über Yunite',
|
||||
path: '/#',
|
||||
children: [
|
||||
{
|
||||
name: 'Impressum',
|
||||
path: '/#',
|
||||
},
|
||||
{
|
||||
name: 'Yunite Team',
|
||||
path: '/#',
|
||||
},
|
||||
],
|
||||
url: 'https://yunite.org',
|
||||
// children: [
|
||||
// {
|
||||
// name: 'Impressum',
|
||||
// path: '/#',
|
||||
// },
|
||||
// {
|
||||
// name: 'Yunite Team',
|
||||
// path: '/#',
|
||||
// },
|
||||
// ],
|
||||
},
|
||||
// {
|
||||
// name: 'Topic',
|
||||
// path: '/#',
|
||||
// },
|
||||
],
|
||||
}
|
||||
|
||||
@ -4,12 +4,33 @@
|
||||
<ds-container class="main-navigation-container" style="padding: 10px 10px">
|
||||
<div>
|
||||
<ds-flex class="main-navigation-flex">
|
||||
<ds-flex-item :width="{ base: '47px' }">
|
||||
<nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'">
|
||||
<logo logoType="header" />
|
||||
<ds-flex-item :width="{ base: '47px' }" style="margin-right:20px">
|
||||
<nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'" >
|
||||
<logo logoType="header"/>
|
||||
</nuxt-link>
|
||||
</ds-flex-item>
|
||||
<header-menu />
|
||||
|
||||
<ds-flex-item v-for="item in menu" :key="item.name" :class="{ 'hide-mobile-menu': !toggleMobileMenu }" :width="{ base: 'auto' }" style="margin-right:20px">
|
||||
<a v-if="item.url" :href="item.url" target="_blank" >
|
||||
<ds-text size="large" bold>
|
||||
{{ item.name }}
|
||||
</ds-text>
|
||||
</a>
|
||||
<nuxt-link v-else :to="item.path" >
|
||||
<ds-text size="large" bold>
|
||||
{{ item.name }}
|
||||
</ds-text>
|
||||
</nuxt-link>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item
|
||||
v-if="categoriesActive && isLoggedIn"
|
||||
:class="{ 'hide-mobile-menu': !toggleMobileMenu }"
|
||||
style="flex-grow: 0; flex-basis: auto; margin-right: 20px;"
|
||||
>
|
||||
<client-only>
|
||||
<categories-menu></categories-menu>
|
||||
</client-only>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item
|
||||
:width="{ base: '40%', sm: '40%', md: '40%', lg: '0%' }"
|
||||
class="mobile-hamburger-menu"
|
||||
@ -17,16 +38,7 @@
|
||||
<base-button icon="bars" @click="toggleMobileMenuView" circle />
|
||||
</ds-flex-item>
|
||||
<ds-flex-item
|
||||
v-if="categoriesActive && isLoggedIn"
|
||||
:class="{ 'hide-mobile-menu': !toggleMobileMenu }"
|
||||
style="flex-grow: 0; flex-basis: auto"
|
||||
>
|
||||
<client-only>
|
||||
<categories-menu></categories-menu>
|
||||
</client-only>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item
|
||||
:width="{
|
||||
:width="{
|
||||
base: '45%',
|
||||
sm: '45%',
|
||||
md: show ? 'auto' : '45%',
|
||||
@ -95,7 +107,6 @@
|
||||
|
||||
<script>
|
||||
import Logo from '~/components/Logo/Logo'
|
||||
import HeaderMenu from '~/components/HeaderMenu/HeaderMenu.vue'
|
||||
import headerMenu from '../constants/headerMenu.js'
|
||||
import { mapGetters } from 'vuex'
|
||||
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
|
||||
@ -112,7 +123,6 @@ import CategoriesMenu from '~/components/FilterMenu/CategoriesMenu.vue'
|
||||
export default {
|
||||
components: {
|
||||
Logo,
|
||||
HeaderMenu,
|
||||
LocaleSwitch,
|
||||
SearchField,
|
||||
Modal,
|
||||
@ -127,6 +137,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
show: headerMenu.SHOW_HEADER_MENU,
|
||||
menu: headerMenu.MENU,
|
||||
mobileSearchVisible: false,
|
||||
toggleMobileMenu: false,
|
||||
inviteRegistration: this.$env.INVITE_REGISTRATION === true, // for 'false' in .env INVITE_REGISTRATION is of type undefined and not(!) boolean false, because of internal handling,
|
||||
@ -151,6 +162,14 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.margin-right-20 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.margin-x {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.topbar-locale-switch {
|
||||
display: flex;
|
||||
margin-right: $space-xx-small;
|
||||
@ -166,11 +185,6 @@ export default {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main-navigation {
|
||||
a {
|
||||
color: $text-color-soft;
|
||||
}
|
||||
}
|
||||
.main-navigation-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
@ -48,6 +48,7 @@ import { queryLocations } from '~/graphql/location'
|
||||
let timeout
|
||||
|
||||
export default {
|
||||
name: 'NewsFeed',
|
||||
data() {
|
||||
return {
|
||||
cities: [],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user