style updates

johnjones4 · Feb 3, 2018 · 7a2adef · 7a2adef
1 parent 9ec6b70
commit 7a2adef
Show file tree

Hide file tree

Showing 12 changed files with 265 additions and 195 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
+    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic" />
   </head>
   <body>
     <noscript>

diff --git a/src/lib/services/Weather.js b/src/lib/services/Weather.js
@@ -18,24 +18,28 @@ class Weather extends Service {
         .then((weatherData) => {
           return {
             'name': 'weather',
-            'data': {
-              'now': {
-                'weather': weatherData.current_observation.weather,
-                'temp': weatherData.current_observation.temp_f,
-                'feelslike': parseFloat(weatherData.current_observation.feelslike_f),
-                'humidity': weatherData.current_observation.relative_humidity,
-                'icon': weatherData.current_observation.icon
-              },
-              'forecast': [0, 1, 2].map((i) => {
-                return {
-                  'label': weatherData.forecast.txt_forecast.forecastday[i].title,
-                  'forecast': weatherData.forecast.txt_forecast.forecastday[i].fcttext,
-                  'high': parseFloat(weatherData.forecast.simpleforecast.forecastday[i].high.fahrenheit),
-                  'low': parseFloat(weatherData.forecast.simpleforecast.forecastday[i].low.fahrenheit),
-                  'icon': weatherData.forecast.simpleforecast.forecastday[i].icon
-                }
-              })
-            }
+            'data': [
+              {
+                'label': 'Now',
+                'icon': weatherData.current_observation.icon,
+                'description': weatherData.current_observation.weather,
+                'temps': [
+                  weatherData.current_observation.temp_f
+                ],
+                'humidity': weatherData.current_observation.relative_humidity
+              }
+            ].concat([0, 1, 2].map((i) => {
+              return {
+                'label': weatherData.forecast.txt_forecast.forecastday[i].title,
+                'icon': weatherData.forecast.simpleforecast.forecastday[i].icon,
+                'description': weatherData.forecast.simpleforecast.forecastday[i].conditions,
+                'temps': [
+                  parseFloat(weatherData.forecast.simpleforecast.forecastday[i].high.fahrenheit),
+                  parseFloat(weatherData.forecast.simpleforecast.forecastday[i].low.fahrenheit)
+                ],
+                'humidity': weatherData.forecast.simpleforecast.forecastday[i].avehumidity + '%'
+              }
+            }))
           }
         })
         .catch((err) => {

diff --git a/src/ui/Dashboard.js b/src/ui/Dashboard.js
@@ -89,7 +89,8 @@ class Dashboard extends Component {
             breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
             cols={{lg: cols, md: cols, sm: cols, xs: cols, xxs: cols}}
             onLayoutChange={(layout, layouts) => this.layoutChanged(layout, layouts)}
-            draggableCancel='input,textarea'>
+            draggableCancel='input,textarea'
+            margin={[20, 20]}>
             {
               this.props.services.services.map((service, i) => {
                 const defaultProps = this.getServiceProps(service)

diff --git a/src/ui/vars_mixins.scss b/src/ui/vars_mixins.scss
@@ -1,24 +1,21 @@
-$page_background: url(./background.jpg) no-repeat center center;
-$page_background_overlay: rgba(0,0,0,0.6);
-$widget_background: rgba(0,0,0,0.15);
-$widget_stripe: rgba(150,150,150,0.2);
+$page_background: #f7f7f7;;
+$page_background_overlay: transparent;
+$widget_background: white;
 $widget_title_background: rgba(0,0,0,0);
-$widget_body_text_color: #CCD;
-$widget_body_strong_text_color: #EEF;
+$widget_body_text_color: #1a1a1a;
+$widget_body_strong_text_color: #1a1a1a;
 
-$foreground_highlight_color: rgba(20,20,20,0.4);
+$foreground_highlight_color: #eee;
 
-$stripe_background_odd: lighten($foreground_highlight_color,7%);
-$stripe_background_even: $foreground_highlight_color;
-$stripe_background_hover: lighten($foreground_highlight_color,35%);
+$stripe_background_odd: transparent;
+$stripe_background_even: transparent;
+$stripe_background_hover: transparent;
 
-$deemphasized_text: darken(desaturate($widget_body_text_color,40%),40%);
-$double_deemphasized_text: darken(desaturate($widget_body_text_color,50%),50%);
+$deemphasized_text: rgba(26, 26, 26, .5);
+$double_deemphasized_text: rgba(26, 26, 26, .5);
 
 @mixin heading_font_styles {
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  font-weight: 300;
+  font-weight: 700;
   color: $widget_body_strong_text_color;
 }
 

diff --git a/src/ui/widgets/RSS.js b/src/ui/widgets/RSS.js
@@ -48,18 +48,18 @@ class RSS extends Widget {
             feed.items.map((item, j) => {
               return (
                 <div onClick={() => shell.openExternal(item.link)} className='faux-link rss-feed-item striped striped-hover' key={j}>
-                  <span className='rss-feed-item-title'>
-                    <span className='rss-feed-item-headeline' dangerouslySetInnerHTML={{__html: item.title}} />
+                  <div className='rss-feed-item-title' dangerouslySetInnerHTML={{__html: item.title}} />
+                  <div>
                     { item.author && (<span className='rss-feed-item-author'>
                       {item.author}
                     </span>)}
                     <span className='rss-feed-item-website'>
                       {item.website}
                     </span>
-                  </span>
-                  <span className='rss-feed-item-date'>
-                    {formatDate(item.date)}
-                  </span>
+                    <span className='rss-feed-item-date'>
+                      {formatDate(item.date)}
+                    </span>
+                  </div>
                 </div>
               )
             })

diff --git a/src/ui/widgets/RSS.scss b/src/ui/widgets/RSS.scss
@@ -7,43 +7,25 @@
 .rss-feed-item {
   display: block;
   color: inherit;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  text-decoration: none;
-}
-
-.rss-feed-item:visited {
-  color: $double_deemphasized_text;
-}
-
-.rss-feed-item-title {
-  padding: 0.5em;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  justify-content: space-between;
-}
-
-.rss-feed-item-date {
-  padding: 0.5em;
-  white-space: nowrap;
-  color: $deemphasized_text;
-}
-
+  padding: 0.5em 0;
+  border-bottom: 1px solid $foreground_highlight_color;
+  transition: background 0.25s;
+  &:hover {
+    // background: $foreground_highlight_color;
+    .rss-feed-item-title {
+      text-decoration: underline;
+    }
+  }
+}
+
+.rss-feed-item-date,
 .rss-feed-item-author,
 .rss-feed-item-website {
-  margin-left: 0.5em;
   font-size: 0.75em;
   color: $deemphasized_text;
 }
 
-.rss-feed-item:visited .rss-feed-item-author,
-.rss-feed-item:visited .rss-feed-item-website {
-  color: $double_deemphasized_text;
-}
-
+.rss-feed-item-website:after,
 .rss-feed-item-author:after {
-  content: ' /';
+  content: ' - ';
 }
diff --git a/src/ui/widgets/Twitter.js b/src/ui/widgets/Twitter.js
@@ -109,6 +109,9 @@ class Twitter extends Widget {
                       <span className='twitter-feed-tweet-name'>
                         {tweet.user.name}
                       </span>
+                      <span className='twitter-feed-tweet-screen-name'>
+                        @{tweet.user.screen_name}
+                      </span>
                       <span className='twitter-feed-tweet-date'>
                         {formatDate(tweet.created_at)}
                       </span>

diff --git a/src/ui/widgets/Twitter.scss b/src/ui/widgets/Twitter.scss
@@ -10,10 +10,11 @@
 .twitter-feed-tweet {
   clear: both;
   height: 50px;
-  padding: 0.5em;
+  padding: 1em 0.5em;
   box-sizing: content-box;
   overflow: hidden;
   text-overflow: ellipsis;
+  border-bottom: 1px solid $foreground_highlight_color;
 }
 
 .twitter-feed-tweet a {
@@ -26,11 +27,17 @@
   width: 50px;
   height: auto;
   margin-right: 0.5em;
+  border-radius: 50%;
+}
+
+.twitter-feed-tweet-screen-name {
+  color: $deemphasized_text;
 }
 
 .twitter-feed-tweet-date {
   font-size: 0.75em;
   color: $deemphasized_text;
+  float: right;
 }
 
 @media (max-width: 1900px) {
@@ -41,8 +48,9 @@
 }
 
 .twitter-feed-tweet-name {
-  margin-right: 0.5em;
+  margin-right: 0.25em;
   color: $widget_body_strong_text_color;
+  font-weight: 600;
 }
 
 .twitter-feed-tweet-header {

diff --git a/src/ui/widgets/Weather.js b/src/ui/widgets/Weather.js
@@ -15,64 +15,56 @@ import {
 class Weather extends Widget {
   constructor (props) {
     super('Weather', 'weather', props)
+    this.state = {
+      selectedIndex: 0
+    }
   }
 
-  renderCurrentWeather (data) {
-    return (
-      <div className='weather-now'>
-        <div className='weather-label'>Now</div>
-        <div className='weather-now-content'>
-          <img src={'./weather/' + data.now.icon + '.svg'} alt={data.now.weather} className='weather-icon' />
-          <div className='weather-description'>
-            {data.now.weather}
-          </div>
-          <div className='weather-temp'>
-            <span className='weather-value-label weather-temp-label'>Temp: </span>
-            <span className='weather-temp-temp'>{data.now.temp}&#176;</span>
-          </div>
-          <div className='weather-feelslike'>
-            <span className='weather-value-label weather-feelslike-label'>Feels Like: </span>
-            <span className='weather-feelslike-temp'>{data.now.feelslike}&#176;</span>
-          </div>
-          <div className='weather-humidity'>
-            <span className='weather-value-label weather-humidity-label'>Humidity: </span>
-            <span className='weather-humidity-temp'>{data.now.humidity}</span>
-          </div>
-        </div>
-      </div>
-    )
+  getForecaseTranslation (index) {
+    if (index === this.state.selectedIndex) {
+      return {}
+    } else {
+      const delta = index - this.state.selectedIndex
+      return {
+        'transform': 'translateX(' + (delta * 100) + '%)'
+      }
+    }
   }
 
-  renderForecast (data) {
+  renderWeather (weather, index) {
     return (
-      <div className='weather-forecast'>
-        {
-          data.forecast.map((item, i) => {
-            return (
-              <div className='weather-forecast-item' key={i}>
-                <div className='weather-label'>{item.label}</div>
-                <div className='weather-content'>
-                  <div className='weather-icon-wrapper'>
-                    <img src={'./weather/' + item.icon + '.svg'} className='weather-icon' alt={item.forecast} />
-                  </div>
-                  <div className='weather-text'>
-                    <div className='weather-description'>
-                      {item.forecast}
-                    </div>
-                    <div className='weather-high'>
-                      <span className='weather-value-label weather-high-label'>High: </span>
-                      <span className='weather-high-temp'>{item.high}&#176;</span>
-                    </div>
-                    <div className='weather-low'>
-                      <span className='weather-value-label weather-low-label'>Low: </span>
-                      <span className='weather-low-temp'>{item.low}&#176;</span>
-                    </div>
-                  </div>
+      <div className='weather-forecast' style={this.getForecaseTranslation(index)} key={weather.label}>
+        <div className='weather-content'>
+          <div className='weather-icon-wrapper'>
+            <img src={'./weather/' + weather.icon + '.svg'} className='weather-icon' alt={weather.description} />
+          </div>
+          <div className='weather-text'>
+            <div className='weather-description'>
+              {weather.description}
+            </div>
+            { weather.temps.length === 2 ? (
+              <div>
+                <div className='weather-key-value'>
+                  <span className='weather-key'>High: </span>
+                  <span className='weather-value'>{weather.temps[0]}&#176;</span>
                 </div>
+                <div className='weather-key-value'>
+                  <span className='weather-key'>Low: </span>
+                  <span className='weather-value'>{weather.temps[1]}&#176;</span>
+                </div>
+              </div>
+            ) : (
+              <div className='weather-key-value'>
+                <span className='weather-key'>Temp: </span>
+                <span className='weather-value'>{weather.temps[0]}&#176;</span>
               </div>
-            )
-          })
-        }
+            )}
+            <div className='weather-key-value'>
+              <span className='weather-key'>Humidity: </span>
+              <span className='weather-value'>{weather.humidity}</span>
+            </div>
+          </div>
+        </div>
       </div>
     )
   }
@@ -81,8 +73,14 @@ class Weather extends Widget {
     const data = this.getWidgetData()
     return data && (
       <div className='weather-wrapper'>
-        { this.renderCurrentWeather(data) }
-        { this.renderForecast(data) }
+        <div className='weather-forecasts'>
+          { data.map((weather, index) => this.renderWeather(weather, index)) }
+        </div>
+        <div className='weather-nav-labels'>
+          { data.map((weather, index) => {
+            return (<button className={'weather-nav-label' + (index === this.state.selectedIndex ? ' active' : '')} onClick={() => this.setState({selectedIndex: index})}>{weather.label}</button>)
+          }) }
+        </div>
       </div>
     )
   }