Mobile view and misc.

src/pages/homepage/Homepage.tsx

@@ -21,15 +21,18 @@ export default function Homepage({ theme }: any) {
 		key: 'bookmarkFilter',
 		defaultValue: ['All'],
 	});
+	const isMobile = window.matchMedia('(max-width: 600px)').matches;
 	function date() {
 		const currentDate = new Date();
-		const dateOptions: Intl.DateTimeFormatOptions = {
+		const dateOptions: Intl.DateTimeFormatOptions = !isMobile
+			? {
 					weekday: 'long',
 					year: 'numeric',
 					month: 'long',
 					day: 'numeric',
-		};
+				}
-		const date = currentDate.toLocaleDateString('en-GB', dateOptions);
+			: {};
+		const date = currentDate.toLocaleDateString('en-US', dateOptions);
 		return date;
 	}
 	function greet(list: any) {
@@ -60,9 +63,9 @@ export default function Homepage({ theme }: any) {
 	return (
 		<Stack gap={0} className={stackClasses.containerStack} justify='center'>
 			<Search />
-			<Header date={date()} greet={displayedGreeting} />
+			<Header date={date()} greet={displayedGreeting} isMobile={isMobile} />
-			<Applications contentType={appFilter} />
+			<Applications contentType={appFilter} isMobile={isMobile} />
-			<Bookmarks contentType={bookmarkFilter} />
+			<Bookmarks contentType={bookmarkFilter} isMobile={isMobile} />
 			<SettingsButton
 				theme={theme}
 				setAppFilter={setAppFilter}

src/pages/homepage/components/AppItem.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import stacks from '../../../styles/Stack.module.css';
 import texts from '../../../styles/Text.module.css';
 
-function AppItem({ url, icon, name }: any) {
+function AppItem({ url, icon, name, isMobile }: any) {
 	const [textDecoration, setTextDecoration] = useState<string>('none');
 
 	return (
@@ -16,11 +16,14 @@ function AppItem({ url, icon, name }: any) {
 			className={stacks.appItemBox}
 		>
 			<Stack
+				align={isMobile && 'center'}
+				justify={isMobile && 'center'}
 				style={{
 					height: '64px',
-					marginRight: '1em',
+					width: isMobile && '100%',
-					marginLeft: '1em',
+					marginRight: isMobile ? '0' : '1em',
-					paddingTop: '15px',
+					marginLeft: isMobile ? '0' : '1em',
+					paddingTop: isMobile ? '0' : '15px',
 				}}
 			>
 				<Icon icon={`mdi:${icon}`} height={32} width={32} />

src/pages/homepage/components/Applications.tsx

@@ -4,7 +4,7 @@ import { useQueryAPI } from '../../../hooks/useAPI';
 import texts from '../../../styles/Text.module.css';
 import AppItem from './AppItem';
 
-function Applications({ contentType }: any) {
+function Applications({ contentType, isMobile }: any) {
 	const { data, isFetching } = useQueryAPI({ endpoint: 'api/apps' });
 	const [applications, setApplications] = useState([]);
 	useEffect(() => {
@@ -28,7 +28,7 @@ function Applications({ contentType }: any) {
 							display: 'grid',
 							gridColumnGap: '5px',
 							gridRowGap: '5px',
-							gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr',
+							gridTemplateColumns: isMobile ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr 1fr 1fr',
 							gridTemplateRows: '64px',
 							paddingBottom: 'var(--module-spacing)',
 						}}
@@ -45,6 +45,7 @@ function Applications({ contentType }: any) {
 										url={application.url}
 										icon={application.icon}
 										category={application.category}
+										isMobile={isMobile}
 									/>
 								);
 						})}

src/pages/homepage/components/Bookmarks.tsx

@@ -4,7 +4,7 @@ import { useQueryAPI } from '../../../hooks/useAPI';
 import texts from '../../../styles/Text.module.css';
 import LinkGroups from './LinkGroups';
 
-function Links({ contentType }: any) {
+function Links({ contentType, isMobile }: any) {
 	const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
 		endpoint: 'api/links',
 	});
@@ -36,7 +36,7 @@ function Links({ contentType }: any) {
 								flexWrap: 'nowrap',
 								gridColumnGap: '20px',
 								gridRowGap: '0px',
-								gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
+								gridTemplateColumns: isMobile ? '1fr 1fr' : '1fr 1fr 1fr 1fr 1fr',
 								gridTemplateRows: 'auto',
 							}}
 						>
@@ -52,6 +52,7 @@ function Links({ contentType }: any) {
 											links={bookmarks.filter(
 												(bookmark: any) => bookmark.category === category.categoryName,
 											)}
+											isMobile={isMobile}
 										/>
 									);
 								}

src/pages/homepage/components/Header.tsx

@@ -2,7 +2,7 @@ import { Stack, Text } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { textClasses } from '../../../styles';
 
-function Header({ greet, date }: any) {
+function Header({ greet, date, isMobile }: any) {
 	const [time, setTime] = useState(new Date());
 
 	function fixDigits(k: any) {
@@ -26,7 +26,7 @@ function Header({ greet, date }: any) {
 				zIndex: '1',
 				clear: 'both',
 				display: 'flex',
-				flexDirection: 'row',
+				flexDirection: isMobile ? 'column' : 'row',
 				gap: 0,
 			}}
 		>
@@ -36,7 +36,11 @@ function Header({ greet, date }: any) {
 					width: '100%',
 				}}
 			>
-				<Text className={textClasses.greeting} classNames={textClasses}>
+				<Text
+					className={textClasses.greeting}
+					classNames={textClasses}
+					fz={isMobile && 24}
+				>
 					{greet}
 				</Text>
 			</Stack>
@@ -47,6 +51,7 @@ function Header({ greet, date }: any) {
 					justifyContent: 'right',
 					width: 'auto',
 					gap: 0,
+					flexDirection: isMobile ? 'row' : 'column',
 				}}
 			>
 				<Text

src/pages/homepage/components/LinkGroups.tsx

@@ -2,20 +2,21 @@ import { Stack, Text } from '@mantine/core';
 import texts from '../../../styles/Text.module.css';
 import LinkItem from './LinkItem';
 
-function LinkGroups({ links, category }: any) {
+function LinkGroups({ links, category, isMobile }: any) {
 	return (
 		<Stack
 			style={{
 				marginBottom: '0em',
 				display: 'block',
 				lineHeight: '1.5rem',
+				overflow: 'hidden',
 			}}
 		>
 			<Text className={texts.linkCategory} classNames={texts}>
 				{category}
 			</Text>
 			{links?.map((link: any) => (
-				<LinkItem key={link.name} link={link} />
+				<LinkItem key={link.name} link={link} isMobile={isMobile} />
 			))}
 		</Stack>
 	);

src/pages/homepage/components/LinkItem.tsx

@@ -1,9 +1,15 @@
 import { Text } from '@mantine/core';
 import texts from '../../../styles/Text.module.css';
 
-function LinkItem({ link }: any) {
+function LinkItem({ link, isMobile }: any) {
 	return (
-		<Text className={texts.linkItem} classNames={texts} component='a' href={link.url}>
+		<Text
+			className={texts.linkItem}
+			classNames={texts}
+			component='a'
+			href={link.url}
+			style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+		>
 			{link.name}
 		</Text>
 	);