Improve mobile UI (#293)

* refine footer * use responsive query * grumble * fix records * refine header * show logo for system domain
vijos · Aug 20, 2017 · 169b889 · 169b889
1 parent cf074fa
commit 169b889
Show file tree

Hide file tree

Showing 30 changed files with 350 additions and 142 deletions.
diff --git a/vj4/locale/zh_CN.yaml b/vj4/locale/zh_CN.yaml
@@ -643,7 +643,6 @@ He: 他
 She: 她
 Bulletin: 公告
 You cannot visit this domain.: 您不能访问此域。
-Menu: 菜单
 'Copy failed :(': '复制失败 :('
 Code copied to clipboard!: 代码已复制到剪贴板！
 No comments so far...: 目前还没有评论...

diff --git a/vj4/ui/common/variables.inc.styl b/vj4/ui/common/variables.inc.styl
@@ -1,3 +1,6 @@
+// layout
+$grid-padding = 15px // half gutter
+
 // fonts
 $primary-font-family = "Open Sans", "Seravek", "Segoe UI", "Verdana", "PingFang SC", "Hiragino Sans GB", "Lantinghei SC", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans"
 $header-font-family = "Open Sans", "Seravek", "Segoe UI", "Verdana", "PingFang SC", "Lantinghei SC", "Microsoft Yahei", "Hiragino Sans GB", "Microsoft Sans Serif", "WenQuanYi Micro Hei", "sans-serif"
@@ -37,8 +40,8 @@ $font-size-icon = 16px
 $font-size-title = 20px
 
 // components
-$section-gap-v = 30px
-$section-gap-h = 20px
+$section-gap-v = 25px
+$section-gap-h = $grid-padding
 $section-margin = 30px
 $section-shadow = rem(0 6px 22px) rgba(#AFC2C9, 0.5)
 $section-bg-color = $content-bg-color

diff --git a/vj4/ui/components/dropdown/Dropdown.js b/vj4/ui/components/dropdown/Dropdown.js
@@ -4,14 +4,15 @@ import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import responsiveCutoff from 'vj/breakpoints.json';
 
 import zIndexManager from 'vj/utils/zIndexManager';
+import { isBelow } from 'vj/utils/mediaQuery';
 
 export default class Dropdown extends DOMAttachedObject {
   static DOMAttachKey = 'vjDropdownInstance';
   static DOMAttachSelector = '[data-dropdown-target]';
 
   constructor($dom, options = {}) {
     if ($dom.attr('data-dropdown-trigger-desktop-only') !== undefined) {
-      if (window.innerWidth < responsiveCutoff.mobile) {
+      if (isBelow(responsiveCutoff.mobile)) {
         super(null);
         return;
       }

diff --git a/vj4/ui/components/footer/footer.page.js b/vj4/ui/components/footer/footer.page.js
@@ -0,0 +1,31 @@
+import { AutoloadPage } from 'vj/misc/PageLoader';
+import { isBelow } from 'vj/utils/mediaQuery';
+import { slideUp, slideDown } from 'vj/utils/slide';
+import responsiveCutoff from 'vj/breakpoints.json';
+
+const footerPage = new AutoloadPage('footerPage', () => {
+  if ($('.footer').length === 0) {
+    return;
+  }
+  $('.footer__category.expandable > h1').click(async (ev) => {
+    if (!isBelow(responsiveCutoff.mobile)) {
+      return;
+    }
+    const $category = $(ev.currentTarget).closest('.footer__category');
+    const $list = $category.find('.footer__category__expander');
+    if ($category.hasClass('animating')) {
+      return;
+    }
+    $category.addClass('animating');
+    if ($category.hasClass('expanded')) {
+      $category.removeClass('expanded');
+      await slideUp($list, 300, { opacity: 1 }, { opacity: 0 });
+    } else {
+      $category.addClass('expanded');
+      await slideDown($list, 300, { opacity: 0 }, { opacity: 1 });
+    }
+    $category.removeClass('animating');
+  });
+});
+
+export default footerPage;
diff --git a/vj4/ui/components/footer/footer.page.styl b/vj4/ui/components/footer/footer.page.styl
@@ -2,28 +2,63 @@ $footer-extra-link-gap = 20px
 
 .footer
   background: $footer-bg-color
-  padding: rem(20px 0)
   color: $text-1-color
 
   h1
     font-size: rem($font-size-title)
 
+    +mobile()
+      padding: rem($grid-padding)
+      cursor: pointer
+      font-size: rem($font-size-secondary)
+
 .footer__category
-  float: left
-  margin: rem(0 50px 50px 0)
+  padding-top: rem(30px)
+  padding-bottom: rem(50px)
+
+  +mobile()
+    padding-top: rem($grid-padding)
+    padding-bottom: rem($grid-padding)
+    border-bottom: 1px solid darken($footer-bg-color, 5%)
+
+    &.expandable
+      padding: 0
+
+  .expand-icon
+    display: none
+
+    +mobile()
+      display: inline-block
+
+  &.expanded .expand-icon
+    transform: rotate(180deg)
 
 .footer__category__list
   margin-top: rem(10px)
+  margin-bottom: rem(10px)
   font-size: rem($font-size-small)
   line-height: 2
 
+  +mobile()
+    margin-top: 0
+    padding-left: rem($grid-padding)
+    padding-right: rem($grid-padding)
+
+.footer__category__expander
+  +mobile()
+    display: none
+
+  +above(rupture.mobile-cutoff)
+    display: block !important
+
 .footer__extra-left
   float: left
 
 .footer__extra-right
   float: right
 
 .footer__extra-link
+  padding: rem(20px 0)
   font-size: rem($font-size-small)
 
 .footer__extra-link-item
@@ -46,3 +81,14 @@ $footer-extra-link-gap = 20px
 
     a:hover
       color: #FFF
+
++mobile()
+  .footer__extra-left, .footer__extra-right
+    float: none
+    display: block
+
+    .footer__extra-link-item
+      float: none
+      display: inline-block
+      margin-left: 0
+      margin-right: $footer-extra-link-gap
diff --git a/vj4/ui/components/header/header.page.styl b/vj4/ui/components/header/header.page.styl
@@ -1,6 +1,13 @@
 $header-gap-mini = ($header-bg-height-mini - $nav-item-height - $header-logo-height) / 2
 $header-gap-mini-domain = ($header-bg-height-mini - $nav-item-height - $header-logo-domain-lh - $header-logo-system-lh) / 2
 
+.global-notification
+  padding: rem(20px 0)
+  background: #FFF
+
+  &.warning
+    background: #ffe1a6
+
 .header
   position: relative
   height: rem($header-bg-height)
@@ -11,23 +18,15 @@ $header-gap-mini-domain = ($header-bg-height-mini - $nav-item-height - $header-l
   +retina()
     background-image: url(./header-background.png)
     background-size: rem($header-bg-width $header-bg-height)
-  +mobile()
-    .header-content
-      text-align: center
 
   &.mini
     height: rem($header-bg-height-mini)
 
-.header__layer
-  position: absolute
-  left: 0
-  bottom: 0
-  width: 100%
-  height: rem($header-layer-height)
-  background: rgba(#000, 0.5)
-
-.header.mini .header__layer
-  display: none
+  +mobile()
+    background: #FFF
+    height: auto !important
+    .header__content
+      display: none
 
 .header__logo
   display: block
@@ -74,6 +73,43 @@ $header-gap-mini-domain = ($header-bg-height-mini - $nav-item-height - $header-l
       opacity: 1
       text-decoration: underline
 
+.header--collapsed
+
+  #panel
+    padding-top: $header-bg-height
+
+  .header
+    position: absolute
+    left: 0
+    top: 0
+    width: 100%
+    height: 0
+
+  .header__logo
+    transform: scale(0)
+    opacity: 0
+
+.location
+  position: absolute
+  left: 0
+  bottom: 0
+  width: 100%
+  height: rem($header-layer-height)
+  background: rgba(#000, 0.5)
+
+  +mobile()
+    position: relative
+
+  .header__hamburger
+    display: none
+
+    +mobile()
+      margin-top: rem(28px)
+      display: block
+
+.header.mini .location
+  display: none
+
 .location-path
   color: rgba(#FFF, 0.3)
   line-height: rem(30px)
@@ -83,32 +119,59 @@ $header-gap-mini-domain = ($header-bg-height-mini - $nav-item-height - $header-l
   a:hover
     color: rgba(#FFF, 0.9)
 
+  +mobile()
+    color: $text-3-color
+
+    a, a:visited, a:hover
+      color: $text-1-color
+
 .location-current
   color: #9ad4f1
   line-height: rem(40px)
   white-space: nowrap
   overflow: hidden
   text-overflow: ellipsis
 
-.global-notification
-  padding: rem(20px 0)
-  background: #FFF
+  +mobile()
+    color: $primary-color
+    font-size: 1.7rem
 
-  &.warning
-    background: #ffe1a6
+.header--mobile
+  display: none
 
-.header--collapsed
+.header--mobile, .location
+  +mobile()
+    display: block
+    background: #FFF
+    color: $text-1-color
+    line-height: rem($nav-item-height)
+    font-size: rem($font-size-title)
+    padding: rem(10px 0)
+
+.layout--immersive .header--mobile
+  background: transparent
+  a, a:visited, a:hover
+    color: #FFF
+
+.header--mobile__domain.is-system
+  display: block
+  width: $nav-logo-width    // no rem
+  height: $nav-logo-height  // no rem
+  margin-top: rem(10px)
+  background: url('../navigation/nav-logo-small_dark.png') no-repeat
+  +retina()
+    background: url('../navigation/nav-logo-small@2x_dark.png') no-repeat
+    background-size: $nav-logo-width $nav-logo-height // no rem
 
-  #panel
-    padding-top: $header-bg-height
+.header--mobile__system
+  margin-left: rem(10px)
+  font-size: rem($font-size-secondary)
 
-  .header
-    position: absolute
-    left: 0
-    top: 0
-    width: 100%
-    height: 0
+  &, &:hover, &:visited
+    color: $supplementary-color
 
-  .header__logo
-    transform: scale(0)
-    opacity: 0
+.header__hamburger
+  background: none
+  border: 0
+  border-radius: 0
+  outline: 0
diff --git a/vj4/ui/components/navigation/hamburgers.page.styl b/vj4/ui/components/navigation/hamburgers.page.styl
@@ -37,13 +37,19 @@
 .hamburger-inner::after
   width: rem(18px)
   height: rem(2px)
-  background-color: #FFF
+  background-color: $primary-color
   border-radius: 1px
   position: absolute
   transition-property: transform
   transition-duration: 0.15s
   transition-timing-function: ease
 
+.layout--immersive
+  .hamburger-inner,
+  .hamburger-inner::before,
+  .hamburger-inner::after
+    background-color: #FFF
+
 .hamburger-inner::before,
 .hamburger-inner::after
   content: ""

diff --git a/vj4/ui/components/navigation/index.js b/vj4/ui/components/navigation/index.js
@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import responsiveCutoff from 'vj/breakpoints.json';
+import { isBelow } from 'vj/utils/mediaQuery';
 
 class MultipleStateContainer {
   constructor(onStateChange, initialState = false) {
@@ -78,23 +79,16 @@ class Navigation {
   }
 
   getHeight() {
-    if (this.$nav.length === 0) {
+    if (isBelow(responsiveCutoff.mobile)) {
       return 0;
     }
-    if (window.innerWidth > responsiveCutoff.mobile) {
-      if (!this._navHeight) {
-        this._navHeight = this.$nav.height();
-      }
-      return this._navHeight;
+    if (this.$nav.length === 0) {
+      return 0;
     }
-    const $slideoutNav = $('.nav--slideout-trigger');
-    if ($slideoutNav.length > 0) {
-      if (!this._slideoutNavHeight) {
-        this._slideoutNavHeight = $slideoutNav.height();
-      }
-      return this._slideoutNavHeight;
+    if (!this._navHeight) {
+      this._navHeight = this.$nav.height();
     }
-    return 0;
+    return this._navHeight;
   }
 }