github.com/manicqin/nomad@v0.9.5/ui/app/templates/components/freestyle/sg-timeline.hbs (about)

     1  {{#freestyle-usage 'timeline' title="Simple Timeline"}}
     2    <ol class="timeline">
     3      <li class="timeline-note">
     4        {{format-date yesterday}}
     5      </li>
     6      <li class="timeline-object">
     7        <div class="boxed-section">
     8          <div class="boxed-section-head is-light">
     9            Object number one
    10          </div>
    11        </div>
    12      </li>
    13      <li class="timeline-object">
    14        <div class="boxed-section">
    15          <div class="boxed-section-head is-light">
    16            Object number two
    17          </div>
    18        </div>
    19      </li>
    20      <li class="timeline-note">
    21        {{format-date today}}
    22      </li>
    23      <li class="timeline-object">
    24        <div class="boxed-section">
    25          <div class="boxed-section-head is-light">
    26            Object number three
    27          </div>
    28        </div>
    29      </li>
    30    </ol>
    31  {{/freestyle-usage}}
    32  
    33  {{#freestyle-annotation}}
    34    <p>Timelines are a combination of objects and notes. Objects compose with boxed sections to create structure.</p>
    35    <p>Timeline notes should be used sparingly when possible. In this example there is a note per day rather than a note per object.</p>
    36  {{/freestyle-annotation}}
    37  
    38  {{#freestyle-usage 'timeline-intricate' title="Detailed Timeline"}}
    39    <ol class="timeline">
    40      <li class="timeline-note">
    41        {{format-date today}}
    42      </li>
    43      <li class="timeline-object">
    44        <div class="boxed-section">
    45          <div class="boxed-section-head is-light">
    46            <span class="tag is-running">Running</span>
    47            <span class="bumper-left pair is-faded">
    48              <span class="term">Stable</span>
    49              <span class="badge is-light is-faded"><code>a387e243</code></span>
    50            </span>
    51            <span class="bumper-left pair is-faded">
    52              <span class="term">Submitted</span>
    53              <span class="tooltip" aria-label="{{format-month-ts (now)}}">{{moment-from-now (now)}}</span>
    54            </span>
    55          </div>
    56        </div>
    57      </li>
    58      <li class="timeline-object">
    59        <div class="boxed-section">
    60          <div class="boxed-section-head is-light">
    61            <span class="tag is-complete">Complete</span>
    62            <span class="bumper-left pair is-faded">
    63              <span class="term">Expired</span>
    64              <span class="badge is-light is-faded"><code>b3220efb</code></span>
    65            </span>
    66            <span class="bumper-left pair is-faded">
    67              <span class="term">Submitted</span>
    68              <span>{{format-month-ts yesterday}}</span>
    69            </span>
    70          </div>
    71        </div>
    72      </li>
    73      <li class="timeline-note">
    74        {{format-date yesterday}}
    75      </li>
    76      <li class="timeline-object">
    77        <div class="boxed-section">
    78          <div class="boxed-section-head is-light">
    79            <span class="tag is-error">Failed</span>
    80            <span class="bumper-left pair is-faded">
    81              <span class="term">Reverted</span>
    82              <span class="badge is-light is-faded"><code>fec9218e</code></span>
    83            </span>
    84            <span class="bumper-left pair is-faded">
    85              <span class="term">Submitted</span>
    86              <span>{{format-month-ts yesterday}}</span>
    87            </span>
    88          </div>
    89        </div>
    90      </li>
    91    </ol>
    92  {{/freestyle-usage}}
    93  
    94  {{#freestyle-usage 'timeline-toggles' title='Toggling Timeline Objects'}}
    95    <ol class="timeline">
    96      <li class="timeline-note">
    97        {{format-date today}}
    98      </li>
    99      <li class="timeline-object">
   100        <div class="boxed-section">
   101          <div class="boxed-section-head is-light">
   102            <span class="tag is-running">Running</span>
   103            <span class="bumper-left pair is-faded">
   104              <span class="term">Stable</span>
   105              <span class="badge is-light is-faded"><code>a387e243</code></span>
   106            </span>
   107            <button
   108              class="button is-light is-compact pull-right"
   109              onclick={{action (mut toggle1) (not toggle1)}}>
   110              {{if toggle1 "Close" "Open"}}
   111            </button>
   112          </div>
   113          {{#if toggle1}}
   114            <div class="boxed-section-body">
   115              <p>Some details for the timeline object.</p>
   116            </div>
   117          {{/if}}
   118        </div>
   119      </li>
   120      <li class="timeline-note">
   121        {{format-date yesterday}}
   122      </li>
   123      <li class="timeline-object">
   124        <div class="boxed-section">
   125          <div class="boxed-section-head is-light">
   126            <span class="tag is-complete">Complete</span>
   127            <span class="bumper-left pair is-faded">
   128              <span class="term">Expired</span>
   129              <span class="badge is-light is-faded"><code>b3220efb</code></span>
   130            </span>
   131            <button
   132              class="button is-light is-compact pull-right"
   133              onclick={{action (mut toggle2) (not toggle2)}}>
   134              {{if toggle2 "Close" "Open"}}
   135            </button>
   136          </div>
   137          {{#if toggle2}}
   138            <div class="boxed-section-body">
   139              <p>Some details for the timeline object.</p>
   140            </div>
   141          {{/if}}
   142        </div>
   143      </li>
   144    </ol>
   145  {{/freestyle-usage}}
   146  
   147  {{#freestyle-usage 'timeline-emphasis' title='Emphasizing a Timeline Object'}}
   148    <ol class="timeline">
   149      <li class="timeline-note">
   150        {{format-date today}}
   151      </li>
   152      <li class="timeline-object">
   153        <div class="boxed-section">
   154          <div class="boxed-section-head is-light">
   155            <span class="pair is-faded">
   156              <span class="term">Stable</span>
   157              <span class="badge is-light is-faded"><code>a387e243</code></span>
   158            </span>
   159            <span class="bumper-left pair is-faded">
   160              <span class="term">Submitted</span>
   161              <span class="tooltip" aria-label="{{format-ts (now)}}">{{moment-from-now (now)}}</span>
   162            </span>
   163          </div>
   164        </div>
   165      </li>
   166      <li class="timeline-object">
   167        <div class="boxed-section">
   168          <div class="boxed-section-head">
   169            Pay attention here
   170          </div>
   171          <div class="boxed-section-body">
   172            <span class="pair is-faded">
   173              <span class="term">Expired</span>
   174              <span class="badge is-light is-faded"><code>b3220efb</code></span>
   175            </span>
   176            <span class="bumper-left pair is-faded">
   177              <span class="term">Submitted</span>
   178              <span>{{format-ts yesterday}}</span>
   179            </span>
   180          </div>
   181        </div>
   182      </li>
   183      <li class="timeline-note">
   184        {{format-date yesterday}}
   185      </li>
   186      <li class="timeline-object">
   187        <div class="boxed-section">
   188          <div class="boxed-section-head is-light">
   189            <span class="pair is-faded">
   190              <span class="term">Reverted</span>
   191              <span class="badge is-light is-faded"><code>fec9218e</code></span>
   192            </span>
   193            <span class="bumper-left pair is-faded">
   194              <span class="term">Submitted</span>
   195              <span>{{format-ts yesterday}}</span>
   196            </span>
   197          </div>
   198        </div>
   199      </li>
   200    </ol>
   201  {{/freestyle-usage}}
   202  {{#freestyle-annotation}}
   203    By using a full boxed-section for an emphasized timeline object, the object takes up more space and gets more visual weight. It also adheres to existing patterns.
   204  {{/freestyle-annotation}}