CRMW Lists

Documentation for CRM window list component.

Files

app/styles/modules/_crm_window.scss

Lists

CRM Window has its own lists and list items. To create a list you should wrap list items into container with class .crmw-list.

Example:code
  • Lorem ipsum Dolor aute nisi do veniam dolore consectetur mollit consequat laborum cillum Ut sed aliqua.
  • Lorem ipsum Fugiat deserunt sed labore anim velit ea quis dolore ex amet.
Code: 
<ul class="crmw-list">
  <li class="crmw-list_item"> 
    ...
  </li>
  <li class="crmw-list_item"> 
    ...
  </li>
</ul>

Items

Item in CRM window list consists of two sections: primary .crmw-list_item_sec-primary and secondary .crmw-list_item_sec-secondary. The secondary section is used for icons and the primary for text content.

Note

Minimal height of item is 70px and content is alignet to top.

Example:code
  • call
    call_missed

    You missed a call from Jaroslava Vojtašáková (Lighting Beetle)

    • +421915431255
    • 13.02.2016
    • 14:38
    • 00:28:35
  • list
    time

    Task for Michal Mikolaj (Lighting Beetle)

    • +421915431255
    • 13.02.2016
    • 14:38
    • 00:28:35
  • call
    call_made

    Call made to Jaroslava Habrmanová Vojtašáková (Microsoft Corporation)

    • +421915431255
    • 13.02.2016
    • 14:38
    • 00:28:35
  • event
    checkbox

    Schôdzka Lorem Ipsum

    • 13.02.2016
    • 14:38
    • Apollo Centrum, Kradadžičova, Bratislava
  • work
    checkbox

    Obchodny pripad Lorem Ipsum

    • 13.02.2016
    • 14:38
Code: 
<ul class="crmw-list">

  <li class="crmw-list_item">
    <div class="crmw-list_item_sec-secondary">
      <i class="icon icon-m text-color-red">call</i>
      <br>
      <i class="icon icon-s text-color-red">call_missed</i>
    </div>
    <div class="crmw-list_item_sec-primary">
      <p class="no-mrg">You missed a call from Jaroslava Vojtašáková (Lighting Beetle)
      </p>
      <ul class="list-inline list-inline text-small text-color-gray-400 no-mrg"> 
        <li>+421915431255</li>
        <li>13.02.2016</li>
        <li>14:38</li>
        <li>00:28:35</li>
      </ul>
    </div>
  </li>

  <li class="crmw-list_item">
    <div class="crmw-list_item_sec-secondary">
      <i class="icon icon-m text-color-red">list</i>
      <br>
      <i class="icon icon-s text-color-red">time</i>
    </div>
    <div class="crmw-list_item_sec-primary">
      ...
    </div>
  </li>

  <li class="crmw-list_item">
    <div class="crmw-list_item_sec-secondary">
      <i class="icon icon-m text-color-green">call</i>
      <br>
      <i class="icon icon-s text-color-green">call_made</i>
    </div>
    <div class="crmw-list_item_sec-primary">
      ...
    </div>
  </li>
  
</ul>