From 9a3049f3a48fa4b3627ef26ccdf213a8e550d478 Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Wed, 12 Feb 2020 18:16:25 +0100
Subject: [PATCH] Will remove Welcome div, finally

---
 client/src/App.vue                    | 32 +-------------
 client/src/components/BaseGame.vue    | 23 +++++-----
 client/src/components/Chat.vue        | 17 ++++----
 client/src/components/ContactForm.vue | 63 +++++++++++++++++----------
 client/src/components/GameList.vue    | 15 ++++---
 client/src/components/Language.vue    |  4 +-
 client/src/components/Settings.vue    | 51 ++++++++++++----------
 client/src/components/UpsertUser.vue  | 35 ++++++++-------
 client/src/components/Welcome.vue     | 10 +++++
 client/src/translations/en.js         |  1 +
 client/src/translations/es.js         |  1 +
 client/src/translations/fr.js         |  1 +
 client/src/views/Analyse.vue          |  9 +---
 client/src/views/Game.vue             |  3 ++
 client/src/views/Hall.vue             |  8 ++--
 client/src/views/Rules.vue            | 19 +++-----
 client/src/views/Variants.vue         |  2 +-
 17 files changed, 152 insertions(+), 142 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index f4f0cf7c..e97fc410 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -14,7 +14,7 @@
         nav
           label.drawer-toggle(for="drawerControl")
           input#drawerControl.drawer(type="checkbox")
-          #menuBar(@click="hideDrawer()")
+          #menuBar(@click="hideDrawer($event)")
             label.drawer-close(for="drawerControl")
             #leftMenu
               router-link(to="/")
@@ -109,9 +109,6 @@ body
 .row > div
   padding: 0
 
-.nopadding
-  padding: 0
-
 header
   width: 100%
   display: flex
@@ -128,24 +125,9 @@ header
 .text-center
   text-align: center
 
-.smallpad
-  padding: 5px
-
-.emphasis
-  font-style: italic
-
 .clearer
   clear: both
 
-.smallfont
-  font-size: 0.8em
-
-.bigfont
-  font-size: 1.2em
-
-.bold
-  font-weight: bold
-
 nav
   width: 100%
   margin: 0
@@ -243,16 +225,4 @@ footer
 @media screen and (max-width: 767px)
   footer
     border: none
-
-//#settings, #contactForm
-//  max-width: 767px
-//  @media screen and (max-width: 767px)
-//    max-width: 100vw
-//[type="checkbox"].modal+div .card
-//  max-width: 767px
-//  max-height: 100vh
-//[type="checkbox"].modal+div .card.small-modal
-//  max-width: 320px
-//[type="checkbox"].modal+div .card.big-modal
-//  max-width: 90vw
 </style>
diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue
index 45364053..a1539bab 100644
--- a/client/src/components/BaseGame.vue
+++ b/client/src/components/BaseGame.vue
@@ -1,18 +1,18 @@
 <template lang="pug">
 div#baseGame(tabindex=-1 @click="focusBg()"
-    @keydown="handleKeys" @wheel="handleScroll")
+    @keydown="handleKeys($event)" @wheel="handleScroll($event)")
   input#modalEog.modal(type="checkbox")
-  div#eogDiv(role="dialog" data-checkbox="modalEog" aria-labelledby="eogMessage")
-    .card.smallpad.small-modal.text-center
+  div#eogDiv(role="dialog" data-checkbox="modalEog")
+    .card.text-center
       label.modal-close(for="modalEog")
-      h3#eogMessage.section {{ endgameMessage }}
+      h3.section {{ endgameMessage }}
   input#modalAdjust.modal(type="checkbox")
-  div#adjuster(role="dialog" data-checkbox="modalAdjust" aria-labelledby="labelAdjust")
-    .card.smallpad.small-modal.text-center
+  div#adjuster(role="dialog" data-checkbox="modalAdjust")
+    .card.text-center
       label.modal-close(for="modalAdjust")
-      label#labelAdjust(for="boardSize") {{ st.tr["Board size"] }}
+      label(for="boardSize") {{ st.tr["Board size"] }}
       input#boardSize.slider(type="range" min="0" max="100" value="50"
