diff --git a/CHANGELOG.md b/CHANGELOG.md
index 31e4ff7..172ea24 100644
--- 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
index 96c280e..b1f3587 100644
--- 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
index 0d475ea..db553e0 100644
--- 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
new file mode 100644
index 0000000..2383927
--- /dev/null
+++ 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
index f42992f..9b42f71 100644
--- 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
index 5cd958a..b2d9343 100644
--- 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
index b06081b..5cdef20 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,6 +3,7 @@
Bruga Weather
+
diff --git a/src/ui/components/city.less b/src/ui/components/city.less
index c4b7bfb..8d14008 100644
--- 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
index fef5892..7afdcb8 100644
--- 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
index 2d929c5..3da375c 100644
--- 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
index b7bc125..9eca3ed 100644
--- 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
index 09eb9ce..d177def 100644
--- 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
index e3f77d8..87be1ca 100644
--- 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%;