nochill/hilingriviw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix news responsive

Browse Source
This commit is contained in:
NCanggoro 2023-09-04 00:03:08 +07:00
parent 84f591833d
commit e52de768a8
2 changed files with 43 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/Home/index.tsx
View File

@ -40,7 +40,7 @@ function Home() {
{data.new_places.map((x: NewPlaces) => (
<div className={"recently-added-section-card"}>
<div className={'border-secondary'} style={{ width: 200, height: 200, overflow: 'hidden', borderRadius: 7, borderWidth: 1 }}>
<img alt={x.name} src={x.thumbnail} style={{ width: '100%', height: '100%' }} />
<img alt={x.name} src={x.thumbnail} loading="eager" style={{ width: '100%', height: '100%' }} />
</div>
<div className={"border-primary pb-2 location-container text-sm mb-2 mt-2"}>
<p className={'location-title'}>{x.name}</p>
@ -49,7 +49,7 @@ function Home() {
<div className={"flex flex-row items-center mb-3"}>
<div className={'mr-3'}>
<p className={'text-sm text-center'}>{x.critic_rating}</p>
<div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
<div style={{ height: 4, width: 30, backgroundColor: "#72767d"}}>
<div style={{ height: 4, width: `${x.critic_rating}%`, backgroundColor: 'green' }} />
</div>
</div>
@ -77,12 +77,12 @@ function Home() {
<div className={"mt-5"}>
{news.data.map((x: News) => (
<div class={"text-sm news-card"}>
<div style={{ height: 250, overflow: 'hidden', borderRadius: 7 }}>
<img src={x.thumbnail} style={{ width: "100%", height: '100%', objectFit: 'cover', objectPosition: 'top' }} />
<div className={"image-news-container"}>
<img src={x.thumbnail} className={"news-img"}/>
</div>
<a className={'news-link'} target="_blank" href={x.link}>{x.link.split("/")[2].replace(/www\./, '')}</a>
<p className={'mt-2 mb-2'}>{x.header}</p>
<div className={"flex flex-row"}>
<div className={"flex flex-row user-engagement"}>
<svg xmlns="http://www.w3.org/2000/svg" fill={"gray"} height="18" viewBox="0 -960 960 960" width="18"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z" /></svg>
<p className={"mr-3 ml-1"}>{x.likes_count}</p>
<svg xmlns="http://www.w3.org/2000/svg" fill={"gray"} height="16" viewBox="0 -960 960 960" width="18"><path d="M880-80 720-240H160q-33 0-56.5-23.5T80-320v-480q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v720ZM160-320v-480 480Zm594 0 46 45v-525H160v480h594Z" /></svg>
@ -105,7 +105,7 @@ function Home() {
{popular.data.map((x) => (
<div className={"m-2 text-sm col-span-2 md:col-span-1"}>
<div className={"mb-2 trending-image-container"}>
<img src={x.thumbnail} style={{ width: '100%', height: '100%' }} />
<img src={x.thumbnail} loading={"lazy"} style={{ width: '100%', height: '100%' }} />
</div >
<p>{x.name}</p>
<p className={"text-xs"}>{x.location}</p>

37
src/pages/Home/style.css
View File

@ -17,6 +17,13 @@
margin-top: 5px;
}
.news-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.location-title {
white-space: nowrap;
text-overflow: ellipsis;
@ -56,6 +63,12 @@
margin-top: 0.75rem;
}
.image-news-container {
height: 250px;
overflow: hidden;
border-radius: 7px;
}
@media screen and (max-width: 1300px) {
.recently-added-section-card {
width: 24.3%;
@ -79,6 +92,30 @@
.recently-added-section-card {
width: 50%;
}
.news-card {
display: block;
width: 100%;
}
.news-img {
width: 120px;
height: 68px;
float: left;
}
.image-news-container {
height: 68px;
float: left;
padding: 0 10px;
}
.user-engagement {
margin-left: 140px;
border: none;
padding: 0;
}
}
@media screen and (max-width: 425px) {