List of items [Form Template]

by Hugo Carneiro

HTML

<div class="tab-pane active" id="form-templates">
    <div class="tab-content col-xs-10">
        <div class="tab-pane-header">
            <div class="pane-header-wrap original active">
                 <h3>Choose a form template</h3>

                <p>Start by choosing one of the existing templates.</p>
            </div>
            <div class="pane-header-wrap change">
                 <h3>Change the form template</h3>

                <p>Changing the template will load a new form and the previously selected will be discarded.</p>
            </div>
            <ul class="filters">
                <li class="active">All</li>
                <li>General</li>
                <li>Calculators</li>
                <li>Assessments</li>
                <li>Data Collection</li>
            </ul>
        </div>
        <div class="tab-pane-content">
            <div class="form-template">
                <div class="template-icon">
                    <img src="http://studio.fliplet.com/resources/images/app-icon.png">
                </div>
                 <h4>Blank</h4>

                <p>Description praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor.</p>
                <div> <a class="btn btn-primary btn-sm" href="#">Use</a>

                </div>
            </div>
            <div class="form-template">
                <div class="template-icon">
                    <img src="http://studio.fliplet.com/resources/images/app-icon.png">
                </div>
                 <h4>Blank</h4>

                <p>Description praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor.</p>
                <div> <a class="btn btn-primary btn-sm" href="#">Use</a>

                </div>
            </div>
            <div class="form-template">
                <div class="template-icon">
                    <img src="http://studio.fliplet.com/resources/images/app-icon.png">
...

CSS

.pane-header-wrap {
    display: none;
}
.pane-header-wrap.active {
    display: block;
}
.tab-pane-content {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 15px;
}
.filters {
    margin: 20px 0 0 0;
}
.filters li {
    display: inline-block;
    padding: 0.66667em 1em;
    color: #00abd1;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    -ms-border-radius: 2em;
    border-radius: 2em;
    text-decoration: none;
    outline: 0;
    cursor: pointer;
}
.filters li:hover {
    background-color: #efefef;
}
.filters li:active, .filters li.active {
    background-color: #e6e6e6;
    color: #333;
}
.form-template {
    display: inline-block;
    vertical-align: top;
    width: 49.7%;
    line-height: 18px;
    padding-right: 30px;
    text-align: left;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}
.form-template:after {
    content:'';
    display: inline-block;
    padding-top: 10%;
}
.template-icon {
    float: left;
    display: block;
    position: relative;
    width: 125px;
    height: 125px;
    margin-right: 10px;
    background: #f4f4f4;
    border: 1px solid #e9e9e9;
    -webkit-border-radius: 21%;
    -moz-border-radius: 21%;
    -ms-border-radius: 21%;
    border-radius: 21%;
    overflow: hidden;
}
.form-template.selected .template-icon {
    border: 4px solid #00abd1;
}
.template-icon img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-border-radius: 21%;
    -moz-border-radius: 21%;
    -ms-border-radius: 21%;
    border-radius: 21%;
}

JavaScript

$('.btn').on('click', function () {
    _this = $(this);

    if ($(".form-template").hasClass('selected')) {
        $(".form-template.selected").removeClass("selected");
        _this.parents('.form-template').addClass('selected');
        $('.btn').html('Change');
    } else {
        _this.parents('.form-template').addClass('selected');
        $('.btn').html('Change');
        $('#form-templates').find('.pane-header-wrap.original').removeClass('active');
        $('#form-templates').find('.pane-header-wrap.change').addClass('active');
    }

    //change tabs and load form
});