-        @input="adjustBoard")
+        @input="adjustBoard()")
   #gameContainer
     #boardContainer
       Board(:vr="vr" :last-move="lastMove" :analyze="analyze"
@@ -411,6 +411,11 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+[type="checkbox"]#modalEog+div .card
+  min-height: 45px
+[type="checkbox"]#modalAdjust+div .card
+  padding: 5px
+
 #baseGame
   width: 100%
   &:focus
@@ -423,8 +428,6 @@ export default {
 #downloadDiv
   display: inline-block
 
-#modal-eog+div .card
-  overflow: hidden
 #controls
   margin-top: 10px
   margin-left: auto
diff --git a/client/src/components/Chat.vue b/client/src/components/Chat.vue
index c5fde454..8c1e059a 100644
--- a/client/src/components/Chat.vue
+++ b/client/src/components/Chat.vue
@@ -1,12 +1,11 @@
 <template lang="pug">
 div
   input#inputChat(type="text" :placeholder="st.tr['Type here']"
-    @keyup.enter="sendChat")
-  button#sendChatBtn(@click="sendChat()") {{ st.tr["Send"] }}
-  p(v-for="chat in chats" :class="classObject(chat)"
-    v-html="chat.name + ': ' + chat.msg")
-  p(v-for="chat in pastChats" :class="classObject(chat)"
-    v-html="chat.name + ': ' + chat.msg")
+    @keyup.enter="sendChat()")
+  button(@click="sendChat()") {{ st.tr["Send"] }}
+  p(v-for="chat in chats.concat(pastChats)")
+    span.name {{ chat.name }} :&nbsp;
+    span(:class="classObject(chat)" v-html="chat.msg")
 </template>
 
 <script>
@@ -50,8 +49,10 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.name
+  color: #abb2b9
 .my-chatmsg
-  color: grey
+  color: #7d3c98
 .opp-chatmsg
-  color: black
+  color: #2471a3
 </style>
diff --git a/client/src/components/ContactForm.vue b/client/src/components/ContactForm.vue
index 9ac57107..392d3196 100644
--- a/client/src/components/ContactForm.vue
+++ b/client/src/components/ContactForm.vue
@@ -1,24 +1,23 @@
 <template lang="pug">
 div
-  input#modalContact.modal(type="checkbox")
-  div(role="dialog" data-checkbox="modalContact"
-      aria-labelledby="contactTitle")
-    form.card.smallpad
+  input#modalContact.modal(type="checkbox" @change="trySetEnterTime($event)")
+  div(role="dialog" data-checkbox="modalContact")
+    .card
       label.modal-close(for="modalContact")
-      h3#contactTitle.section {{ st.tr["Contact form"] }}
-      fieldset
-        label(for="userEmail") {{ st.tr["Email"] }}
-        input#userEmail(type="email")
-      fieldset
-        label(for="mailSubject") {{ st.tr["Subject"] }}
-        input#mailSubject(type="text")
-      fieldset
-        label(for="mailContent") {{ st.tr["Content"] }} *
-        br
-        textarea#mailContent
-      fieldset
-        button(type="button" @click="trySendMessage()") {{ st.tr["Send"] }}
-        p#emailSent {{ st.tr["Email sent!"] }}
+      h3.section {{ st.tr["Contact form"] }}
+      form(@submit.prevent="trySendMessage()" @keyup.enter="trySendMessage()")
+        fieldset
+          label(for="userEmail") {{ st.tr["Email"] }}
+          input#userEmail(type="email")
+        fieldset
+          label(for="mailSubject") {{ st.tr["Subject"] }}
+          input#mailSubject(type="text")
+        fieldset
+          label(for="mailContent") {{ st.tr["Content"] }} *
+          br
+          textarea#mailContent
+      button(@click="trySendMessage()") {{ st.tr["Send"] }}
+      #dialog.text-center {{ st.tr[infoMsg] }}
 </template>
 
 <script>
