github-mirrors/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-04-23 13:27:21 -04:00
Code Issues Projects Releases Packages Wiki Activity

Apps grid

Browse source
This commit is contained in:
unknown 2021-05-09 18:36:55 +02:00
parent 7199e296b8
commit 0502a653ac
12 changed files with 171 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/public/index.html
View file

@ -24,6 +24,8 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
<title>React App</title>
</head>
<body>

2
client/src/App.tsx
View file

@ -21,7 +21,7 @@ const App = (): JSX.Element => {
<BrowserRouter>
<Switch>
<Route exact path='/' component={Home} />
<Route exact path='/settings' component={Settings} />
<Route path='/settings' component={Settings} />
</Switch>
</BrowserRouter>
</Provider>

34
client/src/components/Apps/AppCard/AppCard.module.css Normal file
View file

@ -0,0 +1,34 @@
.AppCard {
width: 100%;
/* height: 50px; */
/* max-width: 150px; */
/* border: 1px solid red; */
display: flex;
align-items: center;
margin-bottom: 20px;
}
.AppCardIcon {
width: 40px;
}
.AppCardDetails {
text-transform: uppercase;
/* display: flex;
flex-direction: column;
justify-content: center; */
}
.AppCardDetails h5 {
font-size: 1em;
font-weight: 500;
color: var(--color-primary);
margin-bottom: -8px;
}
.AppCardDetails a {
color: var(--color-accent);
font-weight: 400;
font-size: 0.8em;
opacity: 1;
}

18
client/src/components/Apps/AppCard/AppCard.tsx Normal file
View file

@ -0,0 +1,18 @@
import classes from './AppCard.module.css';
import Icon from '../../UI/Icon/Icon';
const AppCard = (): JSX.Element => {
return (
<div className={classes.AppCard}>
<div className={classes.AppCardIcon}>
<Icon icon='mdiBookOpenBlankVariant' />
</div>
<div className={classes.AppCardDetails}>
<h5>plex</h5>
<a href="/">plex.example.com</a>
</div>
</div>
)
}
export default AppCard;

28
client/src/components/Apps/Apps.module.css
View file

@ -0,0 +1,28 @@
.Apps {
display: grid;
grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 430px) {
.Apps {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 670px) {
.Apps {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 900px) {
.Apps {
grid-template-columns: repeat(4, 1fr);
}
}
/* 320px — 480px: Mobile devices.
481px — 768px: iPads, Tablets.
769px — 1024px: Small screens, laptops.
1025px — 1200px: Desktops, large screens.
1201px and more — Extra large screens, TV. */

27
client/src/components/Apps/Apps.tsx
View file

@ -1,16 +1,31 @@
import { Link } from 'react-router-dom';
import { Fragment } from 'react';
import classes from './Apps.module.css';
import { Container } from '../UI/Layout/Layout';
import Headline from '../UI/Headline/Headline';
import Headline from '../UI/Headlines/Headline/Headline';
import AppCard from './AppCard/AppCard';
const Apps = (): JSX.Element => {
return (
<Container>
<Headline title='Welcome' />
<Link to='/settings'>settings</Link>
</Container>
<div className={classes.Apps}>
<AppCard />
<AppCard />
<AppCard />
<AppCard />
<AppCard />
<AppCard />
<AppCard />
<AppCard />
<AppCard />
<AppCard />
<AppCard />
<AppCard />
<AppCard />
<AppCard />
<AppCard />
<AppCard />
</div>
)
}

3
client/src/components/UI/Headline/Headline.module.css → client/src/components/UI/Headlines/Headline/Headline.module.css
View file

@ -1,7 +1,10 @@
.HeadlineTitle {
color: var(--color-primary);
font-weight: 700;
}
.HeadlineSubtitle {
color: var(--color-primary);
margin-bottom: 20px;
font-weight: 400;
}

4
client/src/components/UI/Headline/Headline.tsx → client/src/components/UI/Headlines/Headline/Headline.tsx
View file

@ -3,13 +3,13 @@ import classes from './Headline.module.css';
interface ComponentProps {
title: string;
subtitle?: string;
subtitle?: string | JSX.Element;
}
const Headline = (props: ComponentProps): JSX.Element => {
return (
<Fragment>
<h2 className={classes.HeadlineTitle}>{props.title}</h2>
<h1 className={classes.HeadlineTitle}>{props.title}</h1>
{props.subtitle && <p className={classes.HeadlineSubtitle}>{props.subtitle}</p>}
</Fragment>
)

7
client/src/components/UI/Headlines/SectionHeadline/SectionHeadline.module.css Normal file
View file

@ -0,0 +1,7 @@
.SectionHeadline {
text-transform: uppercase;
color: var(--color-primary);
font-weight: 900;
font-size: 20px;
margin-bottom: 16px;
}

13
client/src/components/UI/Headlines/SectionHeadline/SectionHeadline.tsx Normal file
View file

@ -0,0 +1,13 @@
import classes from './SectionHeadline.module.css';
interface ComponentProps {
title: string;
}
const SectionHeadline = (props: ComponentProps): JSX.Element => {
return (
<h2 className={classes.SectionHeadline}>{props.title}</h2>
)
}
export default SectionHeadline;

20
client/src/components/UI/Layout/Layout.module.css
View file

@ -1,4 +1,22 @@
.Container {
width: 100%;
padding: var(--space-p-x);
padding: 20px;
}
/* 320px — 480px: Mobile devices.
481px — 768px: iPads, Tablets.
769px — 1024px: Small screens, laptops.
1025px — 1200px: Desktops, large screens.
1201px and more — Extra large screens, TV. */
@media (min-width: 769px) {
.Container {
padding: 25px 40px;
}
}
@media (min-width: 1201px) {
.Container {
padding: 50px 250px;
}
}

26
client/src/index.css
View file

@ -2,6 +2,8 @@
margin: 0;
padding: 0;
box-sizing: border-box;
transition: all 0.3s;
user-select: none;
}
body {
@ -9,8 +11,26 @@ body {
--color-primary: #EFF1FC;
--color-accent: #6677EB;
--space-p-x: 16px;
background-color: var(--color-background);
/* font weights
light 300
regular 400
semi-bold 600
bold 700
extra-bold 800
*/
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif;
}
font-size: 14px;
}
a {
color: var(--color-primary);
text-decoration: none;
opacity: 0.75;
}
/* 320px — 480px: Mobile devices.
481px — 768px: iPads, Tablets.
769px — 1024px: Small screens, laptops.
1025px — 1200px: Desktops, large screens.
1201px and more — Extra large screens, TV. */