MOVU Components

Modal Add Inventory Item: Two Columns Of Attributes 

<!-- Error rendering component -->
<!-- (unknown path)
  Error: Could not render component '@text-area--simple' - component not found. -->
<!-- Template render error: (unknown path)
  Error: Could not render component '@text-area--simple' - component not found.
    at Object.exports.prettifyError (/home/jenkins/workspace/movu/movu-design-system/movu-design-system/node_modules/nunjucks/src/lib.js:34:15)
    at /home/jenkins/workspace/movu/movu-design-system/movu-design-system/node_modules/nunjucks/src/environment.js:486:31
    at eval (eval at _compile (/home/jenkins/workspace/movu/movu-design-system/movu-design-system/node_modules/nunjucks/src/environment.js:565:24), <anonymous>:37:12)
    at entity.render.then.catch.err (/home/jenkins/workspace/movu/movu-design-system/movu-design-system/node_modules/@frctl/nunjucks/src/extensions/render.js:46:21)
    at process._tickCallback (internal/process/next_tick.js:68:7) -->
 
<!-- Button trigger modal -->
{% render "@button-primary", { buttonText: 'Modal inventory', additionalAttributes: 'data-toggle="modal" data-target="#exampleModalCenter"'}, true %}

<!-- Modal -->
<div class="movu-modal-inventory modal-dialog modal-dialog-centered modal" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-content">
    <div class="modal-header">
      <h3 class="modal-headline">modal headline</h3>
      <div class="around-close pull-right" class="close" data-dismiss="modal" aria-label="Close">
        <i class="material-icons pull-right">close</i>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="form-headline">
          <div class="box-number">
            <span><i class="material-icons">check_box_outline_blank</i></span>
          </div>
          <h3 class="modal-title">FORM HEADLINE</h3>
          <hr>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12 col-sm-6">
        <div class="spinner-section">
          <h4 class="name-section">QUANTITY</h4>
           <movu-counter-spinner steps="1"></movu-counter-spinner>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="size-section">
        <div class="col-xs-12 col-sm-6">
          <h4 class="name-section">SIZE</h4>
          {% render "@toggle-buttons", {buttonText: "Length up to 1m"}, true %}
          {% render "@toggle-buttons", {buttonText: "Length up to 2m"}, true %}
          {% render "@toggle-buttons", {buttonText: "Length more than 2m"}, true %}
        </div>

        <div class="{{ className }}">
          <h4 class="name-section-material">MATERIAL</h4>
          {% render "@toggle-buttons", {buttonText: "Wood"}, true %}
          {% render "@toggle-buttons", {buttonText: "Stone / metal"}, true %}
          {% render "@toggle-buttons", {buttonText: "Glass"}, true %}
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12">
        <div class="special-feature-section">
          <h4 class="name-section">SPECIAL FEATURES</h4>
          {% render "@text-area--simple" %}
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12 col-sm-7">
      </div>
      <div class="col-xs-12 col-sm-5">
        <div class="add-button">
          <movu-button primary text="Add"></movu-button>
        </div>
      </div>
    </div>
  </div>
</div>
 
{
  "className": "col-xs-12 col-sm-6 visible"
}

No notes defined.