style: update mobile
Deskripsi: - update calender - update division - document - update home - update project - update task No Issue
This commit is contained in:
@@ -18,6 +18,7 @@ import _ from "lodash";
|
||||
import { FaTrash } from "react-icons/fa6";
|
||||
import LayoutModal from "@/module/_global/layout/layout_modal";
|
||||
import { funCreateTask } from "../lib/api_task";
|
||||
import { useMediaQuery } from "@mantine/hooks";
|
||||
|
||||
export default function CreateTask() {
|
||||
const router = useRouter()
|
||||
@@ -37,6 +38,7 @@ export default function CreateTask() {
|
||||
const [listFile, setListFile] = useState<IListFileTask[]>([])
|
||||
const [indexDelFile, setIndexDelFile] = useState<number>(0)
|
||||
const [indexDelTask, setIndexDelTask] = useState<number>(0)
|
||||
const isMobile = useMediaQuery('(max-width: 369px)');
|
||||
const [title, setTitle] = useState("")
|
||||
const [touched, setTouched] = useState({
|
||||
title: false,
|
||||
@@ -235,19 +237,19 @@ export default function CreateTask() {
|
||||
>
|
||||
<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>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client'
|
||||
import { globalRole, LayoutDrawer, SkeletonSingle, WARNA } from "@/module/_global";
|
||||
import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack, Grid } from "@mantine/core";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
@@ -24,6 +24,7 @@ export default function ListAnggotaDetailTask() {
|
||||
const router = useRouter()
|
||||
const roleLogin = useHookstate(globalRole)
|
||||
const adminLogin = useHookstate(globalIsAdminDivision)
|
||||
const isMobile = useMediaQuery('(max-width: 369px)');
|
||||
|
||||
async function getOneData() {
|
||||
try {
|
||||
@@ -104,20 +105,20 @@ export default function ListAnggotaDetailTask() {
|
||||
>
|
||||
<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"} lineClamp={1} fz={isMobile ? 10 : 14}>{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>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client'
|
||||
import { WARNA } from "@/module/_global";
|
||||
import { Box, Grid, ActionIcon, Progress, Text, Skeleton } from "@mantine/core";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
|
||||
import { useParams } from "next/navigation";
|
||||
import toast from "react-hot-toast";
|
||||
import { HiMiniPresentationChartBar } from "react-icons/hi2";
|
||||
@@ -16,6 +16,7 @@ export default function ProgressDetailTask() {
|
||||
const param = useParams<{ id: string, detail: string }>()
|
||||
const refresh = useHookstate(globalRefreshTask)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const isMobile = useMediaQuery('(max-width: 369px)');
|
||||
|
||||
async function getOneData() {
|
||||
try {
|
||||
@@ -68,17 +69,17 @@ export default function ProgressDetailTask() {
|
||||
<Grid.Col span={3}>
|
||||
<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>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={9}>
|
||||
<Box>
|
||||
<Text>Kemajuan Kegiatan {valProgress}%</Text>
|
||||
<Text fz={isMobile ? 14 : 16}>Kemajuan Kegiatan {valProgress}%</Text>
|
||||
<Progress
|
||||
style={{
|
||||
border: `1px solid ${"#BDBDBD"}`,
|
||||
@@ -86,7 +87,7 @@ export default function ProgressDetailTask() {
|
||||
w={"100%"}
|
||||
color="#FCAA4B"
|
||||
radius="md"
|
||||
size="xl"
|
||||
size={isMobile ? "lg" : "xl"}
|
||||
value={valProgress}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@@ -7,7 +7,7 @@ export default function DrawerDivisionTask() {
|
||||
<Box>
|
||||
<Stack pt={10}>
|
||||
<SimpleGrid
|
||||
cols={{ base: 3, sm: 3, lg: 3 }}
|
||||
cols={{ base: 2, sm: 3, lg: 3 }}
|
||||
>
|
||||
<Flex onClick={() => window.location.href = "task/create"} justify={'center'} align={'center'} direction={'column'} >
|
||||
<Box>
|
||||
|
||||
Reference in New Issue
Block a user