table-users.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <div class="card">
  2. <div class="table-responsive">
  3. <table class="table table-hover table-outline table-vcenter text-nowrap card-table">
  4. <thead>
  5. <tr>
  6. <th colspan="2">User</th>
  7. <th>Usage</th>
  8. <th class="text-center">Payment</th>
  9. <th>Activity</th>
  10. <th class="w-1">Satisfaction</th>
  11. </tr>
  12. </thead>
  13. <tbody>
  14. {% for person in site.data.people limit: 8 offset: 50 %}
  15. {% assign percentage = forloop.index | random_number %}
  16. {% assign time_offset = forloop.index | random_number: 0, 800 %}
  17. {% assign register_offset = forloop.index | random_number: 0, 8000000 %}
  18. {% assign percentage_color = percentage | number_color %}
  19. <tr>
  20. <td class="text-center w-1">
  21. {% include ui/avatar.html person-id=person.id %}
  22. </td>
  23. <td>
  24. <div>{{ person.full_name }}</div>
  25. <div class="small text-secondary">
  26. Registered: {{ site.time | date: "%s" | minus: register_offset | date: '%b %-d, %Y' }}
  27. </div>
  28. </td>
  29. <td>
  30. <div class="clearfix">
  31. <div class="float-left">
  32. <strong>{{ percentage }}%</strong>
  33. </div>
  34. <div class="float-right">
  35. <small class="text-secondary">Jun 11, 2015 - Jul 10, 2015</small>
  36. </div>
  37. </div>
  38. {% include ui/progress.html value=percentage size="sm" color=percentage_color %}
  39. </td>
  40. <td class="text-center">
  41. {% capture payment %}
  42. {%- cycle 'visa', 'googlewallet', 'mastercard', 'shopify', 'ebay', 'paypal' -%}
  43. {% endcapture %}
  44. {% include ui/payment.html payment=payment %}
  45. </td>
  46. <td>
  47. <div class="small text-secondary">Last login</div>
  48. <div>{{ site.time | date: "%s" | minus: time_offset | to_pretty_time }}</div>
  49. </td>
  50. <td class="text-center">
  51. {% assign percentage = forloop.index | random_number: 0, 100 %}
  52. <!-- <div class="mx-auto" data-value="{{ circle-percentage | divide: 100 }}"-->
  53. <!-- data-thickness="3" data-color="primary">-->
  54. <!-- <div class="chart-circle-value">{{ percentage }}%</div>-->
  55. <!-- </div>-->
  56. {% include ui/chart-sparkline.html percentage=percentage type="donut" %}
  57. </td>
  58. </tr>
  59. {% endfor %}
  60. </tbody>
  61. </table>
  62. </div>
  63. </div>