client/src/App.vue

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