@@ -29,12 +28,24 @@ export default {
   name: "my-contact-form",
   data: function() {
     return {
+      enterTime: Number.MAX_SAFE_INTEGER, //for a basic anti-bot strategy
       st: store.state,
+      infoMsg: "",
     };
   },
   methods: {
-    // Note: not using Vue here, but would be possible
+    trySetEnterTime: function(event) {
+      if (!!event.target.checked)
+      {
+        this.enterTime = Date.now();
+        this.infoMsg = "";
+      }
+    },
     trySendMessage: function() {
+      // Basic anti-bot strategy:
+      const exitTime = Date.now();
+      if (exitTime - this.enterTime < 5000)
+        return;
       let email = document.getElementById("userEmail");
       let subject = document.getElementById("mailSubject");
       let content = document.getElementById("mailContent");
@@ -56,11 +67,9 @@ export default {
           content: content.value,
         },
         () => {
+          this.infoMsg = "Email sent!";
           subject.value = "";
           content.value = "";
-          let emailSent = document.getElementById("emailSent");
-          emailSent.style.display = "inline-block";
-          setTimeout(() => { emailSent.style.display = "none"; }, 2000);
         }
       );
     },
@@ -69,7 +78,13 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-#emailSent
+[type="checkbox"].modal+div .card
+  max-width: 767px
+  max-height: 100%
+textarea#mailContent
+  width: 100%
+  min-height: 100px
+#dialog
+  padding: 5px
   color: blue
-  display: none
 </style>
diff --git a/client/src/components/GameList.vue b/client/src/components/GameList.vue
index 5a4c8f7c..1e31e737 100644
--- a/client/src/components/GameList.vue
+++ b/client/src/components/GameList.vue
@@ -15,8 +15,7 @@ div
         td(data-label="White") {{ g.players[0].name || "@nonymous" }}
         td(data-label="Black") {{ g.players[1].name || "@nonymous" }}
         td(data-label="Time control") {{ g.cadence }}
-        td(data-label="Result" :class="{finished: g.score!='*'}"
-            @click.stop="deleteGame(g)")
+        td(data-label="Result" :class="{finished: g.score!='*'}" @click="deleteGame(g,$event)")
           | {{ g.score }}
 </template>
 
@@ -58,9 +57,13 @@ export default {
     },
   },
   methods: {
-    deleteGame: function(game) {
-      if (confirm(this.st.tr["Remove game ?"]))
-        GameStorage.remove(game.id);
+    deleteGame: function(game, e) {
+      if (game.score != "*")
+      {
+        if (confirm(this.st.tr["Remove game?"]))
+          GameStorage.remove(game.id);
+        e.stopPropagation();
+      }
     },
   },
 };
@@ -71,5 +74,5 @@ export default {
 tr.my-turn > td
   background-color: #fcd785
 tr td.finished
-  background-color: red
+  background-color: #f5b7b1
 </style>
diff --git a/client/src/components/Language.vue b/client/src/components/Language.vue
index d35d8e21..e7243555 100644
--- a/client/src/components/Language.vue
+++ b/client/src/components/Language.vue
@@ -8,9 +8,9 @@ div
     };
   input#modalLang.modal(type="checkbox")
   div(role="dialog" data-checkbox="modalLang")
-    #language.card
+    .card
       label.modal-close(for="modalLang")
-      form(@change="setLanguage")
+      form(@change="setLanguage($event)")
         fieldset
           label(for="langSelect") {{ st.tr["Language"] }}
           select#langSelect
diff --git a/client/src/components/Settings.vue b/client/src/components/Settings.vue
index b9a2b637..df60e04c 100644
--- a/client/src/components/Settings.vue
+++ b/client/src/components/Settings.vue
@@ -1,29 +1,30 @@
 <template lang="pug">
 div
   input#modalSettings.modal(type="checkbox")
-  div(role="dialog" data-checkbox="modalSettings"
-      aria-labelledby="settingsTitle")
-    .card.smallpad(@change="updateSettings")
+  div(role="dialog" data-checkbox="modalSettings")
+    .card(@change="updateSettings($event)")
       label.modal-close(for="modalSettings")
