Fixes and docs update

* Removed sass from styles (now using pure css) * Updated documentation * Added GA
shentao · May 26, 2016 · 1eb2207 · 1eb2207
1 parent c709a36
commit 1eb2207
Show file tree

Hide file tree

Showing 9 changed files with 769 additions and 344 deletions.
diff --git a/index.html b/index.html
@@ -19,5 +19,16 @@
     <app></app>
     <!-- built files will be auto injected -->
     <script type="text/javascript" src="static/prism.js"></script>
+    <script>
+      /*eslint-disable */
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-78373326-1', 'auto');
+      ga('send', 'pageview');
+      /*eslint-enable */
+    </script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-multiselect",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Multiselect component for vue.js",
   "author": "Damian Dulisz <damian.dulisz@monterail.com>",
   "private": false,

diff --git a/src/App.vue b/src/App.vue
@@ -2,10 +2,10 @@
 div
   section.start
     .center-vertically
-      h1
+      h1.typo__h1
         img.logo(src="./assets/logo.png")
         | Vue-multiselect
-      h2 The most complete selecting solution for
+      h3.typo__h3 The most complete selecting solution for
         = ' '
         a.typo__link(href="http://vuejs.org" target="_BLANK") Vue.js
 
@@ -23,29 +23,26 @@ div
               :limit="3"
               select-label="Enter to select"
             )
-            .grid__row
+            .grid__row.start__list
               .grid__column.grid__unit--md-6.list
                 ul.list__ul
-                  li.typo__li Single select
-                  li.typo__li Multiple select
+                  li.typo__li Single / multi select
                   li.typo__li Dropdowns
-                  li.typo__li Search
-                  li.typo__li Mixins
-                  li.typo__li Custom components
+                  li.typo__li Searchable
+                  li.typo__li Custom components with Mixins
               .grid__column.grid__unit--md-6.list
                 ul.list__ul
                   li.typo__li Vuex support
                   li.typo__li Async options
-                  li.typo__li Fully tested
-                  li.typo__li Fully configurable
+                  li.typo__li Configurable
+                  li.typo__li +90% test coverage
                   li.typo__li No dependencies
-                  li.typo__li And more...
 
       .grid__row.grid__row--centered
-        .grid__column.grid__unit--md-6.utils--center
-          .button__group
-            a.button.button--secondary.button--large(href="https://github.com/monterail/vue-multiselect" target="_BLANK") View project on Github
-            a.button.button--large(href="#getting-started") Getting started & examples
+        .grid__column.utils--center
+          //- .button__group
+          a.button.button--large.button--secondary.button--github(href="https://github.com/monterail/vue-multiselect" target="_BLANK") View on GitHub
+          a.button.button--large(href="#getting-started") Getting started & examples
 
   .grid__row
     .grid__column
@@ -557,12 +554,55 @@ div
                   }
                 }
 
+                // Multiselect.vue
+                //
+                props: {
+                  /**
+                   * String to show when pointing to an option
+                   * @default 'Press enter to select'
+                   * @type {String}
+                   */
+                  selectLabel: {
+                    type: String,
+                    default: 'Press enter to select'
+                  },
+                  /**
+                   * String to show next to selected option
+                   * @default 'Selected'
+                   * @type {String}
+                  */
+                  selectedLabel: {
+                    type: String,
+                    default: 'Selected'
+                  },
+                  /**
+                   * String to show when pointing to an alredy selected option
+                   * @default 'Press enter to remove'
+                   * @type {String}
+                  */
+                  deselectLabel: {
+                    type: String,
+                    default: 'Press enter to remove'
+                  },
+                  /**
+                   * Decide whether to show pointer labels
+                   * @default true
+                   * @type {Boolean}
+                  */
+                  showLabels: {
+                    type: Boolean,
+                    default: true
+                  }
+                }
+
       section.utils--center
         hr.typo__hr
         h4.typo__h4 Created by Damian Dulisz
+          = ' '
           strong
             a.typo__link(href="https://twitter.com/DamianDulisz" target="_BLANK")  @DamianDulisz
         h4.typo__h4 With love from
+          = ' '
           strong
             a.typo__link.monterail-link(href="http://monterail.com" target="_BLANK")  Monterail
         a(href="http://monterail.com" target="_BLANK")
@@ -655,26 +695,39 @@ $multiselect-background: #000;
   .multiselect__tags {
     border-color: $error-color !important;
   }
