auto commit 11/02/2019 Sat

5 years ago · d205b2adc8
parent c7ffea9c0a
commit d205b2adc8
15 changed files with 259 additions and 76 deletions
--- a/index.html
+++ b/index.html
@ -42,14 +42,48 @@

    <div id="header-top-after"></div>

-    <div class="site-content">
-      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-
+    <div class="page-content">
+      <aside class="side-bar-left">left</aside>
+      <section class="main-center">
+        <div class="post-list">
+          <div class="mdc-card demo-card demo-basic-with-text-over-media">
+            <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0">
+              <div class="mdc-card__media mdc-card__media--16-9 demo-card__media"
+                style="background-image: url(&quot;https://material-components.github.io/material-components-web-catalog/static/media/photos/3x2/2.jpg&quot;);">
+                <div class="mdc-card__media-content demo-card__media-content">
+                  <div class="demo-card__primary">
+                    <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Our Changing Planet</h2>
+                    <h3 class="demo-card__subtitle mdc-typography mdc-typography--subtitle2">by Kurt Wagner</h3>
+                  </div>
+                </div>
+              </div>
+              <div class="demo-card__secondary mdc-typography mdc-typography--body2">Visit ten places on our planet that
+                are undergoing the biggest changes today.</div>
+            </div>
+            <div class="mdc-card__actions">
+              <div class="mdc-card__action-buttons">
+                <button class="mdc-button mdc-card__action mdc-card__action--button">Read</button>
+                <button class="mdc-button mdc-card__action mdc-card__action--button">Bookmark</button>
+              </div>
+              <div class="mdc-card__action-icons">
+                <button class="mdc-icon-button mdc-card__action mdc-card__action--icon--unbounded" aria-pressed="false"
+                  aria-label="Add to favorites" title="Add to favorites">
+                  <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
+                  <i class="material-icons mdc-icon-button__icon">favorite_border</i>
+                </button>
+                <button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon--unbounded"
+                  title="Share" data-mdc-ripple-is-unbounded="true">share</button>
+                <button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon--unbounded"
+                  title="More options" data-mdc-ripple-is-unbounded="true">more_vert</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <aside class="side-bar-right">right</aside>
    </div>

+    <div class="footer-container"></div>

  </div>

--- a/package-lock.json
+++ b/package-lock.json
@ -921,8 +921,8 @@
    },
    "@material/card": {
      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@material/card/-/card-3.2.0.tgz",
-      "integrity": "sha512-pC9HHhdAXarRJZgKx+xa6G/WPjGp+HN6sOgWPC6Od+0yFuMilCEScGkaXKPOFRt5UwNjzSIBPXJVyP6lmfg1NQ==",
+      "resolved": "https://registry.npm.taobao.org/@material/card/download/@material/card-3.2.0.tgz",
+      "integrity": "sha1-sFEpjsbUmGF7GScCLc65ozHKPDk=",
      "requires": {
        "@material/elevation": "^3.1.0",
        "@material/feature-targeting": "^3.1.0",
@ -1124,8 +1124,8 @@
    },
    "@material/layout-grid": {
      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@material/layout-grid/-/layout-grid-3.1.0.tgz",
-      "integrity": "sha512-//9LggCNibXNtUkqijvDBK85fL1GSB+uIPYVx6ATToqDej1/35eedUxDSsw/ugm7zZ0OSyPLimbBuNMMnQtlqQ=="
+      "resolved": "https://registry.npm.taobao.org/@material/layout-grid/download/@material/layout-grid-3.1.0.tgz",
+      "integrity": "sha1-fzMF8/I2/Wo0f/muFEBkD/ZOhNg="
    },
    "@material/line-ripple": {
      "version": "3.1.0",
@ -2415,6 +2415,42 @@
        }
      }
    },
+    "cli-source-preview": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/cli-source-preview/download/cli-source-preview-1.1.0.tgz",
+      "integrity": "sha1-BTA6sSeakJPq0aODez7iMfMAZUQ=",
+      "dev": true,
+      "requires": {
+        "chalk": "^1.1.3"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-2.2.1.tgz?cache=0&sync_timestamp=1566430562325&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-1.1.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-2.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        }
+      }
+    },
    "cliui": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
@ -2435,6 +2471,12 @@
        "shallow-clone": "^3.0.0"
      }
    },
+    "co": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npm.taobao.org/co/download/co-4.6.0.tgz",
+      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
+      "dev": true
+    },
    "code-point-at": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@ -3340,6 +3382,19 @@
      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
    },
