feat(style): inline default style within the JS library

vvo · vvo · commit c5cfa075b04d · 2016-03-30T22:48:46.000+02:00
This commit moves the default styling created by @LukyVj inside the places.js library. It also uses em units so that the height, margins, borders, shadows will all be computed given the initial font-size. I removed any very demo specific styling and moved it to the _inputs.scss file. We may need to tune again of course this default styling but here is a good start.
diff --git a/.eslintrc b/.eslintrc
@@ -1,3 +1,6 @@
 {
-  "extends": "algolia"
+  "extends": "algolia",
+  "rules": {
+    "func-style": [2, "declaration", {"allowArrowFunctions": true}]
+  }
 }
diff --git a/docs/source/index.html.haml b/docs/source/index.html.haml
@@ -41,7 +41,7 @@ title: Algolia Places
 			%div.fl-right
 				-#%img{src: "images/svg/places-illustration.svg", class: "hero-illustration"}
 				<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="303" height="230" viewBox="0 0 323 230"> <title>Geosearch</title> <defs> <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="b"> <feOffset dy="6" in="SourceAlpha" result="shadowOffsetOuter1"/> <feGaussianBlur stdDeviation="6" in="shadowOffsetOuter1" result="shadowBlurOuter1"/> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/> <feOffset dy="9" in="SourceAlpha" result="shadowOffsetOuter2"/> <feGaussianBlur stdDeviation="13.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"/> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0" in="shadowBlurOuter2" result="shadowMatrixOuter2"/> <feMerge> <feMergeNode in="shadowMatrixOuter1"/> <feMergeNode in="shadowMatrixOuter2"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> <path id="a" d="M130.62 1.387c-2.643-1.54-6.92-1.54-9.547 0L2.163 71.102c-2.63 1.542-2.614 4.02.038 5.536l118.834 67.927c2.652 1.515 6.96 1.516 9.605.01l119.436-67.948c2.653-1.51 2.672-3.978.02-5.525L130.618 1.387z"/> </defs> <g transform="translate(24.132 2.347)" fill="none" fill-rule="evenodd"> <g transform="translate(1 46)"> <mask id="c" fill="#fff"> <use xlink:href="#a"/> </mask> <use stroke="#2897C5" stroke-width="4.5" fill="#FFF" filter="url(#b)" xlink:href="#a"/> <g mask="url(#c)" stroke="#2897C5" stroke-opacity=".33" stroke-width="4.147"> <path d="M29.126 91.633l26.547 14.52 6.216-14.52H29.125zM87.428 22.49L.448 72.965l6.214 4.84H67.76L87.428 22.49zM86.644 65.36l-15.855 50.9 49.7 28.772c5.993-27.148 27.824-62.706 42.803-79.673h-76.65zM178.208 50.913c5.99-4.743 11.752-8.325 16.84-10.454l-45.564-28.266h-44.17L91.5 50.914h86.708zM179.167 115.413L161.57 92.25c-8.02 11.407-17.772 31.234-21.75 46.325M215.144 49.456c-11.523 4.846-38.12 21.31-46.328 30.17l24.293 27.218 63.78-33.88-41.746-23.508z"/> </g> </g> <ellipse fill-opacity=".6" fill="#A1C2D0" cx="124.745" cy="122.421" rx="29.979" ry="11.063" id="ellipse"/> <g stroke="#8962B2" id="pin"> <path d="M157.39 34.315c0 18.546-33.825 83.958-33.825 83.958S89.74 52.86 89.74 34.315C89.74 15.768 104.885.73 123.565.73c18.68 0 33.825 15.038 33.825 33.585z" stroke-width="5.53" fill="#E6D2FC"/> <path d="M123.565 49.13c-8.008 0-14.496-6.498-14.496-14.52 0-8.017 6.487-14.52 14.495-14.52s14.496 6.503 14.496 14.52c0 8.022-6.487 14.52-14.495 14.52z" stroke-width="2.765" fill="#FFF"/> </g> </g> </svg>
