refactor(demo): un-clutter and restyle demo as per discussion

stasson · Nov 28, 2017 · a60f479 · a60f479
1 parent 467272a
commit a60f479
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 70 deletions.
diff --git a/components/button/demo.vue b/components/button/demo.vue
@@ -1,18 +1,17 @@
 <template>
   <div class="mdc-demo mdc-demo--container">
     <div>
+
       <div class="button-line">
         <mdc-button >baseline</mdc-button>
         <mdc-button compact>compact</mdc-button>
         <mdc-button dense>dense</mdc-button>
-        <mdc-button><mdc-icon icon="favorite"></mdc-icon>icon</mdc-button>
       </div>  
 
       <div class="button-line">
         <mdc-button raised>baseline</mdc-button>
         <mdc-button raised compact>compact</mdc-button>
         <mdc-button raised dense>dense</mdc-button>
-        <mdc-button raised><mdc-icon class="material-icons">favorite</mdc-icon>icon</mdc-button>
       </div>  
     </div>
   </div>

diff --git a/components/card/demo.vue b/components/card/demo.vue
@@ -1,33 +1,33 @@
 <template>
   <div class="mdc-demo">
     <mdc-card>
-      <mdc-card-media height=100 :src="card" size="cover" position="center">
-        <mdc-card-header title="Vue.js" subtitle="is awesome" class="mdc-theme--dark"></mdc-card-header>
+      <mdc-card-media height=150 :src="card" size="cover" position="center">
       </mdc-card-media>
-      <mdc-card-horizontal>
-        <mdc-card-text>
-          Vue (pronounced /vjuː/, like <strong>view</strong>) is a <strong>progressive framework</strong> for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with <a href="single-file-components.html">modern tooling</a> and <a href="https://github.com/vuejs/awesome-vue#components--libraries" target="_blank" rel="external">supporting libraries</a>.
-        </mdc-card-text>
-          <mdc-card-img :src="tile" mult=1.5 ></mdc-card-img>
-      </mdc-card-horizontal>
+      <mdc-card-header title="Title goes here" subtitle="subtitle here" ></mdc-card-header>
       <mdc-card-actions>
-        <mdc-card-action-button href="https://vuejs.org/v2/guide/" >Documentation</mdc-card-action-button>
-        <mdc-card-action-button href="https://github.com/vuejs" >Github</mdc-card-action-button>
+        <mdc-card-action-button>ACTION 1</mdc-card-action-button>
+        <mdc-card-action-button>ACTION 2</mdc-card-action-button>
       </mdc-card-actions>
     </mdc-card>
   </div>
 </template>
 
 <script>
-import card from 'demo/assets/vue-banner.png'
-import tile from 'demo/assets/vue-awesome.png'
+import card from 'demo/assets/card-16-9.jpg'
 
 export default {
   data () {
     return {
-      tile, card
+      card
     }
   }
 }
 </script>
