Responsive design #2

Responsive design, mobile first (#2 commit)

src/assets/styles/mixins.less

@@ -5,3 +5,8 @@
 .fontOpenSans() {
   font-family: 'Open Sans', sans-serif;
 }
+
+.disableHighlight() {
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: transparent;
+}

src/ui/components/cancel-button.less

@@ -1,4 +1,5 @@
 @import (less, reference) '../../assets/styles/colors.less';
+@import (less, reference) "../../assets/styles/mixins.less";
 
 .cancel-button {
   border: none;
@@ -8,6 +9,7 @@
   overflow: visible;
   outline: none;
   text-decoration: none;
+  .disableHighlight();
   background: transparent;
   cursor: pointer;
 

src/ui/components/city.less

@@ -15,6 +15,7 @@
   box-sizing: border-box;
   box-shadow: 0 1/8rem 1/8rem 0 @color-shadow;
   cursor: pointer;
+  .disableHighlight();
   transition: all 0.3s ease-in-out;
 
   &:hover {

src/ui/components/new-city-card.less

@@ -16,6 +16,7 @@
   margin: 24px auto;
   box-shadow: 0 1/8rem 1/8rem 0 @color-shadow;
   cursor: pointer;
+  .disableHighlight();
   transition: all 0.3s ease-in-out;
 
   @media @tablet-above {

src/ui/components/search-city-form.js

@@ -16,7 +16,9 @@ class SearchCityForm extends Component {
 
   searchCity = (event) => {
     event.preventDefault();
-    this.props.searchCity(this.state.cityName);
+    if (this.state.cityName) {
+      this.props.searchCity(this.state.cityName);
+    }
   }
 
   render () {

src/ui/components/search-city-form.less

@@ -42,6 +42,7 @@
     padding: 5px 12px;
     color: @color-white;
     letter-spacing: 0.75px;
+    .disableHighlight();
     transition: all .3s ease-in-out;
 
     .icon {

webpack.config.js

@@ -88,6 +88,9 @@ module.exports = (env, args) => {
         template: './src/index.html',
         filename: './index.html',
         favicon: './src/assets/logo.png',
+        meta: {
+          viewport: 'width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no'
+        },
         inject: true
       }),
       new HtmlWebpackIncludeAssetsPlugin({