r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Improve progress bar layout

Browse source
This commit is contained in:
Andrew Nicolaou 2019-11-25 11:15:10 +01:00
parent 8adb1347ba
commit 8132a029f5
2 changed files with 18 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
client/modules/IDE/components/AssetSize.jsx
View file

@ -23,15 +23,15 @@ const AssetSize = ({ totalSize }) => {
const currentSize = prettyBytes(totalSize); const currentSize = prettyBytes(totalSize);
const sizeLimit = prettyBytes(MAX_SIZE_B); const sizeLimit = prettyBytes(MAX_SIZE_B);
const percent = formatPercent(totalSize / MAX_SIZE_B); const percentValue = totalSize / MAX_SIZE_B;
const percent = formatPercent(percentValue);
return ( return (
<div className="asset-size" style={{ '--percent': percent }}> <div className="asset-size" style={{ '--percent': percentValue }}>
<div className="asset-size-bar"> <div className="asset-size-bar" />
<p className="asset-current">{currentSize} ({percent})</p> <p className="asset-current">{currentSize} ({percent})</p>
<p className="asset-max">Max: {sizeLimit}</p> <p className="asset-max">Max: {sizeLimit}</p>
</div> </div>
</div>
); );
}; };

17
client/styles/components/_asset-size.scss
View file

@ -1,6 +1,8 @@
.asset-size { .asset-size {
font-size: #{14 / $base-font-size}rem; position: relative;
flex: 1;
margin-bottom: #{18 / $base-font-size}rem; margin-bottom: #{18 / $base-font-size}rem;
font-size: #{14 / $base-font-size}rem;
} }
.asset-size-bar { .asset-size-bar {
@ -10,6 +12,10 @@
width: 200px; width: 200px;
height: 20px; height: 20px;
border-radius: #{3 / $base-font-size}rem;
border: 1px solid transparent;
overflow: hidden;
@include themify() { @include themify() {
background-color: getThemifyVariable('progress-bar-background-color'); background-color: getThemifyVariable('progress-bar-background-color');
} }
@ -22,7 +28,7 @@
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: var(--percent); width: calc(var(--percent) * 100%);
@include themify() { @include themify() {
background-color: getThemifyVariable('progress-bar-active-color'); background-color: getThemifyVariable('progress-bar-active-color');
@ -32,13 +38,14 @@
.asset-current { .asset-current {
position: absolute; position: absolute;
top: 28px; top: 28px;
left: var(--percent); left: calc(200px * var(--percent));
margin-left: -8px; margin-left: -8px;
} }
.asset-max { .asset-max {
position: absolute; position: absolute;
right: 0; top: 0;
transform: translate(100%); left: 0;
transform: translate(210%); // align max label to right of asset-size-bar
padding-left: #{8 / $base-font-size}rem; padding-left: #{8 / $base-font-size}rem;
} }