-		%input{type: "text", id: "landing-demo", class: "hero-searchbar", placeholder: "Search a country, city or address…"}
+		%input{type: "text", id: "landing-demo", class: "hero-searchbar", autofocus: true, placeholder: "Search a country, city or address…"}
 
 %section
 	.container
diff --git a/docs/source/stylesheets/components/_dropdown.scss b/docs/source/stylesheets/components/_dropdown.scss
diff --git a/docs/source/stylesheets/components/_inputs.scss b/docs/source/stylesheets/components/_inputs.scss
@@ -1,10 +1,10 @@
 input {
   outline: none;
 }
-.algolia-autocomplete {
-  width: 100%;
-  position: relative;
+
+.algolia-places {
   top: 50px;
+  font-family: 'Open Sans', helvetica Neue;
 
   &:before {
     content:'Try me!';
@@ -28,48 +28,12 @@ input {
     }
   }
 }
-.algolia-autocomplete .aa-input, .algolia-autocomplete .aa-hint {
-  width: 100%;
-}
-.algolia-autocomplete .aa-hint {
-}
-.algolia-autocomplete .aa-dropdown-menu {
-  width: 100%;
-  background: #fff;
-}
-.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
-  cursor: pointer;
-  color: #000;
-}
-.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
-  background-color: #B2D7FF;
-}
-.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
-  font-weight: bold;
-  font-style: normal;
+
+.algolia-places .aa-suggestion {
+  color: #262626;
 }
-.hero-searchbar {
-  max-width: 956px;
-  display: block;
-  color: #8F94AD;
-  width: 100%;
-  height: 56px;
-  background-color: #fff;
-  border-radius: 4px;
-  border: 0;
-  padding: 6px 24px 6px 16px;
-  background:  {
-    image: url($icon-search);
-    repeat: no-repeat;
-    position: center right 15px;
-  }
-  -webkit-transition: .2s;
-  transition: .2s;
-  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-  border: solid 1px rgba(255, 255, 255, 0.5);
-  @include placeholder {
-    font-size: 16px;
-    font-family: 'Open Sans', Helvetica Neue, helvetica, sans-serif;
-  }
 
+.hero-searchbar {
+  color: #8f94ad;
+  font-family: "Raleway", Helvetica Neue, helvetica;
 }
diff --git a/docs/source/stylesheets/site.css.scss b/docs/source/stylesheets/site.css.scss
@@ -13,7 +13,6 @@
         'components/buttons',
         'components/inputs',
         'components/fonts',
-        'components/dropdown',
         'components/sidebar',
         'components/documentation';
 
diff --git a/docs/source/stylesheets/vendors/_base.scss b/docs/source/stylesheets/vendors/_base.scss
@@ -37,7 +37,3 @@ p a {
   color: #21A4D7;
   text-decoration: none;
 }
-
-
-
-
diff --git a/docs/source/stylesheets/vendors/_mixins.scss b/docs/source/stylesheets/vendors/_mixins.scss
@@ -7,8 +7,6 @@
   }
 }
 
