jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

♿️ Work on responsiveness for the AppShelf

Browse Source 
Fixes #1, Fixes #42, Fixes #82, Fixes #85
This commit is contained in:
Aj - Thomas
2022-05-14 21:45:54 +02:00
committed by GitHub
parent b3a97431b3 477ff8241e
commit f2a7f83e12
11 changed files with 143 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/docker_dev.yml vendored
View File

@@ -18,7 +18,7 @@ env:
# Use docker.io for Docker Hub if empty
REGISTRY: ghcr.io
# github.repository as <account>/<repo>
IMAGE_NAME: ${{ github.repository }}
IMAGE_NAME: ${{ github.repository }}-test
jobs:
# Push image to GitHub Packages.

33
src/components/AppShelf/AddAppShelfItem.tsx
View File

@@ -10,6 +10,8 @@ import {
Text,
Card,
LoadingOverlay,
ActionIcon,
Tooltip,
} from '@mantine/core';
import { useForm } from '@mantine/form';
import { motion } from 'framer-motion';
@@ -19,13 +21,42 @@ import { useConfig } from '../../tools/state';
import { ServiceTypeList } from '../../tools/types';
import { AppShelfItemWrapper } from './AppShelfItemWrapper';
export function AddItemShelfButton(props: any) {
const [opened, setOpened] = useState(false);
return (
<>
<Modal
size="xl"
radius="md"
opened={props.opened || opened}
onClose={() => setOpened(false)}
title="Add a service"
>
<AddAppShelfItemForm setOpened={setOpened} />
</Modal>
<ActionIcon
variant="default"
radius="md"
size="xl"
color="blue"
style={props.style}
onClick={() => setOpened(true)}
>
<Tooltip label="Add a service">
<Apps />
</Tooltip>
</ActionIcon>
</>
);
}
export default function AddItemShelfItem(props: any) {
const [opened, setOpened] = useState(false);
return (
<>
<Modal
size="xl"
radius="lg"
radius="md"
opened={props.opened || opened}
onClose={() => setOpened(false)}
title="Add a service"

8
src/components/AppShelf/AppShelf.story.tsx
View File

@@ -1,3 +1,4 @@
import { SimpleGrid } from '@mantine/core';
import AppShelf, { AppShelfItem } from './AppShelf';
export default {
@@ -16,3 +17,10 @@ export default {
export const Default = (args: any) => <AppShelf {...args} />;
export const One = (args: any) => <AppShelfItem {...args} />;
export const Ten = (args: any) => (
<SimpleGrid>
{Array.from(Array(10)).map((_, i) => (
<AppShelfItem {...args} key={i} />
))}
</SimpleGrid>
);

91
src/components/AppShelf/AppShelf.tsx
View File

@@ -1,21 +1,29 @@
import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { Text, AspectRatio, SimpleGrid, Card, Image, Group, Space } from '@mantine/core';
import { Text, AspectRatio, SimpleGrid, Card, Image, useMantineTheme } from '@mantine/core';
import { useConfig } from '../../tools/state';
import { serviceItem } from '../../tools/types';
import AddItemShelfItem from './AddAppShelfItem';
import { AppShelfItemWrapper } from './AppShelfItemWrapper';
import AppShelfMenu from './AppShelfMenu';
const AppShelf = () => {
const { config } = useConfig();
return (
<SimpleGrid m="xl" cols={5} spacing="xl">
<SimpleGrid
cols={7}
spacing="xl"
breakpoints={[
{ maxWidth: 2400, cols: 6, spacing: 'xl' },
{ maxWidth: 1800, cols: 5, spacing: 'xl' },
{ maxWidth: 1500, cols: 4, spacing: 'lg' },
{ maxWidth: 800, cols: 3, spacing: 'md' },
{ maxWidth: 400, cols: 3, spacing: 'sm' },
{ maxWidth: 400, cols: 2, spacing: 'sm' },
]}
>
{config.services.map((service) => (
<AppShelfItem key={service.name} service={service} />
))}
<AddItemShelfItem />
</SimpleGrid>
);
};
@@ -23,6 +31,7 @@ const AppShelf = () => {
export function AppShelfItem(props: any) {
const { service }: { service: serviceItem } = props;
const [hovering, setHovering] = useState(false);
const theme = useMantineTheme();
return (
<motion.div
key={service.name}
@@ -33,39 +42,41 @@ export function AppShelfItem(props: any) {
setHovering(false);
}}
>
<AppShelfItemWrapper hovering={hovering}>
<Card
style={{
boxShadow: hovering ? '0px 0px 3px rgba(0, 0, 0, 0.5)' : '0px 0px 1px rgba(0, 0, 0, 0.5)',
backgroundColor:
theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
}}
radius="md"
>
<Card.Section>
<Group position="apart" mx="lg">
<Space />
<Text
// TODO: #1 Remove this hack to get the text to be centered.
ml={15}
style={{
alignSelf: 'center',
alignContent: 'center',
alignItems: 'center',
justifyContent: 'center',
justifyItems: 'center',
}}
mt="sm"
weight={500}
>
{service.name}
</Text>
<motion.div
style={{
alignSelf: 'flex-end',
}}
animate={{
opacity: hovering ? 1 : 0,
}}
>
<AppShelfMenu service={service} />
</motion.div>
</Group>
<Text mt="sm" align="center" lineClamp={1} weight={500}>
{service.name}
</Text>
<motion.div
style={{
position: 'absolute',
top: 5,
right: 5,
alignSelf: 'flex-end',
}}
animate={{
opacity: hovering ? 1 : 0,
}}
>
<AppShelfMenu service={service} />
</motion.div>
</Card.Section>
<Card.Section>
<AspectRatio ratio={5 / 3} m="xl">
<AspectRatio
ratio={3 / 5}
m="xl"
style={{
width: 150,
height: 90,
}}
>
<motion.i
whileHover={{
cursor: 'pointer',
@@ -73,19 +84,19 @@ export function AppShelfItem(props: any) {
}}
>
<Image
style={{
maxWidth: 80,
}}
fit="contain"
onClick={() => {
window.open(service.url);
}}
style={{
maxWidth: '50%',
marginBottom: 10,
}}
src={service.icon}
/>
</motion.i>
</AspectRatio>
</Card.Section>
</AppShelfItemWrapper>
</Card>
</motion.div>
);
}

4
src/components/AppShelf/AppShelfItemWrapper.tsx
View File

@@ -8,10 +8,6 @@ export function AppShelfItemWrapper(props: any) {
style={{
boxShadow: hovering ? '0px 0px 3px rgba(0, 0, 0, 0.5)' : '0px 0px 1px rgba(0, 0, 0, 0.5)',
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
//TODO: #3 Fix this temporary fix and make the width and height dynamic / responsive
width: 200,
height: 180,
}}
radius="md"
>

2
src/components/Settings/SettingsMenu.tsx
View File

@@ -122,7 +122,7 @@ export function SettingsMenuButton(props: any) {
</Modal>
<ActionIcon
variant="default"
radius="xl"
radius="md"
size="xl"
color="blue"
style={props.style}

2
src/components/layout/Footer.tsx
View File

@@ -72,7 +72,7 @@ export function Footer({ links }: FooterCenteredProps) {
}}
>
Made with ❤️ by @
<Anchor href="https://github.com/ajnart" style={{ color: 'inherit', fontStyle: 'inherit' }}>
<Anchor href="https://github.com/ajnart" style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}>
ajnart
</Anchor>
</Text>

86
src/components/layout/Header.tsx
View File

@@ -1,18 +1,11 @@
import React, { useState } from 'react';
import {
createStyles,
Header as Head,
Container,
Group,
Burger,
Drawer,
Center,
} from '@mantine/core';
import React from 'react';
import { createStyles, Header as Head, Group, Drawer, Center } from '@mantine/core';
import { useBooleanToggle } from '@mantine/hooks';
import { NextLink } from '@mantine/next';
import { Logo } from './Logo';
import { SettingsMenuButton } from '../Settings/SettingsMenu';
import CalendarComponent from '../modules/calendar/CalendarModule';
import { SettingsMenuButton } from '../Settings/SettingsMenu';
import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
const HEADER_HEIGHT = 60;
@@ -40,8 +33,6 @@ const useStyles = createStyles((theme) => ({
header: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
height: '100%',
},
@@ -94,62 +85,33 @@ interface HeaderResponsiveProps {
export function Header({ links }: HeaderResponsiveProps) {
const [opened, toggleOpened] = useBooleanToggle(false);
const [active, setActive] = useState('/');
const { classes, cx } = useStyles();
const items = (
<>
{links.map((link) => (
<NextLink
key={link.label}
href={link.link}
className={cx(classes.link, { [classes.linkActive]: active === link.link })}
onClick={(event) => {
setActive(link.link);
toggleOpened(false);
}}
>
{link.label}
</NextLink>
))}
</>
);
return (
<Head height={HEADER_HEIGHT} mb={10} className={classes.root}>
<Container className={classes.header}>
<Group>
<NextLink style={{ textDecoration: 'none' }} href="/">
<Logo style={{ fontSize: 22 }} />
</NextLink>
</Group>
<Group spacing={5} className={classes.links}>
{items}
</Group>
<Head height={HEADER_HEIGHT}>
<Group direction="row" align="center" position="apart" className={classes.header} mx="xl">
<NextLink style={{ textDecoration: 'none' }} href="/">
<Logo style={{ fontSize: 22 }} />
</NextLink>
<Group>
<SettingsMenuButton />
<Burger
opened={opened}
onClick={() => toggleOpened()}
className={classes.burger}
size="sm"
/>
<AddItemShelfButton />
</Group>
</Group>
<Drawer
opened={opened}
overlayOpacity={0.55}
overlayBlur={3}
onClose={() => toggleOpened()}
position="right"
>
{opened ?? (
<Center>
<CalendarComponent />
</Center>
)}
</Drawer>
</Container>
<Drawer
opened={opened}
overlayOpacity={0.55}
overlayBlur={3}
onClose={() => toggleOpened()}
position="right"
>
{opened ?? (
<Center>
<CalendarComponent />
</Center>
)}
</Drawer>
</Head>
);
}

2
src/components/layout/Layout.tsx
View File

@@ -7,7 +7,7 @@ import Navbar from './Navbar';
const useStyles = createStyles((theme) => ({
main: {
[theme.fn.largerThan('md')]: {
maxWidth: 1200,
maxWidth: 1500,
},
},
}));

32
src/components/layout/Logo.tsx
View File

@@ -1,15 +1,29 @@
import { Text } from '@mantine/core';
import { Group, Text } from '@mantine/core';
import * as React from 'react';
import { CURRENT_VERSION } from '../../../data/constants';
export function Logo({ style }: any) {
return (
<Text
sx={style}
weight="bold"
variant="gradient"
gradient={{ from: 'red', to: 'orange', deg: 145 }}
>
Homarr
</Text>
<Group>
<Text
sx={style}
weight="bold"
variant="gradient"
gradient={{ from: 'red', to: 'orange', deg: 145 }}
>
Homarr
</Text>
<Text
style={{
color: 'gray',
fontStyle: 'inherit',
fontSize: 'inherit',
alignSelf: 'end',
alignContent: 'start',
}}
>
{CURRENT_VERSION}
</Text>
</Group>
);
}

2
src/components/layout/Navbar.tsx
View File

@@ -6,7 +6,7 @@ export default function Navbar() {
return (
<MantineNavbar
height="100%"
hiddenBreakpoint="md"
hiddenBreakpoint="lg"
hidden
width={{
base: 'auto',