WhatIsNew.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <template>
  2. <div class='modal' :class='{ "is-active": isModalActive }'>
  3. <div class='modal-background'></div>
  4. <div class='modal-card'>
  5. <header class='modal-card-head'>
  6. <p class='modal-card-title'><strong>{{ news.title }}</strong> ({{ formatDate(news.createdAt) }})</p>
  7. <button class='delete' @click='toggleModal()'></button>
  8. </header>
  9. <section class='modal-card-body'>
  10. <div class='content'>
  11. <p>{{ news.description }}</p>
  12. </div>
  13. <div class='sect' v-show='news.features.length > 0'>
  14. <div class='sect-head-features'>The features are so great</div>
  15. <ul class='sect-body'>
  16. <li v-for='li in news.features'>{{ li }}</li>
  17. </ul>
  18. </div>
  19. <div class='sect' v-show='news.improvements.length > 0'>
  20. <div class='sect-head-improvements'>Improvements</div>
  21. <ul class='sect-body'>
  22. <li v-for='li in news.improvements'>{{ li }}</li>
  23. </ul>
  24. </div>
  25. <div class='sect' v-show='news.bugs.length > 0'>
  26. <div class='sect-head-bugs'>Bugs Smashed</div>
  27. <ul class='sect-body'>
  28. <li v-for='li in news.bugs'>{{ li }}</li>
  29. </ul>
  30. </div>
  31. <div class='sect' v-show='news.upcoming.length > 0'>
  32. <div class='sect-head-upcoming'>Coming Soon to a Musare near you</div>
  33. <ul class='sect-body'>
  34. <li v-for='li in news.upcoming'>{{ li }}</li>
  35. </ul>
  36. </div>
  37. </section>
  38. </div>
  39. </div>
  40. </template>
  41. <script>
  42. export default {
  43. data() {
  44. return {
  45. isModalActive: false,
  46. news: {}
  47. }
  48. },
  49. ready: function () {
  50. let _this = this;
  51. let socketInterval = setInterval(() => {
  52. if (!!_this.$parent.socket) {
  53. _this.socket = _this.$parent.socket;
  54. _this.socket.emit('news.newest', res => {
  55. _this.news = res.data;
  56. if (localStorage.getItem('whatIsNew')) {
  57. if (parseInt(localStorage.getItem('whatIsNew')) < res.data.createdAt) {
  58. this.toggleModal();
  59. localStorage.setItem('whatIsNew', res.data.createdAt);
  60. }
  61. } else {
  62. this.toggleModal();
  63. localStorage.setItem('whatIsNew', res.data.createdAt);
  64. }
  65. });
  66. clearInterval(socketInterval);
  67. }
  68. }, 100);
  69. },
  70. methods: {
  71. toggleModal: function () {
  72. this.isModalActive = !this.isModalActive;
  73. },
  74. formatDate: unix => {
  75. return moment(unix).format('DD-MM-YYYY');
  76. }
  77. }
  78. }
  79. </script>
  80. <style lang='scss' scoped>
  81. .modal-card-head {
  82. border-bottom: none;
  83. background-color: ghostwhite;
  84. padding: 15px;
  85. }
  86. .modal-card-title { font-size: 14px; }
  87. .delete {
  88. background: transparent;
  89. &:hover { background: transparent; }
  90. &:before, &:after { background-color: #bbb; }
  91. }
  92. .sect {
  93. div[class^='sect-head'], div[class*=' sect-head']{
  94. padding: 12px;
  95. text-transform: uppercase;
  96. font-weight: bold;
  97. color: #fff;
  98. }
  99. .sect-head-features { background-color: dodgerblue; }
  100. .sect-head-improvements { background-color: seagreen; }
  101. .sect-head-bugs { background-color: brown; }
  102. .sect-head-upcoming { background-color: mediumpurple; }
  103. .sect-body {
  104. padding: 15px 25px;
  105. li { list-style-type: disc; }
  106. }
  107. }
  108. </style>