bendtherules/buildit-weather-app
1
0
Fork 0
mirror of https://github.com/bendtherules/buildit-weather-app.git synced 2026-08-18 13:42:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove css classname prefixes + use singleinstancforecast

Browse Source
This commit is contained in:
bendtherules
2018-04-02 02:30:47 +05:30
parent 0a08889bd6
commit 42f9f32a9c
2 changed files with 58 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Components/SingleDayForecast/Component.css
+40 -18
View File
@@ -12,55 +12,77 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0 0.5em;
border: 2px solid gray; border: 2px solid gray;
} }
.SingleDayForecast .forecast-summary { .SingleDayForecast .summary {
position: relative;
padding: 0 0.5em;
padding-bottom: .5em; padding-bottom: .5em;
border-bottom: 2px solid #000;
height: 40%;
} }
.SingleDayForecast .forecast-summary>* { .SingleDayForecast .summary>* {
padding: 0.125em 0; padding: 0.125em 0;
} }
.SingleDayForecast .summary-weather-description { .SingleDayForecast .summary .weather-description {
padding-bottom: .25em; padding-bottom: .25em;
} }
.SingleDayForecast .summary-weather-icon-container { .SingleDayForecast .summary .weather-icon-container {
padding: .75em 0; padding: .75em 0;
} }
.SingleDayForecast .summary-date { .SingleDayForecast .summary .date {
font-size: 1.5em; font-size: 1.5em;
} }
.SingleDayForecast .summary-temp, .SingleDayForecast .summary .temp,
.SingleDayForecast .summary-humidity { .SingleDayForecast .summary .humidity {
margin: auto; margin: auto;
width: 70%; width: 70%;
} }
.SingleDayForecast .temp-desc, .SingleDayForecast .summary .desc,
.SingleDayForecast .temp-value, .SingleDayForecast .summary .value {
.SingleDayForecast .humidity-desc,
.SingleDayForecast .humidity-value {
float: left; float: left;
} }
.SingleDayForecast .temp-desc, .SingleDayForecast .summary .desc {
.SingleDayForecast .humidity-desc {
width: 30%; width: 30%;
text-align: right;
} }
.SingleDayForecast .temp-value, .SingleDayForecast .summary .value{
.SingleDayForecast .humidity-value {
width: 70%; width: 70%;
} }
.SingleDayForecast .clearfix { .SingleDayForecast .clearfix {
clear: both; clear: both;
} }
.SingleDayForecast .summary .bottom-dividor{
/* border-bottom: 2px solid #000; */
padding: 0 !important;
position: absolute;
top: 100%;
left: 50%;
width: 85%;
height: 2px;
background-color: #000;
transform: translateX(-50%);
}
.SingleDayForecast .details {
height: 60%;
overflow: auto;
}
src/Components/SingleDayForecast/Component.tsx
+18 -13
View File
@@ -2,6 +2,7 @@ import * as React from 'react';
import './Component.css'; import './Component.css';
import '../../../node_modules/open-weather-icons/dist/css/open-weather-icons.css'; import '../../../node_modules/open-weather-icons/dist/css/open-weather-icons.css';
import { Forecast5DaysSeperated, ForecaseAtInstance, Utils } from '../../Utils'; import { Forecast5DaysSeperated, ForecaseAtInstance, Utils } from '../../Utils';
import { SingleInstanceForecast } from '../SingleInstanceForecast/Component';
export interface SingleDayForecastProps { export interface SingleDayForecastProps {
forecastCurrentDay: Array<ForecaseAtInstance>; forecastCurrentDay: Array<ForecaseAtInstance>;
@@ -94,42 +95,46 @@ export class SingleDayForecast extends React.Component<SingleDayForecastProps, {
return ( return (
<div className="SingleDayForecast"> <div className="SingleDayForecast">
<div className="SingleDayForecast-inner"> <div className="SingleDayForecast-inner">
<div className="forecast-summary"> <div className="summary">
<div className="summary-weather-icon-container"> <div className="weather-icon-container">
<div className={`summary-weather-icon owi owi-3x owi-${summary.modeWeatherIcon}`} /> <div className={`weather-icon owi owi-3x owi-${summary.modeWeatherIcon}`} />
</div> </div>
<div className="summary-date"> <div className="date">
{day.format('Do MMM')} {day.format('Do MMM')}
</div> </div>
<div className="summary-weather-description"> <div className="weather-description">
{Utils.stringToNormalCase(summary.modeWeatherDescription)} {Utils.stringToNormalCase(summary.modeWeatherDescription)}
</div> </div>
<div className="summary-temp" title={`Temperature : ${summary.avgTemp.toFixed(0)}°C`}> <div className="temp" title={`Temperature : ${summary.avgTemp.toFixed(0)}°C`}>
<div className="temp-desc"> <div className="desc">
T : T :
</div> </div>
<div className="temp-value"> <div className="value">
{summary.avgTemp.toFixed(0)}&deg;C {summary.avgTemp.toFixed(0)}&deg;C
</div> </div>
<div className="clearfix"/> <div className="clearfix"/>
</div> </div>
<div className="summary-humidity" title={`Humidity : ${summary.avgHumidity.toFixed(0)} %`}> <div className="humidity" title={`Humidity : ${summary.avgHumidity.toFixed(0)} %`}>
<div className="humidity-desc"> <div className="desc">
H : H :
</div> </div>
<div className="humidity-value"> <div className="value">
{summary.avgHumidity.toFixed(0)} % {summary.avgHumidity.toFixed(0)} %
</div> </div>
<div className="clearfix"/> <div className="clearfix"/>
</div> </div>
<div className="bottom-dividor" />
</div> </div>
<div className="forecast-details"> <div className="details">
BLANK {this.props.forecastCurrentDay.map((forecastAtInstance) => {
return <SingleInstanceForecast forecastAtInstance={forecastAtInstance} key={forecastAtInstance.dt} />;
})}
</div> </div>
</div> </div>
</div> </div>