mirror of
https://github.com/pawelmalak/flame.git
synced 2025-07-22 21:09:36 +02:00
Cleaned up Home component. Added 'settings' link vivible on mobile devices
This commit is contained in:
parent
e22e5afcb9
commit
7b6ac3f6a4
2 changed files with 33 additions and 9 deletions
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -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 />
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue