ARMS3 proto

by bje

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="page-header">
     <h1>Tasks</h1>

</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default task">
                <div class="panel-heading">
                     <h3 class="panel-title">
                Membership and internet number resource application
                <span class="pull-right"><a href="#">[SAMPELL-AP]</a></span>
              </h3>

                </div>
                <div class="panel-body">
                    <button type="button" rel="popover" class="btn btn-warning btn-xs pull-right" data-toggle="popover" data-placement="auto right" data-title="SLA expires soon" data-content="SLA response time on this task will elapse in <strong>four hours<strong>." data-container="body" data-html="true">Alert</button>
                    <p>Please either approve this organisation for membership, or respond to the ticket with a request for clarification.</p> <a href="#" class="details collapsed" data-toggle="collapse" data-target="#task1-detail">Application details</a>

                    <div id="task1-detail" class="row collapse">
                        <div class="col-md-4">
                             <h4>Organisation details</h4>

                            <dl> <dt>name</dt>

                                <dd>Awesome Company #1 Yeah</dd> <dt>address</dt>

                                <dd>Suite 47
                                    <br/>Fun Towers
                                    <br/>Greatsbekistan</dd> <dt>phone</dt>

                                <dd>+100-743-342-00</dd> <dt>fax</dt>

                                <dd>+100-743-342-99</dd>
                           ...

CSS

.task .panel-body a.details.collapsed::before {
    content:'▸ ';
}
.task .panel-body a.details::before {
    content:'▾ ';
}
.task dt {
    font-variant:small-caps;
    color: #aaa;
}
.task dd {
    margin-left: 1em;
}

.task form {
    text-align: right;
    margin-top: 0.5em;
}
.task form button {
    margin-left: 1em;
}

JavaScript

$('[rel="popover"]').popover();