mirror of
https://github.com/RoboSats/robosats.git
synced 2024-12-15 03:46:24 +00:00
Minify main.js, improve spinner and loader page
This commit is contained in:
parent
261cb46f9b
commit
b89df0217d
@ -27,6 +27,7 @@ services:
|
|||||||
build: ./frontend
|
build: ./frontend
|
||||||
container_name: npm-dev
|
container_name: npm-dev
|
||||||
restart: always
|
restart: always
|
||||||
|
command: npm run build
|
||||||
volumes:
|
volumes:
|
||||||
- ./frontend:/usr/src/frontend
|
- ./frontend:/usr/src/frontend
|
||||||
|
|
||||||
|
@ -492,7 +492,7 @@ export default class MakerPage extends Component {
|
|||||||
value={this.state.minAmount}
|
value={this.state.minAmount}
|
||||||
onChange={this.handleMinAmountChange}
|
onChange={this.handleMinAmountChange}
|
||||||
error={this.state.minAmount < this.getMinAmount() || this.state.maxAmount < this.state.minAmount}
|
error={this.state.minAmount < this.getMinAmount() || this.state.maxAmount < this.state.minAmount}
|
||||||
sx={{width: this.state.minAmount.toString().length * 10, maxWidth: 40}}
|
sx={{width: this.state.minAmount.toString().length * 9, maxWidth: 40}}
|
||||||
/>
|
/>
|
||||||
<span style={{width: 20}}>to</span>
|
<span style={{width: 20}}>to</span>
|
||||||
<TextField
|
<TextField
|
||||||
@ -502,7 +502,7 @@ export default class MakerPage extends Component {
|
|||||||
value={this.state.maxAmount}
|
value={this.state.maxAmount}
|
||||||
error={this.state.maxAmount > this.getMaxAmount() || this.state.maxAmount < this.state.minAmount}
|
error={this.state.maxAmount > this.getMaxAmount() || this.state.maxAmount < this.state.minAmount}
|
||||||
onChange={this.handleMaxAmountChange}
|
onChange={this.handleMaxAmountChange}
|
||||||
sx={{width: this.state.maxAmount.toString().length * 10, maxWidth: 50}}
|
sx={{width: this.state.maxAmount.toString().length * 9, maxWidth: 50}}
|
||||||
/>
|
/>
|
||||||
<span>{this.state.currencyCode}</span>
|
<span>{this.state.currencyCode}</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -5,29 +5,87 @@
|
|||||||
left:50%;
|
left:50%;
|
||||||
top:50%;
|
top:50%;
|
||||||
margin-top:-120px;
|
margin-top:-120px;
|
||||||
margin-left:-190px;
|
margin-left:-175px;
|
||||||
width:350px;
|
width:350px;
|
||||||
height:120px;
|
height:120px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loaderSpinner,
|
||||||
|
.loaderSpinner:before,
|
||||||
|
.loaderSpinner:after {
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
.loaderSpinner {
|
.loaderSpinner {
|
||||||
|
color: #1976d2;
|
||||||
|
font-size: 11px;
|
||||||
|
text-indent: -99999em;
|
||||||
|
margin: 55px auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 115px;
|
width: 10em;
|
||||||
border: 16px solid #f3f3f3;
|
height: 10em;
|
||||||
border-top: 16px solid #1976d2;
|
box-shadow: inset 0 0 0 1em;
|
||||||
border-bottom: 16px solid #9c27b0;
|
-webkit-transform: translateZ(0);
|
||||||
border-radius: 50%;
|
-ms-transform: translateZ(0);
|
||||||
width: 120px;
|
transform: translateZ(0);
|
||||||
height: 120px;
|
}
|
||||||
animation: spin 4s linear infinite;
|
.loaderSpinner:before,
|
||||||
|
.loaderSpinner:after {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
.loaderSpinner:before {
|
||||||
|
width: 5.2em;
|
||||||
|
height: 10.2em;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 9.2em 0 0 10.2em;
|
||||||
|
top: -0.1em;
|
||||||
|
left: -0.1em;
|
||||||
|
-webkit-transform-origin: 5.1em 5.1em;
|
||||||
|
transform-origin: 5.1em 5.1em;
|
||||||
|
-webkit-animation: load2 2s infinite ease 1.5s;
|
||||||
|
animation: load2 2s infinite ease 1.5s;
|
||||||
|
}
|
||||||
|
.loaderSpinner:after {
|
||||||
|
width: 5.2em;
|
||||||
|
height: 10.2em;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 0 10.2em 10.2em 0;
|
||||||
|
top: -0.1em;
|
||||||
|
left: 4.9em;
|
||||||
|
-webkit-transform-origin: 0.1em 5.1em;
|
||||||
|
transform-origin: 0.1em 5.1em;
|
||||||
|
-webkit-animation: load2 2s infinite ease;
|
||||||
|
animation: load2 2s infinite ease;
|
||||||
|
}
|
||||||
|
@-webkit-keyframes load2 {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes load2 {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-slider {
|
.content-slider {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 360px;
|
height: 180px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider {
|
.slider {
|
||||||
height: 320px;
|
height: 140px;
|
||||||
width: 350px;
|
width: 350px;
|
||||||
margin: 40px auto 0;
|
margin: 40px auto 0;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
@ -36,7 +94,7 @@
|
|||||||
|
|
||||||
.mask {
|
.mask {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 320px;
|
height: 140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider ul {
|
.slider ul {
|
||||||
@ -46,37 +104,38 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.slider li {
|
.slider li {
|
||||||
|
text-align: center;
|
||||||
width: 350px;
|
width: 350px;
|
||||||
height: 320px;
|
height: 140px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -325px;
|
top: -105px;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider .quote {
|
.slider .quote {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 30px;
|
font-size: 20px;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider li.anim1 {
|
.slider li.anim1 {
|
||||||
animation: cycle 15s linear infinite;
|
animation: cycle 12s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider li.anim2 {
|
.slider li.anim2 {
|
||||||
animation: cycle2 15s linear infinite;
|
animation: cycle2 12s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider li.anim3 {
|
.slider li.anim3 {
|
||||||
animation: cycle3 15s linear infinite;
|
animation: cycle3 12s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider li.anim4 {
|
.slider li.anim4 {
|
||||||
animation: cycle4 15s linear infinite;
|
animation: cycle4 12s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider li.anim5 {
|
.slider li.anim5 {
|
||||||
animation: cycle5 15s linear infinite;
|
animation: cycle5 12s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider:hover li {
|
.slider:hover li {
|
||||||
@ -96,27 +155,27 @@
|
|||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
20% {
|
20% {
|
||||||
top: 325px;
|
top: 105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
21% {
|
21% {
|
||||||
top: -325px;
|
top: -105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
top: -325px;
|
top: -105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
92% {
|
92% {
|
||||||
top: -325px;
|
top: -105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
96% {
|
96% {
|
||||||
top: -325px;
|
top: -105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
@ -127,11 +186,11 @@
|
|||||||
|
|
||||||
@keyframes cycle2 {
|
@keyframes cycle2 {
|
||||||
0% {
|
0% {
|
||||||
top: -325px;
|
top: -105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
16% {
|
16% {
|
||||||
top: -325px;
|
top: -105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
20% {
|
20% {
|
||||||
@ -148,17 +207,17 @@
|
|||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
40% {
|
40% {
|
||||||
top: 325px;
|
top: 105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
41% {
|
41% {
|
||||||
top: -325px;
|
top: -105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
top: -325px;
|
top: -105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
@ -166,11 +225,11 @@
|
|||||||
|
|
||||||
@keyframes cycle3 {
|
@keyframes cycle3 {
|
||||||
0% {
|
0% {
|
||||||
top: -325px;
|
top: -105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
36% {
|
36% {
|
||||||
top: -325px;
|
top: -105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
40% {
|
40% {
|
||||||
@ -187,17 +246,17 @@
|
|||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
60% {
|
60% {
|
||||||
top: 325px;
|
top: 105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
61% {
|
61% {
|
||||||
top: -325px;
|
top: -105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
top: -325px;
|
top: -105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
@ -205,11 +264,11 @@
|
|||||||
|
|
||||||
@keyframes cycle4 {
|
@keyframes cycle4 {
|
||||||
0% {
|
0% {
|
||||||
top: -325px;
|
top: -105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
56% {
|
56% {
|
||||||
top: -325px;
|
top: -105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
60% {
|
60% {
|
||||||
@ -226,17 +285,17 @@
|
|||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
80% {
|
80% {
|
||||||
top: 325px;
|
top: 105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
81% {
|
81% {
|
||||||
top: -325px;
|
top: -105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
top: -325px;
|
top: -105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
@ -244,11 +303,11 @@
|
|||||||
|
|
||||||
@keyframes cycle5 {
|
@keyframes cycle5 {
|
||||||
0% {
|
0% {
|
||||||
top: -325px;
|
top: -105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
76% {
|
76% {
|
||||||
top: -325px;
|
top: -105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
80% {
|
80% {
|
||||||
@ -265,7 +324,7 @@
|
|||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
top: 325px;
|
top: 105px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -27,25 +27,24 @@
|
|||||||
<div id="app">
|
<div id="app">
|
||||||
<div class="loaderCenter">
|
<div class="loaderCenter">
|
||||||
<div class="loaderSpinner"></div>
|
<div class="loaderSpinner"></div>
|
||||||
<br/>
|
|
||||||
<div class="content-slider">
|
<div class="content-slider">
|
||||||
<div class="slider">
|
<div class="slider">
|
||||||
<div class="mask">
|
<div class="mask">
|
||||||
<ul>
|
<ul>
|
||||||
<li class="anim1">
|
<li class="anim1">
|
||||||
<div class="quote">Fetching robot parts ...</div>
|
<div class="quote">Looking for robot parts ...</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="anim2">
|
<li class="anim2">
|
||||||
<div class="quote">Zipping Sats at light speed ...</div>
|
|
||||||
</li>
|
|
||||||
<li class="anim3">
|
|
||||||
<div class="quote">Adding layers to the onion ...</div>
|
<div class="quote">Adding layers to the onion ...</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="anim4">
|
<li class="anim3">
|
||||||
<div class="quote">Winning at game theory ...</div>
|
<div class="quote">Winning at game theory ...</div>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="anim4">
|
||||||
|
<div class="quote">Moving Sats at light speed ...</div>
|
||||||
|
</li>
|
||||||
<li class="anim5">
|
<li class="anim5">
|
||||||
<div class="quote">Hiding you on 2^256 bits of entropy...</div>
|
<div class="quote">Hiding in 2^256 bits of entropy...</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
@ -21,6 +21,7 @@ module.exports = {
|
|||||||
optimization: {
|
optimization: {
|
||||||
minimize: true,
|
minimize: true,
|
||||||
},
|
},
|
||||||
|
|
||||||
plugins: [
|
plugins: [
|
||||||
new webpack.DefinePlugin({
|
new webpack.DefinePlugin({
|
||||||
"process.env": {
|
"process.env": {
|
||||||
@ -28,6 +29,7 @@ module.exports = {
|
|||||||
NODE_ENV: JSON.stringify("production"),
|
NODE_ENV: JSON.stringify("production"),
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
|
//new webpack.optimize.AggressiveMergingPlugin() //Merge chunks
|
||||||
],
|
],
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: ['.ts', '.js'],
|
extensions: ['.ts', '.js'],
|
||||||
|
Loading…
Reference in New Issue
Block a user