Skip to content

Commit e275a0e

Browse files
dirkmcdirkmc
authored
fix: storage space page usage key (#131)
1 parent 620ec6f commit e275a0e

File tree

3 files changed

+121
-84
lines changed

3 files changed

+121
-84
lines changed

‎react/src/StorageSpace.css

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
.storage-chart {
2+
position: relative;
3+
padding: 1em;
4+
}
5+
6+
.storage-chart .total-size {
7+
position: absolute;
8+
right: -1em;
9+
top: -0.6em;
10+
font-size: 0.8em;
11+
}
12+
13+
.storage-chart .bars {
14+
border: 1px solid black;
15+
height: 4em;
16+
}
17+
18+
.storage-chart .bars > div {
19+
position: relative;
20+
display: inline-block;
21+
height: 4em;
22+
border-right: 1px solid black;
23+
}
24+
25+
.storage-chart .bars > div:last-child {
26+
border-right: none;
27+
}
28+
29+
.storage-chart .bars .completed {
30+
background-image: repeating-linear-gradient(
31+
135deg,
32+
#fff,
33+
#fff 5px,
34+
#e64980 5px,
35+
#e64980 6px);
36+
}
37+
38+
.storage-chart .completed .bar-color {
39+
background-image: repeating-linear-gradient(
40+
135deg,
41+
#fff,
42+
#fff 3px,
43+
#e64980 3px,
44+
#e64980 4px);
45+
}
46+
47+
.storage-chart .bars .transferring {
48+
background-image: repeating-linear-gradient(
49+
135deg,
50+
#fff,
51+
#fff 5px,
52+
#465298 5px,
53+
#465298 6px);
54+
}
55+
56+
.storage-chart .transferring .bar-color {
57+
background-image: repeating-linear-gradient(
58+
135deg,
59+
#fff,
60+
#fff 3px,
61+
#465298 3px,
62+
#465298 4px);
63+
}
64+
65+
.storage-chart .labels {
66+
padding: 0.5em 0;
67+
}
68+
69+
.storage-chart .labels .label {
70+
display: inline-block;
71+
padding: 0.5em 1em;
72+
font-size: 0.8em;
73+
}
74+
75+
.storage-chart .labels .bar-color {
76+
border: 1px solid #000;
77+
width: 0.8em;
78+
height: 0.8em;
79+
display: inline-block;
80+
}
81+
82+
.storage-chart .labels .text {
83+
display: inline-block;
84+
padding-left: 0.5em;
85+
}
86+
87+
.storage-chart .labels .amount {
88+
padding: 0.5em 0 0 1.5em;
89+
}
90+
91+
.storage-fields {
92+
margin-top: 1em
93+
}
94+
95+
.storage-fields td {
96+
padding: 0.5em 1em;
97+
font-weight: normal;
98+
}

‎react/src/StorageSpace.js

+23-20
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {useQuery} from "./hooks";
22
import {StorageQuery} from "./gql";
33
import React from "react";
44
import {humanFileSize} from "./util";
5+
import './StorageSpace.css'
56

67
export function StorageSpacePage(props) {
78
const {loading, error, data} = useQuery(StorageQuery)
@@ -26,29 +27,31 @@ export function StorageSpacePage(props) {
2627
{humanFileSize(totalSize)}
2728
</div>
2829
<div className="bars">
29-
<div className="completed" style={{width: Math.floor(100*storage.Completed/totalSize)+'%'}}>
30-
<div className="label">
31-
Completed - Adding to sector<br/>
32-
{humanFileSize(storage.Completed)}
33-
</div>
30+
<div className="completed" style={{width: Math.floor(100*storage.Completed/totalSize)+'%'}} />
31+
<div className="transferring" style={{width: Math.floor(100*storage.Transferring/totalSize)+'%'}} />
32+
<div className="pending" style={{width: Math.floor(100*storage.Pending/totalSize)+'%'}} />
33+
<div className="free" style={{width: Math.floor(100*storage.Free/totalSize)+'%'}} />
34+
</div>
35+
<div className="labels">
36+
<div className="label completed">
37+
<div className="bar-color"></div>
38+
<div className="text">Completed</div>
39+
<div className="amount">{humanFileSize(storage.Completed)}</div>
3440
</div>
35-
<div className="transferring" style={{width: Math.floor(100*storage.Transferring/totalSize)+'%'}}>
36-
<div className="label">
37-
Transferring<br/>
38-
{humanFileSize(storage.Transferring)}
39-
</div>
41+
<div className="label transferring">
42+
<div className="bar-color"></div>
43+
<div className="text">Transferring</div>
44+
<div className="amount">{humanFileSize(storage.Transferring)}</div>
4045
</div>
41-
<div className="pending" style={{width: Math.floor(100*storage.Pending/totalSize)+'%'}}>
42-
<div className="label">
43-
Pending<br/>
44-
{humanFileSize(storage.Pending)}
45-
</div>
46+
<div className="label pending">
47+
<div className="bar-color"></div>
48+
<div className="text">Pending</div>
49+
<div className="amount">{humanFileSize(storage.Pending)}</div>
4650
</div>
47-
<div className="free" style={{width: Math.floor(100*storage.Free/totalSize)+'%'}}>
48-
<div className="label">
49-
Free<br/>
50-
{humanFileSize(storage.Free)}
51-
</div>
51+
<div className="label free">
52+
<div className="bar-color"></div>
53+
<div className="text">Free</div>
54+
<div className="amount">{humanFileSize(storage.Free)}</div>
5255
</div>
5356
</div>
5457
</div>

‎react/src/index.css

-64
Original file line numberDiff line numberDiff line change
@@ -440,67 +440,3 @@ body.modal-open {
440440
.deal-publish td {
441441
padding: 0.5em 1em;
442442
}
443-
444-
.storage-chart {
445-
position: relative;
446-
padding: 1em;
447-
}
448-
449-
.storage-chart .total-size {
450-
position: absolute;
451-
right: -1em;
452-
top: -0.6em;
453-
font-size: 0.8em;
454-
}
455-
456-
.storage-chart .bars {
457-
border: 1px solid black;
458-
margin-bottom: 5em;
459-
height: 4em;
460-
}
461-
462-
.storage-chart .bars > div {
463-
position: relative;
464-
display: inline-block;
465-
height: 4em;
466-
border-right: 1px solid black;
467-
}
468-
469-
.storage-chart .bars > div:last-child {
470-
border-right: none;
471-
}
472-
473-
.storage-chart .bars .completed {
474-
background-image: repeating-linear-gradient(
475-
135deg,
476-
#fff,
477-
#fff 5px,
478-
#e64980 5px,
479-
#e64980 6px);
480-
}
481-
482-
.storage-chart .bars .transferring {
483-
background-image: repeating-linear-gradient(
484-
135deg,
485-
#fff,
486-
#fff 5px,
487-
#465298 5px,
488-
#465298 6px);
489-
}
490-
491-
.storage-chart .bars .label {
492-
padding: 1em;
493-
position: absolute;
494-
top: 4em;
495-
width: 5em;
496-
font-size: 0.9em;
497-
}
498-
499-
.storage-fields {
500-
margin-top: 1em
501-
}
502-
503-
.storage-fields td {
504-
padding: 0.5em 1em;
505-
font-weight: normal;
506-
}

0 commit comments

Comments
 (0)