SitePreview: make it actually work
This commit is contained in:
parent
b62a2db8a5
commit
50f1131811
4 changed files with 33 additions and 62 deletions
|
@ -1,7 +1,9 @@
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import React, { useMemo } from 'react';
|
import React, { useMemo } from 'react';
|
||||||
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
|
||||||
import { defaultSettings } from 'soapbox/actions/settings';
|
import { defaultSettings } from 'soapbox/actions/settings';
|
||||||
|
import BackgroundShapes from 'soapbox/features/ui/components/background_shapes';
|
||||||
import { normalizeSoapboxConfig } from 'soapbox/normalizers';
|
import { normalizeSoapboxConfig } from 'soapbox/normalizers';
|
||||||
import { generateThemeCss } from 'soapbox/utils/theme';
|
import { generateThemeCss } from 'soapbox/utils/theme';
|
||||||
|
|
||||||
|
@ -15,33 +17,33 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
|
||||||
const soapboxConfig = useMemo(() => normalizeSoapboxConfig(soapbox), [soapbox]);
|
const soapboxConfig = useMemo(() => normalizeSoapboxConfig(soapbox), [soapbox]);
|
||||||
const settings = defaultSettings.mergeDeep(soapboxConfig.defaultSettings);
|
const settings = defaultSettings.mergeDeep(soapboxConfig.defaultSettings);
|
||||||
|
|
||||||
const bodyClass = classNames('site-preview', `theme-mode-${settings.get('themeMode')}`, {
|
const dark = settings.get('themeMode') === 'dark';
|
||||||
'no-reduce-motion': !settings.get('reduceMotion'),
|
|
||||||
'underline-links': settings.get('underlineLinks'),
|
const bodyClass = classNames(
|
||||||
'dyslexic': settings.get('dyslexicFont'),
|
'site-preview',
|
||||||
'demetricator': settings.get('demetricator'),
|
'relative flex justify-center align-center text-base',
|
||||||
});
|
'border border-solid border-gray-200 dark:border-slate-600',
|
||||||
|
'h-40 rounded-lg overflow-hidden',
|
||||||
|
{
|
||||||
|
'bg-white': !dark,
|
||||||
|
'bg-slate-900': dark,
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={bodyClass}>
|
<div className={bodyClass}>
|
||||||
<style>{`.site-preview {${generateThemeCss(soapboxConfig)}}`}</style>
|
<style>{`.site-preview {${generateThemeCss(soapboxConfig)}}`}</style>
|
||||||
<div className='app-holder'>
|
<BackgroundShapes position='absolute' />
|
||||||
<div>
|
|
||||||
<div className='ui'>
|
<div className='absolute p-2 rounded-lg overflow-hidden bg-accent-500 text-white self-center z-20'>
|
||||||
<nav className='tabs-bar'>
|
<FormattedMessage id='site_preview.preview' defaultMessage='Preview' />
|
||||||
<div className='tabs-bar__container'>
|
</div>
|
||||||
<div className='tabs-bar__split tabs-bar__split--left'>
|
|
||||||
<a className='tabs-bar__link--logo' href='#'>
|
<div className={classNames('flex absolute inset-0 shadow z-10 h-12 lg:h-16', {
|
||||||
<img alt='Logo' src={soapboxConfig.logo} />
|
'bg-white': !dark,
|
||||||
</a>
|
'bg-slate-800': dark,
|
||||||
</div>
|
})}
|
||||||
</div>
|
>
|
||||||
</nav>
|
<img alt='Logo' className='h-5 lg:h-6 self-center px-2' src={soapboxConfig.logo} />
|
||||||
<div className='page'>
|
|
||||||
<span className='spoiler-button__overlay__label'>Site Preview</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,8 +1,14 @@
|
||||||
|
import classNames from 'classnames';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
|
interface IBackgroundShapes {
|
||||||
|
/** Whether the shapes should be absolute positioned or fixed. */
|
||||||
|
position?: 'fixed' | 'absolute',
|
||||||
|
}
|
||||||
|
|
||||||
/** Gradient that appears in the background of the UI. */
|
/** Gradient that appears in the background of the UI. */
|
||||||
const BackgroundShapes: React.FC = () => (
|
const BackgroundShapes: React.FC<IBackgroundShapes> = ({ position = 'fixed' }) => (
|
||||||
<div className='fixed top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none'>
|
<div className={classNames(position, 'top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none')}>
|
||||||
<div className='flex-none flex justify-center'>
|
<div className='flex-none flex justify-center'>
|
||||||
<svg width='1754' height='1336' xmlns='http://www.w3.org/2000/svg'>
|
<svg width='1754' height='1336' xmlns='http://www.w3.org/2000/svg'>
|
||||||
<defs>
|
<defs>
|
||||||
|
|
|
@ -776,36 +776,6 @@ code {
|
||||||
transform: translateY(7px);
|
transform: translateY(7px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-preview {
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 164px;
|
|
||||||
border: 1px solid;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
background: var(--background-color);
|
|
||||||
|
|
||||||
* {
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 0;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page {
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.input.with_label.toggle .label_input {
|
.input.with_label.toggle .label_input {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
|
@ -34,13 +34,6 @@
|
||||||
background-color: var(--brand-color) !important;
|
background-color: var(--brand-color) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
body,
|
|
||||||
.site-preview {
|
|
||||||
--accent-color_h: 345;
|
|
||||||
--accent-color_s: 100%;
|
|
||||||
--accent-color_l: 64%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 450px) {
|
@media screen and (max-width: 450px) {
|
||||||
.tabs-bar__link--logo {
|
.tabs-bar__link--logo {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
Loading…
Reference in a new issue