-      fieldset
-        label(for="setHints") {{ st.tr["Show possible moves?"] }}
-        input#setHints(type="checkbox" v-model="st.settings.hints")
-      fieldset
-        label(for="setHighlight")
-          | {{ st.tr["Highlight last move and checks?"] }}
-        input#setHighlight(type="checkbox" v-model="st.settings.highlight")
-      fieldset
-        label(for="setBcolor") {{ st.tr["Board colors"] }}
-        select#setBcolor(v-model="st.settings.bcolor")
-          option(value="lichess") {{ st.tr["brown"] }}
-          option(value="chesscom") {{ st.tr["green"] }}
-          option(value="chesstempo") {{ st.tr["blue"] }}
-      fieldset
-        label(for="setSound") {{ st.tr["Play sounds?"] }}
-        select#setSound(v-model="st.settings.sound")
-          option(value="0") {{ st.tr["None"] }}
-          option(value="1") {{ st.tr["New game"] }}
-          option(value="2") {{ st.tr["All"] }}
+      h3.section {{ st.tr["Settings"] }}
+      form
+        fieldset
+          label(for="setHints") {{ st.tr["Show possible moves?"] }}
+          input#setHints(type="checkbox" v-model="st.settings.hints")
+        fieldset
+          label(for="setHighlight")
+            | {{ st.tr["Highlight last move and checks?"] }}
+          input#setHighlight(type="checkbox" v-model="st.settings.highlight")
+        fieldset
+          label(for="setBcolor") {{ st.tr["Board colors"] }}
+          select#setBcolor(v-model="st.settings.bcolor")
+            option(value="lichess") {{ st.tr["brown"] }}
+            option(value="chesscom") {{ st.tr["green"] }}
+            option(value="chesstempo") {{ st.tr["blue"] }}
+        fieldset
+          label(for="setSound") {{ st.tr["Play sounds?"] }}
+          select#setSound(v-model="st.settings.sound")
+            option(value="0") {{ st.tr["None"] }}
+            option(value="1") {{ st.tr["New game"] }}
+            option(value="2") {{ st.tr["All"] }}
 </template>
 
 <script>
@@ -49,3 +50,9 @@ export default {
   },
 };
 </script>
+
+<style lang="sass" scoped>
+[type="checkbox"].modal+div .card
+  max-width: 767px
+  max-height: 100%
+</style>
diff --git a/client/src/components/UpsertUser.vue b/client/src/components/UpsertUser.vue
index 60970b08..3a0bb490 100644
--- a/client/src/components/UpsertUser.vue
+++ b/client/src/components/UpsertUser.vue
@@ -1,11 +1,11 @@
 <template lang="pug">
 div
-  input#modalUser.modal(type="checkbox" @change="trySetEnterTime")
+  input#modalUser.modal(type="checkbox" @change="trySetEnterTime($event)")
   div(role="dialog" data-checkbox="modalUser")
     .card
       label.modal-close(for="modalUser")
-      h3 {{ st.tr[stage] }}
-      form#userForm(@submit.prevent="onSubmit()" @keyup.enter="onSubmit")
+      h3.section {{ st.tr[stage] }}
+      form(@submit.prevent="onSubmit()" @keyup.enter="onSubmit()")
         div(v-show="stage!='Login'")
           fieldset
             label(for="username") {{ st.tr["Name"] }}
@@ -21,13 +21,13 @@ div
             label(for="nameOrEmail") {{ st.tr["Name or Email"] }}
             input#nameOrEmail(type="text" v-model="nameOrEmail")
       .button-group
-        button#submit(type="button" @click="onSubmit()")
+        button(@click="onSubmit()")
           span {{ st.tr[submitMessage] }}
-        button(v-if="stage!='Update'" @click="toggleStage()")
+        button(v-if="stage!='Update'" type="button" @click="toggleStage()")
           span {{ st.tr[stage=="Login" ? "Register" : "Login"] }}
-        button#logoutBtn(v-else @click="doLogout()")
+        button(v-else type="button" @click="doLogout()")
           span {{ st.tr["Logout"] }}
-      #dialog(:style="{display: displayInfo}") {{ st.tr[infoMsg] }}
+      #dialog.text-center {{ st.tr[infoMsg] }}
 </template>
 
 <script>
@@ -71,9 +71,6 @@ export default {
           return "Apply";
       }
     },
-    displayInfo: function() {
-      return (this.infoMsg.length > 0 ? "block" : "none");
-    },
     stage: function() {
       return this.st.user.id > 0 ? "Update" : this.logStage;
     },
