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

style: update mobile

Browse Source 
Deskripsi:
- update calender
- update division
- document
- update home
- update project
- update task

No Issue
This commit is contained in:
lukman
2024-09-11 16:44:57 +08:00
parent 57c245a880
commit 0f0acf5e67
16 changed files with 110 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/module/home/ui/features.tsx
View File

@@ -1,12 +1,14 @@
'use client'
import { WARNA } from '@/module/_global';
import { ActionIcon, Box, Center, Grid, SimpleGrid, Text } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { useRouter } from 'next/navigation';
import React from 'react';
import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2 } from "react-icons/hi2";
export default function Features() {
const router = useRouter()
const isMobile = useMediaQuery('(max-width: 369px)');
return (
<>
<Box pt={10}>
@@ -17,57 +19,57 @@ export default function Features() {
<Box onClick={() => router.push('/division')}>
<Center>
<ActionIcon variant="gradient"
size={68}
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMiniUserGroup size={35} color={WARNA.biruTua} />
<HiMiniUserGroup size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Divisi</Text>
<Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Divisi</Text>
</Center>
</Box>
<Box onClick={() => router.push('/project?status=0&group=null')}>
<Center>
<ActionIcon variant="gradient"
size={68}
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMiniPresentationChartBar size={35} color={WARNA.biruTua} />
<HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Kegiatan</Text>
<Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Kegiatan</Text>
</Center>
</Box>
<Box onClick={() => router.push('/announcement')}>
<Center>
<ActionIcon variant="gradient"
size={68}
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMegaphone size={35} color={WARNA.biruTua} />
<HiMegaphone size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Pengumuman</Text>
<Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Pengumuman</Text>
</Center>
</Box>
<Box onClick={() => router.push('/home?cat=fitur')}>
<Center>
<ActionIcon variant="gradient"
size={68}
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiSquares2X2 size={35} color={WARNA.biruTua} />
<HiSquares2X2 size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Semua</Text>
<Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Semua</Text>
</Center>
</Box>
</SimpleGrid>

14
src/module/home/ui/list_discussion.tsx
View File

@@ -8,7 +8,7 @@ import { useState } from "react";
import { IDataHomeDiskusi } from "../lib/type_home";
import { funGetHome } from "../lib/api_home";
import toast from "react-hot-toast";
import { useShallowEffect } from "@mantine/hooks";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
@@ -16,6 +16,7 @@ export default function ListDiscussion() {
const router = useRouter()
const [isData, setData] = useState<IDataHomeDiskusi[]>([])
const [loading, setLoading] = useState(true);
const isMobile = useMediaQuery('(max-width: 369px)');
const fetchData = async () => {
try {
@@ -79,8 +80,11 @@ export default function ListDiscussion() {
}} onClick={() => router.push(`/division/${v.idDivision}/discussion/${v.id}`)}>
<Group>
<GoDiscussionClosed size={25} />
<Box w={{ base: 230, md: 400 }}>
<Text fw={"bold"} truncate="end">
<Box w={{
base: isMobile ? 180 : 230,
md: 400
}}>
<Text fw={"bold"} truncate="end" fz={isMobile ? 14 : 16} >
{v.desc}
</Text>
</Box>
@@ -93,7 +97,7 @@ export default function ListDiscussion() {
<Group gap={5} align="center">
<CiUser size={18} />
<Box w={{
base: 125,
base: isMobile ? 110 : 125,
xl: 300
}}>
<Text fz={13} lineClamp={1}>
@@ -108,7 +112,7 @@ export default function ListDiscussion() {
}}>
<Group gap={5} align="center" justify="flex-end">
<CiClock2 size={18} />
<Text fz={13}>{v.date}</Text>
<Text fz={isMobile ? 11 : 13}>{v.date}</Text>
</Group>
</Grid.Col>
</Grid>

9
src/module/home/ui/list_event.tsx
View File

@@ -6,7 +6,7 @@ import { useState } from "react"
import { IDataHomeEvent } from "../lib/type_home"
import { funGetHome } from "../lib/api_home"
import toast from "react-hot-toast"
import { useShallowEffect } from "@mantine/hooks"
import { useMediaQuery, useShallowEffect } from "@mantine/hooks"
import _ from "lodash"
@@ -14,6 +14,7 @@ export default function ListEventHome() {
const router = useRouter()
const [isData, setData] = useState<IDataHomeEvent[]>([])
const [loading, setLoading] = useState(true);
const isMobile = useMediaQuery('(max-width: 369px)');
const fetchData = async () => {
try {
@@ -74,9 +75,9 @@ export default function ListEventHome() {
<Group>
<Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
<Flex direction={'column'}>
<Text>{event.timeStart} - {event.timeEnd}</Text>
<Text fz={isMobile ? 14 : 16}>{event.timeStart} - {event.timeEnd}</Text>
<Box w={{
base: 260,
base: isMobile ? 220 : 260,
xl: 430
}}>
<Text fw={"bold"} lineClamp={1}>
@@ -84,7 +85,7 @@ export default function ListEventHome() {
</Text>
</Box>
<Box w={{
base: 260,
base: isMobile ? 230 : 260,
xl: 420
}}>
<Text lineClamp={1}>

6
src/module/home/ui/list_notification.tsx
View File

@@ -1,6 +1,7 @@
"use client"
import { WARNA } from '@/module/_global';
import { ActionIcon, Box, Center, Grid, Group, Spoiler, Text } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { useRouter } from 'next/navigation';
import React from 'react';
import { FaBell } from 'react-icons/fa6';
@@ -65,6 +66,7 @@ const dataNotification = [
export default function ListNotification() {
const router = useRouter()
const isMobile = useMediaQuery('(max-width: 369px)');
return (
<Box>
{dataNotification.map((v, i) => {
@@ -81,11 +83,11 @@ export default function ListNotification() {
</ActionIcon>
<Box
w={{
base: 240,
base: isMobile ? 200 : 240,
xl: 380
}}
>
<Text fw={'bold'} fz={18} lineClamp={1}>{v.title}</Text>
<Text fw={'bold'} fz={isMobile ? 16 : 18} lineClamp={1}>{v.title}</Text>
</Box>
</Group>
<Spoiler maxHeight={60} showLabel="Lebih banyak" hideLabel="Lebih sedikit">

26
src/module/home/ui/view_detail_feature.tsx
View File

@@ -7,10 +7,12 @@ import { PiUsersFourFill } from "react-icons/pi";
import { useRouter } from 'next/navigation';
import { FaUserTag, FaUserTie } from 'react-icons/fa6';
import { useHookstate } from '@hookstate/core';
import { useMediaQuery } from '@mantine/hooks';
export default function ViewDetailFeature() {
const router = useRouter()
const roleLogin = useHookstate(globalRole)
const isMobile = useMediaQuery('(max-width: 369px)');
return (
<>
<LayoutNavbarNew back='/home' title='Fitur' menu={<></>} />
@@ -22,11 +24,11 @@ export default function ViewDetailFeature() {
<Box onClick={() => router.push('/division')}>
<Center>
<ActionIcon variant="gradient"
size={68}
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMiniUserGroup size={35} color={WARNA.biruTua} />
<HiMiniUserGroup size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
@@ -36,11 +38,11 @@ export default function ViewDetailFeature() {
<Box onClick={() => router.push('/project?status=0&group=null')}>
<Center>
<ActionIcon variant="gradient"
size={68}
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMiniPresentationChartBar size={35} color={WARNA.biruTua} />
<HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
@@ -50,11 +52,11 @@ export default function ViewDetailFeature() {
<Box onClick={() => router.push('/announcement')}>
<Center>
<ActionIcon variant="gradient"
size={68}
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMegaphone size={35} color={WARNA.biruTua} />
<HiMegaphone size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
@@ -64,11 +66,11 @@ export default function ViewDetailFeature() {
<Box onClick={() => router.push('/member')}>
<Center>
<ActionIcon variant="gradient"
size={68}
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<PiUsersFourFill size={35} color={WARNA.biruTua} />
<PiUsersFourFill size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
@@ -78,11 +80,11 @@ export default function ViewDetailFeature() {
<Box onClick={() => router.push('/position')}>
<Center>
<ActionIcon variant="gradient"
size={68}
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<FaUserTie size={35} color={WARNA.biruTua} />
<FaUserTie size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
@@ -94,11 +96,11 @@ export default function ViewDetailFeature() {
<Box onClick={() => router.push('/group')}>
<Center>
<ActionIcon variant="gradient"
size={68}
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<FaUserTag size={35} color={WARNA.biruTua} />
<FaUserTag size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>