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()
 

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

@@ -13,9 +13,8 @@ $spinner-margin = ($nav-item-height - $spinner-size) / 2
   width: 100%
   height: 2px
 
-  .nav--floating &
+  &+above(rupture.mobile-cutoff)
-    +above(rupture.mobile-cutoff)
+    background: $nprogress-color-floating
-      background: $nprogress-color-floating
 
 #nprogress .peg
   display: block
@@ -27,9 +26,8 @@ $spinner-margin = ($nav-item-height - $spinner-size) / 2
   opacity: 1.0
   transform: rotate(3deg) translate(0px, -4px)
 
-  .nav--floating &
+  &+above(rupture.mobile-cutoff)
-    +above(rupture.mobile-cutoff)
+    box-shadow: 0 0 10px $nprogress-color-floating, 0 0 5px $nprogress-color-floating
-      box-shadow: 0 0 10px $nprogress-color-floating, 0 0 5px $nprogress-color-floating
 
 #nprogress .spinner
   display: block
@@ -48,10 +46,9 @@ $spinner-margin = ($nav-item-height - $spinner-size) / 2
   border-radius: 50%
   animation: nprogress-spinner 400ms linear infinite
 
-  .nav--floating &
+  &+above(rupture.mobile-cutoff)
-    +above(rupture.mobile-cutoff)
+    border-top-color: $nprogress-color-floating
-      border-top-color: $nprogress-color-floating
+    border-left-color: $nprogress-color-floating
-      border-left-color: $nprogress-color-floating
 
 .nprogress-custom-parent
   overflow: hidden

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

@@ -1,11 +1,13 @@
 import 'sticky-kit/dist/sticky-kit';
 import _ from 'lodash';
-
+import { isBelow, isAbove } from 'vj/utils/mediaQuery';
 import { AutoloadPage } from 'vj/misc/Page';
-import Navigation from 'vj/components/navigation';
-import { isAbove } from 'vj/utils/mediaQuery';
 import responsiveCutoff from 'vj/breakpoints.json';
 
