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

Started Styling of options Block

Browse Source 
Added styling for options block. Realised in order to float select and input next to each other each needed its own DIV. Still need to redo plate available area.
This commit is contained in:
Steven Haskell
2018-10-11 13:33:14 -04:00
parent 364540e9af
commit d1f249631d
4 changed files with 129 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
css/appstyling-v2.css
View File

@@ -253,6 +253,63 @@ label {
transform: translate(-50%, -100%);
}
.b-options{
background-color: #8C8E90;
position: relative;
height: auto;
}
.b-options__inputcontainer{
width: 100%;
color: #FCFCFC;
font-family: Roboto;
font-size: 10px;
font-weight: 500;
line-height: 14px;
letter-spacing: 1.5px;
height: auto;
overflow: visible;
text-align: center;
padding-top: 16px;
}
.b-options__optionsinput{
display: inline-block;
text-align: center;
}
.b-options__inputcontainer label{
text-align: left;
}
.input-bar{
height: 33px;
width: 130px;
border-radius: 4px;
background-color: #D8D8D8;
color: #48484A;
font-family: "Zilla Slab";
font-size: 14px;
font-style: italic;
font-weight: 500;
letter-spacing: 0.75px;
line-height: 20px;
margin-right: 5px;
}
.input-percentage{
height: 38px;
width: 130px;
border-radius: 4px;
background-color: #D8D8D8;
color: #48484A;
font-family: "Zilla Slab";
font-size: 14px;
font-style: italic;
font-weight: 500;
letter-spacing: 0.75px;
line-height: 20px;
margin-right: 0px;
}
/*
.b-container {

4
css/main.css
View File

@@ -235,7 +235,7 @@ textarea,
select {
height: 38px;
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #fff;
/*background-color: #fff;*/
border: 1px solid #D1D1D1;
border-radius: 4px;
box-shadow: none;
@@ -277,7 +277,7 @@ fieldset {
border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
display: inline; }
display: inline-block; }
label > .label-body {
display: inline-block;
margin-left: .5rem;

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

@@ -2,6 +2,8 @@
function startcalc() {
jQuery(".input-weightsneeded").val(null);
//calls inputs to start calculation
var weighttolift = jQuery(".input-weight").val();
var percentage = jQuery(".input-percentage").val();

29
whatareyouliftingapp-V5.html
View File

@@ -79,8 +79,8 @@
<div class="b-calulatorinputs__infoentry">
<div class="b-calulatorinputs__inputcontainer">
<div class="b-calulatorinputs__weightinput">
<label for="Weight">WEIGHT</label>
<input type="text" 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="number" class="b-infoentry__input input-element input-weight" name="Weight" placeholder="What are you lifting? (LBS)" id="Weight">
<input type="button" class="b-infoentry__button submit-element input-calculate" name="Calculate" value="LIFT" onclick="startcalc()">
</div>
<a href="#options">
@@ -93,10 +93,15 @@
</div>
<!-- Options Section -->
<a name="options"></a><div class="b-options">
<p class="b-options__overline">BAR WEIGHT</p>
<input type="text" class="b-options__input input-element input-bar" name="Bar" value="45" id="Bar"> LBS
<p>PERCENT OF WEIGHT</p>
<a name="options"></a>
<div class="b-options">
<div class="b-options__inputcontainer">
<div class="b-options__optionsinput">
<label for="Bar">BAR WEIGHT (LBS)</label>
<input type="text" class="b-options__input input-element input-bar" name="Bar" value="45" id="Bar">
</div>
<div class="b-options__optionsinput">
<label for="Percentage">PERCENT OF WEIGHT</label>
<select name="Percentage" class="b-options__percent input-element input-percentage" id="Percentage">
<option value="1" selected="">100% </option>
<option value="0.95">95% </option>
@@ -119,6 +124,7 @@
<option value="0.10">10% </option>
<option value="0.05">5% </option>
</select>
</div>
<p class="b-options__subheading subheading">Plates Available</p>
<ul class="b-options__input">
<li>45 LBS
@@ -128,31 +134,32 @@
</li>
<li>35 LBS
<ul>
<input type="number" data-weight="35" name="A35" class="input-element input-weightsavailable input-available35" min="0" step="1" value="2" id="avail35">
<input type="number" data-weight="35" name="A35" class="input-element input-weightsavailable input-available35" min="0" step="1" value="4" id="avail35">
</ul>
</li>
<li>25 LBS
<ul>
<input type="number" data-weight="25" name="A25" class="input-element input-weightsavailable input-available25" min="0" step="1" value="2" id="avail25">
<input type="number" data-weight="25" name="A25" class="input-element input-weightsavailable input-available25" min="0" step="1" value="4" id="avail25">
</ul>
</li>
<li>10 LBS
<ul>
<input type="number" data-weight="10" name="A10" class="input-element input-weightsavailable input-available10" min="0" step="1" value="2" id="avail10">
<input type="number" data-weight="10" name="A10" class="input-element input-weightsavailable input-available10" min="0" step="1" value="4" id="avail10">
</ul>
</li>
<li>5 LBS
<ul>
<input type="number" data-weight="5" name="A5" class="input-element input-weightsavailable input-available5" min="0" step="1" value="2" id="avail5">
<input type="number" data-weight="5" name="A5" class="input-element input-weightsavailable input-available5" min="0" step="1" value="4" id="avail5">
</ul>
</li>
<li>2.5 LBS
<ul>
<input type="number" data-weight="2.5" name="A2half" class="input-element input-weightsavailable input-available2" min="0" step="1" value="2" id="avail2">
<input type="number" data-weight="2.5" name="A2half" class="input-element input-weightsavailable input-available2" min="0" step="1" value="4" id="avail2">
</ul>
</li>
</ul>
</div>
</div>
<!-- Back to top Button -->