mason/tools/label_designer/design_label.mas

   1 <div class="text-center">
   2     <p>Time to design! Start by selecting a type and field. Then click 'add' to generate your new label element in the draw area.</p>
   3     <p>Add, drag, customize, resize, and delete as many elements as you like. A barcode containing your unique identifier (plot_name, plant_name, etc) is strongly recommended.</p>
   4     <p><em><strong>NOTE:</strong> The property values displayed here in the design tool may not be from the same plot, list item, etc.  The longest value is displayed here to aid in the positioning and sizing of the element.  The values will be correctly associated when all of the labels are printed in the next step.</em></p>
   5 </div>
   6 </br>
   7 <div class="col-md-12" id="d3-draw-div" style="margin-bottom:20px;">
   8     <div class="col-md-offset-2 col-md-8" id="d3-draw-area"></div>
   9 </div>
  10 <div class="col-md-12">
  11     <center>
  12         <h4>Add Elements:</h4>
  13     </center>
  14 </div>
  15 <div class="col-md-12" style="margin-bottom:20px;">
  16     <div class="col-md-3" id="d3-add-type-div">
  17         <center>
  18             <label>Type:</label><br>
  19             <select id="d3-add-type-input" class="form-control"></select>&nbsp&nbsp
  20         </center>
  21     </div>
  22     <div class="col-md-3" id="d3-add-field-div">
  23         <center>
  24             <label>Field:</label><br>
  25             <select id="d3-add-field-input" class="form-control"></select><br>
  26             <button class="btn btn-primary" id="d3-custom-field">Create Custom Field</button>
  27         </center>
  28         &nbsp&nbsp
  29     </div>
  30     <div class="col-md-2" id="d3-add-size-div">
  31         <center>
  32             <label>Size:</label><br>
  33             <input class="form-control" id="d3-add-size-input" type="number"></input>
  34             <input class="form-control" id="d3-add-size-slider" type="range"></input>
  35         </center>
  36     </div>
  37     <div class="col-md-3" id="d3-add-font-div">
  38         <center>
  39             <label>Font:</label><br>
  40             <select id="d3-add-font-input" class="form-control"></select>&nbsp
  41         </center>
  42     </div>
  43     <div class="col-md-1">
  44         <center>
  45             <br>
  46             <button class="btn btn-primary d3-add" id="d3-add">Add</button>
  47         </center>
  48     </div>
  49 </div>