+const navHeight = isBelow(responsiveCutoff.mobile)
+  ? 0
+  : $('.nav').height();
+
 function updateStickies($stickies) {
   $stickies.get().forEach((element) => {
     const $sticky = $(element);
@@ -17,7 +19,7 @@ function updateStickies($stickies) {
       if ($stickyParent.length > 0) {
         stickyOptions.parent = $stickyParent;
       }
-      stickyOptions.offset_top = 10 + Navigation.instance.getHeight();
+      stickyOptions.offset_top = 10 + navHeight;
       $sticky.stick_in_parent(stickyOptions);
       $sticky.data('sticky-enabled', true);
     } else if (!shouldEnableSticky && stickyEnabled) {

packages/ui-default/components/table/StyledTable.js

@@ -1,8 +1,12 @@
 import 'sticky-kit/dist/sticky-kit';
 import _ from 'lodash';
-
-import Navigation from 'vj/components/navigation';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
+import { isBelow } from 'vj/utils/mediaQuery';
+import responsiveCutoff from 'vj/breakpoints.json';
+
+const navHeight = isBelow(responsiveCutoff.mobile)
+  ? 0
+  : $('.nav').height();
 
 export default class StyledTable extends DOMAttachedObject {
   static DOMAttachKey = 'vjStyledTableInstance';
@@ -33,7 +37,7 @@ export default class StyledTable extends DOMAttachedObject {
 
     const stickyOptions = {
       parent: this.$container,
-      offset_top: Navigation.instance.getHeight(),
+      offset_top: navHeight,
     };
     _.defer(() => this.$header.stick_in_parent(stickyOptions));
   }

packages/ui-default/handler.js

@@ -60,27 +60,13 @@ class UiSettingsHandler extends Handler {
   }
 
   async get({ domainId }) {
-    const [
+    const [nav_logo_dark, nav_logo_dark_2x] = system.getMany([
-      header_logo, header_logo_2x,
+      'ui-default.nav_logo_dark', 'ui-default.nav_logo_dark_2x',
-      nav_logo_dark, nav_logo_light,
-      nav_logo_dark_2x, nav_logo_light_2x,
-      header_background, header_background_2x,
-    ] = system.getMany([
-      'ui-default.header_logo', 'ui-default.header_logo_2x',
-      'ui-default.nav_logo_dark', 'ui-default.nav_logo_light',
-      'ui-default.nav_logo_dark_2x', 'ui-default.nav_logo_light_2x',
-      'ui-default.header_background', 'ui-default.header_background2x',
     ]);
     const ddoc = await domain.get(domainId);
     this.response.body = await this.renderHTML('extra.css', {
-      header_logo,
-      header_logo_2x,
       nav_logo_dark,
-      nav_logo_light,
       nav_logo_dark_2x,
-      nav_logo_light_2x,
-      header_background,
-      header_background_2x,
       ...ddoc,
     });
     this.response.type = 'text/css';

packages/ui-default/misc/structure.styl

@@ -21,7 +21,7 @@
   flex: 1
 
   +above(rupture.desktop-cutoff)
-    padding: rem(30px 0)
+    padding: 4rem 0rem
 
   +mobile()
     padding: 0

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.9.2",
+  "version": "4.10.0",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",

packages/ui-default/pages/problem_detail.page.jsx

@@ -2,14 +2,10 @@ import yaml from 'js-yaml';
 import { getScoreColor } from '@hydrooj/utils/lib/status';
 import * as echarts from 'echarts';
 import { NamedPage } from 'vj/misc/Page';
-import Navigation from 'vj/components/navigation';
-import Notification from 'vj/components/notification/index';
 import { ActionDialog } from 'vj/components/dialog';
 import { downloadProblemSet } from 'vj/components/zipDownloader';
 import loadReactRedux from 'vj/utils/loadReactRedux';
 import delay from 'vj/utils/delay';
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
 import base64 from 'vj/utils/base64';
 
 class ProblemPageExtender {
@@ -33,9 +29,6 @@ class ProblemPageExtender {
     this.$content.transition({ opacity: 0 }, { duration: 100 });
     await delay(100);
 
-    Navigation.instance.floating.set('scratchpad', true);
-    Navigation.instance.logoVisible.set('scratchpad', true);
-    Navigation.instance.expanded.set('scratchpad', true);
     $('body').addClass('header--collapsed mode--scratchpad');
     await this.$scratchpadContainer
       .css({
@@ -77,10 +70,6 @@ class ProblemPageExtender {
       .get(0)
       .getBoundingClientRect();
 
-    Navigation.instance.floating.set('scratchpad', false);
-    Navigation.instance.logoVisible.set('scratchpad', false);
-    Navigation.instance.expanded.set('scratchpad', false);
-
     $('body').removeClass('header--collapsed mode--scratchpad');
 
     await this.$scratchpadContainer

packages/ui-default/setting.yaml

@@ -3,41 +3,11 @@ footer_extra_html:
   name: footer_extra_html
   desc: Footer Extra HTML
   default: ''
-header_logo:
-  type: text
-  name: header_logo
-  desc: Header Logo
-  default: /components/header/header-logo.png
-header_logo_2x:
-  type: text
-  name: header_logo_2x
-  desc: Header Logo@2x
-  default: /components/header/header-logo@2x.png
-header_background:
-  type: text
-  name: header_background
-  desc: Header Background
-  default: /components/header/header-background.png
-header_background_2x:
-  type: text
-  name: header_background_2x
-  desc: Header Background@2x
-  default: /components/header/header-background@2x.png
-nav_logo_light:
-  type: text
-  name: nav_logo_light
-  desc: Nav Logo Light
-  default: /components/navigation/nav-logo-small_light.png
 nav_logo_dark:
   type: text
   name: nav_logo_dark
   desc: Nav Logo Dark
   default: /components/navigation/nav-logo-small_dark.png
-nav_logo_light_2x:
-  type: text
-  name: nav_logo_light_2x
-  desc: Nav Logo Light@2x
-  default: /components/navigation/nav-logo-small@2x_light.png
 nav_logo_dark_2x:
   type: text
   name: nav_logo_dark_2x

packages/ui-default/templates/components/md_hint.html

@@ -10,9 +10,9 @@ return 0;
 }
 ```</pre></dd>
       <dt>{{ _('Inline formulas') }}</dt>
-      <dd><pre>$ E=mc^2 $</pre></dd>
+      <dd><pre>$E=mc^2$</pre></dd>
       <dt>{{ _('Formula blocks') }}</dt>
-      <dd><pre>$$ E=mc^2 $$</pre></dd>
+      <dd><pre>$$E=mc^2$$</pre></dd>
       <dt>{{ _('Links') }}</dt>
       <dd><pre>[{{ _('Text') }}](https://...)</pre></dd>
       <dt>{{ _('Highlight') }}</dt>
@@ -26,7 +26,7 @@ return 0;
 
 [^1]: Here is the footnote.</pre></dd>
       <dt>{{ _('Videos') }}</dt>
-      <dd><pre>@[{{ _('Description') }}](https://.../file.mp4)</pre></dd>
+      <dd><pre>@[video](https://.../file.mp4)</pre></dd>
     </dl>
     <h2>{{ _('Learn More') }}</h2>
     <ul>

packages/ui-default/templates/extra.css

@@ -1,45 +1,12 @@
-/* {% if header_logo %} */
-.header__logo {
-    background: url({{header_logo}})
-}
-/* {% endif %} */
-
-/* {% if header_background %} */
-.header {
-    background: url({{header_background}})
-}
-/* {% endif %} */
-
-/* {% if nav_logo_light %} */
-.nav__logo, .header--mobile__domain.is--system {
-    background-image: url({{nav_logo_light}})
-}
-/* {% endif %} */
-
 /* {% if nav_logo_dark %} */
-.nav.floating .nav__logo, .nojs .nav .nav__logo {
+.nav__logo {
     background-image: url({{nav_logo_dark}}) !important
 }
 /* {% endif %} */
 
 @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
-    /* {% if header_2x %} */
-    .header__logo {
-        background-image: url({{header_2x}})
-    }
-    /* {% endif %} */
-    /* {% if header_background_2x %} */
-    .header {
-        background-image: url({{header_background_2x}})
-    }
-    /* {% endif %} */
-    /* {% if nav_logo_light_2x %} */
-    .nav__logo, .header--mobile__domain.is--system {
-        background-image: url({{nav_logo_light_2x}}) !important
-    }
-    /* {% endif %} */
     /* {% if nav_logo_dark_2x %} */
-    .nav.floating .nav__logo, .nojs .nav .nav__logo, .header--mobile__domain.is--system {
+    .nav__logo, .header--mobile__domain.is--system {
         background-image: url({{nav_logo_dark_2x}}) !important
     }
     /* {% endif %} */

packages/ui-default/templates/partials/header.html

@@ -1,6 +0,0 @@
-<div class="header{% if no_path_section %} mini{% endif %}">
-  <div class="header__content"><div class="row"><div class="columns">
-    <a class="header__logo" href="/" target="_self"></a>
-  </div></div></div>
-  {% include "partials/path.html" %}
-</div>