style : update style
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user