MobileAlert.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <template>
  2. <div class="modal" :class="{ 'is-active': isModalActive }">
  3. <div class="modal-background" />
  4. <div class="modal-card">
  5. <header class="modal-card-head">
  6. <button class="delete" @click="toggleModal()" />
  7. </header>
  8. <section class="modal-card-body">
  9. <h5>
  10. Musare doesn't work very well on mobile right now, we are
  11. working on this!
  12. </h5>
  13. </section>
  14. </div>
  15. </div>
  16. </template>
  17. <script>
  18. export default {
  19. data() {
  20. return {
  21. isModalActive: false
  22. };
  23. },
  24. mounted() {
  25. if (!localStorage.getItem("mobileOptimization")) {
  26. this.toggleModal();
  27. localStorage.setItem("mobileOptimization", true);
  28. }
  29. },
  30. methods: {
  31. toggleModal() {
  32. const _this = this;
  33. _this.isModalActive = !_this.isModalActive;
  34. if (_this.isModalActive) {
  35. setTimeout(() => {
  36. this.isModalActive = false;
  37. }, 4000);
  38. }
  39. }
  40. },
  41. events: {
  42. closeModal() {
  43. this.isModalActive = false;
  44. }
  45. }
  46. };
  47. </script>
  48. <style lang="scss" scoped>
  49. @media (min-width: 735px) {
  50. .modal {
  51. display: none;
  52. }
  53. }
  54. .modal-card {
  55. margin: 0 20px !important;
  56. }
  57. .modal-card-head {
  58. border-bottom: none;
  59. background-color: ghostwhite;
  60. padding: 15px;
  61. }
  62. .delete {
  63. background: transparent;
  64. right: 0;
  65. position: absolute;
  66. &:hover {
  67. background: transparent;
  68. }
  69. &:before,
  70. &:after {
  71. background-color: #bbb;
  72. }
  73. }
  74. </style>