change to APIXu

README.md

@@ -4,7 +4,7 @@
 [![Coverage Status](https://coveralls.io/repos/github/farahat80/react-open-weather/badge.png?branch=master)](https://coveralls.io/github/farahat80/react-open-weather?branch=master)
 [![Code Climate](https://codeclimate.com/github/farahat80/react-open-weather/badges/gpa.svg)](https://codeclimate.com/github/farahat80/react-open-weather)
 
-React open weather is a React Component loading forecast data from [Open Weather Map](https://openweathermap.org/).
+React open weather is a React Component loading forecast data from [ApiXU](https://www.apixu.com/).
 
 Features Implemented:
 
@@ -19,7 +19,7 @@ The Component development is in progress and will contain more features in the f
 
 ### Installation
 -------------
-First you will need to register and account on open weather map website and obtain an [API key](http://openweathermap.org/appid)
+First you will need to register and account on ApiXu website and obtain an [API key](https://www.apixu.com/pricing.aspx)
 
 Next, in your project directory run:
 ```sh
@@ -77,6 +77,14 @@ require('react-open-weather/lib/css/ReactWeather.css');
     lon="11.5820"
   />
 ```
+### 3-Loading today data based on the current IP address (default)
+```html
+  <ReactWeather
+    forecast="today"  
+    apikey="YOUR_API_KEY"
+    type="auto"
+  />
+```
 
 ### 3-Loading 5 days forecast 
 ```html
@@ -100,7 +108,7 @@ require('react-open-weather/lib/css/ReactWeather.css');
 ## Props Options
 | Props    | Options               | Default | Description |
 |----------|-----------------------|---------|-------------|
-| **type**     | 'city', 'geo'         | geo    | Determine the data should be loaded by city name or longitude and latitude |
+| **type**     | 'city', 'geo', 'auto' | auto    | Determine the data should be loaded by city name or longitude and latitude |
 | **city**     |                       |         | Name of the city to show forecast for, must be provided if the type='city'|
 | **lon**      |                       |         | Longitude value, must be provided if the type='geo' |
 | **lat**      |                       |         | latitude value, must be provided if the type='geo'  |

docs/_includes/head.html

@@ -9,10 +9,10 @@
   <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
   <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css" type="text/css"/>
-  <link rel="stylesheet" href="{{site.baseurl}}/assets/css/app.css">
+  <link rel="stylesheet" href="{{site.baseurl}}/assets/css/component.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
-  <script src="{{site.baseurl}}/assets/js/app.js"></script>
+  <script src="{{site.baseurl}}/assets/js/component.js"></script>
 </head> 

docs/assets/css/app.css → docs/assets/css/component.css

@@ -36,7 +36,11 @@
   .rw-main .rw-today .date {
     color: #B5DEF4; }
   .rw-main .rw-today .current {
-    font-size: 50px; }
+    font-size: 45px; }
+  .rw-main .rw-today .range {
+    color: #B5DEF4;
+    font-size: 12px;
+    margin: 0 0 5px 2px; }
   .rw-main .rw-today .desc {
     color: #B5DEF4;
     font-size: 16px; }
@@ -67,11 +71,8 @@
     font-size: 11px;
     font-weight: bold; }
   .rw-box-days .rw-desc {
-    margin-top: 20px;
+    margin: 10px 0 10px 0;
     font-size: 12px; }
-  .rw-box-days .rw-current {
-    margin-top: 10px;
-    font-size: 20px; }
   .rw-box-days .rw-range {
     font-size: 11px; }
   .rw-box-days .rw-info {