-
-}
-
-html {
-  height: 100%;
 }
 
 body {
-  height: 100%;
   background: #fafafa;
   color: #35495E;
-  text-align: center;
   font-family: 'Lato', Helvetica, sans-serif;
   text-decoration: none;
 }
 
 .start {
-  min-height: 100vh;
+  text-align: center;
   display: block;
-  background: linear-gradient(to left bottom, #C1C6FF 0%, #E7FFEB 100%) fixed;
+  background: linear-gradient(to left bottom, #C1D6FF 0%, #E0FFE5 100%);
+
+  .typo__h1 {
+    padding-top: rem(40px)
+  }
+
+  .typo__h3 {
+    padding: rem(20px 0)
+  }
+
+  @media #{$medium-up} {
+    min-height: 100vh;
+  }
+
+  .button {
+    margin-bottom: rem(24px);
+  }
+}
+
+.start__list {
+  padding-top: rem(30px)
 }
 
 .docs {
@@ -683,32 +736,29 @@ body {
 }
 
 .center-vertically {
-  position: absolute;
-  height: 600px;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
+  position: relative;
+
+  @media #{$medium-up} {
+    position: absolute;
+    height: 600px;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
 }
 
 .multiselect-example__container {
   margin: 0 auto 60px;
 }
 
-h1 {
-  font-size: 48px;
-  vertical-align: middle;
-  line-height: 40px;
-}
-
 .button {
   margin-right: rem(20px)
 }
 
 .logo {
-  width: 70px;
-  height: 70px;
-  margin-right: 10px;
+  height: rem(70px);
+  margin-right: rem(20px);
   vertical-align: middle;
   display: inline-block;
 }
@@ -722,4 +772,15 @@ h1 {
 .monterail-link {
   color: #D20C03
 }
+
+.button--github {
+  padding-left: rem(60px);
+
+  &:before {
+    content: url('./assets/github.svg');
+    left: rem(25px);
+    position: absolute;
+  }
+}
+
 </style>
diff --git a/src/assets/base/_global.sass b/src/assets/base/_global.sass
@@ -22,11 +22,11 @@ $global-radius: 5px
 // global
 $global-font-size: 16px
 $global-font: 'Lato', sans-serif
-$global-font-secondary: 'Merriweather', serif
+$global-font-secondary: 'Lato', sans-serif
 $global-font-weight-light: 300
-$global-font-weight: 400
+$global-font-weight: 300
 $global-font-weight-bold: 700
-$global-font-weight-black: 900
+$global-font-weight-black: 700
 $global-font-color: $secondary-color
 $global-font-inverted: #fff
 $global-background: #fff

diff --git a/src/assets/base/_typo.sass b/src/assets/base/_typo.sass
@@ -1,14 +1,14 @@
-@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900|Merriweather+Sans:400,700,400italic')
+@import url('https://fonts.googleapis.com/css?family=Lato:400,700')
 
 // config
 $header-line-height: 1.2
 $header-color: $secondary-color
 
 $header-h1-family: $global-font
-$header-h1-size-ratio-lg: 3 // 48px
+$header-h1-size-ratio-lg: 3.75 // 48px
 $header-h1-size-ratio-md: 2.5 // 40px
 $header-h1-size-ratio-sm: 2 // 32px
-$header-h1-weight: $global-font-weight-black
+$header-h1-weight: $global-font-weight-bold
 
 $header-h2-family: $global-font
 $header-h2-size-ratio-lg: 2.25 // 36px

diff --git a/src/assets/components/_lists.sass b/src/assets/components/_lists.sass
@@ -1,7 +1,7 @@
 .list
   font:
     family: $global-font
-    size: rem(20px)
+    size: rem(18px)
   color: $secondary-color
   letter-spacing: 0.4px
   line-height: 32px
@@ -17,8 +17,6 @@
   letter-spacing: 0.4px
   margin: rem($global-v-gutter 0 10px)
 
-.list__element
-
 .list__link
   color: $secondary-color
   text-decoration: none
@@ -51,8 +49,7 @@
 
 .list__ul,
 .list__ol
-  margin-left: rem(30px)
-  margin-bottom: rem($global-font-size)
+  margin: rem(0 0 0 30px)
   padding: 0
   line-height: 1.8
   font-weight: $global-font-weight

diff --git a/src/assets/github.svg b/src/assets/github.svg