openproject/public/templates/work_packages/tabs/overview.html

<div class="detail-panel-description">

  <h3>Description</h3>
  <div class="detail-panel-description-content">
    {{ workPackage.props.description }}
  </div>
  <panel-expander collapsed="toggleStates.hideFullDescription"
                  expand-text="Show full description"
                  collapse-text="Hide full description">
  </panel-expander>
</div>


<div class="detail-panel-attributes">
  <!-- present attributes -->
  <ul>
    <li ng-repeat="property in presentWorkPackageProperties">
      <label ng-bind="property"/>
      <span ng-bind="workPackage.props[property]"/>
    </li>

    <!-- custom formattings -->
    <li ng-if="workPackage.props.startDate && workPackage.props.dueDate">
      <label>Date</label>{{ workPackage.props.startDate }} - {{ workPackage.props.dueDate }}
    </li>
    <li ng-if="workPackage.props.responsibleName">
      <label>Responsible</label>
      <img class="avatar" src="images/avatar_logout.png" /><span  class="user"><a href="#">{{ workPackage.props.responsibleName }}</a></span>
    <span class="role">{{ workPackage.props.responsibleRole }}</span>
    </li>
    <li ng-if="workPackage.props.assigneeName">
      <label>Assignee</label><img class="avatar" src="images/avatar_logout.png" /><span   class="user"><a href="#">{{ workPackage.props.assigneeName }}</a></span>
      <span class="role">{{ workPackage.props.assigneeRole }}</span>
    </li>
  </ul>
  <!-- empty attributes -->
  <ul class="work-package-details-overview-tab-empty-attributes"
      slide-toggle collapsed="toggleStates.hideAllAttributes">
      <li ng-repeat="property in emptyWorkPackageProperties">
        <label ng-bind="property"></label>
        <span> - </span>
      </li>
  </ul>
  <panel-expander ng-if="emptyWorkPackageProperties.length"
                  collapsed="toggleStates.hideAllAttributes"
                  expand-text="Show all attributes"
                  collapse-text="Hide empty attributes">
  </panel-expander>
</div>


<div class="detail-panel-latest-activity">
  <h3>Latest activity</h3>
  <ul>
    <li>
      <div class="comments-number"><a href="#1">#1</a>
        <div class="comments-icons"><i class="icon-quote"></i><i class="icon-edit"></i></div>
      </div>
      <img class="avatar" src="images/avatar_logout.png" />
      <span class="user"><a href="#">Christoph Zierz</a></span>
      <span class="date">commented on 06/05/2014 16:42 Uhr</span>
      <span class="comment">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis .  ..
      </span>
    </li>
    <li>
      <div class="comments-number"><a href="#1">#2</a>
        <div class="comments-icons"><i class="icon-quote"></i><i class="icon-edit"></i></div>
      </div>
      <img class="avatar" src="images/avatar_logout.png" />
      <span class="user"><a href="#">Niels Lindenthal</a></span>
      <span class="date">commented on 08/05/2014 16:42 Uhr</span>
      <span class="comment">
        <ul>
          <li>Status changed from scheduled to closed</li>
          <li>Assignee deleted (Michael Frister)</li>
          <li>% done changed from 0 to 100</li>
        </ul>
      </span>
    </li>
  </ul>
</div>

<div class="comments-form">
  <h3>Add your comments here</h3>
  <form>
    <textarea placeholder="Add comments here" rows="4"></textarea>
  </form>
  <button class="button">Add comment</button>
</div>