auto commit 11/03/2019 Sun

index.html

@@ -46,6 +46,7 @@
       <aside class="side-bar-left">left</aside>
       <section class="main-center">
         <div class="post-list">
+          <!--post thumb 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"
@@ -78,7 +79,26 @@
               </div>
             </div>
           </div>
+
+          <div class="user-info mdc-text-field mdc-text-field--outlined">
+            <input type="text" id="tf-outlined" class="mdc-text-field__input">
+            <div class="mdc-notched-outline">
+              <div class="mdc-notched-outline__leading"></div>
+              <div class="mdc-notched-outline__notch">
+                <label for="tf-outlined" class="mdc-floating-label">Your Name</label>
+              </div>
+              <div class="mdc-notched-outline__trailing"></div>
+            </div>
+          </div>
+
+          <button class="commit-button mdc-button mdc-button--outlined">
+            <span class="mdc-button__label">BuiBuiBui~</span>
+          </button>
+          <button class="mdc-button mdc-button--unelevated">Learn More</button>
+
+
         </div>
+        <!--post-list end-->
       </section>
       <aside class="side-bar-right">right</aside>
     </div>

package-lock.json

@@ -1375,8 +1375,8 @@
     },
     "@material/textfield": {
       "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@material/textfield/-/textfield-3.2.0.tgz",
-      "integrity": "sha512-xPWDkTzurMOxvH0+DsenzboF7dFoUeLcbqX/9vyhWe3aPlO6ZWFNn3lAmYN24ElqR5FEr5zXNYfeIQ4JLT5mYw==",
+      "resolved": "https://registry.npm.taobao.org/@material/textfield/download/@material/textfield-3.2.0.tgz",
+      "integrity": "sha1-xCcmAfmlfyb9f86LMIml1dZZWtE=",
       "requires": {
         "@material/animation": "^3.1.0",
         "@material/base": "^3.1.0",

package.json

@@ -10,6 +10,7 @@
     "@material/layout-grid": "^3.1.0",
     "@material/line-ripple": "^3.1.0",
     "@material/ripple": "^3.2.0",
+    "@material/textfield": "^3.2.0",
     "@material/theme": "^3.1.0",
     "css-loader": "^3.2.0",
     "extract-loader": "^3.1.0",
@@ -35,8 +36,10 @@
     "uglifyjs-webpack-plugin": "^2.2.0"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test_dafault": "echo \"Error: no test specified\" && exit 1",
+    "test": "rm -rf dist && mkdir dist",
     "start": "webpack-dev-server",
+    "dev": "webpack-dev-server",
     "build": "webpack",
     "clean": "rm dist/*"
   },

src/scss/components/mdc.scss

@@ -1,3 +1 @@
-@import "@material/layout-grid/mdc-layout-grid";
-@import "@material/button/mdc-button";
 @import "@material/textfield/mdc-text-field";

src/scss/index.scss

@@ -1,7 +1,8 @@
 @import "./variables.scss";
 
 @import "./components/normalize.scss";
-//@import "./components/mdc.scss";
+
+@import "./components/mdc.scss"; //test
 
 @import "./layouts/header.scss";
 @import "./layouts/coverImage.scss";

src/scss/layouts/pageContent.scss

@@ -15,7 +15,7 @@
     .main-center {
         height: 100%;
         width: 800px;
-        background: yellowgreen;
+        background: #9acd3220;
     }
 
     .side-bar-left {

src/scss/variables.scss

@@ -1,12 +1,8 @@
 /*
  * MDC varibles
- * must using before import
+ * must 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;

src/ts/components/MDCHandler.ts

@@ -3,20 +3,20 @@
  * @author Mashiro
  * @since 19/11/1
  */
-import { MDCRipple } from '@material/ripple/index'
+import { MDCRipple } from '@material/ripple'
 import { MDCTextField } from '@material/textfield'
 import { MDCTopAppBar } from '@material/top-app-bar'
 
 export default function () {
-    interface LooseObject {
-        [key: string]: any
-    }
+    // const textField = new MDCTextField(document.querySelector('.mdc-text-field'))
+    
+    //const ripple = new MDCRipple(document.querySelector('.mdc-button'))
+    MDCRipple.attachTo(document.querySelector('.demo-card__primary-action'))
+    MDCRipple.attachTo(document.querySelector('.mdc-button'))
+    
+    // const topAppBar = new MDCTopAppBar(document.querySelector('.mdc-top-app-bar'))
 
-    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'))
+    const textField = [].map.call(document.querySelectorAll('.mdc-text-field'), function (el) {
+        return new MDCTextField(el)
+    })
 }

src/ts/components/index.ts

@@ -1 +0,0 @@
-export * from './MDCHandler';