wkc/lcm-potty-chart
Archived
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Fix layout.

Browse Source
This commit is contained in:
Lucid Kobold
2022-06-24 09:39:49 -05:00
parent 9c18730126
commit 7b36b040e5
7 changed files with 151 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
data/stickerSeeder.ts
View File

@@ -24,6 +24,7 @@ const generateSticker = (): -2 | -1 | 0 | 1 | 2 => {
}
};
// TODO: Update so seeder takes in a month or date to then generate the stickers for it.
/**
* This seeder is to simulate the date and sticker info from the database.
* Filling up an array for the current month with sticker from ths first to

28
src/components/calender/Day.tsx
View File

@@ -90,11 +90,12 @@ const Day = ({
return isOverflow ? (
<VStack
bg="transparent"
color="gray.600"
border="1px solid #181d8f"
w="100%"
h="100%"
bg="transparent"
pt={2}
color="gray.600"
border="1px solid #181d8f"
_hover={{
cursor: isBefore(currDateObj, endOfDay(currDate))
? "pointer"
@@ -107,7 +108,6 @@ const Day = ({
spacing="0.5rem"
alignContent="center"
justifyContent="flex-start"
pt={2}
>
<Text w="auto" h="auto">
{`${getDate(currDateObj)}`}
@@ -126,6 +126,8 @@ const Day = ({
</VStack>
) : (
<VStack
w="100%"
h="100%"
bg={
tutorial
? tutorial === "add" && isToday
@@ -133,8 +135,8 @@ const Day = ({
: tutorial === "edit" &&
!isToday &&
isBefore(currDateObj, endOfDay(currDate))
? "gray.600"
: "transparent"
? "gray.600"
: "transparent"
: "transparent"
}
border={
@@ -144,12 +146,10 @@ const Day = ({
: tutorial === "edit" &&
!isToday &&
isBefore(currDateObj, endOfDay(currDate))
? "1px solid #00ff3c"
: "1px solid #0068ff"
? "1px solid #00ff3c"
: "1px solid #0068ff"
: "1px solid #0068ff"
}
w="100%"
h="100%"
onClick={() => {
setStep(0);
setSelectedSticker(null);
@@ -168,13 +168,15 @@ const Day = ({
: tutorial === "edit" &&
!isToday &&
isBefore(currDateObj, endOfDay(currDate))
? "gray.600"
: "transparent"
? "gray.600"
: "transparent"
: "transparent",
border: "1px solid #FFF"
}}
>
<Text
h="auto"
w="auto"
p={
isToday
? getDate(currDateObj) > 10
@@ -182,8 +184,6 @@ const Day = ({
: "0px 9px 3px 9px"
: "auto"
}
h="auto"
w="auto"
border={isToday ? "1px solid #0068ff" : "0px"}
borderRadius={isToday ? "100px" : "0px"}
>

18
src/components/calender/index.tsx
View File

@@ -73,24 +73,24 @@ const Calender = ({
<CalenderNav title={title} isLoading={isLoading} />
<VStack h="100%" w="100%" spacing={0}>
<HStack
px={{ base: 1, sm: 2, md: 6 }}
spacing={0}
w="100%"
h="auto"
px={{ base: 1, sm: 2, md: 6 }}
spacing={0}
alignContent="center"
alignItems="center"
>
{weekdays.map((weekDay) => {
return (
<Box
key={weekDay}
display="flex"
alignContent="center"
alignItems="center"
bg="transparent"
border="1px solid #0068ff"
w="100%"
h={10}
key={weekDay}
bg="transparent"
border="1px solid #0068ff"
alignContent="center"
alignItems="center"
>
<Text display={{ base: "none", md: "block" }} w="100%" h="auto">
{weekDay}
@@ -110,9 +110,9 @@ const Calender = ({
})}
</HStack>
<SimpleGrid
px={{ base: 1, sm: 2, md: 6 }}
w="100%"
h="100%"
px={{ base: 1, sm: 2, md: 6 }}
columns={7}
alignItems="center"
>
@@ -151,7 +151,7 @@ const Calender = ({
id.length
? id
: format(toDateObj, "yyyyddLL") +
`/${sticker === null ? 0 : sticker}`
`/${sticker === null ? 0 : sticker}`
}
/>
);

189
src/components/tutorial/CalenderExample.tsx
View File

@@ -60,7 +60,8 @@ const CalenderExample = ({
useEffect(() => {
const getCurrentWeek = (): MonthDay[] => {
let foundWeek: MonthDay[] | null;
let foundWeek: MonthDay[];
for (const week in month) {
const currWeek = month[week];
@@ -82,91 +83,121 @@ const CalenderExample = ({
}, [currWeek, dispatch, month]);
return (
<VStack h="8.5rem" w="100%" spacing={0}>
<HStack
px={{ base: 1, sm: 2, md: 6 }}
spacing={0}
<VStack
h="auto"
w="100%"
alignContent="center"
alignItems="center"
spacing={2}
>
<VStack
h="8.5rem"
w="100%"
h="auto"
alignContent="center"
alignItems="center"
spacing={0}
>
{weekdays.map((weekDay) => {
return (
<Box
display="flex"
alignContent="center"
alignItems="center"
bg="transparent"
border="1px solid #0068ff"
w="100%"
h={10}
key={weekDay}
>
<Text display={{ base: "none", md: "block" }} w="100%" h="auto">
{weekDay}
</Text>
<Text
display={{ base: "none", sm: "block", md: "none" }}
w="100%"
h="auto"
>
{weekDay.substring(0, 3)}
</Text>
<Text display={{ base: "block", sm: "none" }} w="100%" h="auto">
{weekDay.substring(0, 2)}
</Text>
</Box>
);
})}
</HStack>
<SimpleGrid
px={{ base: 1, sm: 2, md: 6 }}
w="100%"
h="100%"
columns={7}
alignItems="center"
>
{currWeek &&
currWeek.map((day: MonthDay) => {
const { date, isOverflow, overflowDirection } = day;
const toDateObj: Date = new Date(date);
let sticker = null;
let id = "";
stickersMonth.map((stickerDay) => {
const { date: stickerDate } = stickerDay;
if (isSameDay(new Date(stickerDate), toDateObj)) {
sticker = stickerDay.sticker;
id = stickerDay.id;
}
});
<HStack
w="100%"
h="auto"
alignContent="center"
alignItems="center"
spacing={0}
px={{ base: 1, sm: 2, md: 6 }}
>
{weekdays.map((weekDay) => {
return (
<Day
isLoading={isLoading}
isOverflow={isOverflow}
overflowDirection={overflowDirection}
currSticker={sticker}
date={date}
selectedDate={selectedDate.date}
currDate={currDateObj}
tutorial={type}
key={
id.length
? id
: format(toDateObj, "yyyyddLL") +
`/${sticker === null ? 0 : sticker}`
}
/>
<Box
key={weekDay}
display="flex"
w="100%"
h={10}
bg="transparent"
border="1px solid #0068ff"
alignContent="center"
alignItems="center"
>
<Text display={{ base: "none", md: "block" }} w="100%" h="auto">
{weekDay}
</Text>
<Text
display={{ base: "none", sm: "block", md: "none" }}
w="100%"
h="auto"
>
{weekDay.substring(0, 3)}
</Text>
<Text display={{ base: "block", sm: "none" }} w="100%" h="auto">
{weekDay.substring(0, 2)}
</Text>
</Box>
);
})}
</SimpleGrid>
</HStack>
<SimpleGrid
w="100%"
h="100%"
columns={7}
px={{ base: 1, sm: 2, md: 6 }}
alignItems="center"
>
{currWeek &&
currWeek.map((day: MonthDay) => {
const { date, isOverflow, overflowDirection } = day;
const toDateObj: Date = new Date(date);
let sticker = null;
let id = "";
stickersMonth.map((stickerDay) => {
const { date: stickerDate } = stickerDay;
if (isSameDay(new Date(stickerDate), toDateObj)) {
sticker = stickerDay.sticker;
id = stickerDay.id;
}
});
return (
<Day
isLoading={isLoading}
isOverflow={isOverflow}
overflowDirection={overflowDirection}
currSticker={sticker}
date={date}
selectedDate={selectedDate.date}
currDate={currDateObj}
tutorial={type}
key={
id.length
? id
: format(toDateObj, "yyyyddLL") +
`/${sticker === null ? 0 : sticker}`
}
/>
);
})}
</SimpleGrid>
</VStack>
{type === "edit" && (
<VStack
w="100%"
h="auto"
alignContent="center"
alignItems="center"
spacing={2}
>
<Text>
{
"Not being able to edit within this tutorial when the current date is the start of the month is a known bug."
}
</Text>
<Text>{"This bug will be fixed in beta v2."}</Text>
</VStack>
)}
</VStack>
);
};

4
src/components/tutorial/sections/TutorialLinks.tsx
View File

@@ -18,9 +18,9 @@ const TutorialLinks = (): JSX.Element => {
{"More Info"}
</Heading>
<HStack
display={{ base: "none", lg: "flex" }}
h="auto"
w="100%"
display={{ base: "none", lg: "flex" }}
justifyContent="center"
alignContent="center"
spacing={4}
@@ -49,9 +49,9 @@ const TutorialLinks = (): JSX.Element => {
})}
</HStack>
<VStack
display={{ base: "flex", lg: "none" }}
h="auto"
w="100%"
display={{ base: "flex", lg: "none" }}
justifyContent="center"
alignContent="center"
spacing={4}

28
src/theme/layout/Header.tsx
View File

@@ -84,8 +84,8 @@ const Header = (): JSX.Element => {
open
? "brand.main"
: transparentNavbar
? "rgba(49, 56, 220, 0.9)"
: "brand.main"
? "rgba(49, 56, 220, 0.9)"
: "brand.main"
}
transition=".5s ease"
borderRadius="0px 0px 10px 10px"
@@ -99,18 +99,18 @@ const Header = (): JSX.Element => {
>
{/* Logo | Site Name */}
<HStack
display={{ base: "flex", lg: "none" }}
position="absolute"
width="100%"
height={12}
top={0}
ml={4}
spacing="5px"
justifyContent={{
base: "flex-start",
sm: "center"
}}
alignItems="center"
height={12}
top={0}
position="absolute"
ml={4}
display={{ base: "flex", lg: "none" }}
spacing="5px"
_hover={{
cursor: "default"
}}
@@ -163,21 +163,21 @@ const Header = (): JSX.Element => {
</HStack>
<Menu isLazy lazyBehavior="unmount" isOpen={open}>
<MenuButton
id="mobile-menu-button"
as={IconButton}
aria-label="Mobile Menu"
icon={menuIcon()}
onClick={() => setOpen(!open)}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
display={{
base: "inline-flex",
lg: "none"
}}
variant="mobileNav"
bg={transparentNavbar ? "transparent" : "rgba(255, 255, 255, .15)"}
type="button"
border={transparentNavbar ? "1px solid #0068ff" : "none"}
id="mobile-menu-button"
variant="mobileNav"
type="button"
onClick={() => setOpen(!open)}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
/>
<MobileNav updateOpen={setOpen} />
</Menu>

2
src/theme/layout/MobileNav.tsx
View File

@@ -17,12 +17,12 @@ const MobileNav: FC<MobileNavProps> = ({ updateOpen }: MobileNavProps) => {
<MenuList
as="nav"
display={{ base: "block", lg: "none" }}
bg="brand.main"
h="auto"
w="100%"
p={0}
border="none"
boxShadow="none"
bg="brand.main"
>
{navItems.map((navItem: NavItem, index: number) => {
return (