From d1f249631d55d5e7b4391c8c593a75308eed273c Mon Sep 17 00:00:00 2001 From: stevenhaskell Date: Thu, 11 Oct 2018 13:33:14 -0400 Subject: [PATCH] Started Styling of options Block 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. --- css/appstyling-v2.css | 57 ++++++++ css/main.css | 4 +- ...ght Calculation Script-Edited-Jquery-V4.js | 2 + whatareyouliftingapp-V5.html | 129 +++++++++--------- 4 files changed, 129 insertions(+), 63 deletions(-) diff --git a/css/appstyling-v2.css b/css/appstyling-v2.css index def0172..88e4ec4 100644 --- a/css/appstyling-v2.css +++ b/css/appstyling-v2.css @@ -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 { diff --git a/css/main.css b/css/main.css index 32803b7..4180169 100644 --- a/css/main.css +++ b/css/main.css @@ -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; diff --git a/js/Weight Calculation Script-Edited-Jquery-V4.js b/js/Weight Calculation Script-Edited-Jquery-V4.js index 5f8d3ef..9190911 100644 --- a/js/Weight Calculation Script-Edited-Jquery-V4.js +++ b/js/Weight Calculation Script-Edited-Jquery-V4.js @@ -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(); diff --git a/whatareyouliftingapp-V5.html b/whatareyouliftingapp-V5.html index 1317c9c..09db619 100644 --- a/whatareyouliftingapp-V5.html +++ b/whatareyouliftingapp-V5.html @@ -79,8 +79,8 @@
- - + +
@@ -93,65 +93,72 @@
-
-

BAR WEIGHT

- LBS -

PERCENT OF WEIGHT

- -

Plates Available

-
    -
  • 45 LBS -
      - -
    -
    • -
  • 35 LBS -
      - -
    -
    • -
  • 25 LBS -
      - -
    -
    • -
  • 10 LBS -
      - -
    -
    • -
  • 5 LBS -
      - -
    -
    • -
  • 2.5 LBS -
      - -
    -
    • -
+ +
+
+
+ + +
+
+ + +
+

Plates Available

+
    +
  • 45 LBS +
      + +
    +
    • +
  • 35 LBS +
      + +
    +
    • +
  • 25 LBS +
      + +
    +
    • +
  • 10 LBS +
      + +
    +
    • +
  • 5 LBS +
      + +
    +
    • +
  • 2.5 LBS +
      + +
    +
    • +
+