feat: interaction optimize, mainly for buttons and links

xiaerfei · Jul 6, 2018 · 9936255 · 9936255
1 parent d91a2b9
commit 9936255
Show file tree

Hide file tree

Showing 25 changed files with 155 additions and 85 deletions.
diff --git a/_includes/scripts/aside/toc.js b/_includes/scripts/aside/toc.js
@@ -4,7 +4,7 @@
   window.Lazyload.js(SOURCES.jquery, function() {
     var $window = $(window);
     var $articleContent = $('.js-article-content');
-    var $tocRoot = $('.js-toc-root'), $col2 = $('.js-col-2');
+    var $tocRoot = $('.js-toc-root'), $col2 = $('.js-col-aside');
     var toc;
     var tocDisabled = false;
     var hasSidebar = $('.js-page-root').hasClass('layout--page--sidebar');

diff --git a/_includes/scripts/common.js b/_includes/scripts/common.js
@@ -1,3 +1,7 @@
-/*(function () {
-
-})();*/
+(function () {
+  var $root = document.getElementsByClassName('root')[0];
+  if (window.hasEvent('touchstart')) {
+    $root.dataset.isTouch = true;
+    document.addEventListener('touchstart', function(){}, false);
+  }
+})();
diff --git a/_layouts/archive.html b/_layouts/archive.html
@@ -8,14 +8,14 @@
 show_title: false
 ---
 
-<div class="layout--all js-all">
+<div class="layout--archive js-all">
   <div class="search-box js-search-box">
     <div class="icon-search"><i class="fas fa-search"></i></div>
     <input type="text" />
     <div class="button icon-clear"><i class="fas fa-times"></i></div>
   </div>
   {%- include tags.html -%}
-  <div class="js-result layout--all__result"></div>
+  <div class="js-result layout--archive__result"></div>
 </div>
 
 <script>

diff --git a/_layouts/base.html b/_layouts/base.html
@@ -10,9 +10,13 @@
       {%- include scripts/utils.js -%}
       {%- include scripts/lib/throttle.js -%}
       {%- include scripts/lib/lazyload.js -%}
-      {%- include scripts/common.js -%}
     </script>
     {%- include scripts/variables.html -%}
   </head>
-  <body>{{ content }}</body>
+  <body>
+    <div class="root" data-is-touch="false">
+      {{ content }}
+    </div>
+    <script>{%- include scripts/common.js -%}</script>
+  </body>
 </html>
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -31,7 +31,7 @@
           {%- endif -%}
         </div>
 
-        <a href="{{ _href }}">{{ _locale_readmore }}</a>
+        <p><a href="{{ _href }}">{{ _locale_readmore }}</a></p>
         {%- include article-info.html -%}
       </article>
     {%- endfor -%}

diff --git a/_layouts/landing.html b/_layouts/landing.html
@@ -31,7 +31,7 @@ <h2 itemprop="alternativeHeadline">{{ page.data.sub_title }}</h2>
         {%- include snippets/get-nav-url.html -%}
         {%- assign _url = __return -%}
         {%- assign _type = _action.type | default: 'info' -%}
-        <li><a class="button button--{{ _type }} button--rounded button--lg" href="{{ _url }}">{{ _action.text }}</a></li>
+        <li><a class="button button--{{ _type }} button--pill button--lg" href="{{ _url }}">{{ _action.text }}</a></li>
       {%- endfor -%}
       </ul>
       {%- endif -%}
@@ -62,7 +62,7 @@ <h3>{{ _section.title }}</h3>
                 {%- include snippets/get-nav-url.html -%}
                 {%- assign _url = __return -%}
                 {%- assign _type = _action.type | default: 'outline-info' -%}
-                <li><a class="button button--{{ _type }} button--rounded button--lg" href="{{ _url }}">{{ _action.text }}</a></li>
+                <li><a class="button button--{{ _type }} button--pill button--lg" href="{{ _url }}">{{ _action.text }}</a></li>
               {%- endfor -%}
               </ul>
             {%- endif -%}
@@ -92,7 +92,7 @@ <h4>{{ child.title }}</h4>
                           {%- include snippets/get-nav-url.html -%}
                           {%- assign _url = __return -%}
                           {%- assign _type = _action.type | default: 'outline-info' -%}
-                          <li><a class="button button--{{ _type }} button--rounded button--lg" href="{{ _url }}">{{ _action.text }}</a></li>
+                          <li><a class="button button--{{ _type }} button--pill button--lg" href="{{ _url }}">{{ _action.text }}</a></li>
                         {%- endfor -%}
                       </ul>
                     {%- endif -%}

diff --git a/_layouts/page.html b/_layouts/page.html
@@ -73,15 +73,15 @@
         <div class ="main">
       {%- endif -%}
 
-          <div class="col-2 js-col-2">
+          <div class="col-aside js-col-aside">
             {%- if page.aside -%}
               <aside class="page__aside js-page-aside">
                 {%- include aside/toc.html -%}
               </aside>
             {%- endif -%}
           </div>
 
-          <div class="col-1">
+          <div class="col-main">
             {%- if _page_type == 'article' -%}
               <article itemscope itemtype="http://schema.org/Article">
             {%- elsif _page_type == 'webpage' -%}

diff --git a/_sass/common/_function.scss b/_sass/common/_function.scss
@@ -0,0 +1,7 @@
+@function get-color-theme($color) {
+  @if lightness($color) < 15% {
+    @return 'dark';
+  } @else {
+    @return 'light';
+  }
+}
diff --git a/_sass/common/_reset.scss b/_sass/common/_reset.scss
@@ -54,6 +54,10 @@ body {
   }
 }
 
+.root {
+  height: 100%;
+}
+
 input, textarea, select, button {
   font: map-get($base, font-weight) #{map-get($base, font-size)}/#{map-get($base, line-height)} map-get($base, font-family);
   color: $text-color;
@@ -126,9 +130,9 @@ a {
     text-decoration: underline;
   }
   @include active() {
-    text-decoration: underline;
+    text-decoration: none;
   }
-  @include link-colors($main-color-1, $main-color-1, $main-color-1);
+  @include link-colors($main-color-1);
   @include transition(map-get($link, transition));
 }
 

diff --git a/_sass/common/_variables.scss b/_sass/common/_variables.scss
@@ -96,7 +96,7 @@ $link: (
 );
 
 $button: (
-  padding-y-lg:           .5rem,
+  padding-y-lg:           .3rem,
   padding-x-lg:           1.2rem,
 
   padding-y:              .1rem,
@@ -107,9 +107,9 @@ $button: (
 
   font-weight:            map-get($base, font-weight-bold),
 
-  circle-diameter-lg:     3rem,
+  circle-diameter-lg:     2.8rem,
   circle-diameter:        2rem,
-  circle-diameter-sm:     1.2rem,
+  circle-diameter-sm:     1.5rem,
 
   transition:             all .2s ease-in-out
 );

diff --git a/_sass/common/classes/_link.scss b/_sass/common/classes/_link.scss
@@ -1,10 +1,40 @@
-@mixin link-colors($clr, $hover-clr: default, $active-clr: default, $focus-clr: null) {
+@mixin link-colors($clr, $hover-clr: default, $active-clr: default, $focus-clr: null, $theme: default) {
+
+  @if $theme == default {
+    @if $hover-clr == default {
+      $theme: get-color-theme($clr);
+    } @else {
+      $theme: get-color-theme($hover-clr);
+    }
+  }
+
   @if $hover-clr == default {
-    $hover-clr: $clr;
+    @if $theme == 'light' {
+      $hover-clr: darken($clr, 14%);
+    }
+    @if $theme == 'dark' {
+      $hover-clr: lighten($clr, 18%);
+    }
   }
+
   @if $active-clr == default {
-    $active-clr: $clr;
+    @if $theme == 'light' {
+      $active-clr: darken($hover-clr, 15%);
+    }
+    @if $theme == 'dark' {
+      $active-clr: lighten($hover-clr, 16%);
+    }
+  }
+
+  @if $focus-clr == default {
+    @if $theme == 'light' {
+      $focus-clr: $hover-clr;
+    }
+    @if $theme == 'dark' {
+      $focus-clr: $hover-clr;
+    }
   }
+
   @include plain {
     color: $clr;
     svg path {

diff --git a/_sass/common/classes/_pseudo.scss b/_sass/common/classes/_pseudo.scss
@@ -7,20 +7,20 @@
 }
 
 @mixin hover() {
-  &:hover {
+  .root[data-is-touch="false"] &:hover {
     @content;
   }
 }
 
 @mixin active() {
-  &.active,
-  &:active {
+  .root[data-is-touch] &.active,
+  .root[data-is-touch] &:active {
     @content;
   }
 }
 
 @mixin focus() {
-  &.focus {
+  .root[data-is-touch] &.focus {
     @content;
   }
 }
diff --git a/_sass/common/classes/_spacing.scss b/_sass/common/classes/_spacing.scss
@@ -28,11 +28,23 @@
     $_dirs: ('top', 'bottom');
   }
   @else if ($direction == '') {
-    $_dirs: ('top', 'bottom', 'left', 'right');
+    $_dirs: ('');
   }
 
   @each $dir in $_dirs {
-    #{$_type}-#{$dir} : map-get($spacers, $spacer);
+    @if ($spacer == 'auto') {
+      @if ($dir == '') {
+        #{$_type}: auto;
+      } @else {
+        #{$_type}-#{$dir}: auto;
+      }
+    } @else {
+      @if ($dir == '') {
+        #{$_type}: map-get($spacers, $spacer);
+      } @else {
+        #{$_type}-#{$dir}: map-get($spacers, $spacer);
+      }
+    }
   }
 }
 
@@ -49,4 +61,10 @@ $_spacers: (0, 1, 2, 3, 4, 5);
       }
     }
   }
+}
+
+@each $j in $_directions {
+  .m#{$j}-auto {
+    @include make-spacing('m', $j, 'auto');
+  }
 }
diff --git a/_sass/common/components/_button.scss b/_sass/common/components/_button.scss
@@ -1,42 +1,55 @@
 @mixin button-colors($clr, $bg-clr, $hover-clr: default, $hover-bg-clr: default, $active-clr: default, $active-bg-clr: default, $focus-clr: default, $focus-bg-clr: default, $theme: default) {
+
   @if $theme == default {
-    $theme: light;
+    @if $hover-bg-clr == default {
+      $theme: get-color-theme($bg-clr);
+    } @else {
+      $theme: get-color-theme($hover-bg-clr);
+    }
   }
+
+
   @if $hover-clr == default {
     $hover-clr: $clr
   }
+
   @if $hover-bg-clr == default {
     @if $theme == 'light' {
-      $hover-bg-clr: darken($bg-clr, 13%);
+      $hover-bg-clr: darken($bg-clr, 14%);
     }
     @if $theme == 'dark' {
-      $hover-bg-clr: lighten($bg-clr, 23%);
+      $hover-bg-clr: lighten($bg-clr, 18%);
     }
   }
 
+
   @if $active-clr == default {
-    $active-clr: $clr
+    $active-clr: $hover-clr
   }
+
   @if $active-bg-clr == default {
     @if $theme == 'light' {
-      $active-bg-clr: darken($bg-clr, 13%);
+      $active-bg-clr: darken($hover-bg-clr, 15%);
     }
     @if $theme == 'dark' {
-      $active-bg-clr: lighten($bg-clr, 23%);
+      $active-bg-clr: lighten($hover-bg-clr, 16%);
     }
   }
 
+
   @if $focus-clr == default {
-    $focus-clr: $clr
+    $focus-clr: $hover-clr;
   }
+
   @if $focus-bg-clr == default {
     @if $theme == 'light' {
-      $focus-bg-clr: darken($bg-clr, 13%);
+      $focus-bg-clr: $hover-bg-clr;
     }
     @if $theme == 'dark' {
-      $focus-bg-clr: lighten($bg-clr, 23%);
+      $focus-bg-clr: $hover-bg-clr;
     }
   }
+
   @include plain {
     color: $clr;
     background-color: $bg-clr;
@@ -60,7 +73,7 @@
   }
   @include focus {
     color: $focus-clr;
-    @include box-shadow(2, $focus-bg-clr);
+    box-shadow: 0 0 0 2px rgba($focus-bg-clr, .4);
     background-color: $focus-bg-clr;
     svg path {
       fill: $focus-clr;
@@ -125,37 +138,37 @@
 .button--outline-primary {
   color: $main-color-1;
   border: 1px solid $main-color-1;
-  @include button-colors($main-color-1, transparent, $text-color-1, $main-color-1, $text-color-1, $main-color-1, $text-color-1, $main-color-1);
+  @include button-colors($main-color-1, transparent, $text-color-1, $main-color-1);
 }
 
 .button--outline-secondary {
   color: $main-color-3;
   border: 1px solid $main-color-3;
-  @include button-colors($main-color-3, transparent, $text-color-3, $main-color-3, $text-color-3, $main-color-3, $text-color-3, $main-color-3);
+  @include button-colors($main-color-3, transparent, $text-color-3, $main-color-3);
 }
 
 .button--outline-success {
   color: $green;
   border: 1px solid $green;
-  @include button-colors($green, transparent, $text-color-function, $green, $text-color-function, $green, $text-color-function, $green);
+  @include button-colors($green, transparent, $text-color-function, $green);
 }
 
 .button--outline-info {
   color: $blue;
   border: 1px solid $blue;
-  @include button-colors($blue, transparent, $text-color-function, $blue, $text-color-function, $blue, $text-color-function, $blue);
+  @include button-colors($blue, transparent, $text-color-function, $blue);
 }
 
 .button--outline-warning {
   color: $yellow;
   border: 1px solid $yellow;
-  @include button-colors($yellow, transparent, $text-color-function, $yellow, $text-color-function, $yellow, $text-color-function, $yellow);
+  @include button-colors($yellow, transparent, $text-color-function, $yellow);
 }
 
 .button--outline-error {
   color: $red;
   border: 1px solid $red;
-  @include button-colors($red, transparent, $text-color-function, $red, $text-color-function, $red, $text-color-function, $red);
+  @include button-colors($red, transparent, $text-color-function, $red);
 }
 
 .button--pill {