ui: remove header

packages/ui-default/components/navigation/index.js

@@ -1,97 +0,0 @@
-import _ from 'lodash';
-import responsiveCutoff from 'vj/breakpoints.json';
-import { isBelow } from 'vj/utils/mediaQuery';
-
-class MultipleStateContainer {
-  constructor(onStateChange, initialState = false) {
-    this.onStateChange = onStateChange;
-    this.states = {};
-    this.currentState = initialState;
-  }
-
-  set(name, value, update = true) {
-    this.states[name] = value;
-    if (update) {
-      this.update();
-    }
-  }
-
-  get(name) {
-    return this.states[name];
-  }
-
-  update() {
-    const newState = this.getState();
-    if (newState !== this.currentState) {
-      this.onStateChange(newState);
-      this.currentState = newState;
-    }
-  }
-
-  getState() {
-    return _.values(this.states).indexOf(true) > -1;
-  }
-}
-
-class Navigation {
-  constructor($nav, $navShadow) {
-    this.updateExpandWidth = _.throttle(this.updateExpandWidthImmediate.bind(this), 200);
-    this.$nav = $nav;
-    this.$navRow = $nav.children('.row');
-    this.$navShadow = $navShadow;
-    this.floating = new MultipleStateContainer(this.updateFloating.bind(this));
-    this.logoVisible = new MultipleStateContainer(this.updateLogoVisibility.bind(this));
-    this.expanded = new MultipleStateContainer(this.updateExpandState.bind(this));
-  }
-
-  updateFloating(state) {
-    if (state) {
-      this.$nav.addClass('floating');
-      this.$navShadow.addClass('floating');
-      $('body').addClass('nav--floating');
-    } else {
-      this.$nav.removeClass('floating');
-      this.$navShadow.removeClass('floating');
-      $('body').removeClass('nav--floating');
-    }
-  }
-
-  updateLogoVisibility(state) {
-    if (state) {
-      this.$nav.addClass('showlogo');
-    } else {
-      this.$nav.removeClass('showlogo');
-    }
-  }
-
-  updateExpandWidthImmediate() {
-    this.$navRow.css('max-width', `${window.innerWidth}px`);
-  }
-
-  updateExpandState(state) {
-    if (state) {
-      $(window).on('resize', this.updateExpandWidth);
-      this.updateExpandWidthImmediate();
-    } else {
-      $(window).off('resize', this.updateExpandWidth);
-      this.$navRow.css('max-width', '');
-    }
-  }
-
-  getHeight() {
-    if (isBelow(responsiveCutoff.mobile)) {
-      return 0;
-    }
-    if (this.$nav.length === 0) {
-      return 0;
-    }
-    if (!this._navHeight) {
-      this._navHeight = this.$nav.height();
-    }
-    return this._navHeight;
-  }
-}
-
-Navigation.instance = new Navigation($('.nav'), $('.nav--shadow'));
-
-export default Navigation;

packages/ui-default/components/navigation/navigation.page.js

@@ -1,22 +1,7 @@
-import _ from 'lodash';
 import Slideout from 'slideout';
 
 import { AutoloadPage } from 'vj/misc/Page';
 import request from 'vj/utils/request';
-import responsiveCutoff from 'vj/breakpoints.json';
-import { isAbove } from 'vj/utils/mediaQuery';
-import Navigation from '.';
-
-const nav = Navigation.instance;
-const { $nav } = nav;
-
-function handleScroll() {
-  const currentState = $(window).scrollTop() > 20;
-  if (nav.floating.get('nonTop') !== currentState) {
-    nav.floating.set('nonTop', currentState);
-    nav.logoVisible.set('nonTop', currentState);
-  }
-}
 
 function handleNavLogoutClick(ev) {
   const $logoutLink = $(ev.currentTarget);
@@ -30,19 +15,6 @@ const navigationPage = new AutoloadPage('navigationPage', () => {
   if (!document.getElementById('panel') || !document.getElementById('menu')) {
     return;
   }
-  if ($nav.length > 0
-    && document.documentElement.getAttribute('data-layout') === 'basic'
-    && isAbove(responsiveCutoff.mobile)
-  ) {
-    $(window).on('scroll', _.throttle(handleScroll, 100));
-    $nav.hover(
-      () => nav.floating.set('hover', true),
-      () => nav.floating.set('hover', false),
-    );
-    $nav.on('vjDropdownShow', () => nav.floating.set('dropdown', true));
-    $nav.on('vjDropdownHide', () => nav.floating.set('dropdown', false));
-    handleScroll();
-  }
 
   $(document).on('click', '[name="nav_logout"]', handleNavLogoutClick);
 

packages/ui-default/components/navigation/navigation.page.styl

@@ -11,6 +11,32 @@
   transition: background .2s
   transition-timing-function: ease-out-cubic
   z-index: 500
+  background: rgba(#FFF, 0.98)
+
+  .nav__logo
+    width: rem($nav-logo-width + 10)
+    opacity: 1
+
+  .nav__item
+    color: $text-1-color
+    &.nav--active
+      border-color: $nav-item-active-color
+      &:before
+        box-shadow: 0 0 30px $nav-item-active-color,
+                    0 0 30px $nav-item-active-color
+    &:hover
+      border-color: $nav-item-hover-color
+      background: #F8F8F8
+      &:before
+        box-shadow: none
+
+  .nav__item--round
+    border-color: $primary-color
+    color: $primary-color
+
+    &:hover
+      background-color: $primary-color
+      color: #FFF
 
   .hasjs &
     position: fixed
@@ -32,6 +58,7 @@
   z-index: 300
   transition: box-shadow .2s
   transition-timing-function: ease-out-cubic
+  box-shadow: 0 0 6px rgba(#000, 0.3)
 
   .nojs &
     display: none
@@ -47,7 +74,7 @@
   line-height: rem($nav-item-height - 6)
   padding: rem(0 20px 3px 20px)
   border-top: 3px solid transparent
-  color: #FFF
+  color: #000
   transition: border-color .2s, background .2s, color .2s
   transition-timing-function: ease-out-cubic
   position: relative
@@ -61,7 +88,7 @@
     height: 1px
 
   &:visited, &:active
-    color: #FFF
+    color: #000
 
   &.nav--active
     border-color: $nav-item-active-immersive-color
@@ -108,9 +135,7 @@
   margin-left: rem(5px)
 
 .nav__logo__options
-  background-image: url(./nav-logo-small_light.png)
   background-image: url(./nav-logo-small_dark.png)
-  background-image: url(./nav-logo-small@2x_light.png)
   background-image: url(./nav-logo-small@2x_dark.png)
 
 .nav__logo
@@ -131,38 +156,6 @@
   +mobile()
     display: none
 
-.nav.showlogo, .layout--immersive
-  .nav__logo
-    width: rem($nav-logo-width + 10)
-    opacity: 1
-
-.nav.floating, .nojs .nav
-  background: rgba(#FFF, 0.98)
-
-  .nav__item
-    color: $text-1-color
-    &.nav--active
-      border-color: $nav-item-active-color
-      &:before
-        box-shadow: 0 0 30px $nav-item-active-color,
-                    0 0 30px $nav-item-active-color
-    &:hover
-      border-color: $nav-item-hover-color
-      background: #F8F8F8
-      &:before
-        box-shadow: none
-
-  .nav__item--round
-    border-color: $primary-color
-    color: $primary-color
-
-    &:hover
-      background-color: $primary-color
-      color: #FFF
-
-.nav--shadow.floating
-  box-shadow: 0 0 6px rgba(#000, 0.3)
-
 // For Mobile: show a slideout vertical arranged menu
 +mobile()