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

✨ Added a background image input

Browse Source 
Added an input in the advanced options for a background image. Also removed an unused import from my previous commit and changed the margin on the header bar to padding instead.
This commit is contained in:
Aimsucks
2022-06-07 17:36:05 +00:00
parent 901798055b
commit 423f8110b9
7 changed files with 33 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/layout/Aside.tsx
View File

@@ -28,6 +28,7 @@ export default function Aside(props: any) {
className={cx(classes.hide)}
style={{
border: 'none',
background: 'none',
}}
width={{
base: 'auto',

19
src/components/layout/Background.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { Global } from '@mantine/core';
import { useConfig } from '../../tools/state';
export function Background() {
const { config } = useConfig();
return (
<Global
styles={{
body: {
backgroundImage: `url('${config.settings.background}')` || '',
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
},
}}
/>
);
}

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

@@ -41,7 +41,7 @@ export function Header(props: any) {
return (
<Head height="auto">
<Group m="xs" position="apart">
<Group p="xs" position="apart">
<Box className={classes.hide}>
<Logo style={{ fontSize: 22 }} />
</Box>

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

@@ -3,6 +3,7 @@ import { Header } from './Header';
import { Footer } from './Footer';
import Aside from './Aside';
import { HeaderConfig } from './HeaderConfig';
import { Background } from './Background';
const useStyles = createStyles((theme) => ({
main: {},
@@ -13,6 +14,7 @@ export default function Layout({ children, style }: any) {
return (
<AppShell aside={<Aside />} header={<Header />} footer={<Footer links={[]} />}>
<HeaderConfig />
<Background />
<main
className={cx(classes.main)}
style={{