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

fix fontsize for mobile

Browse Source
This commit is contained in:
NCanggoro 2023-10-09 20:13:28 +07:00
parent 905ee3669c
commit d5e79272fb
3 changed files with 51 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/BestLocations/index.tsx
View File

@ -58,7 +58,11 @@ function BestLocation() {
async function getTopLocations() {
try {
const res = await getListTopLocationsService({ page: page, page_size: 20, order_by: pageState.filterScoreTypeidx, region_type: pageState.filterRegionType })
const res = await getListTopLocationsService({
page: page, page_size: 20,
order_by: pageState.filterScoreTypeidx,
region_type: pageState.filterRegionType
})
setTopLocations(res.data)
} catch (err) {

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

@ -5,7 +5,7 @@ import critics_users_pick from '../../datas/critics_users_best_pick.json';
import popular_user_review from '../../datas/popular_user_reviews.json';
import './style.css';
import { useEffect, useState } from 'preact/hooks';
import { getListRecentLocationsRatingsService } from '../../services';
import { getListRecentLocationsRatingsService, getListTopLocationsService } from '../../services';
import { useNavigate } from 'react-router-dom';
import { LocationInfo } from '../../domains/LocationInfo';
@ -19,6 +19,8 @@ type News = {
function Home() {
const [recentLocations, setRecentLocations] = useState<Array<LocationInfo>>([])
const [topCriticsLocations, setTopCriticsLocations] = useState<Array<LocationInfo>>([])
const [topUsersLocations, setTopUsersLocations] = useState<Array<LocationInfo>>([])
// const [isLoading, setIsLoading] = useState<boolean>(true)
const navigate = useNavigate()
@ -34,6 +36,24 @@ function Home() {
}
}
async function getCrititsBestLocations() {
try {
const res = await getListTopLocationsService({ page: 1, page_size: 6, order_by: 2, region_type: 0})
setTopCriticsLocations(res.data)
}catch(err) {
console.log(err)
}
}
async function getUsersBestLocations() {
try {
const res = await getListTopLocationsService({ page: 1, page_size: 6, order_by: 3, region_type: 0})
setTopUsersLocations(res.data)
}catch(err) {
console.log(err)
}
}
function onNavigateToDetail(
id: Number,
critic_count: Number,
@ -48,6 +68,8 @@ function Home() {
useEffect(() => {
getRecentLocations()
getCrititsBestLocations()
getUsersBestLocations()
},[])
return (
<>
@ -174,17 +196,21 @@ function Home() {
</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"}>
{topCriticsLocations.map((x) => (
<div className={"pt-2 text-sm top-location-container"}>
<div className={'mr-2 critics-users-image'}>
<img src={x.thumbnail} loading={'lazy'} style={{ height: '100%', width: '100%', borderRadius: 3}} />
<img
src={x.thumbnail.Valid ? x.thumbnail.String.toString() : 'https://i.ytimg.com/vi/0DY1WSk8B9o/maxresdefault.jpg'}
loading={'lazy'}
style={{ height: '100%', width: '100%', borderRadius: 3}}
/>
</div>
<p className={'location-title'}>{x.name}</p>
<p className={'text-xs location-province location-title'}>{x.location}</p>
<p className={'text-xs location-province location-title'}>{x.regency_name}</p>
<div className={'critics-users-rating-container'} style={{ display: 'inline-block' }}>
<p className={'text-xs ml-2'}>{x.critic_rating}</p>
<p className={'text-xs ml-2'}>{x.critic_score} <span className={'text-gray'}>({x.critic_count})</span></p>
<div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
<div style={{ height: 4, width: `${x.critic_rating}%`, backgroundColor: 'green' }} />
<div style={{ height: 4, width: `${x.critic_score}%`, backgroundColor: 'green' }} />
</div>
</div>
<div style={{ clear: 'both'}} />
@ -194,17 +220,20 @@ function Home() {
</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"}>
{topUsersLocations.map((x) => (
<div className={"pt-2 text-sm top-location-container"}>
<div className={'mr-2 critics-users-image'}>
<img src={x.thumbnail} style={{ height: '100%', width: '100%', borderRadius: 3}} />
<img
src={x.thumbnail.Valid ? x.thumbnail.String.toString() : 'https://i.ytimg.com/vi/0DY1WSk8B9o/maxresdefault.jpg'}
style={{ height: '100%', width: '100%', borderRadius: 3}}
/>
</div>
<p className={'location-title'}>{x.name}</p>
<p className={'text-xs location-province location-title'}>{x.location}</p>
<p className={'text-xs location-province location-title'}>{x.regency_name}</p>
<div className={'critics-users-rating-container'} style={{ display: 'inline-block' }}>
<p className={'text-xs ml-2'}>{x.user_rating}</p>
<p className={'text-xs ml-2'}>{x.user_score} <span className={'text-xs text-gray'}>({x.user_count})</span></p>
<div style={{ height: 4, width: 30, backgroundColor: "#72767d"}}>
<div style={{ height: 4, width: `${x.user_rating}%`, backgroundColor: 'green' }} />
<div style={{ height: 4, width: `${x.user_score}%`, backgroundColor: 'green' }} />
</div>
</div>
<div style={{ clear: 'both'}} />

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

@ -152,7 +152,6 @@
.news-card {
width: 100%;
}
.news-link {
font-size: 0.75rem;
line-height: 1rem;
@ -178,4 +177,8 @@
height: 100px;
}
.top-location-container .location-title {
font-size: 0.685rem;
}
}