DAHLIA Pattern Library

Feed Item 

<article class="feed-item is-editable animated-fade" ng-hide="isHidden('')">
    <div class="feed-item-inner">
        <header class="feed-item-header">
            <h3 class="feed-item-title">Potrero 1010</h3>
            <p class="feed-item-due">Application Deadline: January 12th 2016</p>
        </header>

        <section class="feed-item-content">
            <div class="feed-item-details">
                <p class="feed-item-address">1010 16th Street<br> Studio: 22 units, 1 Bedroom: 33 units 2 Bedroom: 38 units</p>
            </div>

            <div class="feed-item-action">
                <p class="feed-item-status">Status: In Progress</p>
                <a href="#" class="button small primary">Continue Application</a>
            </div>
        </section>

        <footer class="feed-item-footer">
            <div class="feed-item-links">
                <a href="#" class="feed-item-link lined">See Listing</a>
                <a class="feed-item-link a-alert lined" ng-click="delete('')">
            Delete
        </a>
            </div>

            <div class="feed-item-meta">
                <p class="feed-item-date">Edited: January 12th 2016</p>
            </div>
        </footer>
    </div>
</article>
 
{{#compare state '==' 'submitted' }}
<article class="feed-item is-submitted animated-fade" ng-hide="isHidden('{{state}}')">
{{else compare state '==' 'past-due' }}
<article class="feed-item is-past-due animated-fade" ng-hide="isHidden('{{state}}')">
{{else }}
<article class="feed-item is-editable animated-fade" ng-hide="isHidden('{{state}}')">
{{/compare}}
  <div class="feed-item-inner">
    <header class="feed-item-header">
      <h3 class="feed-item-title">Potrero 1010</h3>
      <p class="feed-item-due">Application Deadline: January 12th 2016</p>
    </header>

    <section class="feed-item-content">
      <div class="feed-item-details">
      <p class="feed-item-address">1010 16th Street<br>
      Studio: 22 units, 1 Bedroom: 33 units 2 Bedroom: 38 units</p>
      {{#compare state '==' 'submitted' }}
        <p class="feed-item-number">Your lottery number is #98AU18</p>
      {{else compare state '==' 'past-due' }}
        <p class="feed-item-number">Your application was never submitted</p>
      {{else }}
      {{/compare}}
      </div>

      <div class="feed-item-action">
      {{#compare state '==' 'submitted' }}
        <p class="feed-item-status"><span class="feed-item-label is-submitted">Status: Submitted</span></p>
        <a href="#" class="button small">View Application</a>
      {{else compare state '==' 'past-due' }}
        <p class="feed-item-status"><span class="feed-item-label is-past-due">Status: Never Submitted</span></p>
      {{else }}
        <p class="feed-item-status">Status: In Progress</p>
        <a href="#" class="button small primary">Continue Application</a>
      {{/compare}}
      </div>
    </section>

    <footer class="feed-item-footer">
      <div class="feed-item-links">
      {{#compare state '==' 'submitted' }}
        <a href="#" class="feed-item-link lined">See Listing</a>
        <a class="feed-item-link a-alert lined" ng-click="delete('{{state}}')">
            Delete (test)
        </a>
      {{else }}
        <a href="#" class="feed-item-link lined">See Listing</a>
        <a class="feed-item-link a-alert lined" ng-click="delete('{{state}}')">
            Delete
        </a>
      {{/compare}}
      </div>

      <div class="feed-item-meta">
      {{#compare state '==' 'submitted' }}
        <p class="feed-item-date">Submitted: January 12th 2016</p>
      {{else }}
        <p class="feed-item-date">Edited: January 12th 2016</p>
      {{/compare}}
      </div>
    </footer>
  </div>
</article>
 
/* No context defined for this component. */

There are no notes for this item.