Skip to content

Commit 7b7cd19

Browse files
iamsainikhiliamsainikhil
committed
v0.2.1 update current weather and day component UI on mobile
1 parent 734fd10 commit 7b7cd19

File tree

8 files changed

+39
-34
lines changed

8 files changed

+39
-34
lines changed

‎public/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
<meta property="og:title" content="Weather React" />
5757
<meta
5858
property="og:description"
59-
content="A robust weather application to provide weather forecast for any city."
59+
content="A robust weather application to provide 7 day hourly weather forecast for any city in the world."
6060
/>
6161
<meta property="og:image" content="%PUBLIC_URL%/weather-react-app.png" />
6262

@@ -69,7 +69,7 @@
6969
<meta property="twitter:title" content="Weather React" />
7070
<meta
7171
property="twitter:description"
72-
content="A robust weather application to provide weather forecast for any city."
72+
content="A robust weather application to provide 7 day hourly weather forecast for any city in the world."
7373
/>
7474
<meta
7575
property="twitter:image"

‎public/manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"short_name": "Weather App",
2+
"short_name": "Weather",
33
"name": "Weather React",
44
"icons": [
55
{

‎public/weather-react-app (1).png‎

-62.8 KB
Binary file not shown.

‎public/weather-react-app-dark.png‎

-71.8 KB
Binary file not shown.

‎public/weather-react-app-light.png‎

-74.8 KB
Binary file not shown.

‎src/components/weather/DayComponent.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,12 @@ const DayComponent = props => {
5454
)}
5555
</div>
5656
{/* high & low */}
57-
<div className='flex flex-row justify-center items-center font-light w-1/4 sm:w-full'>
58-
<p className='mx-2 text-sm'>
57+
<div className='flex flex-row justify-center items-center font-light w-1/4 sm:w-full mt-1 sm:mt-0'>
58+
<p className='mx-2 text-xs sm:text-sm'>
5959
{computedTempValue('High')}
6060
<sup>o</sup>
6161
</p>
62-
<p className='mx-2 mt-1 text-xs'>
62+
<p className='mx-2 text-xs'>
6363
{computedTempValue('Low')}
6464
<sup>o</sup>
6565
</p>

‎src/components/weather/InfoDetailComponent.js‎

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const InfoDetailComponent = ({weatherCurrent}) => {
4242
<Fragment>
4343
<div className='sm:flex-col md:flex md:flex-row justify-between mt-5 mb-5 px-4'>
4444
<div className='flex-col sm:w-full lg:w-1/2'>
45-
<div className='flex flex-row items-start'>
45+
<div className='flex flex-row justify-between sm:justify-start'>
4646
<div>
4747
{getWeatherIcon(weatherCurrent).startsWith('wi') ? (
4848
<p
@@ -59,11 +59,11 @@ const InfoDetailComponent = ({weatherCurrent}) => {
5959
src={`./weather/${getWeatherIcon(weatherCurrent)}.svg`}
6060
alt='icon'
6161
title={weatherCurrent.summary}
62-
className='-mt-2 w-20 h-20 object-contain'
62+
className='-mt-2 w-24 h-24 object-contain'
6363
/>
6464
)}
6565
</div>
66-
<div className='flex justify-start items-center ml-3'>
66+
<div className='flex justify-start items-center pr-6 sm:ml-3'>
6767
<div>
6868
<span className='text-5xl font-bold'>
6969
{computedTempValue('temperature')}
@@ -90,36 +90,41 @@ const InfoDetailComponent = ({weatherCurrent}) => {
9090
</div>
9191
</div>
9292
</div>
93-
<p className='font-medium ml-6 capitalize'>
93+
<p className='hidden sm:flex font-medium ml-6 capitalize'>
9494
{weatherCurrent.summary}
9595
</p>
9696
</div>
97-
<div className='mt-6 ml-3 sm:mt-1 sm:w-full lg:w-1/2 text-sm sm:text-lg'>
98-
<div className='flex flex-row'>
99-
<p className='font-light'>Humidity:</p>&nbsp;
100-
<p className='mx-1'>{Math.round(weatherCurrent.humidity)}</p>
101-
<p className='text-sm mt-1'>
102-
<FiPercent />
103-
</p>
104-
</div>
105-
<div className='flex items-center'>
97+
<div className='flex flex-row justify-between sm:flex-col sm:mt-1 sm:w-full lg:w-1/2'>
98+
<p className='sm:hidden font-medium ml-6 capitalize text-xl'>
99+
{weatherCurrent.summary}
100+
</p>
101+
<div className='text-sm sm:text-lg'>
102+
<div className='flex flex-row'>
103+
<p className='font-light'>Humidity:</p>&nbsp;
104+
<p className='mx-1'>{Math.round(weatherCurrent.humidity)}</p>
105+
<p className='text-sm mt-1'>
106+
<FiPercent />
107+
</p>
108+
</div>
109+
<div className='flex items-center'>
110+
<p>
111+
<span className='font-light'>Wind:</span>&nbsp;
112+
{computedSpeedValue()}{' '}
113+
</p>
114+
<p className='text-3xl'>
115+
{
116+
<WeatherIconComponent
117+
type={getWindDirection(weatherCurrent.windBearing)}
118+
/>
119+
}
120+
</p>
121+
</div>
106122
<p>
107-
<span className='font-light'>Wind:</span>&nbsp;
108-
{computedSpeedValue()}{' '}
109-
</p>
110-
<p className='text-3xl'>
111-
{
112-
<WeatherIconComponent
113-
type={getWindDirection(weatherCurrent.windBearing)}
114-
/>
115-
}
123+
<span className='font-light'>Feels like:</span>&nbsp;
124+
{computedTempValue('apparentTemperature')}
125+
<sup>o</sup>
116126
</p>
117127
</div>
118-
<p>
119-
<span className='font-light'>Feels like:</span>&nbsp;
120-
{computedTempValue('apparentTemperature')}
121-
<sup>o</sup>
122-
</p>
123128
</div>
124129
</div>
125130
</Fragment>

‎src/containers/forecast/ForecastContainer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const ForecastContainer = ({cityName, weatherCurrent, weatherForecast}) => {
4545
{!isEmpty(weatherForecast.days) && !isEmpty(selectedDay) ? (
4646
<Fragment>
4747
{/* mobile */}
48-
<div className='sm:hidden py-3 sm:mb-3'>
48+
<div className='sm:hidden pb-3'>
4949
{weatherForecast.timeFrames[selectedDay] ? (
5050
<Carousel {...CarouselSettings('time')}>
5151
{weatherForecast.timeFrames[selectedDay].map(

0 commit comments

Comments
 (0)