goals.html

goal.html

<!--PUT THIS IN PLACE OF THE NAVBAR-HEADER :) -->
<div class="navbar-header">
  <a class="navbar-brand logo" href="http://dev.teestyle.com:81/">
    <img class="logo_img logo_tee" src="http://dev.teestyle.com:81/themes/third_party/teestyle/img/logo/logo_tee.png" alt="Teestyle">
    <img class="logo_img logo_letters" src="http://dev.teestyle.com:81/themes/third_party/teestyle/img/logo/logo_letters.png">
  </a>
</div>

<!--All I did was remove the title from the form and put it in its own row :) -->
<div class="stage">
  <div class="container">
    <div class="well well-sm">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <h3 class="text-center">Set goals and prices</h3>
        </div>
      </div>
    </div>

    <div class="well well-lg">
      <form class="form-horizontal">
        <div class="campaign-form-row row">
          <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
            <div class="product-wrap ">
              <img src="http://dev.teestyle.com:81/images/uploads/campaigns/sg/_proper_thumb/CT-Black_front.png">
            </div>
          </div>

          <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
            <div class="row">
              <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <p class="gl_selling_price">Set Selling Price</p>
              </div>

              <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                <p class="gl_sales_goal">Estimate Sales Goal</p>
              </div>

              <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                <p class="gl_profit_header">Profit</p>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
                <div class="input-group input-group-lg" id="goal-sales-price">
                  <span class="input-group-addon" id="sizing-addon1">$</span>
                  <input type="number" class="form-control" aria-describedby="goal-sales-price" min="1" placeholder="Selling Price">
                </div>
                <p class="gl_base_cost">$4.35 base cost</p>
              </div>

              <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
                <p class="gl_profit_sale text-center">$11.56 profit<br>per sale</p>
              </div>

              <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                <div class="input-group input-group-lg" id="goal-sales-price">
                  <input type="number" class="form-control" aria-describedby="goal-sales-price" min="1" placeholder="Number of Sales">
                </div>
              </div>

              <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                <p class="gl_profit">$582.50</p>
              </div>
            </div>
          </div>

          <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
            <span class="info delete" style="float: right;">
              <!-- removed: data-sku="{sku}", copied this code from the cart modal via the product page -->
              <button type="button" name="remove_item" class="remove_item btn btn-danger btn-xs">
                <span class="glyphicon glyphicon-remove"></span>
              </button>
            </span>
          </div>
        </div>
        <div class="campaign-form-row row">
          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <select class="pagesize form-control input-sm" title="Select Product" aria-disabled="false">
              <option value="classic-tee">Classic Tee</option>
              <option value="ladies-tee">Ladies Tee</option>
              <option value="hoodie">Hoodie</option>
              <option value="long-sleeve">Long Sleeve</option>
              <option value="vneck-tee">V-Neck Tee</option>
              <option value="gathered-racerback-tank">Gathered Racerback Tank</option>
              <option value="mens-concert-tank">Mens Concert Tank</option>
            </select>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <select class="pagesize form-control input-sm" title="Select Manufacturer" aria-disabled="false">
              <option value="teestyle-premium-tee">Teestyle Premium Tee</option>
              <option value="hanes-tagless-tee">Hanes Tagless Tee</option>
              <option value="port-and-company">Port &amp; Company</option>
              <option value="american-apparel-crew">American Apparel Crew</option>
            </select>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <p class="text-center"> &lt;!-- bs3 thumbnails for color swatches, tool tip hover with color name? --&gt;</p>
            <p class="text-center">&lt;!-- rows = 6x2 columns, first row = 5 colors and 1 down arrow drop down to expand other rows --&gt;</p>
          </div>
        </div>
        <div class="campaign-form-row row">
          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <nav>
              <div class="pager btn-group" role="group">
                <button type="button" class="btn btn-default prev disabled" title="Previous" tabindex="0" aria-disabled="true">Previous</button>
              </div>
            </nav>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <p class="text-center">"X" Additional of Products Left.</p>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <nav>
              <div class="pager btn-group" role="group">
                <button type="button" class="btn btn-default next disabled" title="Next" tabindex="0" aria-disabled="true">Next</button>
              </div>
            </nav>
          </div>
        </div>

      </form>
    </div>
  </div>
</div>