Skip to content

Commit 8c6a040

Browse files
sajjadmrxsajjadmrx
authored
Merge pull request #19 from modos/feature/improve-responsive
fix(ui): improve responsive
2 parents f05c618 + 5210b46 commit 8c6a040

File tree

5 files changed

+40
-38
lines changed

5 files changed

+40
-38
lines changed

‎src/layouts/calendar/calendar.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const PersianCalendar: React.FC = () => {
3232

3333
return (
3434
<div className="flex flex-col justify-center w-full gap-3 mb-1 md:flex-row" dir="rtl">
35-
<CalendarContainer className="w-full overflow-hidden md:flex-1">
35+
<CalendarContainer className="w-full md:w-7/12 overflow-hidden md:flex-1">
3636
<CalendarHeader
3737
currentDate={currentDate}
3838
setCurrentDate={setCurrentDate}
@@ -55,7 +55,7 @@ const PersianCalendar: React.FC = () => {
5555
</div>
5656
</CalendarContainer>
5757

58-
<CalendarContainer className="w-full md:w-80 p-3 md:p-4 h-auto min-h-[16rem] md:h-[27rem]">
58+
<CalendarContainer className="w-full md:w-5/12 p-3 md:p-4">
5959
<AnimatePresence mode="wait">
6060
<CalendarContent
6161
activeTab={activeTab}

‎src/layouts/search/search.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export function SearchLayout() {
5555

5656
return (
5757
<>
58-
<div className="flex flex-col items-center justify-center max-h-80">
58+
<div className="flex flex-col items-center justify-center">
5959
<div className="relative w-full" ref={searchRef}>
6060
<form className="w-full" onSubmit={handleSubmit}>
6161
<div

‎src/layouts/weather/components/current-box.component.tsx

+29-27
Original file line numberDiff line numberDiff line change
@@ -106,14 +106,14 @@ export function CurrentWeatherBox({ weather }: CurrentWeatherBoxProps) {
106106
},
107107
},
108108
}}
109-
className={`h-full col-span-2 p-5 shadow-lg bg-gradient-to-br ${themeUtils.getCardBackground()} backdrop-blur-sm rounded-xl`}
109+
className={`col-span-2 p-5 shadow-lg bg-gradient-to-br flex-2 ${themeUtils.getCardBackground()} backdrop-blur-sm rounded-xl`}
110110
>
111111
<div className="flex flex-row-reverse items-start justify-between gap-4">
112112
<motion.div
113113
className="relative group"
114114
variants={fadeInUp}
115-
whileHover={{ scale: 1.1 }}
116-
transition={{ type: 'spring', stiffness: 300 }}
115+
whileHover={{scale: 1.1}}
116+
transition={{type: 'spring', stiffness: 300}}
117117
>
118118
<img
119119
src={weather.icon.url}
@@ -135,25 +135,27 @@ export function CurrentWeatherBox({ weather }: CurrentWeatherBoxProps) {
135135
{unitsFlag[weatherSettings.temperatureUnit || 'metric']}
136136
</span>
137137
</motion.span>
138+
</div>
139+
</div>
138140

139-
<motion.div
140-
variants={fadeInUp}
141-
className="flex flex-wrap items-center gap-2 mt-3"
141+
<div className="flex mt-1">
142+
<motion.div
143+
variants={fadeInUp}
144+
className="flex flex-wrap items-center gap-2 mt-3"
145+
>
146+
<div
147+
className={`px-3 py-1.5 flex items-center gap-2 text-sm font-medium rounded-full transition-all hover:shadow-md ${getHumidityPillStyle()}`}
142148
>
143-
<div
144-
className={`px-3 py-1.5 flex items-center gap-2 text-sm font-medium rounded-full transition-all hover:shadow-md ${getHumidityPillStyle()}`}
145-
>
146-
<WiHumidity size={20} className="flex-shrink-0" />
147-
<span>{weather.temperature.humidity}%</span>
148-
</div>
149-
<div
150-
className={`px-3 py-1.5 flex items-center gap-2 text-sm font-medium rounded-full transition-all hover:shadow-md ${getWindPillStyle()}`}
151-
>
152-
<WiStrongWind size={20} className="flex-shrink-0" />
153-
<span>{weather.temperature.wind_speed} m/s</span>
154-
</div>
155-
</motion.div>
156-
</div>
149+
<WiHumidity size={20} className="flex-shrink-0"/>
150+
<span>{weather.temperature.humidity}%</span>
151+
</div>
152+
<div
153+
className={`px-3 py-1.5 flex items-center gap-2 text-sm font-medium rounded-full transition-all hover:shadow-md ${getWindPillStyle()}`}
154+
>
155+
<WiStrongWind size={20} className="flex-shrink-0"/>
156+
<span>{weather.temperature.wind_speed} m/s</span>
157+
</div>
158+
</motion.div>
157159
</div>
158160

159161
<motion.div
@@ -165,11 +167,11 @@ export function CurrentWeatherBox({ weather }: CurrentWeatherBoxProps) {
165167
{weather.ai?.description && (
166168
<motion.div
167169
className="absolute flex items-center gap-2 left-4 top-0 p-1.5"
168-
initial={{ opacity: 0, x: -10 }}
169-
animate={{ opacity: 1, x: 0 }}
170-
transition={{ delay: 0.5 }}
170+
initial={{opacity: 0, x: -10}}
171+
animate={{opacity: 1, x: 0}}
172+
transition={{delay: 0.5}}
171173
>
172-
<BsRobot className={`text-xl ${getAiIconStyle()}`} />
174+
<BsRobot className={`text-xl ${getAiIconStyle()}`}/>
173175
</motion.div>
174176
)}
175177

@@ -182,9 +184,9 @@ export function CurrentWeatherBox({ weather }: CurrentWeatherBoxProps) {
182184

183185
{weather.ai?.playlist && (
184186
<motion.a
185-
initial={{ opacity: 0, scale: 0.9 }}
186-
animate={{ opacity: 1, scale: 1 }}
187-
transition={{ delay: 0.7 }}
187+
initial={{opacity: 0, scale: 0.9}}
188+
animate={{opacity: 1, scale: 1}}
189+
transition={{delay: 0.7}}
188190
href={weather.ai.playlist}
189191
target="_blank"
190192
rel="noopener noreferrer"

‎src/layouts/weather/weather.layout.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -81,12 +81,12 @@ export function WeatherLayout() {
8181

8282
return (
8383
<>
84-
<section className="rounded">
85-
<div className="flex flex-col gap-2">
84+
<section className="rounded h-full">
85+
<div className="flex flex-col gap-2 h-full">
8686
{cityWeather ? <CurrentWeatherBox weather={cityWeather.weather} /> : null}
8787

8888
<motion.div
89-
className="relative p-1 mt-2 overflow-hidden"
89+
className="relative p-1 lg:pb-0 mt-2 overflow-hidden flex-1"
9090
initial={{ opacity: 0.9 }}
9191
animate={{ opacity: 1 }}
9292
transition={{ duration: 0.3 }}
@@ -101,7 +101,7 @@ export function WeatherLayout() {
101101
nextEl: '.swiper-button-next-custom',
102102
prevEl: '.swiper-button-prev-custom',
103103
}}
104-
className="py-2 weather-forecast-slider"
104+
className="pt-2 weather-forecast-slider"
105105
dir="ltr"
106106
>
107107
{forecast?.map((item, index) => (

‎src/pages/home.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,11 @@ function ContentSection() {
5353
</div>
5454
</div>
5555

56-
<div className="flex flex-col w-full gap-3 md:flex-row md:gap-4">
57-
<div className="w-full md:w-2/3">
56+
<div className="flex flex-col w-full flex-wrap lg:flex-nowrap gap-3 md:flex-row md:gap-4">
57+
<div className="w-full lg:w-8/12">
5858
<CalendarLayout />
5959
</div>
60-
<div className="w-full md:w-1/3">
60+
<div className="w-full lg:w-4/12">
6161
<WeatherLayout />
6262
</div>
6363
</div>
@@ -174,7 +174,7 @@ export function HomePage() {
174174
}
175175

176176
return (
177-
<div className="w-full min-h-screen px-2 mx-auto md:px-4 lg:px-0 max-w-[1080px] flex flex-col">
177+
<div className="w-full min-h-screen px-2 mx-auto md:px-4 lg:px-0 max-w-[1080px] flex flex-col gap-4">
178178
<GeneralSettingProvider>
179179
<WeatherProvider>
180180
<NavbarLayout />

0 commit comments

Comments
 (0)