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

♻️ Add static CSS class names (#699)

Browse Source
This commit is contained in:
Manuel
2023-02-10 23:37:08 +01:00
committed by GitHub
parent fab018a10e
commit fef47b96ee
7 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Dashboard/Tiles/Apps/AppTile.tsx
View File

@@ -33,9 +33,10 @@ export const AppTile = ({ className, app }: AppTileProps) => {
justify="space-around"
align="center"
style={{ height: '100%', width: '100%' }}
className="dashboard-tile-app"
>
<Box hidden={false}>
<Title order={5} size="md" ta="center" lineClamp={1} className={classes.appName}>
<Title order={5} size="md" ta="center" lineClamp={1} className={cx(classes.appName, 'dashboard-tile-app-title')}>
{app.name}
</Title>
</Box>

2
src/components/Dashboard/Tiles/HomarrCardWrapper.tsx
View File

@@ -18,7 +18,7 @@ export const HomarrCardWrapper = ({ ...props }: HomarrCardWrapperProps) => {
return (
<Card
{...restProps}
className={cx(restProps.className, cardClass)}
className={cx(restProps.className, cardClass, 'dashboard-gs-generic-item')}
withBorder
style={{ cursor: isEditMode ? 'move' : 'default' }}
radius="lg"

4
src/components/Dashboard/Wrappers/Category/Category.tsx
View File

@@ -16,7 +16,7 @@ export const DashboardCategory = ({ category }: DashboardCategoryProps) => {
const { refs, apps, widgets } = useGridstack('category', category.id);
const isEditMode = useEditModeStore((x) => x.enabled);
const { config } = useConfigContext();
const { classes: cardClasses } = useCardStyles(true);
const { classes: cardClasses, cx } = useCardStyles(true);
const categoryList = config?.categories.map((x) => x.name) ?? [];
const [toggledCategories, setToggledCategories] = useLocalStorage({
@@ -28,7 +28,7 @@ export const DashboardCategory = ({ category }: DashboardCategoryProps) => {
return (
<Accordion
classNames={{
item: cardClasses.card,
item: cx(cardClasses.card, 'dashboard-gs-category'),
}}
mx={10}
chevronPosition="left"

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

@@ -19,6 +19,7 @@ export default function Layout({ children }: any) {
minHeight: 'calc(100vh - var(--mantine-header-height))',
},
}}
className="dashboard-app-shell"
>
<Head />
<Background />

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

@@ -17,12 +17,14 @@ export function Logo({ size = 'md', withoutText = false }: LogoProps) {
width={size === 'md' ? 50 : 12}
src={config?.settings.customization.logoImageUrl || '/imgs/logo/logo-color.svg'}
alt="Homarr Logo"
className="dashboard-header-logo-image"
/>
{withoutText ? null : (
<Text
size={size === 'md' ? 22 : 10}
weight="bold"
variant="gradient"
className="dashboard-header-logo-text"
gradient={primaryGradient}
>
{config?.settings.customization.pageTitle || 'Homarr'}

8
src/components/layout/header/Header.tsx
View File

@@ -13,7 +13,7 @@ export const HeaderHeight = 64;
export function Header(props: any) {
const { classes } = useStyles();
const { classes: cardClasses } = useCardStyles(false);
const { classes: cardClasses, cx } = useCardStyles(false);
const { attributes } = usePackageAttributesStore();
const { isLoading, error, data } = useQuery({
@@ -27,12 +27,12 @@ export function Header(props: any) {
data?.tag_name > `v${attributes.packageVersion}` ? data?.tag_name : undefined;
return (
<MantineHeader height="auto" className={cardClasses.card}>
<MantineHeader height="auto" className={cx(cardClasses.card, 'dashboard-header')}>
<Group p="xs" noWrap grow>
<Box className={classes.hide}>
<Box className={cx(classes.hide, 'dashboard-header-logo-root')}>
<Logo />
</Box>
<Group position="right" style={{ maxWidth: 'none' }} noWrap>
<Group className="dashboard-header-group-right" position="right" style={{ maxWidth: 'none' }} noWrap>
<Search />
<ToggleEditModeAction />
<DockerMenuButton />

5
src/components/layout/header/Search.tsx
View File

@@ -57,7 +57,7 @@ export function Search() {
const { config } = useConfigContext();
const [searchQuery, setSearchQuery] = useState('');
const [debounced] = useDebouncedValue(searchQuery, 250);
const { classes: cardClasses } = useCardStyles(true);
const { classes: cardClasses, cx } = useCardStyles(true);
const isOverseerrEnabled = config?.apps.some(
(x) => x.integration.type === 'overseerr' || x.integration.type === 'jellyseerr'
@@ -216,7 +216,8 @@ export function Search() {
}
}}
classNames={{
input: cardClasses.card,
input: cx(cardClasses.card, 'dashboard-header-search-input'),
root: 'dashboard-header-search-root',
}}
radius="lg"
size="md"