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

Updated reset button positioning and styling

Browse Source 
Updated reset button positioning to use correct styling to work across all browsers.
This commit is contained in:
Steven Haskell
2018-10-22 13:14:41 -04:00
parent 765e2a4f1c
commit 2cac3cf0f2
3 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
css/appstyling-v2.css
View File

@@ -114,6 +114,7 @@ p.subheading {
font-weight: 500; font-weight: 500;
line-height: 28px; line-height: 28px;
letter-spacing: .015px; letter-spacing: .015px;
display: none;
} }
.b-platevisual__weight{ .b-platevisual__weight{
@@ -154,6 +155,11 @@ p.subheading {
vertical-align: middle; vertical-align: middle;
} }
.b-platevisual__weightdifference{
display: none;
}
.b-calulatorinputs { .b-calulatorinputs {
height: 40vh; height: 40vh;
width: auto; width: auto;
@@ -245,6 +251,11 @@ label {
line-height: 14px; line-height: 14px;
} }
.b-calulatorinputs__weightinputcontainer{
position: relative;
display: inline-block;
}
.input-weight { .input-weight {
height: 33px; height: 33px;
width: 196px; width: 196px;
@@ -292,8 +303,10 @@ input.input-calculate:focus{
.b-infoentry__reset{ .b-infoentry__reset{
position: absolute; position: absolute;
top: 0px; top: 50%;
transform: translate(-132%, 132%); left: 50%;
transform: translate(50%, -32%);
-webkit-transform: translate(50%, -32%);
color: #808285; color: #808285;
font-family: "Zilla Slab"; font-family: "Zilla Slab";
font-size: 14px; font-size: 14px;
@@ -301,6 +314,9 @@ input.input-calculate:focus{
font-weight: 500; font-weight: 500;
letter-spacing: 0.75px; letter-spacing: 0.75px;
display: none; display: none;
background:none;
border:none;
margin:0;
} }

10
index.html
View File

@@ -49,7 +49,7 @@
<div class="b-platevisual__plates b-platevisual__plates--right"> <div class="b-platevisual__plates b-platevisual__plates--right">
</div> </div>
</div> </div>
<p class="subheading">Offset: <span class="input-difference">0</span> LBS</p> <p class="b-platevisual__weightdifference subheading">Offset: <span class="input-difference">0</span> LBS</p>
</div> </div>
</div> </div>
@@ -89,9 +89,11 @@
<div class="b-calulatorinputs__infoentry"> <div class="b-calulatorinputs__infoentry">
<div class="b-calulatorinputs__inputcontainer"> <div class="b-calulatorinputs__inputcontainer">
<div class="b-calulatorinputs__weightinput"> <div class="b-calulatorinputs__weightinput">
<label for="Weight">WEIGHT (LBS)</label> <div class="b-calulatorinputs__weightinputcontainer">
<input type="number" inputmode="numeric" pattern="[0-9]*" class="b-infoentry__input input-element input-weight" name="Weight" placeholder="What are you lifting? (LBS)" id="Weight"> <label for="Weight">WEIGHT (LBS)</label>
<input type="button" name="reset" value="Reset" class="b-infoentry__reset"> <input type="number" inputmode="numeric" pattern="[0-9]*" class="b-infoentry__input input-element input-weight" name="Weight" placeholder="Enter your weight (LBS)" id="Weight">
<input type="button" name="reset" value="Reset" class="b-infoentry__reset">
</div>
<input type="button" class="b-infoentry__button submit-element input-calculate" name="Calculate" value="LIFT" onclick="startcalc()"> <input type="button" class="b-infoentry__button submit-element input-calculate" name="Calculate" value="LIFT" onclick="startcalc()">
</div> </div>
<a href="#options"> <a href="#options">

5
js/Weight Calculation Script-Edited-Jquery-V4.js
View File

@@ -116,7 +116,8 @@
//show reset button on calculate //show reset button on calculate
jQuery(".input-calculate").click(function(){ jQuery(".input-calculate").click(function(){
jQuery(".b-infoentry__reset").show(); jQuery(".b-infoentry__reset, .b-platevisual__weightfinal, .b-platevisual__weightdifference").show();
}); });
//reset inputs and plate visuals //reset inputs and plate visuals
@@ -124,7 +125,7 @@
jQuery(".input-weight, .input-weightsneeded").val(''); jQuery(".input-weight, .input-weightsneeded").val('');
jQuery(".input-final, .input-difference").html('0'); jQuery(".input-final, .input-difference").html('0');
jQuery(".b-platevisual__plates").html(''); jQuery(".b-platevisual__plates").html('');
jQuery(".b-infoentry__reset").hide(); jQuery(".b-infoentry__reset, .b-platevisual__weightfinal, .b-platevisual__weightdifference").hide();
}); });
//Saves scroll position on focus and restores //Saves scroll position on focus and restores