client/src/App.vue

   1 <template lang="pug">
   2 #app
   3   Language
   4   Settings
   5   ContactForm
   6   UpsertUser
   7   Welcome
   8   .container
   9     .row
  10       .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  11         // Menu (top of page):
  12         // Left: hall, variants, mygames
  13         // Right: usermenu, settings, flag
  14         nav
  15           label.drawer-toggle(for="drawerControl")
  16           input#drawerControl.drawer(type="checkbox")
  17           #menuBar(@click="hideDrawer")
  18             label.drawer-close(for="drawerControl")
  19             #leftMenu
  20               router-link(to="/")
  21                 | {{ st.tr["Hall"] }}
  22               router-link(to="/variants")
  23                 | {{ st.tr["Variants"] }}
  24               router-link(to="/mygames")
  25                 | {{ st.tr["My games"] }}
  26             #rightMenu
  27               .clickable(onClick="doClick('modalUser')")
  28                 | {{ st.user.id > 0 ? (st.user.name || "@nonymous") : "Login" }}
  29               .clickable(onClick="doClick('modalSettings')")
  30                 | {{ st.tr["Settings"] }}
  31               .clickable#flagContainer(onClick="doClick('modalLang')")
  32                 img(v-if="!!st.lang" :src="flagImage")
  33     router-view
  34     .row
  35       .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  36         footer
  37           router-link.menuitem(to="/about") {{ st.tr["About"] }}
  38           p.clickable(onClick="doClick('modalContact')")
  39             | {{ st.tr["Contact"] }}
  40           a.menuitem(href="https://forum.vchess.club")
  41             | {{ st.tr["Forum"] }}
  42 </template>
  43
  44 <script>
  45 import ContactForm from "@/components/ContactForm.vue";
  46 import Language from "@/components/Language.vue";
  47 import Settings from "@/components/Settings.vue";
  48 import UpsertUser from "@/components/UpsertUser.vue";
  49 import Welcome from "@/components/Welcome.vue";
  50 import { store } from "./store.js";
  51 import { processModalClick } from "./utils/modalClick.js";
  52 export default {
  53   components: {
  54     ContactForm,
  55     Language,
  56     Settings,
  57     UpsertUser,
  58     Welcome,
  59   },
  60   data: function() {
  61     return {
  62       st: store.state,
  63     };
  64   },
  65   computed: {
  66     flagImage: function() {
  67       return `/images/flags/${this.st.lang}.svg`;
  68     },
  69   },
  70   mounted: function() {
  71     let dialogs = document.querySelectorAll("div[role='dialog']");
  72     dialogs.forEach(d => {
  73       d.addEventListener("click", processModalClick);
  74     });
  75     if (!localStorage.getItem("welcomed"))
  76       setTimeout( () => { doClick("modalWelcome"); }, 2000);
  77   },
  78   methods: {
  79     hideDrawer: function(e) {
  80       if (e.target.innerText == "Forum")
  81         return; //external link
  82       e.preventDefault(); //TODO: why is this needed?
  83       document.getElementsByClassName("drawer")[0].checked = false;
  84     },
  85   },
  86 };
  87 </script>
  88
  89 <style lang="sass">
  90 html, *
  91   font-family: "Open Sans", Arial, sans-serif
  92   --back-color: #f2f2f2
  93   --a-link-color: black
  94   --a-visited-color: black
  95
  96 body
  97   padding: 0
  98   min-width: 320px
  99
 100 #app
 101   -webkit-font-smoothing: antialiased
 102   -moz-osx-font-smoothing: grayscale
 103
 104 .container
 105   overflow: hidden
 106   @media screen and (max-width: 767px)
 107     padding: 0
 108
 109 .row > div
 110   padding: 0
 111
 112 .nopadding
 113   padding: 0
 114
 115 header
 116   width: 100%
 117   display: flex
 118   align-items: center
 119   justify-content: center
 120   margin: 0 auto
 121   & > img
 122     width: 30px
 123     height: 30px
 124
 125 .clickable
 126   cursor: pointer
 127
 128 .text-center
 129   text-align: center
 130
 131 .smallpad
 132   padding: 5px
 133
 134 .emphasis
 135   font-style: italic
 136
 137 .clearer
 138   clear: both
 139
 140 .smallfont
 141   font-size: 0.8em
 142
 143 .bigfont
 144   font-size: 1.2em
 145
 146 .bold
 147   font-weight: bold
 148
 149 nav
 150   width: 100%
 151   margin: 0
 152   padding: 0
 153   & > #menuBar
 154     width: 100%
 155     padding: 0
 156     @media screen and (min-width: 768px)
 157       & > #leftMenu
 158         padding: 0
 159         width: 50%
 160         display: inline-flex
 161         align-items: center
 162         justify-content: flex-start
 163         & > a
 164           display: inline-block
 165           color: #2c3e50
 166           &.router-link-exact-active
 167             color: #42b983
 168       & > #rightMenu
 169         padding: 0
 170         width: 50%
 171         display: inline-flex
 172         align-items: center
 173         justify-content: flex-end
 174         & > div
 175           display: inline-block
 176           &#flagContainer
 177             display: inline-flex
 178           & > img
 179             padding: 0
 180             width: 36px
 181             height: 27px
 182     @media screen and (max-width: 767px)
 183       & > #leftMenu
 184         padding-bottom: 5px
 185         & > a
 186           color: #2c3e50
 187           &.router-link-exact-active
 188             color: #42b983
 189       & > #rightMenu
 190         padding-top: 5px
 191         border-top: 1px solid darkgrey
 192         & > div
 193           &#flagContainer
 194             display: inline-flex
 195           & > img
 196             padding: 0
 197             width: 36px
 198             height: 27px
 199
 200 @media screen and (max-width: 767px)
 201   nav
 202     height: 32px
 203     border: none
 204     & > label.drawer-toggle
 205       font-size: 1.2rem
 206       //padding: 0 0 0 10px
 207
 208 [type="checkbox"].drawer+*
 209   right: -767px
 210
 211 @media screen and (max-width: 767px)
 212   .button-group
 213     flex-direction: row
 214     button:not(:first-child)
 215       border-left: 1px solid var(--button-group-border-color)
 216       border-top: 0
 217
 218 footer
 219   border: 1px solid #ddd
 220   //background-color: #000033
 221   font-size: 1rem
 222   width: 100%
 223   padding-left: 0
 224   padding-right: 0
 225   display: inline-flex
 226   align-items: center
 227   justify-content: center
 228   & > .router-link-exact-active
 229     color: #42b983 !important
 230     text-decoration: none
 231   & > .menuitem
 232     display: inline-block
 233     margin: 0 10px
 234     &:link
 235       color: #2c3e50
 236     &:visited, &:hover
 237       color: #2c3e50
 238       text-decoration: none
 239   & > p
 240     display: inline-block
 241     margin: 0 10px
 242
 243 @media screen and (max-width: 767px)
 244   footer
 245     border: none
 246
 247 //#settings, #contactForm
 248 //  max-width: 767px
 249 //  @media screen and (max-width: 767px)
 250 //    max-width: 100vw
 251 //[type="checkbox"].modal+div .card
 252 //  max-width: 767px
 253 //  max-height: 100vh
 254 //[type="checkbox"].modal+div .card.small-modal
 255 //  max-width: 320px
 256 //[type="checkbox"].modal+div .card.big-modal
 257 //  max-width: 90vw
 258 </style>