Content list¶
Introduction¶
On the main content, you may want to have a list of items displayed (like the contacts, or the mail app). We provide a standardized structure for this specific purpose.
Basic layout¶
<div id="app-content-wrapper">
<div class="app-content-list">
<a href="#" class="app-content-list-item">
<input type="checkbox" id="test1" class="app-content-list-item-checkbox checkbox" checked="checked"><label for="test1"></label>
<div class="app-content-list-item-icon" style="background-color: rgb(231, 192, 116);">C</div>
<div class="app-content-list-item-line-one">Contact 1</div>
<div class="icon-delete"></div>
</a>
<a href="#" class="app-content-list-item">
<div class="app-content-list-item-star icon-starred"></div>
<div class="app-content-list-item-icon" style="background-color: rgb(151, 72, 96);">T</div>
<div class="app-content-list-item-line-one">Favourited task #2</div>
<div class="icon-more"></div>
</a>
<a href="#" class="app-content-list-item">
<div class="app-content-list-item-icon" style="background-color: rgb(152, 59, 144);">T</div>
<div class="app-content-list-item-line-one">Task #2</div>
<div class="icon-more"></div>
</a>
<a href="#" class="app-content-list-item">
<div class="app-content-list-item-icon" style="background-color: rgb(31, 192, 216);">M</div>
<div class="app-content-list-item-line-one">Important mail is very important! Don't ignore me</div>
<div class="app-content-list-item-line-two">Hello there, here is an important mail from your mom</div>
</a>
<a href="#" class="app-content-list-item">
<div class="app-content-list-item-icon" style="background-color: rgb(41, 97, 156);">N</div>
<div class="app-content-list-item-line-one">Important mail with a very long subject</div>
<div class="app-content-list-item-line-two">Hello there, here is an important mail from your mom</div>
<span class="app-content-list-item-details">8 hours ago</span>
<div class="icon-delete"></div>
</a>
<a href="#" class="app-content-list-item">
<div class="app-content-list-item-icon" style="background-color: rgb(141, 197, 156);">N</div>
<div class="app-content-list-item-line-one">New contact</div>
<div class="app-content-list-item-line-two">blabla@bla.com</div>
<div class="icon-delete"></div>
</a>
</div>
<div class="app-content-detail">
</div>
</div>
Rules¶
- You need to have the following structure for your global content:
<div id="app-content-wrapper">
<div class="app-content-list">HERE YOUR CONTENT LIST</div>
<div class="app-content-detail">HERE YOUR GLOBAL CONTENT</div>
</div>
- The first code/screenshot example show all the combination allowed/available.
- When displaying the checkbox, the star will automatically be hidden.
- You can NOT have more than one button in an entry. You need to create a popover menu if multiple options are needed.
- In case of a popovermenu, see the popover menu.
- As always, the JS is still needed to toggle the
open
class on this menu