Merge pull request #5390 from Ocelot-Social-Community/5153-refactor-rebranding

chore: 🍰 Refactor Rebranding
2025-12-13 07:45:56 +00:00 · 2022-09-22 19:41:30 +02:00 · 2022-09-22 19:41:30 +02:00 · 2ee8431ead
commit 2ee8431ead
parent 14b5435929 858739eaa0
15 changed files with 120 additions and 43 deletions
--- a/backend/src/schema/resolvers/users/location.spec.js
+++ b/backend/src/schema/resolvers/users/location.spec.js
@ -121,7 +121,7 @@ describe('Location Service', () => {
    const result = await query({ query: queryLocations, variables })
    expect(result.data.queryLocations).toEqual(
      expect.arrayContaining([
-        { id: 'place.14094307404564380', place_name: 'Berlin, Germany' },
+        { id: expect.stringMatching(/^place\.[0-9]+$/), place_name: 'Berlin, Germany' },
        {
          id: expect.stringMatching(/^place\.[0-9]+$/),
          place_name: 'Berlin, Maryland, United States',
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@ -356,3 +356,22 @@ $media-query-x-large: (min-width: 1200px);
 /** 
 * @tokens Background Images
 */
+
+/** 
+ * @tokens Header Color
+ */
+
+$color-header-background: $color-neutral-100;
+
+/** 
+ * @tokens Footer Color
+ */
+
+$color-footer-background: $color-neutral-100;
+$color-footer-link: $color-primary;
+
+/** 
+ * @tokens Locale Menu Color
+ */
+
+$color-locale-menu: $text-color-soft;
--- a/webapp/assets/styles/imports/_branding.scss
+++ b/webapp/assets/styles/imports/_branding.scss
@ -0,0 +1,5 @@
+/* 
+    *
+    * Here, all SCSS variables and classes can be adapted to your custom design. 
+    *
+*/
--- a/webapp/assets/styles/main.scss
+++ b/webapp/assets/styles/main.scss
@ -179,4 +179,4 @@ hr {

 .dropdown-arrow {
  font-size: $font-size-xx-small;
-}
+}
--- a/webapp/components/Dropdown.vue
+++ b/webapp/components/Dropdown.vue
@ -8,7 +8,7 @@
    :offset="offset"
  >
    <slot :toggleMenu="toggleMenu" :openMenu="openMenu" :closeMenu="closeMenu" :isOpen="isOpen" />
-    <div slot="popover" @mouseover="popoverMouseEnter" @mouseleave="popoveMouseLeave">
+    <div slot="popover" @mouseover="popoverMouseEnter" @mouseleave="popoverMouseLeave">
      <slot
        name="popover"
        :toggleMenu="toggleMenu"
@ -97,7 +97,7 @@ export default {
      }
      this.clearTimeouts()
      if (useTimeout === true) {
-        this.popoveMouseLeave()
+        this.popoverMouseLeave()
      } else {
        this.isPopoverOpen = false
      }
@ -113,7 +113,7 @@ export default {
        }, 500)
      }
    },
-    popoveMouseLeave() {
+    popoverMouseLeave() {
      if (this.developerNoAutoClosing) return
      if (this.disabled) {
        return
--- a/webapp/components/FilterMenu/CategoriesMenu.vue
+++ b/webapp/components/FilterMenu/CategoriesMenu.vue
@ -1,14 +1,8 @@
 <template>
  <dropdown ref="category-menu" placement="top-start" :offset="8" class="category-menu">
-    <base-button
-      slot="default"
-      :filled="filterActive"
-      :ghost="!filterActive"
-      slot-scope="{ toggleMenu }"
-      @click.prevent="toggleMenu()"
-    >
-      <ds-text uppercase>{{ $t('admin.categories.name') }}</ds-text>
-    </base-button>
+    <a href="#" slot="default" slot-scope="{ toggleMenu }" @click.prevent="toggleMenu()">
+      <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>
@ -40,6 +34,7 @@ export default {
  },
  computed: {
    ...mapGetters({
+      // TODO: implement visibility of active filter later on
      filterActive: 'posts/isActive',
    }),
  },
--- a/webapp/components/LocaleSwitch/LocaleSwitch.vue
+++ b/webapp/components/LocaleSwitch/LocaleSwitch.vue
@ -117,7 +117,7 @@ export default {
  align-items: center;
  height: 100%;
  padding: $space-xx-small;
-  color: $text-color-soft;
+  color: $color-locale-menu;

  > .label {
    margin: 0 $space-xx-small;
--- a/webapp/components/Logo/Logo.vue
+++ b/webapp/components/Logo/Logo.vue
@ -59,7 +59,11 @@ export default {
  },
  data() {
    const logosObject = {
-      header: { path: logos.LOGO_HEADER_PATH, alt: 'Header', widthDefault: '130px' },
+      header: {
+        path: logos.LOGO_HEADER_PATH,
+        alt: 'Header',
+        widthDefault: logos.LOGO_HEADER_WIDTH,
+      },
      welcome: { path: logos.LOGO_WELCOME_PATH, alt: 'Welcome', widthDefault: '200px' },
      signup: { path: logos.LOGO_SIGNUP_PATH, alt: 'Sign Up', widthDefault: '200px' },
      logout: { path: logos.LOGO_LOGOUT_PATH, alt: 'Logging Out', widthDefault: '200px' },
@ -107,7 +111,6 @@ export default {
 }

 .ds-logo-svg {
-  width: 130px;
  height: auto;
  fill: #000000;
 }
--- a/webapp/components/Logo/style.scss
+++ b/webapp/components/Logo/style.scss
@ -8,10 +8,4 @@

 .ds-logo-inverse {
  color: $text-color-primary-inverse;
-}
-
-.ds-logo-svg {
-  width: 130px;
-  height: auto;
-  fill: currentColor;
 }
--- a/webapp/components/PageFooter/PageFooter.vue
+++ b/webapp/components/PageFooter/PageFooter.vue
@ -38,11 +38,14 @@ export default {
  position: fixed;
  bottom: 0px;
  z-index: 10;
-  background-color: white;
+  background-color: $color-footer-background;
  width: 100%;
  padding: 10px 10px;
  box-shadow: 0px -6px 12px -4px rgba(0, 0, 0, 0.1);
 }
+.ds-footer a {
+  color: $color-footer-link;
+}
 .division-line {
  margin-left: 0.2rem;
  margin-right: 0.2rem;
--- a/webapp/constants/headerMenu.js
+++ b/webapp/constants/headerMenu.js
@ -0,0 +1,13 @@
+export default {
+  MENU: [
+    // {
+    //   name: 'Beiträge',
+    //   path: '/#',
+    // },
+    // {
+    //   name: 'Über Yunite',
+    //   path: '/#',
+    //   url: 'https://yunite.org',
+    // },
+  ],
+}
--- a/webapp/constants/logos.js
+++ b/webapp/constants/logos.js
@ -2,6 +2,7 @@
 // this are the paths in the webapp
 export default {
  LOGO_HEADER_PATH: '/img/custom/logo-horizontal.svg',
+  LOGO_HEADER_WIDTH: '130px',
  LOGO_SIGNUP_PATH: '/img/custom/logo-squared.svg',
  LOGO_WELCOME_PATH: '/img/custom/logo-squared.svg',
  LOGO_LOGOUT_PATH: '/img/custom/logo-squared.svg',
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@ -4,11 +4,39 @@
      <ds-container class="main-navigation-container" style="padding: 10px 10px">
        <div>
          <ds-flex class="main-navigation-flex">
-            <ds-flex-item :width="{ base: '142px' }">
+            <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
              <nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'">
                <logo logoType="header" />
              </nuxt-link>
            </ds-flex-item>
+
+            <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"
@ -16,16 +44,12 @@
              <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="{ base: '45%', sm: '45%', md: '45%', lg: '50%' }"
+              :width="{
+                base: '45%',
+                sm: '45%',
+                md: isHeaderMenu ? 'auto' : '45%',
+                lg: isHeaderMenu ? 'auto' : '50%',
+              }"
              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
              style="flex-shrink: 0; flex-grow: 1"
              id="nav-search-box"
@ -43,7 +67,7 @@
              </client-only>
            </ds-flex-item>
            <ds-flex-item
-              style="background-color: white; flex-basis: auto"
+              style="flex-basis: auto"
              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
            >
              <div
@ -89,6 +113,8 @@

 <script>
 import Logo from '~/components/Logo/Logo'
+import LOGOS from '../constants/logos.js'
+import headerMenu from '../constants/headerMenu.js'
 import { mapGetters } from 'vuex'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import SearchField from '~/components/features/SearchField/SearchField.vue'
@ -117,6 +143,9 @@ export default {
  mixins: [seo],
  data() {
    return {
+      LOGOS,
+      isHeaderMenu: headerMenu.MENU.length > 0,
+      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,
@ -141,6 +170,17 @@ export default {
 </script>

 <style lang="scss">
+.main-navigation {
+  background-color: $color-header-background;
+}
+.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;
@ -156,11 +196,6 @@ export default {
  align-items: center;
 }

-.main-navigation {
-  a {
-    color: $text-color-soft;
-  }
-}
 .main-navigation-right {
  display: flex;
  justify-content: flex-end;
--- a/webapp/nuxt.config.js
+++ b/webapp/nuxt.config.js
@ -91,13 +91,21 @@ export default {
  /*
   ** Global CSS
   */
-  css: ['~assets/_new/styles/resets.scss', '~assets/styles/main.scss'],
+  css: [
+    '~assets/_new/styles/resets.scss',
+    '~assets/styles/main.scss',
+    '~assets/styles/imports/_branding.scss',
+  ],

  /*
   ** Global processed styles
   */
  styleResources: {
-    scss: [styleguideStyles, '~assets/_new/styles/tokens.scss'],
+    scss: [
+      styleguideStyles,
+      '~assets/_new/styles/tokens.scss',
+      '~assets/styles/imports/_branding.scss',
+    ],
  },

  /*
--- a/webapp/pages/settings/index.vue
+++ b/webapp/pages/settings/index.vue
@ -48,6 +48,7 @@ import { queryLocations } from '~/graphql/location'
 let timeout

 export default {
+  name: 'NewsFeed',
  data() {
    return {
      cities: [],