Docker/flame
Docker/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-07-24 05:39:35 +02:00
Code Issues Releases Wiki Activity

Cleaned up Home component. Added 'settings' link vivible on mobile devices

Browse source
This commit is contained in:
unknown 2021-05-23 18:55:27 +02:00
parent e22e5afcb9
commit 7b6ac3f6a4
2 changed files with 33 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

18
client/src/components/Home/Home.module.css
View file

@ -24,7 +24,7 @@
height: 35px; height: 35px;
background-color: var(--color-accent); background-color: var(--color-accent);
border-radius: 50%; border-radius: 50%;
position: absolute; position: fixed;
bottom: 10px; bottom: 10px;
left: 10px; left: 10px;
display: flex; display: flex;
@ -32,9 +32,25 @@
align-items: center; align-items: center;
opacity: 0.25; opacity: 0.25;
transition: all 0.3s; transition: all 0.3s;
visibility: hidden;
} }
.SettingsButton:hover { .SettingsButton:hover {
cursor: pointer; cursor: pointer;
opacity: 1; opacity: 1;
}
.SettingsLink {
visibility: visible;
color: var(--color-accent);
}
@media (min-width: 769px) {
.SettingsButton {
visibility: visible;
}
.SettingsLink {
visibility: hidden;
}
} }

24
client/src/components/Home/Home.tsx
View file

@ -1,20 +1,27 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import _ from 'underscore';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { connect, useSelector, useDispatch } from 'react-redux';
import { GlobalState } from '../../interfaces/GlobalState'; // Redux
import { connect } from 'react-redux';
import { getApps, getCategories } from '../../store/actions'; import { getApps, getCategories } from '../../store/actions';
import Icon from '../UI/Icons/Icon/Icon'; // Typescript
import { GlobalState } from '../../interfaces/GlobalState';
import { App, Category } from '../../interfaces';
import classes from './Home.module.css'; // UI
import Icon from '../UI/Icons/Icon/Icon';
import { Container } from '../UI/Layout/Layout'; import { Container } from '../UI/Layout/Layout';
import SectionHeadline from '../UI/Headlines/SectionHeadline/SectionHeadline'; import SectionHeadline from '../UI/Headlines/SectionHeadline/SectionHeadline';
import AppGrid from '../Apps/AppGrid/AppGrid';
import { App, Category } from '../../interfaces';
import Spinner from '../UI/Spinner/Spinner'; import Spinner from '../UI/Spinner/Spinner';
import WeatherWidget from '../Widgets/WeatherWidget/WeatherWidget';
// CSS
import classes from './Home.module.css';
// Components
import AppGrid from '../Apps/AppGrid/AppGrid';
import BookmarkGrid from '../Bookmarks/BookmarkGrid/BookmarkGrid'; import BookmarkGrid from '../Bookmarks/BookmarkGrid/BookmarkGrid';
import WeatherWidget from '../Widgets/WeatherWidget/WeatherWidget';
interface ComponentProps { interface ComponentProps {
getApps: Function; getApps: Function;
@ -74,6 +81,7 @@ const Home = (props: ComponentProps): JSX.Element => {
<Container> <Container>
<header className={classes.Header}> <header className={classes.Header}>
<p>{dateAndTime()}</p> <p>{dateAndTime()}</p>
<Link to='/settings' className={classes.SettingsLink}>Go to Settings</Link>
<span className={classes.HeaderMain}> <span className={classes.HeaderMain}>
<h1>{greeter()}</h1> <h1>{greeter()}</h1>
<WeatherWidget /> <WeatherWidget />