freebrand menu and color adjustments

zoosky · Jun 8, 2023 · 87bb61c · 87bb61c
1 parent 2d477db
commit 87bb61c
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 20 deletions.
diff --git a/app/components/ch/objects/AlterBodyClasses.vue b/app/components/ch/objects/AlterBodyClasses.vue
@@ -31,14 +31,14 @@ export default {
 
       if (context === 'mobile' && this.isMobileMenuOpen) {
         if(this.isFreebrand){
-          document.body.classList.add('body--freebrand-mobile-menu-is-open')
+          document.body.classList.add('body--mobile-menu-is-open-top-bar-disabled')
         } else {
           document.body.classList.add('body--mobile-menu-is-open')
         }
         this.$store.dispatch('layout/openMobileMenu')
       } else {
         if(this.isFreebrand){
-          document.body.classList.add('body--freebrand-mobile-menu-is-open')
+          document.body.classList.add('body--mobile-menu-is-open-top-bar-disabled')
          } else {
           document.body.classList.remove('body--mobile-menu-is-open')
         }
@@ -52,9 +52,9 @@ export default {
       }
 
       if (this.isFreebrand) {
-        document.body.classList.add('body--freebrand-green')
+        document.body.classList.add('body--freebrand')
       } else {
-        document.body.classList.remove('body--freebrand-green')
+        document.body.classList.remove('body--freebrand')
       }
     },
   },

diff --git a/app/components/stories/pages/FreebrandPageSimple.stories.mdx b/app/components/stories/pages/FreebrandPageSimple.stories.mdx
@@ -1,13 +1,12 @@
-
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import store from '@/.storybook/store';
-import detailPageSimple from '../../../pages/detailPageSimple.vue';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import store from '@/.storybook/store'
+import detailPageSimple from '../../../pages/detailPageSimple.vue'
 
 <Meta
   title="Pages/Freebrand/Detail Page Simple"
   component={detailPageSimple}
   argTypes={{
-    isOpen: { name:'Is open', control: { type: 'boolean' } },
+    isOpen: { name: 'Is open', control: { type: 'boolean' } },
   }}
 />
 
@@ -16,17 +15,21 @@ export const Template = (args, { argTypes }) => ({
   components: { detailPageSimple },
   store: store,
   template: '<detailPageSimple :isFreebrand="true" />',
-});
+})
 
 # Freebrand Simple page example
 
-<a href="?path=/story/pages-freebrand-detail-page-simple--example">Go to the Canvas Tab</a>
+<a href="?path=/story/pages-freebrand-detail-page-simple--example">
+  Go to the Canvas Tab
+</a>
 
 ---
 
-<a href="?id=pages-freebrand-detail-page-simple--example" target="_blank">Open page in full width in a new tab</a>
+<a href="?id=pages-freebrand-detail-page-simple--example" target="_blank">
+  Open page in full width in a new tab
+</a>
 
-Add a `body--freebrand` class to the body tag to display the freebrand version of the page.
+Add a `body--freebrand` class tag to display the freebrand version of the page.
 
 <Canvas>
   <Story
@@ -38,5 +41,3 @@ Add a `body--freebrand` class to the body tag to display the freebrand version o
     {Template.bind({})}
   </Story>
 </Canvas>
-
-
diff --git a/css/foundations/global.postcss b/css/foundations/global.postcss
@@ -22,7 +22,7 @@ body {
   transform: translateY(-3em);
 }
 
-.body--freebrand-mobile-menu-is-open {
+.body--mobile-menu-is-open-top-bar-disabled {
   @apply overflow-hidden;
   height: calc(100vh + 3rem);
 }

diff --git a/css/main.postcss b/css/main.postcss
@@ -3,7 +3,7 @@
 
 @import "./skins/default.postcss";
 @import "./skins/intranet.postcss";
-@import "./skins/freebrand-green.postcss";
+@import "./skins/freebrand.postcss";
 
 @import "./foundations/icons.postcss";
 @import "./foundations/typography.postcss";

diff --git a/css/navigations/meta-navigation.postcss b/css/navigations/meta-navigation.postcss
@@ -13,6 +13,10 @@
 
 .meta-navigation-container {
   @apply flex;
+
+  .language-switcher {
+    margin-bottom: 0.75rem;
+  }
 }
 
 .meta-navigation--mobile {
@@ -35,4 +39,4 @@
   svg {
     @apply hidden lg:block;
   }
-}
+}
diff --git a/css/sections/mobile-menu.postcss b/css/sections/mobile-menu.postcss
@@ -14,7 +14,7 @@
 .mobile-menu--is-open,
 .freebrand-mobile-menu--is-open,
 .body--mobile-menu-is-open,
-.body--freebrand-mobile-menu-is-open .mobile-menu {
+.body--mobile-menu-is-open-top-bar-disabled .mobile-menu {
   @apply block lg:hidden;
   height: calc(100vh - 85px);
   @apply visible opacity-100;

diff --git a/css/skins/freebrand-green.postcss → css/skins/freebrand.postcss b/css/skins/freebrand-green.postcss → css/skins/freebrand.postcss
@@ -3,7 +3,7 @@
 \*----------------------------------------*/
 
 @layer base {
-  .body--freebrand-green {
+  .body--freebrand {
     --color-primary-50: #eaffe9;
     --color-primary-100: #d3ebd2;
     --color-primary-200: #bdd8bc;