diff --git a/.gitignore b/.gitignore index cb4b03c..729e7be 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules dist/ *.log +secrets.json diff --git a/package.json b/package.json index 2a35cf3..d1187d0 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ }, "homepage": "https://github.com/keokilee/hi5-redemption#readme", "dependencies": { + "google-maps": "^3.1.0", "vue": "^1.0.13", "vuex": "^0.2.0" }, @@ -49,6 +50,7 @@ "phantomjs": "^1.9.19", "postcss-browser-reporter": "^0.4.0", "postcss-cssnext": "^2.4.0", + "postcss-font-magician": "^1.4.0", "postcss-reporter": "^1.3.0", "postcss-url": "^5.0.2", "rimraf": "^2.5.0", diff --git a/public/index.html b/public/index.html index 5162cbf..864daff 100644 --- a/public/index.html +++ b/public/index.html @@ -3,8 +3,6 @@ HI5 Redemption Centers - - diff --git a/secrets.json.example b/secrets.json.example new file mode 100644 index 0000000..d8e18db --- /dev/null +++ b/secrets.json.example @@ -0,0 +1,5 @@ +{ + "development": { + "GOOGLE_MAPS_API_KEY": "" + } +} diff --git a/src/components/Filters.vue b/src/components/Filters.vue index e309429..e24723b 100644 --- a/src/components/Filters.vue +++ b/src/components/Filters.vue @@ -20,22 +20,19 @@

near - - - - +

@@ -80,56 +78,4 @@ export default { font-size: inherit; border-radius: 0; } - -.search { - position: relative; - margin: 25px 10px 25px; -} - -.search input { - font-size: 16px; - padding-bottom: 5px; - display: inline-block; - width: calc(100% - 60px); - border: none; - border-bottom: 1px solid #757575; -} - -.search input:focus { - outline: none; -} - -.search input:focus ~ label { - top: -20px; - font-size: 0.9rem; - color: #2979FF; -} - -.search input:focus ~ .bar:before, .search input:focus ~ .bar:after { - width: 50%; -} - -.bar { - position: relative; - display: block; - width: calc(100% - 60px); -} - -.bar:before, .bar:after { - content: ''; - height: 2px; - width: 0; - bottom: 4px; - position: absolute; - background: #2979FF; - transition: 0.2s ease all; -} - -.bar:before { - left: calc(50% + 46px); -} - -.bar:after { - right: calc(50% - 46px); -} diff --git a/src/components/Search.vue b/src/components/Search.vue new file mode 100644 index 0000000..54458f3 --- /dev/null +++ b/src/components/Search.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/src/services/google_maps.js b/src/services/google_maps.js new file mode 100644 index 0000000..d40b029 --- /dev/null +++ b/src/services/google_maps.js @@ -0,0 +1,7 @@ +/* global __MAPS_KEY__:false */ +import MapsLoader from 'google-maps' + +MapsLoader.KEY = __MAPS_KEY__ +MapsLoader.LIBRARIES = ['places'] + +export default MapsLoader diff --git a/webpack.config.js b/webpack.config.js index 20c28a0..9268a9e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,4 +1,5 @@ const webpack = require('webpack') +const secrets = require('./secrets.json') module.exports = { devServer: { @@ -38,7 +39,8 @@ module.exports = { }, plugins: [ new webpack.DefinePlugin({ - __DEBUG__: true + __DEBUG__: true, + __MAPS_KEY__: JSON.stringify(secrets.development.GOOGLE_MAPS_API_KEY) }) ], output: { @@ -56,6 +58,7 @@ module.exports = { loaders: { js: 'babel!eslint', postcss: [ + require('postcss-font-magician')(), require('postcss-url')(), require('postcss-cssnext')(), require('postcss-browser-reporter')(),