changing layout

farahat80 · May 17, 2017 · acf3904 · acf3904
1 parent d611971
commit acf3904
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -6,6 +6,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css" type="text/css"/>
 </head>
 <body>
-<div id="root"></div>
+<div style="margin:0 auto;width:600px">
+  <div id="root"></div>
+</div>
 </body>
 </html>
diff --git a/src/css/react-weather.scss b/src/css/react-weather.scss
@@ -3,17 +3,52 @@
 .rw-box {
   font-family: $rw-box-font;
   color:$rw-text-color;
-  text-align: center;
   width: $rw-box-width;
   height:$rw-box-height;
   background-color: $rw-box-bg;
-  padding:20px;
+  display: flex;
   h2{
-    margin:0 0 15px 0;
+    margin:0 0 10px 0;
+    font-weight: 300;
+    font-size: x-large;
+    letter-spacing: 2px;
+  }
+  .hr{
+    width:100%;
+    height: 0;
+    border-bottom:solid 1px #AACBE6;
+    margin:10px 0;
   }
   p{
     margin:0;
   }
+  .rw-box-left{
+    padding:30px;
+    width:60%;
+
+  }
+  .rw-box-right{
+    background-color: #3CC0FE;
+    width:40%;
+    text-align: center;
+    i{
+      font-size:100px;
+    }
+  }
+  .rw-today{
+    .date{
+      font-size:13px;
+    }
+    .current{
+      font-size:50px;
+    }
+    .desc{
+      color:#D2E9FA;
+      i{
+        color:#D2E9FA;
+      }
+    }
+  }
   .rw-container{
     display: flex;
     .rw-today{

diff --git a/src/css/variables.scss b/src/css/variables.scss
@@ -1,6 +1,6 @@
 $rw-box-font:    Helvetica, sans-serif;
 $rw-box-width:100%;
 $rw-box-height: 100%;
-$rw-box-bg: #428bca;
+$rw-box-bg: #27A5FD;
 $rw-text-color: #fff;
 $rw-icon-size: 45px;
diff --git a/src/js/ReactWeather.js b/src/js/ReactWeather.js
@@ -35,11 +35,32 @@ class ReactWeather extends React.Component {
     const units = utils.getUnits(this.props.unit);
     if(data){
       const days = data.days;
+      const today = days[0];
+      const todayIcon = utils.getIcon(today.weather.icon);
       return (
         <div className="rw-box">
-          <h2>{data.city.name}</h2>
+          <div className="rw-box-left">
+            <h2>{data.city.name}</h2>
+            <div className="rw-today">
+              <div className="date">{today.date}</div>
+              <div className="hr"></div>
+              <div className="current">{today.temprature.current} {units.temp}</div>
+              <div className="desc"><i className={`wicon wi ${todayIcon}`}></i> {today.weather.description}</div>
+              <div className="hr"></div>
+              <div className="info">
+                <div>Wind Speed: <b>{today.wind.speed}</b> {units.speed}</div>
+                <div>Humidity: <b>{today.humidity}</b> %</div>
+              </div>
+            </div>
+
+
+
+          </div>
+          <div className="rw-box-right">
+            <i className={`wicon wi ${todayIcon}`}></i>
+          </div>
           <div className="rw-container">
-          {
+          {/*{
             days.map(function(day, i){
               const iconCls = utils.getIcon(day.weather.icon);
               return(
@@ -56,7 +77,7 @@ class ReactWeather extends React.Component {
                 </div>
               )
             })
-          }
+          }*/}
           </div>
         </div>
       );