+    "fast-sass-loader": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npm.taobao.org/fast-sass-loader/download/fast-sass-loader-1.5.0.tgz",
+      "integrity": "sha1-s7z5Gqpf0ELgHFNrszjbdLA/7ww=",
+      "dev": true,
+      "requires": {
+        "async": "^2.0.1",
+        "cli-source-preview": "^1.0.0",
+        "co": "^4.6.0",
+        "fs-extra": "3.x",
+        "loader-utils": "^1.1.0"
+      }
+    },
    "faye-websocket": {
      "version": "0.10.0",
      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz",
@ -3515,6 +3570,17 @@
        "readable-stream": "^2.0.0"
      }
    },
+    "fs-extra": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npm.taobao.org/fs-extra/download/fs-extra-3.0.1.tgz",
+      "integrity": "sha1-N5TzeMWLNC6n27sjCVEJxLO2IpE=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^3.0.0",
+        "universalify": "^0.1.0"
+      }
+    },
    "fs-write-stream-atomic": {
      "version": "1.0.10",
      "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
@ -4831,6 +4897,15 @@
        "minimist": "^1.2.0"
      }
    },
+    "jsonfile": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npm.taobao.org/jsonfile/download/jsonfile-3.0.1.tgz",
+      "integrity": "sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
    "jsprim": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@ -7478,6 +7553,12 @@
        "imurmurhash": "^0.1.4"
      }
    },
+    "universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npm.taobao.org/universalify/download/universalify-0.1.2.tgz",
+      "integrity": "sha1-tkb2m+OULavOzJ1mOcgNwQXvqmY=",
+      "dev": true
+    },
    "unpipe": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -6,6 +6,8 @@
  "dependencies": {
    "@material/animation": "^3.1.0",
    "@material/button": "^3.2.0",
+    "@material/card": "^3.2.0",
+    "@material/layout-grid": "^3.1.0",
    "@material/line-ripple": "^3.1.0",
    "@material/ripple": "^3.2.0",
    "@material/theme": "^3.1.0",
--- a/src/scss/components/mdc.scss
+++ b/src/scss/components/mdc.scss
@ -1,4 +1,3 @@
+@import "@material/layout-grid/mdc-layout-grid";
@import "@material/button/mdc-button";
@import "@material/textfield/mdc-text-field";
-@import "@material/top-app-bar/mdc-top-app-bar";
-@import "@material/icon-button/mdc-icon-button";
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@ -1,7 +1,9 @@
@import "./variables.scss";

@import "./components/normalize.scss";
-@import "./components/mdc.scss";
-
-@import "./layouts/homepage.scss";
+//@import "./components/mdc.scss";

+@import "./layouts/header.scss";
+@import "./layouts/coverImage.scss";
+@import "./layouts/pageContent.scss";
+@import "./layouts/postThumbList.scss";
--- a/src/scss/layouts/coverImage.scss
+++ b/src/scss/layouts/coverImage.scss
@ -0,0 +1,22 @@
+/**
+ * @description homepage cover image
+ * @author Mashiro
+ * @since 19/11/1
+ */
+
+.header-top {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+
+  figure {
+    width: 100%;
+    margin: 0;
+    overflow: hidden;
+  }
+
+}
+
+#header-top-after {
+  width: 100%
+}
--- a/src/scss/layouts/header.scss
+++ b/src/scss/layouts/header.scss
@ -0,0 +1,15 @@
+/**
+ * @description header
+ * @author Mashiro
+ * @since 19/11/1
+ */
+
+@import "@material/top-app-bar/mdc-top-app-bar";
+@import "@material/icon-button/mdc-icon-button";
+
+.header-container {
+    // display: -webkit-flex;
+    // display: flex;
+    // flex-flow: column nowrap;
+    // justify-content: space-between
+}
--- a/src/scss/layouts/homepage.scss
+++ b/src/scss/layouts/homepage.scss
@ -1,33 +0,0 @@
-/**
- * @description index page framework
- * @author Mashiro
- * @since 19/11/1
- */
-
-.header-container {
-  // display: -webkit-flex;
-  // display: flex;
-  // flex-flow: column nowrap;
-  // justify-content: space-between
-}
-
-.header-top {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  figure {
-    width: 100%;
-    margin: 0;
-    overflow: hidden;
-  }
-  
-}
-
-#header-top-after {
-  width: 100%
-}
-
-.site-content {
-  position: relative;
-  background:coral
-}
--- a/src/scss/layouts/pageContent.scss
+++ b/src/scss/layouts/pageContent.scss
@ -0,0 +1,28 @@
+/**
+ * @description site content
+ * @author Mashiro
+ * @since 19/11/1
+ */
+
+.page-content {
+    position: relative; // important for parallax scrolling
+    background: white;
+    display: -webkit-flex;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+
+    .main-center {
+        height: 100%;
+        width: 800px;
+        background: yellowgreen;
+    }
+
+    .side-bar-left {
+        width: 100px;
+    }
+
+    .side-bar-right {
+        width: 100px;
+    }
+}
--- a/src/scss/layouts/postThumbList.scss
+++ b/src/scss/layouts/postThumbList.scss
@ -0,0 +1,28 @@
+@import "@material/card/mdc-card";
+@import "@material/button/mdc-button";
+@import "@material/typography/mdc-typography";
+
+.demo-card {
+    width: 350px;
+    margin: 48px 0;
+}
+
+.demo-basic-with-text-over-media .demo-card__media-content {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: end;
+    align-items: flex-end;
+}
+
+.demo-card__primary {
+    padding: 1rem;
+}
+
+.demo-basic-with-text-over-media .demo-card__media-content .demo-card__subtitle,
+.demo-basic-with-text-over-media .demo-card__media-content .demo-card__title {
+    color: #fff;
+}
+
+.demo-basic-with-text-over-media .demo-card__secondary {
+    padding-top: 1rem;
+}
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@ -2,11 +2,11 @@
 * MDC varibles
 * must using before import
 */