-
-
 @mixin big-min-mq {
   @media (min-width: $bp-big){
     @content
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "babel-preset-stage-2": "^6.5.0",
     "babel-register": "^6.7.2",
     "conventional-changelog-cli": "^1.1.1",
+    "css-loader": "^0.23.1",
     "doctoc": "^1.0.0",
     "eslint": "^1.6.0",
     "eslint-config-airbnb": "^0.1.0",
@@ -42,9 +43,12 @@
     "json": "^9.0.3",
     "mocha": "^2.4.5",
     "mversion": "^1.10.1",
+    "node-sass": "^3.4.2",
     "pretty-bytes-cli": "^1.0.0",
     "raw-loader": "^0.5.1",
+    "sass-loader": "^3.2.0",
     "semver": "^5.1.0",
+    "style-loader": "^0.13.1",
     "uglify-js": "^2.6.1",
     "webpack": "^1.12.2"
   },
diff --git a/src/createHitFormatter.js b/src/createHitFormatter.js
@@ -12,7 +12,7 @@ export default function createHitFormatter({formatAutocompleteSuggestion, format
 
     // this is the value to put inside the input.value
     // autocomplete.js automatically takes hit.value as the underlying
-    // input value when a suggestion is validated
+    // input value when a suggestion is validated with enter or selected with the mouse
     formatted.value = formatInputValue({
       ...formatted,
       name: hit.locale_names.default[0]
diff --git a/src/formatAutocompleteSuggestion.js b/src/formatAutocompleteSuggestion.js
@@ -1,4 +1,3 @@
-/* eslint no-unused-vars: 0 */
 // this ^^ line can be removed, just so travis test works
 import icons from './icons.js';
 
diff --git a/src/places.css b/src/places.css
diff --git a/src/places.js b/src/places.js
@@ -6,6 +6,7 @@ import autocomplete from 'autocomplete.js';
 import createHitFormatter from './createHitFormatter.js';
 import formatInputValue from './formatInputValue.js';
 import formatAutocompleteSuggestion from './formatAutocompleteSuggestion.js';
+import './places.scss';
 
 const hitFormatter = createHitFormatter({
   formatAutocompleteSuggestion,
@@ -17,16 +18,36 @@ export default function places({
   // language = navigator.language,
   container
 }) {
-  const placesAPIClient = algoliasearch.initPlaces('places', '5c759b588c767287a3dca1e8e18232f8');
-  autocomplete(container, {debug: true, autoselect: true}, {
-    source: (query, cb) => placesAPIClient
-      .search({query})
-      .then(({hits}) => hits.slice(0, 5).map(hitFormatter))
-      .then(hits => {console.log(hits); return hits;})
-      .then(cb)
-      .catch(err => console.error(err)),
-    templates: {
-      suggestion: hit => hit.suggestion
+  const client = algoliasearch.initPlaces('6TZ2RYGYRQ', '20b9e128b7e37ff38a4e86b08477980b');
+
+  // https://github.com/algolia/autocomplete.js#options
+  const options = {
+    debug: true,
+    openOnFocus: true,
+    autoselect: true
+  };
+
+  // https://github.com/algolia/autocomplete.js#options
+  const templates = {
+    suggestion: hit => hit.suggestion
+  };
+
+  // https://github.com/algolia/autocomplete.js#sources
+  const source = (query, cb) => client
+    .search({query})
+    .then(({hits}) => hits.slice(0, 5).map(hitFormatter))
+    .then(hits => {console.log(hits); return hits;})
+    .then(cb)
+    .catch(err => console.error(err));
+
+  autocomplete(
+    container,
+    options, {
+      source,
+      templates
     }
-  });
+  );
+
+  const autocompleteContainer = container.parentNode;
+  autocompleteContainer.classList.add('algolia-places');
 }
diff --git a/src/places.scss b/src/places.scss
@@ -0,0 +1,88 @@
+$icon-search: "data:image/svg+xml;utf8,<svg width=\'22\' height=\'22\' viewBox=\'0 0 22 22\' xmlns=\'http://www.w3.org/2000/svg\'><title>search-icon copy</title><path d=\'M15.723 13.836h-.993l-.353-.34c1.233-1.433 1.975-3.295 1.975-5.32C16.352 3.66 12.692 0 8.176 0S0 3.66 0 8.176s3.66 8.176 8.176 8.176c2.025 0 3.887-.742 5.32-1.975l.34.353v.993L20.126 22 22 20.126l-6.277-6.29zm-7.547 0c-3.132 0-5.66-2.528-5.66-5.66s2.528-5.66 5.66-5.66 5.66 2.528 5.66 5.66-2.528 5.66-5.66 5.66z\' fill=\'%23A3A3A3\' fill-rule=\'evenodd\'/></svg>";
+$pale-grey: #f2f4f6;
+$greyish: #a4a4a4;
+
+// all em units are computed given a font of 16px
+// see http://pxtoem.com/ to change/add values
+.algolia-places {
+  width: 100%; // we ask the autocomplete to take the full width of his container
+
+  .aa-input {
+    border: solid 0.063em rgba(255, 255, 255, 0.5);
+    box-shadow: 0 0.063em 0.625em rgba(0, 0, 0, 0.2), 0 0.125em 0.250em 0 rgba(0, 0, 0, 0.1);
+    background: {
+      image: url($icon-search);
+      repeat: no-repeat;
+      position: center right 1em;
+    }
+  }
+
+  .aa-input, .aa-hint {
+    width: 100%;
+    height: 3.5em;
+    padding-left: 1em;
+    padding-right: 3em;
+    border-radius: 0.250em;
+  }
+
+  .aa-dropdown-menu {
+    width: 100%;
+    background: #ffffff;
+    box-shadow: 0 0.063em 0.625em rgba(0, 0, 0, 0.2), 0 0.125em 0.250em 0 rgba(0, 0, 0, 0.1);
+    border-radius: 0.250em;
+    margin-top: 0.250em;
+  }
+
+  .aa-suggestion {
+    cursor: pointer;
+    height: 2.875em;
+    line-height: 2.875em;
+    padding-left: 1.125em;
+    em {
+      font-weight: bold;
+      font-style: normal;
+    }
+
+    &:first-child {
+      border-top-left-radius: 0.250em;
+      border-top-right-radius: 0.250em;
+    }
+
+    &:last-child {
+      border-bottom-left-radius: 0.250em;
+      border-bottom-right-radius: 0.250em;
+    }
+  }
+
+  .pl-address {
+    font-size: 0.875em; // 14px when font is 16px
+    margin-left: 0.857em; // 12px when font is 14px
+    color: $greyish;
+  }
+
+  .pl-icon {
+    max-width: 0.875em;
+    max-height: 1.250em;
+    margin-right: 0.625em;
+    float: left;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+
+    svg {
+      transform: scale(0.90);
+    }
+  }
+
+  .aa-cursor {
+    background: $pale-grey;
+
+    .pl-address {
+      color: darken($greyish, 10%)
+    }
+
+    .pl-icon svg {
+      transform: scale(1)
+    }
+  }
+}
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
@@ -14,7 +14,10 @@ export default {
     loaders: [{
       test: /\.js$/, exclude: /node_modules/, loader: 'babel'
     }, {
-      test: /\.svg$/, loader: 'raw'
+      test: /\.svg$/, loader: 'raw', exclude: /node_modules/
+    }, {
+      test: /\.scss$/, exclude: /node_modules/,
+      loaders: ['style?insertAt=top', 'css', 'sass']
     }]
   },
   // when module not found, find locally first

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,6 @@`
`1`	`1`	`{`
`2`		`- "extends": "algolia"`
	`2`	`+ "extends": "algolia",`
	`3`	`+ "rules": {`
	`4`	`+ "func-style": [2, "declaration", {"allowArrowFunctions": true}]`
	`5`	`+ }`
`3`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,3 @@ p a {`
`37`	`37`	`color: #21A4D7;`
`38`	`38`	`text-decoration: none;`
`39`	`39`	`}`
`40`		`-`
`41`		`-`
`42`		`-`
`43`		`-`
Original file line number	Diff line number	Diff line change
`@@ -7,8 +7,6 @@`
`7`	`7`	`}`
`8`	`8`	`}`
`9`	`9`
`10`		`-`
`11`		`-`
`12`	`10`	`@mixin big-min-mq {`
`13`	`11`	`@media (min-width: $bp-big){`
`14`	`12`	`@content`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-/* eslint no-unused-vars: 0 */`
`2`	`1`	`// this ^^ line can be removed, just so travis test works`
`3`	`2`	`import icons from './icons.js';`
`4`	`3`