poanetwork
/
poa-dapps-voting
mirror of https://github.com/poanetwork/poa-dapps-voting.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

(Add) Loading style.

This commit is contained in:
Gabriel Rodriguez Alsina 2018-12-17 18:17:01 -03:00
parent f15db41e60
commit e06650d6cb
14 changed files with 178 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/App.js
View File

@ -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 />
)
}
}

12
src/assets/stylesheets/application/_base.scss
View File

@ -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 {

13
src/assets/stylesheets/components/_BaseLoader.scss Normal file
View File

@ -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;
}

79
src/assets/stylesheets/components/_Loading.scss Normal file
View File

@ -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);
}
}

4
src/assets/stylesheets/components/_index.scss
View File

@ -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";

2
src/assets/stylesheets/index.css
View File

File diff suppressed because one or more lines are too long

10
src/components/BaseLoader/index.js Normal file
View File

@ -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>
)
}

BIN
src/components/BaseLoader/loading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 673 B

30
src/components/Loading.jsx
View File

@ -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>
)

3
src/components/Loading/core.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 654 B

30
src/components/Loading/index.js Normal file
View File

@ -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>
)
}

3
src/components/Loading/sokol.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 766 B

24
src/components/Loading/xdai.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

3
src/components/index.js
View File

@ -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'