Current Inventory

Items added to the user's claim inventory (done by clicking the Add Item To Attachment button in the new item Inventory Capture form) are stored in the Current Inventory.

Current Inventory Header

Design Sample

Current Inventory Items

200

Notes

On small screens (with less than 768 pixels of vertical height), the Current Inventory section is pinned to the bottom of the screen. When users click the Current Inventory Header, the section should expand up and fill the entire screen.

See the Inventory Capture demo page to examine this behavior.

html

<div class="current-inventory-bar">
  <h2>Current Inventory Items</h2>
  <span class="counter">200</span>
</div>

Current Inventory List Item Header

Design Sample

Item Number: 0000

Description

This is a long product description

Cost

$000.00

Qty

html

<div class="accordion inventory">
  <input id="item-1" type="checkbox" name="items" class="accordion">
  <label for="item-1">
    <div class="item-number">Item Number:&nbsp;<span>0000</span></div>
    <div class="item-header">
      <div class="description"><span>Description</span><p>This is a long product description</p></div>
      <div class="cost"><span>Cost</span><p>&#36;000.00</p></div>
      <div class="qty"><span>Qty</span><p>00</p></div>
    </div>
  </label>
</div>

Current Inventory List Item Details

Design Sample

Description

Please include a description Description*

Cost

Please include a cost per item Cost Per Item*

Quantity

Please include a quantity Quantity*

Age: Years

How old is this item (in years)? Age: In Years*

Age: Months

How old is this item (in months)? Age: In Months*

Condition

Please select an option

Condition

Delete Item

Are you sure? No Yes

html

<div class="item-details">
  <form>
    <fieldset>
      <legend>Description</legend>
      <div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
        <span class="error-message">Please include a description</span>
        <input type="text" name="description" id="description" placeholder="Describe your item&nbsp;&#40;including brand&#41;" value="This is a long product description">
        <label for="description">Description&#42;</label>
      </div>
    </fieldset>
    <fieldset class="half">
      <legend>Cost</legend>
      <div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
        <span class="error-message">Please include a cost per item</span>
        <input type="text" name="cost" id="cost" placeholder="Cost per item" value="&#36;000.00">
        <label for="cost">Cost Per Item&#42;</label>
      </div>
    </fieldset>
    <fieldset class="half">
      <legend>Quantity</legend>
      <div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
        <span class="error-message">Please include a quantity</span>
        <input type="number" name="quantity" id="quantity" placeholder="Quantity" value="00">
        <label for="quantity">Quantity&#42;</label>
      </div>
    </fieldset>
    <fieldset class="half">
      <legend>Age: Years</legend>
      <div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
        <span class="error-message">How old is this item &#40;in years&#41;?</span>
        <input type="number" name="years" id="years" placeholder="Years" value="00">
        <label for="years">Age: In Years&#42;</label>
      </div>
    </fieldset>
    <fieldset class="half">
      <legend>Age: Months</legend>
      <div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
        <span class="error-message">How old is this item &#40;in months&#41;?</span>
        <input type="number" name="months" id="months" placeholder="Months" value="00">
        <label for="months">Age: In Months&#42;</label>
      </div>
    </fieldset>
    <fieldset>
      <legend>Condition</legend>
      <div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
        <span class="error-message">Please select an option</span>
        <select name="condition" id="condition">
          <option value="0">Choose a Condition</option>
          <option value="New">New</option>
          <option value="Excellent">Excellent</option>
          <option value="Good">Good</option>
          <option value="Fair">Fair</option>
          <option value="Poor">Poor</option>
        </select>
        <div class="select-icon"><i class="la la-angle-down"></i></div>
        <span class="valid select"><i class="la la-check-circle-o"></i></span>
        <label for="condition">Condition</label>
      </div>
    </fieldset>
    <div class="form-button-box">
      <div class="form-button-box-row">
        <div class="form-button-box-button">
          <button class="button color-two"><span class="button-label">Add Attachments<span class="post"><span class="number">00</span></span></span></button>
        </div>
        <div class="form-button-box-row row">
          <div class="form-button-box-button">
            <button class="button secondary color-one"><span class="button-label">Save<span class="post"><span class="processing"><i class="la la-refresh la-spin"></i></span></span></span></button>
          </div>
          <div class="form-button-box-button">
            <button class="button secondary color-one"><span class="button-label">Cancel</span></button>
          </div>
        </div>
      </div>
      <div class="form-button-box-button">
        <div class="expanding-button-box color-one two">
          <div class="expanding-button small click-two"><span class="trash-icon"><i class="la la-trash"></i></span></div>
          <div class="expanding-button large click-two">Delete Item</div>
          <div class="confirm-action-box">
            <span class="confirm-action-text">Are you sure?</span>
            <span class="confirm-action secondary no-two">No</span>
            <span class="confirm-action yes-two">Yes</span>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>