client/src/components/Welcome.vue

   1 <template lang="pug">
   2 div
   3   input#modalWelcome.modal(type="checkbox")
   4   div(role="dialog")
   5     .card
   6       div(v-html="content")
   7       p#disableMsg.clickable(@click="closeAndDisable()")
   8         | {{ st.tr["Close and show no more"] }}
   9 </template>
  10
  11 <script>
  12 import { store } from "@/store.js";
  13 export default {
  14   name: "my-welcome",
  15   data: function() {
  16     return {
  17       st: store.state,
  18     };
  19   },
  20   computed: {
  21     content: function() {
  22       // (AJAX) Request to get welcome content (plain text, HTML)
  23       return require("raw-loader!@/translations/welcome/" + this.st.lang + ".pug")
  24         // Next two lines fix a weird issue after last update (2019-11)
  25         .replace(/\\n/g, " ").replace(/\\"/g, '"')
  26         .replace('module.exports = "', '').replace(/"$/, "");
  27     },
  28   },
  29   methods: {
  30     closeAndDisable: function() {
  31       document.getElementById("modalWelcome").checked = false;
  32       localStorage.setItem('welcomed',true);
  33     },
  34   },
  35 };
  36 </script>
  37
  38 <style lang="sass">
  39 [type="checkbox"].modal+div .card
  40   max-width: 767px
  41   max-height: 100%
  42 img
  43   display: block
  44   margin: 0 auto
  45   width: 300px
  46 @media screen and (max-width: 767px)
  47   img
  48     width: 75%
  49 p#credits
  50   font-size: 0.8rem
  51   margin-top: -10px
  52   text-align: center
  53 </style>