style : update style

This commit is contained in:
lukman
2024-09-13 17:15:46 +08:00
parent 5d72c78aba
commit e4175d17f8
7 changed files with 166 additions and 168 deletions

View File

@@ -40,7 +40,7 @@ export default function FeatureDetailDivision() {
fetchData()
}, [param.id])
const isMobile = useMediaQuery('(max-width: 399px)');
const isMobile2 = useMediaQuery('(max-width: 369px)');
const isMobile2 = useMediaQuery('(max-width: 411px)');
return (
<Box pt={10}>
@@ -58,7 +58,12 @@ export default function FeatureDetailDivision() {
padding: 10
}} onClick={() => router.push(param.id + '/task?status=0')}>
<Grid justify='center' align='center'>
<Grid.Col span={"auto"}>
<Grid.Col span={{
base: isMobile2 ? 4 : 3.5,
xs: 3,
sm: 3,
md: 3,
}}>
<ActionIcon variant="filled"
size={isMobile2 ? "lg" : "xl"}
aria-label="Gradient action icon"
@@ -68,7 +73,13 @@ export default function FeatureDetailDivision() {
<LuClipboardEdit size={isMobile2 ? 20 : 25} color={tema.get().utama} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={{ base: 7, md: 9 }}>
<Grid.Col
span={{
base: isMobile2 ? 8 : 7.5,
xs: 9,
md: 9,
sm: 9,
}}>
<Text fz={15} c={tema.get().utama} fw={"bold"}>Tugas</Text>
<Group justify='space-between' align='center'>
<Text fz={10} c={"gray"}>{feature?.tugas} Tugas</Text>
@@ -83,7 +94,12 @@ export default function FeatureDetailDivision() {
padding: 10
}} onClick={() => router.push(param.id + '/document')}>
<Grid justify='center' align='center'>
<Grid.Col span={"auto"}>
<Grid.Col span={{
base: isMobile2 ? 4 : 3.5,
xs: 3,
sm: 3,
md: 3,
}}>
<ActionIcon variant="filled"
size={isMobile2 ? "lg" : "xl"}
aria-label="Gradient action icon"
@@ -93,7 +109,12 @@ export default function FeatureDetailDivision() {
<BsFileEarmarkText size={isMobile2 ? 20 : 25} color={tema.get().utama} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={{ base: 7, md: 9 }}>
<Grid.Col span={{
base: isMobile2 ? 8 : 7.5,
xs: 9,
md: 9,
sm: 9,
}}>
<Text fz={15} c={tema.get().utama} fw={"bold"}>Dokumen</Text>
<Group justify='space-between' align='center'>
<Text fz={10} c={"gray"}>{feature?.dokumen} File</Text>
@@ -108,7 +129,12 @@ export default function FeatureDetailDivision() {
padding: 10
}} onClick={() => router.push(param.id + '/discussion')}>
<Grid justify='center' align='center'>
<Grid.Col span={"auto"}>
<Grid.Col span={{
base: isMobile2 ? 4 : 3.5,
xs: 3,
sm: 3,
md: 3,
}}>
<ActionIcon variant="filled"
size={isMobile2 ? "lg" : "xl"}
aria-label="Gradient action icon"
@@ -118,7 +144,12 @@ export default function FeatureDetailDivision() {
<GoCommentDiscussion size={isMobile2 ? 20 : 25} color={tema.get().utama} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={{ base: 7, md: 9 }}>
<Grid.Col span={{
base: isMobile2 ? 8 : 7.5,
xs: 9,
md: 9,
sm: 9,
}}>
<Text fz={15} c={tema.get().utama} fw={"bold"}>Diskusi</Text>
<Group justify='space-between' align='center'>
<Text fz={10} c={"gray"}>{feature?.diskusi} Diskusi</Text>
@@ -133,7 +164,12 @@ export default function FeatureDetailDivision() {
padding: 10
}} onClick={() => router.push(param.id + '/calender')}>
<Grid justify='center' align='center'>
<Grid.Col span={"auto"}>
<Grid.Col span={{
base: isMobile2 ? 4 : 3.5,
xs: 3,
sm: 3,
md: 3,
}}>
<ActionIcon variant="filled"
size={isMobile2 ? "lg" : "xl"}
aria-label="Gradient action icon"
@@ -143,7 +179,12 @@ export default function FeatureDetailDivision() {
<IoCalendarOutline size={isMobile2 ? 20 : 25} color={tema.get().utama} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={{ base: 7, md: 9 }}>
<Grid.Col span={{
base: isMobile2 ? 8 : 7.5,
xs: 9,
md: 9,
sm: 9,
}}>
<Text fz={15} c={tema.get().utama} fw={"bold"}>Kalender</Text>
<Group justify='space-between' align='center'>
<Text fz={10} c={"gray"}>{feature?.kalender} Acara</Text>

View File

@@ -7,7 +7,7 @@ import { HiMenu } from 'react-icons/hi';
import { HiMagnifyingGlass, HiMiniUserGroup, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2';
import { MdAccountCircle } from 'react-icons/md';
import DrawerDivision from './drawer_division';
import { useShallowEffect } from '@mantine/hooks';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IDataDivison } from '../lib/type_division';
import { funGetAllDivision } from '../lib/api_division';
import toast from 'react-hot-toast';
@@ -27,6 +27,8 @@ export default function ListDivision() {
const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA)
const paddingLift = useMediaQuery('(max-width: 505px)')
const handleList = () => {
setIsList(!isList)
@@ -131,12 +133,16 @@ export default function ListDivision() {
data?.map((v: any, i: any) => {
return (
<Box key={i}>
<Grid align='center'>
<Grid align='center' onClick={() => router.push(`/division/${v.id}`)}>
<Grid.Col span={{
base: 2,
base: 1,
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1
}}>
<Group onClick={() => router.push(`/division/${v.id}`)}>
<Group >
<Center>
<ActionIcon
variant="gradient"
@@ -156,15 +162,19 @@ export default function ListDivision() {
</Group>
</Grid.Col>
<Grid.Col span={{
base: 10,
xl: 11
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}>
<Box>
<Box w={{
base: 280,
xl: 430
}}>
<Text truncate="end" pl={20}>
<Text truncate="end" pl={paddingLift ? 30 : 20}>
{v.name}
</Text>
</Box>