add ui

2026-10-20 01:38:19 +08:00 · 2020-04-08 21:10:24 +08:00
1 parent 777a4bc927
commit 9c45527522
@@ -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;
@@ -0,0 +1,94 @@
+$footer-extra-link-gap = 20px
+
+.footer
+  background: $footer-bg-color
+  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
+  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
+  float: left
+  line-height: 2
+
+.footer__extra-left .footer__extra-link-item
+  margin-right: rem($footer-extra-link-gap)
+
+.footer__extra-right .footer__extra-link-item
+  margin-left: rem($footer-extra-link-gap)
+
+.layout--immersive
+  .footer
+    background: none
+    color: #FFF
+
+    a, a:visited, a:active
+      color: #FFF
+
+    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