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

💄 Improving style

Browse Source
This commit is contained in:
Thomas "ajnart" Camlong
2022-05-14 11:40:05 +02:00
parent 2139f48df3
commit f3f2006f14
1 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,8 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { Text, AspectRatio, SimpleGrid, Card, Center, Image, useMantineTheme } from '@mantine/core'; import { Text, AspectRatio, SimpleGrid, Card, Image, useMantineTheme } from '@mantine/core';
import { useConfig } from '../../tools/state'; import { useConfig } from '../../tools/state';
import { serviceItem } from '../../tools/types'; import { serviceItem } from '../../tools/types';
import { AppShelfItemWrapper } from './AppShelfItemWrapper';
import AppShelfMenu from './AppShelfMenu'; import AppShelfMenu from './AppShelfMenu';
const AppShelf = () => { const AppShelf = () => {
@@ -14,7 +13,7 @@ const AppShelf = () => {
cols={5} cols={5}
spacing="xl" spacing="xl"
breakpoints={[ breakpoints={[
{ maxWidth: 'xl', cols: 4, spacing: 'lg' }, { maxWidth: 1400, cols: 4, spacing: 'lg' },
{ maxWidth: 800, cols: 3, spacing: 'md' }, { maxWidth: 800, cols: 3, spacing: 'md' },
{ maxWidth: 400, cols: 3, spacing: 'sm' }, { maxWidth: 400, cols: 3, spacing: 'sm' },
{ maxWidth: 400, cols: 2, spacing: 'sm' }, { maxWidth: 400, cols: 2, spacing: 'sm' },
@@ -50,9 +49,9 @@ export function AppShelfItem(props: any) {
radius="md" radius="md"
> >
<Card.Section> <Card.Section>
<Text mt="sm" align="center" lineClamp={1} weight={500}> <Text mt="sm" align="center" lineClamp={1} weight={500}>
{service.name} {service.name}
</Text> </Text>
<motion.div <motion.div
style={{ style={{
position: 'absolute', position: 'absolute',
@@ -68,7 +67,14 @@ export function AppShelfItem(props: any) {
</motion.div> </motion.div>
</Card.Section> </Card.Section>
<Card.Section> <Card.Section>
<AspectRatio ratio={5 / 3} m="xl"> <AspectRatio
ratio={3 / 5}
m="xl"
style={{
width: 150,
height: 90,
}}
>
<motion.i <motion.i
whileHover={{ whileHover={{
cursor: 'pointer', cursor: 'pointer',
@@ -76,6 +82,10 @@ export function AppShelfItem(props: any) {
}} }}
> >
<Image <Image
style={{
maxWidth: 80,
}}
fit="contain"
onClick={() => { onClick={() => {
window.open(service.url); window.open(service.url);
}} }}