IE11 fixes

Brugarolas · Jan 18, 2019 · e685bb5 · e685bb5
1 parent 6d510cb
commit e685bb5
Show file tree

Hide file tree

Showing 13 changed files with 23 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,8 @@ Smoother start up
 Animation code simplified
 Fixed searcher animations
 Error handling
+Style fixes in older browsers
+Fixes IE11
 
 ## v1.3.0
 Animations and UX improvements in searcher

diff --git a/package.json b/package.json
@@ -24,7 +24,8 @@
     "reselect": "^4.0.0",
     "react-flip-move": "^3.0.3",
     "@fortawesome/fontawesome-free": "^5.6.3",
-    "@andres-brugarolas/swing": "^3.1.4"
+    "@andres-brugarolas/swing": "^3.1.4",
+    "unfetch": "^4.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",

diff --git a/src/api/time/timezone-api.js b/src/api/time/timezone-api.js
@@ -1,3 +1,5 @@
+import fetch from '@/api/utils/fetch.js';
+
 const BASE_URL = TIMEZONE_URL || 'http://localhost/timezone';
 
 /* API Calls */

diff --git a/src/api/utils/fetch.js b/src/api/utils/fetch.js
@@ -0,0 +1,5 @@
+import unfetch from 'unfetch';
+
+const fetch = window.fetch || unfetch;
+
+export default fetch;
diff --git a/src/api/weather/cities.js b/src/api/weather/cities.js
@@ -1,4 +1,5 @@
 import Adapt from './adapt.js';
+import fetch from '@/api/utils/fetch.js';
 
 const API_URL = 'https://openweathermap.org/data/2.5/find';
 

diff --git a/src/api/weather/openweather.js b/src/api/weather/openweather.js
@@ -1,4 +1,5 @@
 import Adapt from './adapt.js';
+import fetch from '@/api/utils/fetch.js';
 
 const API_URL = 'https://api.openweathermap.org/data/2.5/';
 

diff --git a/src/index.html b/src/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <title>Bruga Weather</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   </head>
   <body>
     <div id="home"></div>

diff --git a/src/ui/components/city.less b/src/ui/components/city.less
@@ -22,7 +22,7 @@
     padding: 10px 45px 10px 25px;
   }
 
-  &::after {
+  &::after { // Old browsers fix
     content: "";
     clear: both;
     display: table;
@@ -94,6 +94,7 @@
     }
     .metrics {
       .fontRoboto();
+      width: 21px; // IE11 fix
       font-size: 20px;
       font-weight: 300;
       position: absolute;

diff --git a/src/ui/components/main.less b/src/ui/components/main.less
@@ -2,6 +2,8 @@
 @import (less, reference) "../../assets/styles/mixins.less";
 
 .main {
+  display: block; // IE11 fix
+  width: 100%; // IE11 fix
   .fontRoboto();
   text-align: center;
   color: @color-text;

diff --git a/src/ui/components/new-city-card.less b/src/ui/components/new-city-card.less
@@ -51,6 +51,7 @@
       top: -46px;
       left: calc(50% - 174px/2);
       z-index: 3;
+      pointer-events: none;
 
       @media @tablet-above {
         width: 200px;

diff --git a/src/ui/components/search-city-form.less b/src/ui/components/search-city-form.less
@@ -4,6 +4,7 @@
 .search-form {
   .fontOpenSans();
   width: 100%;
+  overflow: hidden; // Edge fix
 
   .title {
     margin: 5px 0 25px 0;

diff --git a/src/ui/components/weather.less b/src/ui/components/weather.less
@@ -110,12 +110,14 @@
 
     .metrics {
       .fontRoboto();
+      width: 17px; // IE11 fix
       font-size: 16px;
       font-weight: 300;
       position: absolute;
       top: 14px;
 
       @media @tablet-above {
+        width: 25px; // IE11 fix
         font-size: 24px;
         top: 18px;
       }

diff --git a/src/ui/containers/modal/modal-overlay.less b/src/ui/containers/modal/modal-overlay.less
@@ -1,6 +1,7 @@
 .modal-container {
   display: none;
   position: fixed;
+  background-color: rgba(34, 34, 34, 0.55); // IE11 fix
   background-color: #2228;
   width: 100%;
   height: 100%;