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

fix responsive news and user critics location

Browse Source
This commit is contained in:
NCanggoro 2023-09-03 18:17:14 +07:00
parent 2fc3bdf2b1
commit 84f591833d
2 changed files with 71 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -76,7 +76,7 @@ function Home() {
<SeparatorWithAnchor pageLink='#' pageName='Recent News / Event' secondLink='#' />
<div className={"mt-5"}>
{news.data.map((x: News) => (
<div class={"text-sm"}style={{ display: 'inline-block', width: '33.3%', padding: '0 1% 15px', verticalAlign: 'top' }}>
<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>
@ -98,14 +98,14 @@ function Home() {
{/* START LOCATION CRITICS BEST AND USERS BEST SECTION */}
<section className={"mt-10"}>
<div class={"grid grid-cols-4 gap-12"}>
<div className={'col-span-2 mr-5'}>
<div class={"grid grid-cols-4 lg:gap-12"}>
<div className={'col-span-4 lg:col-span-2 trending-section'}>
<SeparatorWithAnchor pageLink='#' pageName={"Trending Now"} secondLink='#' />
<div className={'grid grid-cols-3'}>
<div className={'grid grid-cols-4 md:grid-cols-3'}>
{popular.data.map((x) => (
<div className={"m-2 text-sm"}>
<div className={"mb-2"} style={{ overflow: 'hidden', borderRadius: 7 }}>
<img src={x.thumbnail} style={{ height: 200, width: '100%' }} />
<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%' }} />
</div >
<p>{x.name}</p>
<p className={"text-xs"}>{x.location}</p>
@ -116,16 +116,16 @@ function Home() {
))}
</div>
</div>
<div>
<div className={'col-span-2 lg:col-span-1'}>
<SeparatorWithAnchor pageLink='#' pageName={"Critic's Best"} />
{critics_users_pick.critics.map((x) => (
<div className={"pt-2 text-sm"}>
<div className={'mr-2'} style={{ width: 72, height: 72, float: 'left' }}>
<div className={'mr-2 critics-users-image'}>
<img src={x.thumbnail} style={{ height: '100%', width: '100%', borderRadius: 3}} />
</div>
<p className={'location-title'}>{x.name}</p>
<p className={'text-xs'}>{x.location}</p>
<div className={'mt-3'} style={{ display: 'inline-block' }}>
<p className={'text-xs location-province location-title'}>{x.location}</p>
<div className={'critics-users-rating-container'} style={{ display: 'inline-block' }}>
<p className={'text-xs ml-2'}>{x.critic_rating}</p>
<div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
<div style={{ height: 4, width: `${x.critic_rating}%`, backgroundColor: 'green' }} />
@ -136,16 +136,16 @@ function Home() {
))
}
</div>
<div>
<div className={'col-span-2 lg:col-span-1'}>
<SeparatorWithAnchor pageLink='#' pageName={"User's Best"} />
{critics_users_pick.users.map((x) => (
<div className={"pt-2 text-sm"}>
<div className={'mr-2'} style={{ width: 72, height: 72, float: 'left' }}>
<div className={'mr-2 critics-users-image'}>
<img src={x.thumbnail} style={{ height: '100%', width: '100%', borderRadius: 3}} />
</div>
<p className={'location-title'}>{x.name}</p>
<p className={'text-xs'}>{x.location}</p>
<div className={'mt-3'} style={{ display: 'inline-block' }}>
<p className={'text-xs location-province location-title'}>{x.location}</p>
<div className={'critics-users-rating-container'} style={{ display: 'inline-block' }}>
<p className={'text-xs ml-2'}>{x.user_rating}</p>
<div style={{ height: 4, width: 30, backgroundColor: "#72767d"}}>
<div style={{ height: 4, width: `${x.user_rating}%`, backgroundColor: 'green' }} />

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

@ -32,6 +32,30 @@
color: #b99229;
}
.news-card {
display: inline-block;
width: 33.3%;
padding: 0 1% 15px;
vertical-align: top;
}
.trending-image-container {
overflow: hidden;
border-radius: 7px;
height: 200px;
}
.critics-users-image {
width: 72px;
height: 72px;
float: left;
}
.critics-users-rating-container {
margin-top: 0.75rem;
}
@media screen and (max-width: 1300px) {
.recently-added-section-card {
width: 24.3%;
@ -42,6 +66,13 @@
.recently-added-section-card {
width: 33.3%;
}
.news-card {
width: 50%;
}
.trending-section {
margin-bottom: 1.75rem;
}
}
@media screen and (max-width: 625px) {
@ -50,6 +81,28 @@
}
}
/* @media screen and (max-width: 425px) {
} */
@media screen and (max-width: 425px) {
.news-card {
width: 100%;
}
.location-title {
font-size: 10px;
}
.critics-users-image {
height: 60px;
width: 60px;
}
.location-province {
font-size: 10px !important;
}
.trending-image-container {
overflow: hidden;
border-radius: 7px;
height: 100px;
}
}