(Add) Loading style.
This commit is contained in:
parent
f15db41e60
commit
e06650d6cb
|
@ -1,6 +1,6 @@
|
|||
import React, { Component } from 'react'
|
||||
import swal from 'sweetalert2'
|
||||
import { Header, Ballots, NewBallot, Settings, Footer, Loading } from './components'
|
||||
import { Header, Ballots, NewBallot, Settings, Footer, Loading, BaseLoader } from './components'
|
||||
import { Route } from 'react-router-dom'
|
||||
import { constants } from './utils/constants'
|
||||
import { inject, observer } from 'mobx-react'
|
||||
|
@ -131,7 +131,6 @@ class App extends Component {
|
|||
render() {
|
||||
const { commonStore, contractsStore } = this.props
|
||||
const networkBranch = contractsStore.netId ? getNetworkBranch(contractsStore.netId) : null
|
||||
const loading = commonStore.loading ? <Loading netId={contractsStore.netId} /> : ''
|
||||
|
||||
const search = this.shouldShowSearch() ? (
|
||||
<div className={`search-container ${this.getNetIdClass()}`}>
|
||||
|
@ -143,9 +142,9 @@ class App extends Component {
|
|||
|
||||
const isTestnet = contractsStore.netId in constants.NETWORKS && constants.NETWORKS[contractsStore.netId].TESTNET
|
||||
|
||||
return (
|
||||
return networkBranch ? (
|
||||
<section className={`content ${this.state.showMobileMenu ? 'content-menu-open' : ''}`}>
|
||||
{loading}
|
||||
{commonStore.loading ? <Loading networkBranch={networkBranch} /> : null}
|
||||
<Header
|
||||
baseRootPath={commonStore.rootPath}
|
||||
navigationData={this.state.navigationData}
|
||||
|
@ -173,6 +172,8 @@ class App extends Component {
|
|||
</div>
|
||||
<Footer networkBranch={networkBranch} />
|
||||
</section>
|
||||
) : (
|
||||
<BaseLoader />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -22,12 +22,12 @@ body {
|
|||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
@media screen and (max-width: $breakpoint-md) {
|
||||
padding-bottom: $footer-height_mobile;
|
||||
}
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
padding-bottom: $footer-height_mobile;
|
||||
}
|
||||
// @media screen and (max-width: $breakpoint-md) {
|
||||
// padding-bottom: $footer-height_mobile;
|
||||
// }
|
||||
// @media screen and (max-width: $mobile-width) {
|
||||
// padding-bottom: $footer-height_mobile;
|
||||
// }
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
@ -0,0 +1,13 @@
|
|||
.ld-BaseLoader {
|
||||
align-items: center;
|
||||
background-color: rgba(#fff, 0.8);
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1000000;
|
||||
}
|
|
@ -0,0 +1,79 @@
|
|||
.ld-Loading {
|
||||
align-items: center;
|
||||
background-color: rgba($poa-purple, 0.5);
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1000000;
|
||||
|
||||
&#{ & }-core {
|
||||
background-color: rgba($poa-purple, 0.5);
|
||||
}
|
||||
|
||||
&#{ & }-sokol {
|
||||
background-color: rgba($sokol-cyan, 0.5);
|
||||
}
|
||||
|
||||
&#{ & }-dai {
|
||||
background-color: rgba($xdai-orange, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.ld-Loading_Animation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 206px;
|
||||
}
|
||||
|
||||
.ld-Loading_Image {
|
||||
margin-bottom: 40px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.ld-Loading_AnimationItem {
|
||||
animation-duration: 2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: fadeOut;
|
||||
animation-timing-function: linear;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
height: 9px;
|
||||
opacity: .2;
|
||||
width: 9px;
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: .1s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
animation-delay: .2s;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
animation-delay: .3s;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
animation-delay: .4s;
|
||||
}
|
||||
&:nth-child(6) {
|
||||
animation-delay: .5s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: .2;
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: .2;
|
||||
transform: scale(0.3);
|
||||
}
|
||||
}
|
|
@ -1,5 +1,5 @@
|
|||
// @import "App";
|
||||
// @import "BaseLoader";
|
||||
@import "BaseLoader";
|
||||
// @import "ButtonDownload";
|
||||
// @import "ButtonGenerate";
|
||||
@import "Footer";
|
||||
|
@ -10,7 +10,7 @@
|
|||
@import "IconTelegram";
|
||||
@import "IconTwitter";
|
||||
// @import "Keys";
|
||||
// @import "Loading";
|
||||
@import "Loading";
|
||||
@import "LogoDai";
|
||||
@import "LogoPOA";
|
||||
@import "LogoSokol";
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,10 @@
|
|||
import React from 'react'
|
||||
import loadingImg from './loading.gif'
|
||||
|
||||
export const BaseLoader = () => {
|
||||
return (
|
||||
<div className={`ld-BaseLoader`}>
|
||||
<img className={`ld-BaseLoader_Image`} src={loadingImg} alt="" />
|
||||
</div>
|
||||
)
|
||||
}
|
Binary file not shown.
After Width: | Height: | Size: 673 B |
|
@ -1,30 +0,0 @@
|
|||
import React from 'react'
|
||||
import { constants } from '../utils/constants'
|
||||
|
||||
const styles = netId => {
|
||||
const core = {
|
||||
backgroundColor: 'rgba(78,44,137, 0.9)'
|
||||
}
|
||||
const sokol = {
|
||||
backgroundColor: 'rgba(47, 109, 99, 0.8)'
|
||||
}
|
||||
|
||||
if (netId in constants.NETWORKS) {
|
||||
return constants.NETWORKS[netId].TESTNET ? sokol : core
|
||||
}
|
||||
|
||||
return core
|
||||
}
|
||||
|
||||
export const Loading = ({ netId }) => (
|
||||
<div className="loading-container" style={styles(netId)}>
|
||||
<div className="loading">
|
||||
<div className="loading-i" />
|
||||
<div className="loading-i" />
|
||||
<div className="loading-i" />
|
||||
<div className="loading-i" />
|
||||
<div className="loading-i" />
|
||||
<div className="loading-i" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 26">
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M8.938 17.812h-.813v2.376h-.003l.003.015c0 .44-.364.797-.812.797h-6.5A.805.805 0 0 1 0 20.203l.003-.015H0V5.813h.003c0-.006-.003-.011-.003-.016C0 5.357.364 5 .813 5h8.125c3.589 0 6.499 2.868 6.499 6.406s-2.91 6.406-6.499 6.406zM25.188 5c4.487 0 8.125 3.582 8.125 8s-3.638 8-8.125 8c-4.488 0-8.126-3.582-8.126-8s3.638-8 8.126-8zM52 20.493a.498.498 0 0 1-.503.494H33.064c-.022.003-.041.013-.064.013a.5.5 0 0 1-.5-.5c0-.109.042-.204.101-.286l-.009-.017 9.151-14.809h.02a.493.493 0 0 1 .965 0h.021L52 20.296l-.032.043c.017.05.032.1.032.154z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 654 B |
|
@ -0,0 +1,30 @@
|
|||
import React from 'react'
|
||||
import xDaiLogo from './xdai.svg'
|
||||
import poaLogo from './core.svg'
|
||||
import sokolLogo from './sokol.svg'
|
||||
|
||||
const getLogoSrc = networkBranch => {
|
||||
return (
|
||||
{
|
||||
core: poaLogo,
|
||||
sokol: sokolLogo,
|
||||
dai: xDaiLogo
|
||||
}[networkBranch] || poaLogo
|
||||
)
|
||||
}
|
||||
|
||||
export const Loading = ({ networkBranch }) => {
|
||||
return (
|
||||
<div className={`ld-Loading ld-Loading-${networkBranch}`}>
|
||||
<img className={`ld-Loading_Image ld-Loading_Image-${networkBranch}`} src={getLogoSrc(networkBranch)} alt="" />
|
||||
<div className="ld-Loading_Animation">
|
||||
<div className="ld-Loading_AnimationItem" />
|
||||
<div className="ld-Loading_AnimationItem" />
|
||||
<div className="ld-Loading_AnimationItem" />
|
||||
<div className="ld-Loading_AnimationItem" />
|
||||
<div className="ld-Loading_AnimationItem" />
|
||||
<div className="ld-Loading_AnimationItem" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 26">
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M36.528 20H24.272c-.167 0-.334-.028-.499-.068l.018.068h-5.287l-1.607-5.969H.969A.96.96 0 0 1 0 13.078c0-.005.003-.01.003-.016H0V5.906C0 4.853.86 4 1.922 4l.016.002V4h30.275c1.061 0 2.153.855 2.437 1.91l3.285 12.18c.285 1.055-.345 1.91-1.407 1.91zM7.723 6.866H3.361l1.169 4.298h4.362L7.723 6.866zm7.209 0h-4.361l1.169 4.298h4.361l-1.169-4.298zm11.743 10.985h1.923l-.517-1.911h-1.922l.516 1.911zm5.201-10.985h-8.17l2.194 8.119h8.171l-2.195-8.119zm2.453 9.074h-1.922l.516 1.911h1.923l-.517-1.911zm-33.61.047v-.05h12.969v.003h1.557L16.342 20H1.938v-.002L1.922 20A1.914 1.914 0 0 1 0 18.094v-1.188h.005c0-.006-.005-.01-.005-.015 0-.439.308-.793.719-.904z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 766 B |
|
@ -0,0 +1,24 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 52">
|
||||
<defs>
|
||||
<filter id="a" width="44" height="52" x="0" y="0" filterUnits="userSpaceOnUse">
|
||||
<feOffset dy="3" in="SourceAlpha"/>
|
||||
<feGaussianBlur result="blurOut" stdDeviation="2.449"/>
|
||||
<feFlood flood-color="#D2D5D7" result="floodOut"/>
|
||||
<feComposite in="floodOut" in2="blurOut" operator="atop"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA slope=".5" type="linear"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<linearGradient id="b" x1="0%" x2="0%" y1="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#FFAD45"/>
|
||||
<stop offset="100%" stop-color="#FFD342"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M17.771 40.253c-3.368-2.101-9.884-6.163-10.841-6.762C5 32.154 5 30.021 5 30.021l.001-16.044S5 11.656 6.947 10.492l10.824-6.751c3.729-2.324 3.729-2.324 7.464.004l10.808 6.741c1.957 1.23 1.956 3.487 1.956 3.487v16.049s.001 2.235-1.956 3.485L25.232 40.25c-3.732 2.33-3.732 2.33-7.461.003z" filter="url(#a)"/>
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M30.055 13.884l-6.233 8.128 6.229 8.122h-4.644L21.5 25.039l-3.907 5.095h-4.644l6.229-8.122-6.233-8.128h4.644l3.911 5.1 3.911-5.1h4.644z"/>
|
||||
<path fill="url(#b)" d="M30.055 13.884l-6.233 8.128 6.229 8.122h-4.644L21.5 25.039l-3.907 5.095h-4.644l6.229-8.122-6.233-8.128h4.644l3.911 5.1 3.911-5.1h4.644z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.6 KiB |
|
@ -1,6 +1,7 @@
|
|||
export { Ballots } from './Ballots.jsx'
|
||||
export { BaseLoader } from './BaseLoader/'
|
||||
export { Footer } from './Footer/'
|
||||
export { Header } from './Header.jsx'
|
||||
export { Loading } from './Loading.jsx'
|
||||
export { Loading } from './Loading/'
|
||||
export { NewBallot } from './NewBallot.jsx'
|
||||
export { Settings } from './Settings.jsx'
|
||||
|
|
Loading…
Reference in New Issue