List and Items Styling Template

by chucknelson

HTML

<div id="list-container-single">

    <p>Single-item list, for iterating</p>
    <ul id="single-list">
        <li>
            <a class="container descriptors" href="#item">
                <span class="name">Item 1</span><br/>
                <span class="caption">Item caption</span>
            </a>
            <a class="container edit" href="#edit">
                <span>Edit</span>
            </a>
            <a class="container delete" href="#delete">
                <span>Delete</span>
            </a>
        </li>
    </ul>
    
</div>

<div id="list-container-multi">
    
    <p>Multi-item list, for further testing (populated via JS)</p>
    <ul id="multi-list">
    </ul>
   
</div>

CSS

/* apply a natural box layout model to all elements */
*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

a:hover {
    background-color: yellow !important;
}

ul {
    padding-left: 0;
    list-style-type: none;
    background-color: #eee;    
}

li {
    display: table;
    width: 100%;
    height: 3em;
    background-color: #ddd;
    border: 1px solid #000;
}

li a {
    text-decoration: none;
}

li .container {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid blue;
}

li .descriptors {
    width: 70%;
    padding: .5em;
    background-color: #f99;
}

li .caption {
    color: #444;
    font-size:.75em;
}

li .edit {
    width: 15%;
    text-align: center;
    background-color: #dfd;
}

li .delete {
    width: 15%;
    text-align: center;
    background-color: #ddf;
    color: red;
}

JavaScript

/* 
    Copying of the template item to test other scenarios.
    This eliminates the need to copy+paste any changes to the template item.
*/

$('#single-list li').clone().appendTo('#multi-list');

var multiLineItem = $('#single-list li').clone();
multiLineItem.find('.name').html('This is a really long, multi-line item to make sure wrapping works as expected! This text just keeps going on and on so we have a nice long item! This is the last chunk of text to really make this item long.');
multiLineItem.appendTo('#multi-list');

$('#single-list li').clone().appendTo('#multi-list').find('.name').html('Item 3');