💄 apple standalone page improvements
Manuel Ruwe
Manuel
|
Before Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
BIN
public/imgs/pwa/apple-icon-180.png
Normal file
|
After Width: | Height: | Size: 3.2 KiB |
BIN
public/imgs/pwa/favicon-196.png
Normal file
|
After Width: | Height: | Size: 3.5 KiB |
BIN
public/imgs/pwa/manifest/manifest-icon-192.maskable.png
Normal file
|
After Width: | Height: | Size: 3.4 KiB |
BIN
public/imgs/pwa/manifest/manifest-icon-512.maskable.png
Normal file
|
After Width: | Height: | Size: 11 KiB |
29
public/site.webmanifest
Normal file
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"display": "standalone",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/imgs/pwa/manifest/manifest-icon-192.maskable.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/imgs/pwa/manifest/manifest-icon-192.maskable.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
},
|
||||
{
|
||||
"src": "/imgs/pwa/manifest/manifest-icon-512.maskable.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/imgs/pwa/manifest/manifest-icon-512.maskable.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,14 +1,22 @@
|
||||
import { AppShell, createStyles } from '@mantine/core';
|
||||
import { Header } from './Header';
|
||||
import { Header } from './header/Header';
|
||||
import { Footer } from './Footer';
|
||||
import Aside from './Aside';
|
||||
import Navbar from './Navbar';
|
||||
import { HeaderConfig } from './HeaderConfig';
|
||||
import { HeaderConfig } from './header/HeaderConfig';
|
||||
import { Background } from './Background';
|
||||
import { useConfig } from '../../tools/state';
|
||||
|
||||
const useStyles = createStyles((theme) => ({
|
||||
main: {},
|
||||
appShell: {
|
||||
// eslint-disable-next-line no-useless-computed-key
|
||||
['@media screen and (display-mode: standalone)']: {
|
||||
'&': {
|
||||
paddingTop: '88px !important',
|
||||
},
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
export default function Layout({ children, style }: any) {
|
||||
|
||||
@@ -12,7 +12,7 @@ export function Logo({ style, withoutText }: any) {
|
||||
<Group spacing="xs">
|
||||
<Image
|
||||
width={50}
|
||||
src={config.settings.logo || '/imgs/logo.png'}
|
||||
src={config.settings.logo || '/imgs/logo/logo.png'}
|
||||
style={{
|
||||
position: 'relative',
|
||||
}}
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
import { Box, createStyles, Group, Header as Head, useMantineColorScheme } from '@mantine/core';
|
||||
import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
|
||||
import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
|
||||
|
||||
import DockerMenuButton from '../../modules/docker/DockerModule';
|
||||
import SearchBar from '../../modules/search/SearchModule';
|
||||
import { SettingsMenuButton } from '../Settings/SettingsMenu';
|
||||
import { Logo } from './Logo';
|
||||
import { useConfig } from '../../tools/state';
|
||||
|
||||
const HEADER_HEIGHT = 60;
|
||||
import DockerMenuButton from '../../../modules/docker/DockerModule';
|
||||
import SearchBar from '../../../modules/search/SearchModule';
|
||||
import { SettingsMenuButton } from '../../Settings/SettingsMenu';
|
||||
import { Logo } from '../Logo';
|
||||
import { useConfig } from '../../../tools/state';
|
||||
|
||||
const useStyles = createStyles((theme) => ({
|
||||
hide: {
|
||||
@@ -23,7 +21,7 @@ const useStyles = createStyles((theme) => ({
|
||||
}));
|
||||
|
||||
export function Header(props: any) {
|
||||
const { classes, cx } = useStyles();
|
||||
const { classes } = useStyles();
|
||||
const { config } = useConfig();
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
/* eslint-disable react/no-invalid-html-attribute */
|
||||
import React from 'react';
|
||||
import Head from 'next/head';
|
||||
import { useConfig } from '../../tools/state';
|
||||
import { useConfig } from '../../../tools/state';
|
||||
import { SafariStatusBarStyle } from './safariStatusBarStyle';
|
||||
|
||||
export function HeaderConfig(props: any) {
|
||||
const { config } = useConfig();
|
||||
@@ -9,15 +10,19 @@ export function HeaderConfig(props: any) {
|
||||
return (
|
||||
<Head>
|
||||
<title>{config.settings.title || 'Homarr 🦞'}</title>
|
||||
<link rel="shortcut icon" href={config.settings.favicon || '/favicon.svg'} />
|
||||
<link rel="shortcut icon" href={config.settings.favicon || '/imgs/favicon/favicon.svg'} />
|
||||
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
|
||||
{/* configure apple splash screen & touch icon */}
|
||||
<link rel="apple-touch-icon" href={config.settings.favicon || '/favicon-squared.png'} />
|
||||
<link
|
||||
rel="apple-touch-startup-image"
|
||||
href={config.settings.favicon || '/favicon-squared.png'}
|
||||
rel="apple-touch-icon"
|
||||
href={config.settings.favicon || '/imgs/favicon/favicon-squared.png'}
|
||||
/>
|
||||
<meta name="apple-mobile-web-app-title" content={config.settings.title || 'Homarr'} />
|
||||
|
||||
<SafariStatusBarStyle />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
</Head>
|
||||
);
|
||||
}
|
||||
13
src/components/layout/header/safariStatusBarStyle.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { useMantineTheme } from '@mantine/core';
|
||||
|
||||
export const SafariStatusBarStyle = () => {
|
||||
const colorScheme = useMantineTheme();
|
||||
|
||||
const isDark = colorScheme.colorScheme === 'dark';
|
||||
|
||||
if (isDark) {
|
||||
return <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent" />;
|
||||
}
|
||||
|
||||
return <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />;
|
||||
};
|
||||