stevenhaskell/What_Are_You_Lifting_App
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added Barbell and Placement of plates

Browse Source 
Stylized barbell added as well as area where the plates would be added. Need to find out how to add plates needed.
This commit is contained in:
Steven Haskell
2018-10-15 13:15:13 -04:00
parent 179e15b77a
commit afb4ddb83a
9 changed files with 43 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
css/appstyling-v2.css
View File

@@ -116,6 +116,36 @@ p.subheading {
letter-spacing: .015px;
}
.b-platevisual__weight{
position: relative;
max-width: 300px;
margin: auto;
}
.b-platevisual__barbell{
width: 100%;
max-width: 300px;
vertical-align: top;
}
.b-platevisual__plates{
position: absolute;
}
.b-platevisual__plates--left{
top: 50%;
transform: translate(-100%, -50%);
left: 21%;
}
.b-platevisual__plates--right{
top: 50%;
transform: translateY(-50%);
left: 79%;
}
.b-calulatorinputs {
height: 40vh;
width: auto;

1
images/10lbs-Plate.svg Normal file
View File

@@ -0,0 +1 @@
<svg height="48" viewBox="0 0 8 48" width="8" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 8 0)"><rect fill="#48484a" fill-rule="nonzero" height="48" rx="4" width="8"/><text fill="#fcfcfc" font-family="Roboto-Regular, Roboto" font-size="10" transform="matrix(-1 0 0 1 8 0)"><tspan x="1.192383" y="22">1</tspan> <tspan x="1.192383" y="33">0</tspan></text></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 416 B

1
images/25lbs-Plate.svg Normal file
View File

@@ -0,0 +1 @@
<svg height="56" viewBox="0 0 8 56" width="8" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 8 0)"><rect fill="#48484a" fill-rule="nonzero" height="56" rx="4" width="8"/><text fill="#fcfcfc" font-family="Roboto-Regular, Roboto" font-size="10" transform="matrix(-1 0 0 1 8 0)"><tspan x="1.192383" y="26">2</tspan> <tspan x="1.192383" y="37">5</tspan></text></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 416 B

1
images/2halflbs-Plate.svg Normal file
View File

@@ -0,0 +1 @@
<svg height="32" viewBox="0 0 8 32" width="8" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 8 0)"><rect fill="#48484a" fill-rule="nonzero" height="32" rx="4" width="8"/><text fill="#fcfcfc" font-family="Roboto-Regular, Roboto" font-size="10" transform="matrix(-1 0 0 1 8 0)"><tspan x="1" y="20">2</tspan> <tspan x="2.491699" y="23">.</tspan> <tspan x="11.175781" y="33.561523"/><tspan x="11.175781" y="36.561523"/> <tspan x="1" y="32">5</tspan></text></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 512 B

1
images/35lbs-Plate.svg Normal file
View File

@@ -0,0 +1 @@
<svg height="64" viewBox="0 0 8 64" width="8" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 8 0)"><rect fill="#48484a" fill-rule="nonzero" height="64" rx="4" width="8"/><text fill="#fcfcfc" font-family="Roboto-Regular, Roboto" font-size="10" transform="matrix(-1 0 0 1 8 0)"><tspan x="1.192383" y="30">3</tspan> <tspan x="1.192383" y="41">5</tspan></text></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 416 B

1
images/45lbs-Plate.svg Normal file
View File

@@ -0,0 +1 @@
<svg height="72" viewBox="0 0 8 72" width="8" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 8 0)"><rect fill="#48484a" fill-rule="nonzero" height="72" rx="4" width="8"/><text fill="#fcfcfc" font-family="Roboto-Regular, Roboto" font-size="10" transform="matrix(-1 0 0 1 8 0)"><tspan x="1.192383" y="34">4</tspan> <tspan x="1.192383" y="45">5</tspan></text></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 416 B

1
images/5lbs-Plate.svg Normal file
View File

@@ -0,0 +1 @@
<svg height="40" viewBox="0 0 8 40" width="8" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 8 0)"><rect fill="#48484a" fill-rule="nonzero" height="40" rx="4" width="8"/><text fill="#fcfcfc" font-family="Roboto-Regular, Roboto" font-size="10" transform="matrix(-1 0 0 1 8 0)"><tspan x="1.192383" y="23.5">5</tspan></text></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 381 B

1
images/BarBell.svg Normal file
View File

@@ -0,0 +1 @@
<svg height="31" viewBox="0 0 288 31" width="288" xmlns="http://www.w3.org/2000/svg"><g fill="none"><rect fill="#c5c5c5" height="16" rx="4" width="70" y="7"/><path d="m68 11h152v8h-152z" fill="#c5c5c5"/><path d="m90 11h32v8h-32z" fill="#8c8e90"/><path d="m104 11h4v8h-4z" fill="#c5c5c5"/><path d="m166 11h32v8h-32z" fill="#8c8e90"/><rect fill="#c5c5c5" height="16" rx="4" width="70" x="218" y="7"/><rect fill="#8c8e90" height="31" rx="4" width="16" x="60"/><rect fill="#8c8e90" height="31" rx="4" width="16" x="212"/><path d="m180 11h4v8h-4z" fill="#c5c5c5"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 569 B

8
whatareyouliftingapp-V5.html
View File

@@ -38,8 +38,12 @@
<div class="b-platevisual">
<div class="b-platevisual__container">
<p class="b-platevisual__weightfinal"><span class="input-element input-final">0</span> LBS</p>
<div class="b-platevisual__barbell">
<img src="https://qph.fs.quoracdn.net/main-qimg-377c39d784e8860d4ce6142fba0e09e0-c" style="width: 50%;max-width: 300px;">
<div class="b-platevisual__weight">
<img src="/Users/stevenh/Desktop/Side_Projects/What_Are_You_Lifting-App/WhatAreYouLifting/images/BarBell.svg" class="b-platevisual__barbell">
<div class="b-platevisual__plates b-platevisual__plates--left">
</div>
<div class="b-platevisual__plates b-platevisual__plates--right">
</div>
</div>
<p class="subheading">Offset: <span class="input-difference">0</span> LBS</p>
</div>