mirror of
https://git.sr.ht/~ashkeel/strimertul
synced 2024-09-20 02:00:49 +00:00
WIP About page
This commit is contained in:
parent
01e8f96e6e
commit
7aebb4b0ff
3 changed files with 44 additions and 8 deletions
|
@ -32,6 +32,7 @@ import AuthDialog from './pages/AuthDialog';
|
||||||
import ChatAlertsPage from './pages/ChatAlerts';
|
import ChatAlertsPage from './pages/ChatAlerts';
|
||||||
import LoyaltyConfigPage from './pages/LoyaltyConfig';
|
import LoyaltyConfigPage from './pages/LoyaltyConfig';
|
||||||
import LoyaltyQueuePage from './pages/LoyaltyQueue';
|
import LoyaltyQueuePage from './pages/LoyaltyQueue';
|
||||||
|
import StrimertulPage from './pages/Strimertul';
|
||||||
|
|
||||||
const LoadingDiv = styled('div', {
|
const LoadingDiv = styled('div', {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
|
@ -180,6 +181,7 @@ export default function App(): JSX.Element {
|
||||||
<PageWrapper role="main">
|
<PageWrapper role="main">
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Dashboard />} />
|
<Route path="/" element={<Dashboard />} />
|
||||||
|
<Route path="/about" element={<StrimertulPage />} />
|
||||||
<Route path="/http" element={<ServerSettingsPage />} />
|
<Route path="/http" element={<ServerSettingsPage />} />
|
||||||
<Route path="/backend" element={<BackendIntegrationPage />} />
|
<Route path="/backend" element={<BackendIntegrationPage />} />
|
||||||
<Route path="/twitch/settings" element={<TwitchSettingsPage />} />
|
<Route path="/twitch/settings" element={<TwitchSettingsPage />} />
|
||||||
|
|
|
@ -33,6 +33,7 @@ const Container = styled('section', {
|
||||||
|
|
||||||
const Header = styled('div', {
|
const Header = styled('div', {
|
||||||
padding: '0.8rem 1rem 1rem 0.8rem',
|
padding: '0.8rem 1rem 1rem 0.8rem',
|
||||||
|
textAlign: 'center',
|
||||||
});
|
});
|
||||||
|
|
||||||
const AppName = styled('h1', {
|
const AppName = styled('h1', {
|
||||||
|
@ -46,19 +47,40 @@ const AppName = styled('h1', {
|
||||||
paddingRight: '0.5rem',
|
paddingRight: '0.5rem',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const AppLink = styled(Link, {
|
||||||
|
all: 'unset',
|
||||||
|
cursor: 'pointer',
|
||||||
|
color: '$teal12',
|
||||||
|
'&:visited': {
|
||||||
|
color: '$teal12',
|
||||||
|
},
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
variants: {
|
||||||
|
status: {
|
||||||
|
active: {
|
||||||
|
backgroundColor: '$teal4',
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
},
|
||||||
|
default: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const VersionLabel = styled('div', {
|
const VersionLabel = styled('div', {
|
||||||
textTransform: 'uppercase',
|
textTransform: 'uppercase',
|
||||||
fontSize: '0.75rem',
|
fontSize: '0.75rem',
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
color: '$teal8',
|
color: '$teal8',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
|
paddingBottom: '0.4rem',
|
||||||
});
|
});
|
||||||
|
|
||||||
const UpdateButton = styled('a', {
|
const UpdateButton = styled('a', {
|
||||||
textTransform: 'uppercase',
|
textTransform: 'uppercase',
|
||||||
fontSize: '0.75rem',
|
fontSize: '0.75rem',
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
color: '$yellow12',
|
color: '$yellow12 !important',
|
||||||
border: '1px solid $yellow7',
|
border: '1px solid $yellow7',
|
||||||
padding: '0.2rem 0.4rem',
|
padding: '0.2rem 0.4rem',
|
||||||
marginTop: '0.5rem',
|
marginTop: '0.5rem',
|
||||||
|
@ -129,6 +151,8 @@ export default function Sidebar({
|
||||||
sections,
|
sections,
|
||||||
}: SidebarProps): React.ReactElement {
|
}: SidebarProps): React.ReactElement {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
const resolved = useResolvedPath('/about');
|
||||||
|
const matchApp = useMatch({ path: resolved.pathname, end: true });
|
||||||
const client = useSelector((state: RootState) => state.api.client);
|
const client = useSelector((state: RootState) => state.api.client);
|
||||||
const [version, setVersion] = useState<string>(null);
|
const [version, setVersion] = useState<string>(null);
|
||||||
const [lastVersion, setLastVersion] =
|
const [lastVersion, setLastVersion] =
|
||||||
|
@ -178,13 +202,18 @@ export default function Sidebar({
|
||||||
options={{ scrollbars: { autoHide: 'scroll' } }}
|
options={{ scrollbars: { autoHide: 'scroll' } }}
|
||||||
>
|
>
|
||||||
<Header>
|
<Header>
|
||||||
|
<AppLink to={'/about'} status={matchApp ? 'active' : 'default'}>
|
||||||
<AppName>
|
<AppName>
|
||||||
<img src={logo} style={{ height: '28px', marginBottom: '-2px' }} />
|
<img
|
||||||
|
src={logo}
|
||||||
|
style={{ height: '28px', marginBottom: '-2px' }}
|
||||||
|
/>
|
||||||
{APPNAME}
|
{APPNAME}
|
||||||
</AppName>
|
</AppName>
|
||||||
<VersionLabel>
|
<VersionLabel>
|
||||||
{version && !dev ? version : t('debug.dev-build')}
|
{version && !dev ? version : t('debug.dev-build')}
|
||||||
</VersionLabel>
|
</VersionLabel>
|
||||||
|
</AppLink>
|
||||||
{!dev && lastVersion && !version.startsWith(lastVersion.name) && (
|
{!dev && lastVersion && !version.startsWith(lastVersion.name) && (
|
||||||
<UpdateButton href={lastVersion.url}>
|
<UpdateButton href={lastVersion.url}>
|
||||||
{t('menu.messages.update-available')}
|
{t('menu.messages.update-available')}
|
||||||
|
|
5
frontend/src/ui/pages/Strimertul.tsx
Normal file
5
frontend/src/ui/pages/Strimertul.tsx
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export default function StrimertulPage(): React.ReactElement {
|
||||||
|
return <div></div>;
|
||||||
|
}
|
Loading…
Reference in a new issue