designer

designer.html

<link rel="import" href="../polymer/polymer.html">

<polymer-element name="dock-event">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #div {
        background-color: rgb(255, 255, 255);
      }
      .list-item div {
        margin: 5px;
        padding: 5px;
      }
      .matter-id span {
        font-weight: bold;
      }
      .bold-text {
        font-weight: bold;
      }
      .term-category span {
        font-weight: bold;
      }
      .app-num span {
        font-weight: bold;
      }
      .status {
        width: 20%;
      }
      .catch-word {
        width: 20%;
      }
      .status p {
        margin: auto;
      }
      .catch-word p {
        margin: auto;
      }
      .action span {
        font-weight: bold;
      }
      .internal-term span {
        font-weight: bold;
        color: blue;
      }
      .external-term span {
        font-weight: bold;
        color: red;
      }
    </style>
    <div id="div" horizontal layout class="list-item" center-justified>
      <div id="div1" class="matter-id">
        <span class="bold-text">Matter ID</span>
      </div>
      <div class="app-num">
        <span class="bold-text">Application Number</span>
      </div>
      <div id="div2" class="term-category">
        <span class="bold-text">Term Category</span>
      </div>
      <div class="catch-word">
        <span class="bold-text">Catch-Word</span>
      </div>
      <div id="div3" class="status">
        <span class="bold-text">Status</span>
      </div>
      <div class="action">
        <span class="bold-text">Action</span>
      </div>
      <div class="internal-term">
        <span id="span3" class="bold-text">Internal Term</span>
      </div>
      <div class="external-term">
        <span class="bold-text">External Term</span>
      </div>
    </div>
    <template repeat="{{event in events}}"></template>
    <div id="div" horizontal layout class="list-item" center-justified>
      <div id="div1" class="matter-id">
        <span id="span1">{{ event.matter_id }}</span>
      </div>
      <div class="app-num">
        <span>{{ event.app_num }}</span>
      </div>
      <div id="div2" class="term-category">
        <span id="span">{{ event.term_category }}</span>
      </div>
      <div class="catch-word">
        <p>{{ event.catch_word }}</p>
      </div>
      <div id="div3" class="status">
        <p>{{ event.status }}</p>
      </div>
      <div class="action">
        <span id="span2">{{ event.action }}</span>
      </div>
      <div class="internal-term">
        <span>{{ event.internal_term }}</span>
      </div>
      <div class="external-term">
        <span>{{ event.external_term }}</span>
      </div>
    </div>
  </template>

  <script>

    Polymer({
      events: [
        {
          "matter_id": "1234566",
          "app_num": "ZA 789 38834 2008",
          "term_category": "deadline",
          "catch_word": " REQUEST FOR BLAH BLAH BLAH",
          "status": "1ST OFFICIAL ACTION ISSUED",
          "action": "Deadline",
          "internal_term": "12-Jun-2015",
          "external_term": "12-Jun-2015"
        },
        {
          "matter_id": "1234566",
          "app_num": "ZA 789 38834 2008",
          "term_category": "deadline",
          "catch_word": " REQUEST FOR BLAH BLAH BLAH",
          "status": "1ST OFFICIAL ACTION ISSUED",
          "action": "Deadline",
          "internal_term": "12-Jun-2015",
          "external_term": "12-Jun-2015"
        },
        {
          "matter_id": "1234566",
          "app_num": "ZA 789 38834 2008",
          "term_category": "deadline",
          "catch_word": " REQUEST FOR BLAH BLAH BLAH",
          "status": "1ST OFFICIAL ACTION ISSUED",
          "action": "Deadline",
          "internal_term": "12-Jun-2015",
          "external_term": "12-Jun-2015"
        }
      ]
    });

  </script>

</polymer-element>