-
+
+<style>
+.mdc-demo .mdc-card {
+  background-color: white;
+  width: 320px;
+  margin: 32px auto;
+}
+</style>
diff --git a/components/grid-list/demo.vue b/components/grid-list/demo.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import tile from 'demo/assets/vue-awesome.png'
+import tile from 'demo/assets/tile-1-1.jpg'
 
 export default {
   data () {

diff --git a/components/layout-app/demo.html b/components/layout-app/demo.html
@@ -14,7 +14,8 @@
 
             .card-demo {
                 max-width: 80%;
-                margin: 48px;
+                margin: 32px auto;
+                background-color: white;
             }
         </style>
     </head>

diff --git a/components/layout-app/demo.vue b/components/layout-app/demo.vue
@@ -1,6 +1,6 @@
 <template>
 <iframe class="mdc-demo mdc-demo--fluid" scrolling='no' title='vue-mdc-adapter App Layout' 
-  :src="iframe" width="400" height="400" frameborder='no' 
+  :src="iframe" width="400" height="350" frameborder='no' 
   allowtransparency='false' allowfullscreen='false'>
 </iframe>
 </template>

diff --git a/components/list/demo.vue b/components/list/demo.vue
@@ -25,15 +25,15 @@
         <mdc-list dense bordered >
           <mdc-list-item>
             <i slot="start-detail" class="material-icons">favorite_border</i>
-            With start details
+            start details
           </mdc-list-item>
           <mdc-list-item>
-            With end details
+            end details
             <i slot="end-detail" class="material-icons">star_border</i>
           </mdc-list-item>
           <mdc-list-item>
             <i slot="start-detail" class="material-icons">favorite_border</i>
-            With both details
+            both details
             <i slot="end-detail" class="material-icons">star_border</i>
           </mdc-list-item>
         </mdc-list>

diff --git a/components/textfield/demo.vue b/components/textfield/demo.vue
@@ -1,25 +1,16 @@
 <template>
   <div class="mdc-demo mdc-demo--container">
     <mdc-layout-grid>
-      <mdc-layout-cell span=8>
+      <mdc-layout-cell span=6>
         <mdc-textfield :disabled="!enabled" v-model="textField"
           label="Simple textfield"></mdc-textfield>
         <mdc-textfield :disabled="!enabled" v-model="textField"
           label="with help text"
           helptext="Help text..."></mdc-textfield>
       </mdc-layout-cell>
-      <mdc-layout-cell  span=4>
-        <mdc-checkbox :label="enabled?'enabled':'disabled'" v-model="enabled"></mdc-checkbox>
-      </mdc-layout-cell>
-      <mdc-layout-cell  span=12>
+      <mdc-layout-cell  span=6>
         <p><mdc-textfield :disabled="!enabled" v-model="textField" multiline
             label="multiline" ></mdc-textfield></p>
-        <p><mdc-textfield :disabled="!enabled" v-model="textField" fullwidth
-            label="fullwidth"
-            helptext="Help text..." ></mdc-textfield></p>
-        <p><mdc-textfield :disabled="!enabled" v-model="textField" fullwidth multiline
-            label="fullwidth multiline"
-            helptext="Help text..." ></mdc-textfield></p>
       </mdc-layout-cell>
     </mdc-layout-grid>
   </div>

diff --git a/demo/component.vue b/demo/component.vue
@@ -1,6 +1,8 @@
 <template>
   <section>
-    <mdc-display v-if="title" >{{title}}</mdc-display>
+    <div class="demo-icon" :style="'background-image: url('+icon+')'">
+    </div>
+    <mdc-display typo="display1" v-if="title" >{{title}}</mdc-display>
     <article class="demo-article" v-if="demo" >
       <component :is="demo" />
     </article>
@@ -17,6 +19,10 @@ const titles = links.reduce((result, link) => {
   return {...result,  ...{ [link.id]: link.title}}
 },{})
 
+const icons = links.reduce((result, link) => {
+  return {...result,  ...{ [link.id]: link.icon}}
+},{})
+
 export default {
   components: {
       'button-readme': () => import('../components/button/README.md'),
@@ -79,6 +85,9 @@ export default {
     },
     title () {
       return titles[this.$route.params.id] 
+    },
+    icon () {
+      return icons[this.$route.params.id] 
     }
   },
   beforeRouteUpdate (to, from, next) {

diff --git a/demo/drawer.vue b/demo/drawer.vue
@@ -3,23 +3,15 @@
     <mdc-drawer-header temporary></mdc-drawer-header>
     <mdc-drawer-list dense>
 
-      <mdc-drawer-item @click="$router.push('/')">
-      <mdc-icon slot='start-detail' icon="home"  style="color:rgba(0, 0, 0, 0.87)"/>
-      Home
-      </mdc-drawer-item>
-      <mdc-drawer-item @click="$router.push('/docs/getting-started')">
-      <mdc-icon slot='start-detail' icon="power_setting_new" style="color:rgba(0, 0, 0, 0.87)" />
-      Getting Started</mdc-drawer-item>
+      <mdc-drawer-item @click="$router.push('/')"
+      >Home</mdc-drawer-item>
+      <mdc-drawer-item @click="$router.push('/docs/getting-started')"
+      >Getting Started</mdc-drawer-item>
 
       <mdc-drawer-divider />
-
-      <mdc-drawer-item v-for="link in links" :key="link.id"
-        @click="$router.push(link.to)"
-      >
-        <img slot="start-detail" :src="link.icon" style="color:rgba(0, 0, 0, 0.54)" />
-        {{link.name}}
-      </mdc-drawer-item>
-
+        <mdc-drawer-item v-for="link in links" :key="link.id"
+          @click="$router.push(link.to)"
+        >{{link.name}}</mdc-drawer-item>
     </mdc-drawer-list>
   </mdc-drawer>
 </template>

diff --git a/demo/styles/demo.scss b/demo/styles/demo.scss
@@ -15,12 +15,28 @@
 }
 
 .content {
-  padding: 8px 16px;
+  padding: 80px 16px;
   margin:16px auto 16px auto;
   max-width : 800px;
   min-width : 250px;
 }
 
+.demo-icon {
+  content: "";
+  display: block;
+  width: 96px;
+  height: 96px;
+  margin-bottom: 24px;
+  background-position-x: 50%;
+  background-position-y: center;
+  background-size: 100%;
+  /* background-repeat-x: initial;
+  background-repeat-y: initial;
+  background-attachment: initial;
+  background-origin: initial;
+  background-clip: initial;
+  background-color: initial; */
+}
 .demo-article {
   display:flex;
   justify-content: flex-start;
@@ -31,23 +47,18 @@
 
   .mdc-demo {
     flex: 1 1 auto;
-    background-color: #FAFAFA
+    background-color: #f2f2f2
   }
 
   .mdc-demo--container {
-    @include mdc-elevation(4);
+    @include mdc-elevation(0);
     min-height: 100px;
     min-width: 200px;
     padding: 48px;
     display:flex;
     justify-content: center;
     align-items: center;
     }
-
-  .mdc-demo--fluid {
-    @include mdc-elevation(4);
-  }
-
 }
 
 .doc-article {

diff --git a/demo/toolbar.vue b/demo/toolbar.vue
@@ -6,15 +6,6 @@
         <mdc-toolbar-title @click="$router.push('/')">vue-mdc-adapter</mdc-toolbar-title>
       </mdc-toolbar-section>
       <mdc-toolbar-section shrink-to-fit align-end>
-        <mdc-toolbar-icon href="https://material.io/components/web/"
-          target="_blank">
-          <img :src="mdcLogo" width="32px"/>
-        </mdc-toolbar-icon>
-        <mdc-toolbar-icon href="https://vuejs.org/v2/guide/"
-          target="_blank"
-          class="vue-avatar">
-          <img  :src="vueLogo" width="32px"/>
-        </mdc-toolbar-icon>
         <mdc-toolbar-icon href="https://github.com/stasson/vue-mdc-adapter"
           target="_blank">
           <img :src="githubLogo" />
@@ -27,15 +18,11 @@
 
 <script>
 
-import mdcLogo from './assets/mdc-logo.svg'
-import vueLogo from './assets/vue-logo.png'
 import githubLogo from './assets/github-logo.svg'
 
 export default {
   data () {
     return {
-      mdcLogo,
-      vueLogo,
       githubLogo
     }
   }