Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-09 15:05:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Styling changes and add multiple popovers

Browse Source
This commit is contained in:
Aj - Thomas
2022-05-06 21:40:21 +02:00
parent a8efa5a431
commit 5a809fd1f4
3 changed files with 37 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/AppShelf/AppShelf.tsx
View File

@@ -45,7 +45,7 @@ const AppShelf = (props: any) => {
} }
return ( return (
<SimpleGrid m="xl" cols={4} spacing="xl"> <SimpleGrid m="xl" cols={5} spacing="xl">
{config.services.map((service, i) => ( {config.services.map((service, i) => (
<AppShelfItem key={service.name} service={service} /> <AppShelfItem key={service.name} service={service} />
))} ))}

52
components/calendar/CalendarComponent.tsx
View File

@@ -1,5 +1,5 @@
/* eslint-disable react/no-children-prop */ /* eslint-disable react/no-children-prop */
import { Indicator, Popover, Box, Center, ScrollArea, Divider } from '@mantine/core'; import { Indicator, Popover, Box, ScrollArea, Divider } from '@mantine/core';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Calendar } from '@mantine/dates'; import { Calendar } from '@mantine/dates';
import { RadarrMediaDisplay, SonarrMediaDisplay } from './MediaDisplay'; import { RadarrMediaDisplay, SonarrMediaDisplay } from './MediaDisplay';
@@ -83,41 +83,25 @@ function DayComponent(props: any) {
onClick={() => { onClick={() => {
setOpened(true); setOpened(true);
}} }}
style={{ height: '100%', width: '100%' }}
> >
<Center> {radarrFiltered.length > 0 && <Indicator size={7} color="yellow" children={null} />}
{/* TODO: #6 Make the color of the indicator dependant on the type of medias avilable */} {sonarrFiltered.length > 0 && <Indicator size={7} offset={8} color="blue" children={null} />}
<> <Popover
{radarrFiltered.length > 0 && ( position="left"
<Indicator width={700}
size={8} onClose={() => setOpened(false)}
offset={10} opened={opened}
position="bottom-center" // TODO: Fix this !! WTF ?
color="yellow" target={`‏ ${day}`}
children={null} >
/> <ScrollArea style={{ height: 400 }}>
{sonarrFiltered.length > 0 && <SonarrMediaDisplay media={sonarrFiltered[0]} />}
{radarrFiltered.length > 0 && sonarrFiltered.length > 0 && (
<Divider variant="dashed" my="xl" />
)} )}
{sonarrFiltered.length > 0 && ( {radarrFiltered.length > 0 && <RadarrMediaDisplay media={radarrFiltered[0]} />}
<Indicator size={8} offset={-12} position="top-end" color="blue" children={null} /> </ScrollArea>
)} </Popover>
<Popover
position="left"
width={700}
onClose={() => setOpened(false)}
opened={opened}
// TODO: Fix this !! WTF ?
target={`‏ ${day}`}
>
<ScrollArea style={{ height: 400 }}>
{sonarrFiltered.length > 0 && <SonarrMediaDisplay media={sonarrFiltered[0]} />}
{radarrFiltered.length > 0 && sonarrFiltered.length > 0 && (
<Divider variant="dashed" my="xl" />
)}
{radarrFiltered.length > 0 && <RadarrMediaDisplay media={radarrFiltered[0]} />}
</ScrollArea>
</Popover>
</>
</Center>
</Box> </Box>
); );
} }

22
pages/_document.tsx
View File

@@ -1,8 +1,22 @@
import Document from 'next/document'; import Document, { DocumentContext } from 'next/document';
import { createGetInitialProps } from '@mantine/next'; import { ServerStyles, createStylesServer } from '@mantine/next';
const getInitialProps = createGetInitialProps(); const stylesServer = createStylesServer();
export default class _Document extends Document { export default class _Document extends Document {
static getInitialProps = getInitialProps; static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx);
// Add your app specific logic here
return {
...initialProps,
styles: (
<>
{initialProps.styles}
<ServerStyles html={initialProps.html} server={stylesServer} />
</>
),
};
}
} }