profile.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <!DOCTYPE html>
  2. <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/layout}">
  3. <head>
  4. <title>Profile</title>
  5. <script src="/js/user/profile.js" defer></script>
  6. </head>
  7. <body>
  8. <div layout:fragment="content" class="ui container" id="app">
  9. <br />
  10. <!-- Username / Title -->
  11. <h1 class="ui dividing header">
  12. <i v-if="pageStats.userProfile.administrator" class="shield alternate icon tooltip red" data-content="Administrator"></i>
  13. <i v-if="pageStats.userProfile.moderator" class="shield alternate icon tooltip green" data-content="Moderator"></i>
  14. <div class="content">
  15. {{ pageStats.userProfile.username }}
  16. <span style="font-size: 0.7em; color: #777;" v-if="pageStats.userProfile.name"> ( {{ pageStats.userProfile.name }} ) </span>
  17. </div>
  18. </h1>
  19. <!-- END Username / Title -->
  20. <!-- badges -->
  21. <div v-if="pageStats.userProfile.badges && pageStats.userProfile.badges.length > 0">
  22. <span class="ui black label tooltip" data-variation="inverted" v-for="badge in user.badges" :data-content="badge.description"><i :class="badge.icon"></i>{{ badge.name }}</span>
  23. <div class="ui divider"></div>
  24. </div>
  25. <!-- END badges -->
  26. <!-- Summary -->
  27. <div class="ui message">
  28. <div class="ui stackable four column grid">
  29. <div class="row">
  30. <div class="column">
  31. <div class="ui yellow mini horizontal statistic">
  32. <div class="value">
  33. {{ pageStats.registerDuration }}
  34. </div>
  35. <div class="label">
  36. Days Registered
  37. </div>
  38. </div>
  39. </div>
  40. <div class="column">
  41. <div class="ui yellow mini horizontal statistic">
  42. <div class="value">
  43. {{ pageStats.pageCount }}
  44. </div>
  45. <div class="label">
  46. Store Pages
  47. </div>
  48. </div>
  49. </div>
  50. <div class="column">
  51. <div class="ui yellow mini horizontal statistic">
  52. <div class="value">
  53. {{ pageStats.reviewCount }}
  54. </div>
  55. <div class="label">
  56. Reviews Received
  57. </div>
  58. </div>
  59. </div>
  60. <div class="column">
  61. <div class="ui yellow mini horizontal statistic">
  62. <div class="value">
  63. {{ pageStats.averateRating.toFixed(2) }}
  64. </div>
  65. <div class="label">
  66. Average Rating
  67. </div>
  68. </div>
  69. </div>
  70. </div>
  71. </div>
  72. </div>
  73. <a class="ui green button" :href="'/search/?author=' + pageStats.userProfile.username">Browse User Assets</a>
  74. <br /><br />
  75. <!--
  76. <div v-if="assets.opensource && assets.opensource.length > 0">
  77. <h2 class="ui dividing header">Open Source Assets</h2>
  78. <div v-for="asset in assets.opensource">
  79. <div class="ui two column stackable grid">
  80. <div class="row">
  81. <div class="three wide column">
  82. <img class="ui image" :src="'/image/' + asset.mediaLinks.imageIds[0]" />
  83. </div>
  84. <div class="column">
  85. <h3 class="ui header">{{ asset.details.title }}</h3>
  86. <p>{{ asset.details.shortDescription }}</p>
  87. </div>
  88. </div>
  89. </div>
  90. <div class="ui dividing header"></div>
  91. </div>
  92. </div>
  93. -->
  94. </div>
  95. </body>
  96. </html>