Docker/flame
Docker/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-08-04 18:35:17 +02:00
Code Issues Releases Wiki Activity

Read/write css file from app settings. Changed order of operations at app startup. Added nano to Dockerfile

Browse source
This commit is contained in:
unknown 2021-06-22 13:07:32 +02:00
parent 4c3255107c
commit 5ae4d6e7c4
15 changed files with 161 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/.env
View file

@ -1 +1 @@
REACT_APP_VERSION=1.4.0
REACT_APP_VERSION=1.4.1

0
client/public/flame.css Normal file
View file

11
client/public/index.html
View file

@ -4,15 +4,10 @@
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<meta name="description" content="Flame - self-hosted startpage for your server" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
<link rel="stylesheet" href="%PUBLIC_URL%/flame.css">
<title>Flame</title>
</head>
<body>
@ -21,4 +16,4 @@
<div id="root"></div>
</body>
</html>
</html>

3
client/public/robots.txt
View file

@ -1,3 +1,2 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
Disallow: /

9
client/src/components/Settings/Settings.tsx
View file

@ -9,6 +9,7 @@ import Themer from '../Themer/Themer';
import WeatherSettings from './WeatherSettings/WeatherSettings';
import OtherSettings from './OtherSettings/OtherSettings';
import AppDetails from './AppDetails/AppDetails';
import StyleSettings from './StyleSettings/StyleSettings';
const Settings = (): JSX.Element => {
return (
@ -40,6 +41,13 @@ const Settings = (): JSX.Element => {
to='/settings/other'>
Other
</NavLink>
<NavLink
className={classes.SettingsNavLink}
activeClassName={classes.SettingsNavLinkActive}
exact
to='/settings/css'>
CSS
</NavLink>
<NavLink
className={classes.SettingsNavLink}
activeClassName={classes.SettingsNavLinkActive}
@ -53,6 +61,7 @@ const Settings = (): JSX.Element => {
<Route exact path='/settings' component={Themer} />
<Route path='/settings/weather' component={WeatherSettings} />
<Route path='/settings/other' component={OtherSettings} />
<Route path='/settings/css' component={StyleSettings} />
<Route path='/settings/app' component={AppDetails} />
</Switch>
</section>

44
client/src/components/Settings/StyleSettings/StyleSettings.tsx Normal file
View file

@ -0,0 +1,44 @@
import { useState, useEffect, ChangeEvent, FormEvent } from 'react';
import axios from 'axios';
import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
import Button from '../../UI/Buttons/Button/Button';
import { ApiResponse } from '../../../interfaces';
const StyleSettings = (): JSX.Element => {
const [customStyles, setCustomStyles] = useState<string>('');
useEffect(() => {
axios.get<ApiResponse<string>>('/api/config/0/css')
.then(data => setCustomStyles(data.data.data))
.catch(err => console.log(err));
}, [])
const inputChangeHandler = (e: ChangeEvent<HTMLTextAreaElement>) => {
e.preventDefault();
setCustomStyles(e.target.value);
}
const formSubmitHandler = (e: FormEvent) => {
e.preventDefault();
axios.put<ApiResponse<{}>>('/api/config/0/css', { styles: customStyles });
}
return (
<form onSubmit={(e) => formSubmitHandler(e)}>
<InputGroup>
<label htmlFor='customStyles'>Custom CSS</label>
<textarea
id='customStyles'
name='customStyles'
value={customStyles}
onChange={(e) => inputChangeHandler(e)}
></textarea>
</InputGroup>
<Button>Save CSS</Button>
</form>
)
}
export default StyleSettings;

11
client/src/components/UI/Forms/InputGroup/InputGroup.module.css
View file

@ -4,12 +4,14 @@
.InputGroup label,
.InputGroup span,
.InputGroup input {
.InputGroup input,
.InputGroup textarea {
display: block;
}
.InputGroup input,
.InputGroup select {
.InputGroup select,
.InputGroup textarea {
margin: 8px 0;
width: 100%;
border: none;
@ -30,4 +32,9 @@
.InputGroup label {
color: var(--color-primary);
}
.InputGroup textarea {
resize: none;
height: 50vh;
}