@@ -81,7 +78,10 @@ export default {
   methods: {
     trySetEnterTime: function(event) {
       if (!!event.target.checked)
+      {
+        this.infoMsg = "";
         this.enterTime = Date.now();
+      }
     },
     toggleStage: function() {
       // Loop login <--> register (update is for logged-in users)
@@ -124,7 +124,7 @@ export default {
       // Basic anti-bot strategy:
       const exitTime = Date.now();
       if (this.stage == "Register" && exitTime - this.enterTime < 5000)
-        return; //silently return, in (curious) case of it was legitimate
+        return;
       let error = undefined;
       if (this.stage == 'Login')
       {
@@ -142,10 +142,6 @@ export default {
           this.infoMsg = this.infoMessage();
           if (this.stage != "Update")
             this.nameOrEmail = "";
-          setTimeout(() => {
-            this.infoMsg = "";
-            document.getElementById("modalUser").checked = false;
-          }, 2000);
         },
         err => {
           this.infoMsg = "";
@@ -160,3 +156,12 @@ export default {
   },
 };
 </script>
+
+<style lang="sass" scoped>
+[type="checkbox"].modal+div .card
+  max-width: 370px
+  max-height: 100%
+#dialog
+  padding: 5px
+  color: blue
+</style>
diff --git a/client/src/components/Welcome.vue b/client/src/components/Welcome.vue
index 5f336e85..8c8ec4ca 100644
--- a/client/src/components/Welcome.vue
+++ b/client/src/components/Welcome.vue
@@ -36,6 +36,16 @@ export default {
 </script>
 
 <style lang="sass">
+[type="checkbox"].modal+div .card
+  max-width: 767px
+  max-height: 100%
+img
+  display: block
+  margin: 0 auto
+  width: 300px
+@media screen and (max-width: 767px)
+  img
+    width: 75%
 p#credits
   font-size: 0.8rem
   margin-top: -10px
diff --git a/client/src/translations/en.js b/client/src/translations/en.js
index 39d7f4b2..7ff050e1 100644
--- a/client/src/translations/en.js
+++ b/client/src/translations/en.js
@@ -72,6 +72,7 @@ export const translations =
   "participant(s):": "participant(s):",
   "Register": "Register",
   "Registration complete! Please check your emails": "Registration complete! Please check your emails",
+  "Remove game?": "Remove game?",
   "Resign": "Resign",
   "Resign the game?": "Resign the game?",
   "Result": "Result",
diff --git a/client/src/translations/es.js b/client/src/translations/es.js
index 2a01b1d4..87d2ba1c 100644
--- a/client/src/translations/es.js
+++ b/client/src/translations/es.js
@@ -72,6 +72,7 @@ export const translations =
   "participant(s):": "participante(s) :",
   "Register": "Registrarse",
   "Registration complete! Please check your emails": "¡ Registro completo ! Por favor revise sus correos electrónicos",
+  "Remove game?": "¿ Eliminar la partida ?",
   "Resign": "Abandonar",
   "Resign the game?": "¿ Abandonar la partida ?",
   "Result": "Resultado",
diff --git a/client/src/translations/fr.js b/client/src/translations/fr.js
index fbaffc68..4e27d2ec 100644
--- a/client/src/translations/fr.js
+++ b/client/src/translations/fr.js
@@ -72,6 +72,7 @@ export const translations =
   "participant(s):": "participant(s) :",
   "Register": "S'enregistrer",
   "Registration complete! Please check your emails": "Enregistrement terminé ! Allez voir vos emails",
+  "Remove game?": "Supprimer la partie ?",
   "Resign": "Abandonner",
   "Resign the game?": "Abandonner la partie ?",
   "Result": "Résultat",
diff --git a/client/src/views/Analyse.vue b/client/src/views/Analyse.vue
index 2f68cdea..c667290f 100644
--- a/client/src/views/Analyse.vue
+++ b/client/src/views/Analyse.vue
@@ -2,8 +2,8 @@
 main
   .row
     .col-sm-12
-      #fenDiv
-        input#fen(v-model="curFen" @input="adjustFenSize")
+      .text-center
+        input#fen(v-model="curFen" @input="adjustFenSize()")
         button(@click="gotoFen()") {{ st.tr["Go"] }}
   BaseGame(:game="game" :vr="vr" ref="basegame")
 </template>
@@ -83,8 +83,3 @@ export default {
   },
 };
 </script>
-
-<style lang="sass" scoped>
-#fenDiv
-  text-align: center
-</style>
diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index dc6b817e..a5db1464 100644
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -62,6 +62,7 @@ export default {
       },
       game: { //passed to BaseGame
         players:[{name:""},{name:""}],
+        chats: [],
         rendered: false,
       },
       virtualClocks: [0, 0], //initialized with true game.clocks
@@ -419,6 +420,8 @@ export default {
         this.vr = new V(game.fen);
         const gtype = (game.cadence.indexOf('d') >= 0 ? "corr" : "live");
         const tc = extractTime(game.cadence);
+        if (!game.chats)
+          game.chats = []; //live games don't have chat history
         if (gtype == "corr")
         {
           if (game.players[0].color == "b")
diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue
index 42fd4767..bcc6cbab 100644
--- a/client/src/views/Hall.vue
+++ b/client/src/views/Hall.vue
@@ -9,7 +9,7 @@ main
   input#modalNewgame.modal(type="checkbox")
   div#newgameDiv(role="dialog" data-checkbox="modalNewgame"
       aria-labelledby="titleFenedit")
-    .card.smallpad(@keyup.enter="newChallenge")
+    .card.smallpad(@keyup.enter="newChallenge()")
       label#closeNewgame.modal-close(for="modalNewgame")
       fieldset
         label(for="selectVariant") {{ st.tr["Variant"] }} *
@@ -44,9 +44,9 @@ main
           button(@click="setDisplay('c','corr',$event)")
             | {{ st.tr["Correspondance challenges"] }}
         ChallengeList(v-show="cdisplay=='live'"
-          :challenges="filterChallenges('live')" @click-challenge="clickChallenge()")
+          :challenges="filterChallenges('live')" @click-challenge="clickChallenge")
         ChallengeList(v-show="cdisplay=='corr'"
-          :challenges="filterChallenges('corr')" @click-challenge="clickChallenge()")
+          :challenges="filterChallenges('corr')" @click-challenge="clickChallenge")
       #people
         h3.text-center {{ st.tr["Who's there?"] }}
         #players
@@ -60,7 +60,7 @@ main
               | {{ getActionLabel(sid) }}
           p.anonymous @nonymous ({{ anonymousCount }})
         #chat
-          Chat(:newChat="newChat" @mychat="processChat")
+          Chat(:newChat="newChat" @mychat="processChat" :pastChats="[]")
         .clearer
       div
         .button-group
diff --git a/client/src/views/Rules.vue b/client/src/views/Rules.vue
index dbc6798d..5f9d6dd7 100644
--- a/client/src/views/Rules.vue
+++ b/client/src/views/Rules.vue
@@ -13,7 +13,7 @@ main
         button(v-if="display=='rules' && gameInfo.vname!='Dark'"
             @click="gotoAnalyze()")
           | {{ st.tr["Analyse"] }}
-      .section-content(v-show="display=='rules'" v-html="content")
+      div(v-show="display=='rules'" v-html="content")
   ComputerGame(v-show="display=='computer'" :game-info="gameInfo"
     @game-over="stopGame" @game-stopped="gameStopped")
 </template>
@@ -116,17 +116,6 @@ export default {
 
 <!-- NOTE: not scoped here, because HTML is injected (TODO) -->
 <style lang="sass">
-//.section-content
-//  *
-//    margin-left: auto
-//    margin-right: auto
-//    max-width: 767px
-//  figure.diagram-container
-//    max-width: 1000px
-//  @media screen and (max-width: 767px)
-//    max-width: 100%
-//    padding: 0 5px
-
 .warn
   padding: 3px
   color: red
@@ -167,6 +156,12 @@ p.boxed
   background-color: #FFCC66
   padding: 5px
 
+.bigfont
+  font-size: 1.2em
+
+.bold
+  font-weight: bold
+
 .stageDelimiter
   color: purple
 
diff --git a/client/src/views/Variants.vue b/client/src/views/Variants.vue
index 0f320eff..d166b684 100644
--- a/client/src/views/Variants.vue
+++ b/client/src/views/Variants.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 main
   .row
-    .nopadding.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
+    .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
       input#prefixFilter(v-model="curPrefix" :placeholder="st.tr['Type first letters...']")
     .variant.col-sm-12.col-md-5.col-lg-4(
       v-for="(v,idx) in filteredVariants"
-- 
2.44.0