- $mdc-theme-primary: #fcb8ab;
- $mdc-theme-secondary: #feeae6;
- $mdc-theme-on-primary: #442b2d;
- $mdc-theme-on-secondary: #442b2d;
- $mdc-theme-surface: #fedbd0;
- $mdc-theme-background: #feeae6;
- $mdc-theme-on-surface: #442c2e;
- $mdc-theme-on-background: #442c2e;
+//  $mdc-theme-primary: #fcb8ab;
+//  $mdc-theme-secondary: #feeae6;
+//  $mdc-theme-on-primary: #442b2d;
+//  $mdc-theme-on-secondary: #442b2d;
+//  $mdc-theme-surface: #fedbd0;
+//  $mdc-theme-background: #feeae6;
+//  $mdc-theme-on-surface: #442c2e;
+//  $mdc-theme-on-background: #442c2e;
--- a/src/ts/components/MDCHandler.ts
+++ b/src/ts/components/MDCHandler.ts
@ -0,0 +1,22 @@
+/**
+ * @description material-components initial
+ * @author Mashiro
+ * @since 19/11/1
+ */
+import { MDCRipple } from '@material/ripple/index'
+import { MDCTextField } from '@material/textfield'
+import { MDCTopAppBar } from '@material/top-app-bar'
+
+export default function () {
+    interface LooseObject {
+        [key: string]: any
+    }
+
+    let MDC: LooseObject = {}
+
+    const topAppBarElement = document.querySelector('.mdc-top-app-bar')
+    const topAppBar = new MDCTopAppBar(topAppBarElement)
+
+    // const textField = new MDCRipple(document.querySelector('.mdc-button'))
+    // if(textField) const textField = new MDCTextField(document.querySelector('.mdc-text-field'))
+}
--- a/src/ts/components/index.ts
+++ b/src/ts/components/index.ts
@ -1 +1 @@
-export * from './mdc';
+export * from './MDCHandler';
--- a/src/ts/components/mdc.ts
+++ b/src/ts/components/mdc.ts
@ -1,15 +0,0 @@
-/**
- * @description material-components initial
- * @author Mashiro
- * @since 19/11/1
- */
-import {MDCRipple} from '@material/ripple/index'
-import {MDCTextField} from '@material/textfield'
-import {MDCTopAppBar} from '@material/top-app-bar'
-
-// Instantiation
-const topAppBarElement = document.querySelector('.mdc-top-app-bar');
-const topAppBar = new MDCTopAppBar(topAppBarElement);
-
-//const ripple = new MDCRipple(document.querySelector('.mdc-button'))
-//const textField = new MDCTextField(document.querySelector('.mdc-text-field'))
--- a/src/ts/index.ts
+++ b/src/ts/index.ts
@ -4,12 +4,9 @@
 * @since 19/10/31
 */

-import * as components from "./components/index"
 import coverImgIni from "./modules/coverImgIni"
 import headerBarScrollHandler from "./modules/headerBarScrollHandler"
-
-//TODO: rewrite call method
-let componentsIni = components
+import MDCHandler from "./components/MDCHandler"

 window.onscroll = function () {
  headerBarScrollHandler()
@ -17,4 +14,5 @@ window.onscroll = function () {

 window.onload = function () {
  coverImgIni()
+  MDCHandler()
 }