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}}