wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style : style mobile

Browse Source 
Deskripsi:
- update announcement
- update division new
- update project

No Issue
This commit is contained in:
lukman
2024-09-11 13:38:34 +08:00
parent 5a9b1c079f
commit 2078b57653
7 changed files with 35 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/module/announcement/ui/create_users_announcement.tsx
View File

@@ -2,7 +2,7 @@
import { LayoutNavbarNew, WARNA } from '@/module/_global'; import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { funGetGroupDivision } from '@/module/group/lib/api_group'; import { funGetGroupDivision } from '@/module/group/lib/api_group';
import { Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core'; import { Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks'; import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { FaCheck } from 'react-icons/fa'; import { FaCheck } from 'react-icons/fa';
import { GroupData } from '../lib/type_announcement'; import { GroupData } from '../lib/type_announcement';
@@ -103,6 +103,7 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
memberGroup.set(selectedGroups); memberGroup.set(selectedGroups);
onClose(true); onClose(true);
}; };
const isMobile = useMediaQuery('(max-width: 369px)');
useShallowEffect(() => { useShallowEffect(() => {
getData() getData()
@@ -111,7 +112,7 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
return ( return (
<div> <div>
<LayoutNavbarNew back="" title="Tambah Divisi Penerima Pengumuman" menu={<></>} /> <LayoutNavbarNew back="" title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
<Box p={20}> <Box p={20} pb={100}>
<Group justify='flex-end' mb={20}> <Group justify='flex-end' mb={20}>
<Text <Text
onClick={handleSelectAll} onClick={handleSelectAll}
@@ -162,7 +163,7 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
<Box key={division.id}> <Box key={division.id}>
<Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'> <Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'>
<Box w={{ <Box w={{
base: 280, base: isMobile ? 230 : 280,
xl: 430 xl: 430
}}> }}>
<Text truncate="end" pl={20}> <Text truncate="end" pl={20}>

6
src/module/announcement/ui/edit_choose_member.tsx
View File

@@ -2,7 +2,7 @@
import { LayoutNavbarNew, WARNA } from '@/module/_global'; import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { funGetGroupDivision } from '@/module/group/lib/api_group'; import { funGetGroupDivision } from '@/module/group/lib/api_group';
import { Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core'; import { Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks'; import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { FaCheck } from 'react-icons/fa'; import { FaCheck } from 'react-icons/fa';
import { GroupData, GroupDataEditAnnouncement } from '../lib/type_announcement'; import { GroupData, GroupDataEditAnnouncement } from '../lib/type_announcement';
@@ -102,6 +102,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
memberGroup.set(selectedGroups); memberGroup.set(selectedGroups);
onClose(true); onClose(true);
}; };
const isMobile = useMediaQuery('(max-width: 369px)');
useShallowEffect(() => { useShallowEffect(() => {
getData() getData()
@@ -150,6 +151,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
{item.name} {item.name}
</Text> </Text>
<Text <Text
lineClamp={1}
> >
{checked[item.id] && checked[item.id].length === item.Division.length ? <FaCheck style={{ marginRight: 10 }} /> {checked[item.id] && checked[item.id].length === item.Division.length ? <FaCheck style={{ marginRight: 10 }} />
: (checked[item.id] && checked[item.id].length > 0 && checked[item.id].length < item.Division.length) ? <FaMinus style={{ marginRight: 10 }} /> : ""} : (checked[item.id] && checked[item.id].length > 0 && checked[item.id].length < item.Division.length) ? <FaMinus style={{ marginRight: 10 }} /> : ""}
@@ -160,7 +162,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
<Box key={division.id}> <Box key={division.id}>
<Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'> <Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'>
<Box w={{ <Box w={{
base: 280, base: isMobile ? 230 : 280,
xl: 430 xl: 430
}}> }}>
<Text truncate="end" pl={20}> <Text truncate="end" pl={20}>

17
src/module/division_new/ui/feature_detail_division.tsx
View File

@@ -38,6 +38,7 @@ export default function FeatureDetailDivision() {
fetchData() fetchData()
}, [param.id]) }, [param.id])
const isMobile = useMediaQuery('(max-width: 399px)'); const isMobile = useMediaQuery('(max-width: 399px)');
const isMobile2 = useMediaQuery('(max-width: 369px)');
return ( return (
<Box pt={10}> <Box pt={10}>
@@ -57,12 +58,12 @@ export default function FeatureDetailDivision() {
<Grid justify='center' align='center'> <Grid justify='center' align='center'>
<Grid.Col span={"auto"}> <Grid.Col span={"auto"}>
<ActionIcon variant="filled" <ActionIcon variant="filled"
size={"xl"} size={isMobile2 ? "lg" : "xl"}
aria-label="Gradient action icon" aria-label="Gradient action icon"
radius={100} radius={100}
color={WARNA.bgHijauMuda} color={WARNA.bgHijauMuda}
> >
<LuClipboardEdit size={25} color={WARNA.biruTua} /> <LuClipboardEdit size={isMobile2 ? 20 : 25} color={WARNA.biruTua} />
</ActionIcon> </ActionIcon>
</Grid.Col> </Grid.Col>
<Grid.Col span={{ base: 7, md: 9 }}> <Grid.Col span={{ base: 7, md: 9 }}>
@@ -82,12 +83,12 @@ export default function FeatureDetailDivision() {
<Grid justify='center' align='center'> <Grid justify='center' align='center'>
<Grid.Col span={"auto"}> <Grid.Col span={"auto"}>
<ActionIcon variant="filled" <ActionIcon variant="filled"
size={"xl"} size={isMobile2 ? "lg" : "xl"}
aria-label="Gradient action icon" aria-label="Gradient action icon"
radius={100} radius={100}
color={WARNA.bgHijauMuda} color={WARNA.bgHijauMuda}
> >
<BsFileEarmarkText size={25} color={WARNA.biruTua} /> <BsFileEarmarkText size={isMobile2 ? 20 : 25} color={WARNA.biruTua} />
</ActionIcon> </ActionIcon>
</Grid.Col> </Grid.Col>
<Grid.Col span={{ base: 7, md: 9 }}> <Grid.Col span={{ base: 7, md: 9 }}>
@@ -107,12 +108,12 @@ export default function FeatureDetailDivision() {
<Grid justify='center' align='center'> <Grid justify='center' align='center'>
<Grid.Col span={"auto"}> <Grid.Col span={"auto"}>
<ActionIcon variant="filled" <ActionIcon variant="filled"
size={"xl"} size={isMobile2 ? "lg" : "xl"}
aria-label="Gradient action icon" aria-label="Gradient action icon"
radius={100} radius={100}
color={WARNA.bgHijauMuda} color={WARNA.bgHijauMuda}
> >
<GoCommentDiscussion size={25} color={WARNA.biruTua} /> <GoCommentDiscussion size={isMobile2 ? 20 : 25} color={WARNA.biruTua} />
</ActionIcon> </ActionIcon>
</Grid.Col> </Grid.Col>
<Grid.Col span={{ base: 7, md: 9 }}> <Grid.Col span={{ base: 7, md: 9 }}>
@@ -132,12 +133,12 @@ export default function FeatureDetailDivision() {
<Grid justify='center' align='center'> <Grid justify='center' align='center'>
<Grid.Col span={"auto"}> <Grid.Col span={"auto"}>
<ActionIcon variant="filled" <ActionIcon variant="filled"
size={"xl"} size={isMobile2 ? "lg" : "xl"}
aria-label="Gradient action icon" aria-label="Gradient action icon"
radius={100} radius={100}
color={WARNA.bgHijauMuda} color={WARNA.bgHijauMuda}
> >
<IoCalendarOutline size={25} color={WARNA.biruTua} /> <IoCalendarOutline size={isMobile2 ? 20 : 25} color={WARNA.biruTua} />
</ActionIcon> </ActionIcon>
</Grid.Col> </Grid.Col>
<Grid.Col span={{ base: 7, md: 9 }}> <Grid.Col span={{ base: 7, md: 9 }}>

11
src/module/project/ui/create_project.tsx
View File

@@ -11,7 +11,7 @@ import LayoutModal from "@/module/_global/layout/layout_modal";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { funGetAllGroup, IDataGroup } from "@/module/group"; import { funGetAllGroup, IDataGroup } from "@/module/group";
import { funGetUserByCookies } from "@/module/auth"; import { funGetUserByCookies } from "@/module/auth";
import { useShallowEffect } from "@mantine/hooks"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useHookstate } from "@hookstate/core"; import { useHookstate } from "@hookstate/core";
import { globalMemberProject } from "../lib/val_project"; import { globalMemberProject } from "../lib/val_project";
import ViewDateEndTask from "./create_date_end_task"; import ViewDateEndTask from "./create_date_end_task";
@@ -40,6 +40,7 @@ export default function CreateProject() {
const [indexDelFile, setIndexDelFile] = useState<number>(0) const [indexDelFile, setIndexDelFile] = useState<number>(0)
const [indexDelTask, setIndexDelTask] = useState<number>(0) const [indexDelTask, setIndexDelTask] = useState<number>(0)
const roleLogin = useHookstate(globalRole) const roleLogin = useHookstate(globalRole)
const isMobile = useMediaQuery('(max-width: 369px)');
const [body, setBody] = useState<any>({ const [body, setBody] = useState<any>({
idGroup: "", idGroup: "",
@@ -302,19 +303,19 @@ export default function CreateProject() {
> >
<Grid.Col span={9}> <Grid.Col span={9}>
<Group> <Group>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" /> <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
<Box w={{ <Box w={{
base: 140, base: isMobile ? 130 : 140,
xl: 270 xl: 270
}}> }}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}> <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
{v.name} {v.name}
</Text> </Text>
</Box> </Box>
</Group> </Group>
</Grid.Col> </Grid.Col>
<Grid.Col span={3}> <Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'}> <Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
Anggota Anggota
</Text> </Text>
</Grid.Col> </Grid.Col>

14
src/module/project/ui/list_anggota_detail_project.tsx
View File

@@ -5,7 +5,7 @@ import React, { useState } from 'react';
import { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project'; import { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { useParams, useRouter } from 'next/navigation'; import { useParams, useRouter } from 'next/navigation';
import { useShallowEffect } from '@mantine/hooks'; import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IDataMemberProject } from '../lib/type_project'; import { IDataMemberProject } from '../lib/type_project';
import { FaUser } from 'react-icons/fa6'; import { FaUser } from 'react-icons/fa6';
import { IoIosCloseCircle } from 'react-icons/io'; import { IoIosCloseCircle } from 'react-icons/io';
@@ -45,6 +45,7 @@ export default function ListAnggotaDetailProject() {
getOneData(); getOneData();
}, [param.id]) }, [param.id])
async function onSubmit() { async function onSubmit() {
try { try {
const res = await funDeleteMemberProject(param.id, { idUser: dataChoose.id }); const res = await funDeleteMemberProject(param.id, { idUser: dataChoose.id });
@@ -61,6 +62,7 @@ export default function ListAnggotaDetailProject() {
toast.error("Gagal menghapus anggota Kegiatan, coba lagi nanti"); toast.error("Gagal menghapus anggota Kegiatan, coba lagi nanti");
} }
} }
const isMobile = useMediaQuery('(max-width: 369px)');
return ( return (
<Box pt={20}> <Box pt={20}>
@@ -100,20 +102,20 @@ export default function ListAnggotaDetailProject() {
> >
<Grid.Col span={9}> <Grid.Col span={9}>
<Group> <Group>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" /> <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
<Box w={{ <Box w={{
base: 140, base: isMobile ? 130 : 140,
xl: 270 xl: 270
}}> }}>
<Flex direction={'column'} align="flex-start" justify="flex-start"> <Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1}>{v.name}</Text> <Text lineClamp={1} fz={isMobile ? 14 : 16}>{v.name}</Text>
<Text c={"#5A687D"} fz={14} lineClamp={1}>{v.email}</Text> <Text c={"#5A687D"} fz={isMobile ? 10 : 14} lineClamp={1}>{v.email}</Text>
</Flex> </Flex>
</Box> </Box>
</Group> </Group>
</Grid.Col> </Grid.Col>
<Grid.Col span={3}> <Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'}> <Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
Anggota Anggota
</Text> </Text>
</Grid.Col> </Grid.Col>

5
src/module/project/ui/list_project.tsx
View File

@@ -8,7 +8,7 @@ import { MdAccountCircle } from 'react-icons/md';
import { RiCircleFill } from 'react-icons/ri'; import { RiCircleFill } from 'react-icons/ri';
import { funGetAllProject } from '../lib/api_project'; import { funGetAllProject } from '../lib/api_project';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { useShallowEffect } from '@mantine/hooks'; import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IDataProject } from '../lib/type_project'; import { IDataProject } from '../lib/type_project';
import { useHookstate } from '@hookstate/core'; import { useHookstate } from '@hookstate/core';
import _ from 'lodash'; import _ from 'lodash';
@@ -52,6 +52,7 @@ export default function ListProject() {
const handleList = () => { const handleList = () => {
setIsList(!isList) setIsList(!isList)
} }
const isMobile = useMediaQuery('(max-width: 369px)');
return ( return (
<Box mt={20}> <Box mt={20}>
@@ -132,7 +133,7 @@ export default function ListProject() {
<Group justify='space-between' align='center'> <Group justify='space-between' align='center'>
<Box> <Box>
<Box w={{ <Box w={{
base: 230, base: isMobile ? 200 : 230,
xl: 430 xl: 430
}}> }}>
<Text truncate="end" pl={20}> <Text truncate="end" pl={20}>

2
src/module/project/ui/results_file.tsx
View File

@@ -22,7 +22,7 @@ export default function ResultsFile({ name, extension }: IListFileTaskProject) {
</Center> </Center>
</Grid.Col> </Grid.Col>
<Grid.Col span={10}> <Grid.Col span={10}>
<Text>{name}</Text> <Text lineClamp={1}>{name}</Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Group> <Group>