WhatIsNew.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <template>
  2. <div class='modal' :class='{ "is-active": isModalActive }' v-if='news !== null'>
  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. import io from '../../io';
  43. export default {
  44. data() {
  45. return {
  46. isModalActive: false,
  47. news: null
  48. }
  49. },
  50. ready: function () {
  51. let _this = this;
  52. io.getSocket(true, socket => {
  53. _this.socket = socket;
  54. _this.socket.emit('news.newest', res => {
  55. _this.news = res.data;
  56. if (_this.news && localStorage.getItem('firstVisited')) {
  57. if (localStorage.getItem('whatIsNew')) {
  58. if (parseInt(localStorage.getItem('whatIsNew')) < res.data.createdAt) {
  59. this.toggleModal();
  60. localStorage.setItem('whatIsNew', res.data.createdAt);
  61. }
  62. } else {
  63. this.toggleModal();
  64. localStorage.setItem('whatIsNew', res.data.createdAt);
  65. }
  66. } else {
  67. if (!localStorage.getItem('firstVisited')) localStorage.setItem('firstVisited', Date.now());
  68. }
  69. });
  70. });
  71. },
  72. methods: {
  73. toggleModal: function () {
  74. this.isModalActive = !this.isModalActive;
  75. },
  76. formatDate: unix => {
  77. return moment(unix).format('DD-MM-YYYY');
  78. }
  79. },
  80. events: {
  81. closeModal: function() {
  82. this.isModalActive = false;
  83. }
  84. }
  85. }
  86. </script>
  87. <style lang='scss' scoped>
  88. .modal-card-head {
  89. border-bottom: none;
  90. background-color: ghostwhite;
  91. padding: 15px;
  92. }
  93. .modal-card-title { font-size: 14px; }
  94. .delete {
  95. background: transparent;
  96. &:hover { background: transparent; }
  97. &:before, &:after { background-color: #bbb; }
  98. }
  99. .sect {
  100. div[class^='sect-head'], div[class*=' sect-head']{
  101. padding: 12px;
  102. text-transform: uppercase;
  103. font-weight: bold;
  104. color: #fff;
  105. }
  106. .sect-head-features { background-color: dodgerblue; }
  107. .sect-head-improvements { background-color: seagreen; }
  108. .sect-head-bugs { background-color: brown; }
  109. .sect-head-upcoming { background-color: mediumpurple; }
  110. .sect-body {
  111. padding: 15px 25px;
  112. li { list-style-type: disc; }
  113. }
  114. }
  115. </style>