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

Further updated sizing of blocks

Browse Source 
Further updated sizing of calculator blocks. Now they will fill any screen size perfectly. NOTE: Works well for everything but mobile landscape. Still need a solution to it.
This commit is contained in:
Steven Haskell
2018-10-10 23:35:56 -04:00
parent 158e8c29b1
commit 364540e9af
3 changed files with 88 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
css/appstyling-v2.css
View File

@@ -1,7 +1,7 @@
/* /*
* What are you lifting V1 * What are you lifting V1
* Copyright 2018, stevenhaskell * Copyright 2018, stevenhaskell
* 12/29/2014 * 10/10/2018
*/ */
@@ -22,6 +22,10 @@
- Media Queries - Media Queries
*/ */
p {
margin-bottom: 0px;
margin-top: 0px;
}
h2 { h2 {
font-family: Roboto; font-family: Roboto;
@@ -34,12 +38,13 @@ h2 {
.b-header{ .b-header{
height: 18vh; height: 24vh;
background-color: #48484A; background-color: #48484A;
padding: 24px 16px;
text-align: center; text-align: center;
color: #FFFFFF; color: #FFFFFF;
position: relative; position: relative;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.23), 0 3px 6px 0 rgba(0,0,0,0.16);
z-index: 1000;
} }
.b-header__heading{ .b-header__heading{
@@ -49,6 +54,7 @@ h2 {
font-weight: 400; font-weight: 400;
line-height: 48px; line-height: 48px;
letter-spacing: .025em; letter-spacing: .025em;
margin: 0px;
} }
.b-header__container { .b-header__container {
@@ -71,12 +77,12 @@ p.subheading {
} }
.b-platevisual{ .b-platevisual{
height: 28vh; height: 36vh;
background-color: #FFFFFF; background-color: #FFFFFF;
padding: 24px 16px;
text-align: center; text-align: center;
color: #48484A; color: #48484A;
position: relative; position: relative;
z-index: 100;
} }
@@ -107,21 +113,25 @@ p.subheading {
} }
.b-calulatorinputs { .b-calulatorinputs {
height: 28vh; height: 40vh;
width: auto; width: auto;
background-color: #8C8E90; background-color: #8C8E90;
text-align: left; text-align: left;
color: #FFFFFF; color: #FFFFFF;
position: relative; position: relative;
box-shadow: 0 6px 6px 0 rgba(0,0,0,0.26), 0 10px 20px 0 rgba(0,0,0,0.19);
z-index: 500;
} }
.b-calulatorinputs__platerequirements{ .b-calulatorinputs__platerequirements{
height: auto; height: 50%;
text-align: center; text-align: center;
background-color: #8C8E90; background-color: #8C8E90;
border-bottom: 16px solid #FF6600; border-bottom: 16px solid #FF6600;
overflow:auto; overflow:auto;
padding: 0px 10px; box-sizing: border-box;
padding-top: 2%
} }
.b-calulatorinputs__inputcontainer{ .b-calulatorinputs__inputcontainer{
@@ -133,8 +143,9 @@ p.subheading {
line-height: 14px; line-height: 14px;
letter-spacing: 1.5px; letter-spacing: 1.5px;
height: auto; height: auto;
overflow: auto; overflow: visible;
text-align: center; text-align: center;
padding-top: 2%
} }
@@ -151,6 +162,12 @@ p.subheading {
} }
.b-calulatorinputs__weightinput{
display: inline-block;
text-align: center;
}
input.input-weightsneeded{ input.input-weightsneeded{
width: 100%; width: 100%;
font-family: "Zilla Slab"; font-family: "Zilla Slab";
@@ -169,12 +186,10 @@ input.input-weightsneeded{
.b-calulatorinputs__infoentry{ .b-calulatorinputs__infoentry{
background-color: #48484A; background-color: #48484A;
padding: 8px 10px; height: 50%;
position:relative;
} }
.b-calulatorinputs__inputcontainer{
text-align: center;
}
.b-calulatorinputs__infoentry label{ .b-calulatorinputs__infoentry label{
text-align: left; text-align: left;
@@ -220,6 +235,24 @@ label {
text-align: center; text-align: center;
} }
.b-infoentry__dividerheading{
display: block;
margin: 16px auto;
position: relative;
border-bottom: 1px solid #979797;
max-width: 288px;
}
.b-infoentry__heading{
background: #48484A;
white-space: nowrap;
padding: 0 32px;
position: absolute;
top: 0px;
left: 50%;
transform: translate(-50%, -100%);
}
/* /*
.b-container { .b-container {

19
css/main.css
View File

@@ -130,19 +130,19 @@ body {
/* Typography /* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 { /* h1, h2, h3, h4, h5, h6 {*/
margin-top: 0; /*margin-top: 0;*/
margin-bottom: 2rem; /*margin-bottom: 2rem;*/
font-weight: 300; } /* font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
*/
/* Larger than phablet */ /* Larger than phablet */
@media (min-width: 550px) { /*@media (min-width: 550px) {
h1 { font-size: 5.0rem; } h1 { font-size: 5.0rem; }
h2 { font-size: 4.2rem; } h2 { font-size: 4.2rem; }
h3 { font-size: 3.6rem; } h3 { font-size: 3.6rem; }
@@ -153,14 +153,13 @@ h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
p { p {
margin-top: 0; } margin-top: 0; }
*/
/* Links /* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
a { /*a {
color: #1EAEDB; } color: #1EAEDB; }
a:hover { a:hover {
color: #0FA0CE; } color: #0FA0CE; }*/
/* Buttons /* Buttons

62
whatareyouliftingapp-V5.html
View File

@@ -37,7 +37,7 @@
<div class="b-platevisual__container"> <div class="b-platevisual__container">
<p class="b-platevisual__weightfinal"><span class="input-element input-final">0</span> LBS</p> <p class="b-platevisual__weightfinal"><span class="input-element input-final">0</span> LBS</p>
<div class="b-platevisual__barbell"> <div class="b-platevisual__barbell">
<img src="https://qph.fs.quoracdn.net/main-qimg-377c39d784e8860d4ce6142fba0e09e0-c" style="width: 50%"> <img src="https://qph.fs.quoracdn.net/main-qimg-377c39d784e8860d4ce6142fba0e09e0-c" style="width: 50%;max-width: 300px;">
</div> </div>
<p class="subheading">Offset: <span class="input-difference">0</span> LBS</p> <p class="subheading">Offset: <span class="input-difference">0</span> LBS</p>
</div> </div>
@@ -46,44 +46,48 @@
<div class="b-calulatorinputs"> <div class="b-calulatorinputs">
<!-- Plate Requirements --> <!-- Plate Requirements -->
<div class="b-calulatorinputs__platerequirements"> <div class="b-calulatorinputs__platerequirements">
<p class="b-calulatorinputs__subheading subheading">Plates Needed on Each Side</p> <p class="b-calulatorinputs__subheading subheading">Plates Needed on Each Side</p>
<div class="b-calulatorinputs__inputcontainer"> <div class="b-calulatorinputs__inputcontainer">
<div class="b-calulatorinputs__input"> <div class="b-calulatorinputs__input">
<label for="req45">45 LBS</label> <label for="req45">45 LBS</label>
<input type="number" name="N45" class="input-element input-weightsneeded input-needed45" min="0" step="1" placeholder="0" readonly="readonly" id="req45"> <input type="number" name="N45" class="input-element input-weightsneeded input-needed45" min="0" step="1" placeholder="0" readonly="readonly" id="req45">
</div>
<div class="b-calulatorinputs__input">
<label for="req35">35 LBS</label>
<input type="number" name="N35" class="input-element input-weightsneeded input-needed35" min="0" step="1" placeholder="0" readonly="readonly" id="req35">
</div>
<div class="b-calulatorinputs__input">
<label for="req25">25 LBS</label>
<input type="number" name="N25" class="input-element input-weightsneeded input-needed25" min="0" step="1" placeholder="0" readonly="readonly" id="req25">
</div>
<div class="b-calulatorinputs__input">
<label for="req10">10 LBS</label>
<input type="number" name="N10" class="input-element input-weightsneeded input-needed10" min="0" step="1" placeholder="0" readonly="readonly" id="req10">
</div>
<div class="b-calulatorinputs__input">
<label for="req5">5 LBS</label>
<input type="number"name="N5" class="input-element input-weightsneeded input-needed5" min="0" step="1" placeholder="0" readonly="readonly" id="req5">
</div>
<div class="b-calulatorinputs__input">
<label for="req2">2.5 LBS</label>
<input type="number" name="N2half" class="input-element input-weightsneeded input-needed2" min="0" step="1" placeholder="0" readonly="readonly" id="req2">
</div>
</div> </div>
<div class="b-calulatorinputs__input">
<label for="req35">35 LBS</label>
<input type="number" name="N35" class="input-element input-weightsneeded input-needed35" min="0" step="1" placeholder="0" readonly="readonly" id="req35">
</div>
<div class="b-calulatorinputs__input">
<label for="req25">25 LBS</label>
<input type="number" name="N25" class="input-element input-weightsneeded input-needed25" min="0" step="1" placeholder="0" readonly="readonly" id="req25">
</div>
<div class="b-calulatorinputs__input">
<label for="req10">10 LBS</label>
<input type="number" name="N10" class="input-element input-weightsneeded input-needed10" min="0" step="1" placeholder="0" readonly="readonly" id="req10">
</div>
<div class="b-calulatorinputs__input">
<label for="req5">5 LBS</label>
<input type="number"name="N5" class="input-element input-weightsneeded input-needed5" min="0" step="1" placeholder="0" readonly="readonly" id="req5">
</div>
<div class="b-calulatorinputs__input">
<label for="req2">2.5 LBS</label>
<input type="number" name="N2half" class="input-element input-weightsneeded input-needed2" min="0" step="1" placeholder="0" readonly="readonly" id="req2">
</div>
</div>
</div> </div>
<!-- Weight Entry --> <!-- Weight Entry -->
<div class="b-calulatorinputs__infoentry"> <div class="b-calulatorinputs__infoentry">
<div class="b-calulatorinputs__inputcontainer"> <div class="b-calulatorinputs__inputcontainer">
<div class="b-calulatorinputs__input"> <div class="b-calulatorinputs__weightinput">
<label for="Weight">WEIGHT</label> <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"> <input type="text" 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()"> <input type="button" class="b-infoentry__button submit-element input-calculate" name="Calculate" value="LIFT" onclick="startcalc()">
</div> </div>
<a href="#options"><h2 class="b-infoentry__heading">Options</h2></a> <a href="#options">
<div class="b-infoentry__dividerheading">
<h2 class="b-infoentry__heading">Options</h2>
</div>
</a>
</div> </div>
</div> </div>
</div> </div>