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 { funGetGroupDivision } from '@/module/group/lib/api_group';
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 { FaCheck } from 'react-icons/fa';
import { GroupData } from '../lib/type_announcement';
@@ -103,6 +103,7 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
memberGroup.set(selectedGroups);
onClose(true);
};
const isMobile = useMediaQuery('(max-width: 369px)');
useShallowEffect(() => {
getData()
@@ -111,7 +112,7 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
return (
<div>
<LayoutNavbarNew back="" title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
<Box p={20}>
<Box p={20} pb={100}>
<Group justify='flex-end' mb={20}>
<Text
onClick={handleSelectAll}
@@ -162,7 +163,7 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
<Box key={division.id}>
<Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'>
<Box w={{
base: 280,
base: isMobile ? 230 : 280,
xl: 430
}}>
<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 { funGetGroupDivision } from '@/module/group/lib/api_group';
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 { FaCheck } from 'react-icons/fa';
import { GroupData, GroupDataEditAnnouncement } from '../lib/type_announcement';
@@ -102,6 +102,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
memberGroup.set(selectedGroups);
onClose(true);
};
const isMobile = useMediaQuery('(max-width: 369px)');
useShallowEffect(() => {
getData()
@@ -150,6 +151,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
{item.name}
</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 > 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}>
<Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'>
<Box w={{
base: 280,
base: isMobile ? 230 : 280,
xl: 430
}}>
<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()
}, [param.id])
const isMobile = useMediaQuery('(max-width: 399px)');
const isMobile2 = useMediaQuery('(max-width: 369px)');
return (
<Box pt={10}>
@@ -57,12 +58,12 @@ export default function FeatureDetailDivision() {
<Grid justify='center' align='center'>
<Grid.Col span={"auto"}>
<ActionIcon variant="filled"
size={"xl"}
size={isMobile2 ? "lg" : "xl"}
aria-label="Gradient action icon"
radius={100}
color={WARNA.bgHijauMuda}
>
<LuClipboardEdit size={25} color={WARNA.biruTua} />
<LuClipboardEdit size={isMobile2 ? 20 : 25} color={WARNA.biruTua} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={{ base: 7, md: 9 }}>
@@ -82,12 +83,12 @@ export default function FeatureDetailDivision() {
<Grid justify='center' align='center'>
<Grid.Col span={"auto"}>
<ActionIcon variant="filled"
size={"xl"}
size={isMobile2 ? "lg" : "xl"}
aria-label="Gradient action icon"
radius={100}
color={WARNA.bgHijauMuda}
>
<BsFileEarmarkText size={25} color={WARNA.biruTua} />
<BsFileEarmarkText size={isMobile2 ? 20 : 25} color={WARNA.biruTua} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={{ base: 7, md: 9 }}>
@@ -107,12 +108,12 @@ export default function FeatureDetailDivision() {
<Grid justify='center' align='center'>
<Grid.Col span={"auto"}>
<ActionIcon variant="filled"
size={"xl"}
size={isMobile2 ? "lg" : "xl"}
aria-label="Gradient action icon"
radius={100}
color={WARNA.bgHijauMuda}
>
<GoCommentDiscussion size={25} color={WARNA.biruTua} />
<GoCommentDiscussion size={isMobile2 ? 20 : 25} color={WARNA.biruTua} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={{ base: 7, md: 9 }}>
@@ -132,12 +133,12 @@ export default function FeatureDetailDivision() {
<Grid justify='center' align='center'>
<Grid.Col span={"auto"}>
<ActionIcon variant="filled"
size={"xl"}
size={isMobile2 ? "lg" : "xl"}
aria-label="Gradient action icon"
radius={100}
color={WARNA.bgHijauMuda}
>
<IoCalendarOutline size={25} color={WARNA.biruTua} />
<IoCalendarOutline size={isMobile2 ? 20 : 25} color={WARNA.biruTua} />
</ActionIcon>
</Grid.Col>
<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 { funGetAllGroup, IDataGroup } from "@/module/group";
import { funGetUserByCookies } from "@/module/auth";
import { useShallowEffect } from "@mantine/hooks";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useHookstate } from "@hookstate/core";
import { globalMemberProject } from "../lib/val_project";
import ViewDateEndTask from "./create_date_end_task";
@@ -40,6 +40,7 @@ export default function CreateProject() {
const [indexDelFile, setIndexDelFile] = useState<number>(0)
const [indexDelTask, setIndexDelTask] = useState<number>(0)
const roleLogin = useHookstate(globalRole)
const isMobile = useMediaQuery('(max-width: 369px)');
const [body, setBody] = useState<any>({
idGroup: "",
@@ -302,19 +303,19 @@ export default function CreateProject() {
>
<Grid.Col span={9}>
<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={{
base: 140,
base: isMobile ? 130 : 140,
xl: 270
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
{v.name}
</Text>
</Box>
</Group>
</Grid.Col>
<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
</Text>
</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 toast from 'react-hot-toast';
import { useParams, useRouter } from 'next/navigation';
import { useShallowEffect } from '@mantine/hooks';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IDataMemberProject } from '../lib/type_project';
import { FaUser } from 'react-icons/fa6';
import { IoIosCloseCircle } from 'react-icons/io';
@@ -45,6 +45,7 @@ export default function ListAnggotaDetailProject() {
getOneData();
}, [param.id])
async function onSubmit() {
try {
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");
}
}
const isMobile = useMediaQuery('(max-width: 369px)');
return (
<Box pt={20}>
@@ -100,20 +102,20 @@ export default function ListAnggotaDetailProject() {
>
<Grid.Col span={9}>
<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={{
base: 140,
base: isMobile ? 130 : 140,
xl: 270
}}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1}>{v.name}</Text>
<Text c={"#5A687D"} fz={14} lineClamp={1}>{v.email}</Text>
<Text lineClamp={1} fz={isMobile ? 14 : 16}>{v.name}</Text>
<Text c={"#5A687D"} fz={isMobile ? 10 : 14} lineClamp={1}>{v.email}</Text>
</Flex>
</Box>
</Group>
</Grid.Col>
<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
</Text>
</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 { funGetAllProject } from '../lib/api_project';
import toast from 'react-hot-toast';
import { useShallowEffect } from '@mantine/hooks';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IDataProject } from '../lib/type_project';
import { useHookstate } from '@hookstate/core';
import _ from 'lodash';
@@ -52,6 +52,7 @@ export default function ListProject() {
const handleList = () => {
setIsList(!isList)
}
const isMobile = useMediaQuery('(max-width: 369px)');
return (
<Box mt={20}>
@@ -132,7 +133,7 @@ export default function ListProject() {
<Group justify='space-between' align='center'>
<Box>
<Box w={{
base: 230,
base: isMobile ? 200 : 230,
xl: 430
}}>
<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>
</Grid.Col>
<Grid.Col span={10}>
<Text>{name}</Text>
<Text lineClamp={1}>{name}</Text>
</Grid.Col>
</Grid>
<Group>