centered animation
This commit is contained in:
Sean Yesmunt
parent
cca2ec6852
commit
ca776f78ca
4 changed files with 77 additions and 145 deletions
|
|
@ -1,6 +1,5 @@
|
|||
/* eslint react/display-name: 0 */
|
||||
|
||||
import React from 'react';
|
||||
import 'css-doodle';
|
||||
|
||||
export default ([rule = '']) => () => <css-doodle use="var(--rule)">{rule}</css-doodle>;
|
||||
export default ({ rule = '' }) => <css-doodle use="var(--rule)">{rule}</css-doodle>;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ import React, { Fragment } from 'react';
|
|||
import Icon from 'component/common/icon';
|
||||
import Spinner from 'component/spinner';
|
||||
import Button from 'component/button';
|
||||
import Doodle from 'component/doodle';
|
||||
// import Doodle from 'component/doodle';
|
||||
import 'css-doodle';
|
||||
|
||||
type Props = {
|
||||
message: string,
|
||||
|
|
@ -13,7 +14,7 @@ type Props = {
|
|||
error: boolean,
|
||||
};
|
||||
|
||||
const FancyDoodle = Doodle``; // this looks dumb but it prevents repetition from `_load-screen.scss`
|
||||
// const FancyDoodle = Doodle``; // this looks dumb but it prevents repetition from `_load-screen.scss`
|
||||
|
||||
class LoadScreen extends React.PureComponent<Props> {
|
||||
static defaultProps = {
|
||||
|
|
@ -25,56 +26,8 @@ class LoadScreen extends React.PureComponent<Props> {
|
|||
|
||||
return (
|
||||
<div className="load-screen">
|
||||
<div className="load-screen__overlay">
|
||||
<div className="load-screen__header">
|
||||
<h1 className="load-screen__title">
|
||||
{__('LBRY')}
|
||||
<sup>beta</sup>
|
||||
</h1>
|
||||
</div>
|
||||
{error ? (
|
||||
<Fragment>
|
||||
<h3>{__('Uh oh. Sean must have messed something up. Try refreshing to fix it.')}</h3>
|
||||
<div className="load-screen__actions">
|
||||
<Button
|
||||
label="Refresh"
|
||||
button="link"
|
||||
className="load-screen__button"
|
||||
onClick={() => window.location.reload()}
|
||||
/>
|
||||
</div>
|
||||
<div className="load-screen__help">
|
||||
<p>{__('If you still have issues, your anti-virus software or firewall may be preventing startup.')}</p>
|
||||
<p>
|
||||
{__('Reach out to hello@lbry.com for help, or check out')}{' '}
|
||||
<Button
|
||||
button="link"
|
||||
className="load-screen__button"
|
||||
href="https://lbry.com/faq/startup-troubleshooting"
|
||||
label="this link"
|
||||
/>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</Fragment>
|
||||
) : (
|
||||
<Fragment>
|
||||
{isWarning ? (
|
||||
<span className="load-screen__message">
|
||||
<Icon size={20} icon={ICONS.ALERT} />
|
||||
{` ${message}`}
|
||||
</span>
|
||||
) : (
|
||||
<div className="load-screen__message">{message}</div>
|
||||
)}
|
||||
|
||||
{details && <div className="load-screen__details">{details}</div>}
|
||||
<Spinner type="splash" />
|
||||
</Fragment>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<FancyDoodle />
|
||||
<h1 className="load-screen__title">{__('LBRY')}</h1>
|
||||
<css-doodle use="var(--rule)" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -170,14 +170,14 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
|
|||
const { daemonVersionMatched, onReadyToLaunch } = this.props;
|
||||
const { isRunning, launchWithIncompatibleDaemon } = this.state;
|
||||
|
||||
if (daemonVersionMatched) {
|
||||
onReadyToLaunch();
|
||||
} else if (launchWithIncompatibleDaemon && isRunning) {
|
||||
// The user may have decided to run the app with mismatched daemons
|
||||
// They could make this decision before the daemon is finished starting up
|
||||
// If it isn't running, this function will be called after the daemon is started
|
||||
onReadyToLaunch();
|
||||
}
|
||||
// if (daemonVersionMatched) {
|
||||
// onReadyToLaunch();
|
||||
// } else if (launchWithIncompatibleDaemon && isRunning) {
|
||||
// // The user may have decided to run the app with mismatched daemons
|
||||
// // They could make this decision before the daemon is finished starting up
|
||||
// // If it isn't running, this function will be called after the daemon is started
|
||||
// onReadyToLaunch();
|
||||
// }
|
||||
}
|
||||
|
||||
hasRecordedUser: boolean;
|
||||
|
|
|
|||
|
|
@ -9,86 +9,75 @@
|
|||
overflow: hidden;
|
||||
|
||||
css-doodle {
|
||||
width: 100%; height: 100%;
|
||||
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
|
||||
--color: @p(var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5));
|
||||
|
||||
--rule: (
|
||||
:doodle {
|
||||
@grid: 30x1 / 18vmin;
|
||||
--deg: @p(-180deg, 180deg);
|
||||
}
|
||||
|
||||
:container {
|
||||
perspective: 30vmin;
|
||||
}
|
||||
|
||||
:before,
|
||||
:after {
|
||||
@place-cell: @r(100%) @r(100%);
|
||||
@shape: star;
|
||||
@size: @r(6px);
|
||||
background-color: var(--color);
|
||||
content: '';
|
||||
:after, :before {
|
||||
// content: '';
|
||||
// background: var(--color);
|
||||
// @place-cell: @r(100%) @r(100%);
|
||||
// @size: @r(6px);
|
||||
// @shape: heart;
|
||||
}
|
||||
|
||||
@place-cell: center;
|
||||
@size: 100%;
|
||||
|
||||
animation: scale-up 12s linear infinite;
|
||||
animation-delay: calc(-12s / @size() * @i());
|
||||
background-image: @m100(
|
||||
box-shadow: @m2(0 0 50px var(--color));
|
||||
background: @m100(
|
||||
radial-gradient(var(--color) 50%, transparent 0)
|
||||
@r(-20%, 120%) @r(-20%, 100%) / 1px 1px
|
||||
no-repeat
|
||||
);
|
||||
box-shadow: @m2(0 0 50px var(--color));
|
||||
|
||||
will-change: transform, opacity;
|
||||
animation: scale-up 12s linear infinite;
|
||||
animation-delay: calc(-12s / @size() * @i());
|
||||
|
||||
@keyframes scale-up {
|
||||
0%,
|
||||
95.01%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
0%, 95.01%, 100% {
|
||||
transform: translateZ(0) rotate(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
95% {
|
||||
transform: translateZ(35vmin) rotateZ(@var(--deg));
|
||||
transform:
|
||||
translateZ(35vmin) rotateZ(@var(--deg));
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
.load-screen__actions {
|
||||
font-size: 1.2em;
|
||||
margin-top: var(--spacing-vertical-medium);
|
||||
}
|
||||
// .load-screen__actions {
|
||||
// font-size: 1.2em;
|
||||
// margin-top: var(--spacing-vertical-medium);
|
||||
// }
|
||||
|
||||
.load-screen__button {
|
||||
border-bottom: 1px solid $lbry-white;
|
||||
color: $lbry-white;
|
||||
transition: none;
|
||||
// .load-screen__button {
|
||||
// border-bottom: 1px solid $lbry-white;
|
||||
// color: $lbry-white;
|
||||
// transition: none;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px solid $lbry-blue-1;
|
||||
color: $lbry-blue-1;
|
||||
}
|
||||
}
|
||||
// &:hover {
|
||||
// border-bottom: 1px solid $lbry-blue-1;
|
||||
// color: $lbry-blue-1;
|
||||
// }
|
||||
// }
|
||||
|
||||
.load-screen__details {
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
max-width: 400px;
|
||||
}
|
||||
// .load-screen__details {
|
||||
// font-weight: 600;
|
||||
// line-height: 1;
|
||||
// max-width: 400px;
|
||||
// }
|
||||
|
||||
.load-screen__header {
|
||||
display: flex;
|
||||
|
|
@ -96,55 +85,46 @@
|
|||
margin-bottom: var(--spacing-vertical-medium);
|
||||
}
|
||||
|
||||
.load-screen__help {
|
||||
font-size: 1.25rem;
|
||||
padding-top: var(--spacing-vertical-large);
|
||||
}
|
||||
|
||||
.load-screen__message {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
margin-bottom: var(--spacing-vertical-medium);
|
||||
}
|
||||
|
||||
.load-screen__overlay {
|
||||
@include center;
|
||||
width: 100vw; height: 100vh;
|
||||
// @include center;
|
||||
|
||||
color: $lbry-white;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.load-screen__title {
|
||||
font-size: 60px;
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
color: $lbry-white;
|
||||
position: absolute;
|
||||
|
||||
sup {
|
||||
margin-left: -var(--spacing-vertical-tiny);
|
||||
padding: var(--spacing-vertical-miniscule) var(--spacing-vertical-small);
|
||||
// sup {
|
||||
// margin-left: -var(--spacing-vertical-tiny);
|
||||
// padding: var(--spacing-vertical-miniscule) var(--spacing-vertical-small);
|
||||
|
||||
background-color: rgba($lbry-white, 0.3);
|
||||
border-radius: 0.2rem;
|
||||
color: $lbry-white;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.1rem;
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
text-transform: uppercase;
|
||||
top: 2.15rem;
|
||||
}
|
||||
// background-color: rgba($lbry-white, 0.3);
|
||||
// border-radius: 0.2rem;
|
||||
// color: $lbry-white;
|
||||
// font-size: 0.6rem;
|
||||
// font-weight: 400;
|
||||
// letter-spacing: 0.1rem;
|
||||
// line-height: 1;
|
||||
// position: absolute;
|
||||
// text-transform: uppercase;
|
||||
// top: 1.5rem;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
||||
.load-screen--help {
|
||||
font-size: 14px;
|
||||
padding-top: $spacing-vertical;
|
||||
}
|
||||
// .load-screen--help {
|
||||
// font-size: 14px;
|
||||
// padding-top: $spacing-vertical;
|
||||
// }
|
||||
|
|
|
|||
Loading…
Reference in a new issue