Modals first on page to avoid 'scroll to the end' effect

diff --git a/public/javascripts/components/problems.js b/public/javascripts/components/problems.js
index d1ec9a2..51453a4 100644 (file)
--- a/public/javascripts/components/problems.js
+++ b/public/javascripts/components/problems.js
@@ -23,8 +23,54 @@ Vue.component('my-problems', {
                        },
                };
        },
+       // NOTE: always modals first, because otherwise "scroll to the end" undesirable effect
        template: `
                <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
+                       <input type="checkbox" id="modal-newproblem" class="modal"/>
+                       <div role="dialog" aria-labelledby="modalProblemTxt">
+                               <div v-show="!modalProb.preview" class="card newproblem-form">
+                                       <label for="modal-newproblem" class="modal-close">
+                                       </label>
+                                       <h3 id="modalProblemTxt">{{ translate("Add a problem") }}</h3>
+                                       <form @submit.prevent="previewProblem()">
+                                               <fieldset>
+                                                       <label for="newpbFen">FEN</label>
+                                                       <input id="newpbFen" type="text" v-model="modalProb.fen"
+                                                               :placeholder='translate("Full FEN description")'/>
+                                               </fieldset>
+                                               <fieldset>
+                                                       <p class="emphasis">{{ translate("Safe HTML tags allowed") }}</p>
+                                                       <label for="newpbInstructions">{{ translate("Instructions") }}</label>
+                                                       <textarea id="newpbInstructions" v-model="modalProb.instructions"
+                                                               :placeholder='translate("Describe the problem goal")'>
+                                                       </textarea>
+                                                       <label for="newpbSolution">{{ translate("Solution") }}</label>
+                                                       <textarea id="newpbSolution" v-model="modalProb.solution"
+                                                               :placeholder='translate("How to solve the problem?")'>
+                                                       </textarea>
+                                                       <button class="center-btn">{{ translate("Preview") }}</button>
+                                               </fieldset>
+                                       </form>
+                               </div>
+                               <div v-show="modalProb.preview" class="card newproblem-preview">
+                                       <label for="modal-newproblem" class="modal-close"
+                                               @click="modalProb.preview=false">
+                                       </label>
+                                       <my-problem-summary :prob="modalProb" :userid="userId" :preview="true">
+                                       </my-problem-summary>
+                                       <div class="button-group">
+                                               <button @click="modalProb.preview=false">{{ translate("Cancel") }}</button>
+                                               <button @click="sendProblem()">{{ translate("Send") }}</button>
+                                       </div>
+                               </div>
+                       </div>
+                       <input id="modalNomore" type="checkbox" class="modal"/>
+                       <div role="dialog" aria-labelledby="nomoreMessage">
+                               <div class="card smallpad small-modal text-center">
+                                       <label for="modalNomore" class="modal-close"></label>
+                                       <h3 id="nomoreMessage" class="section">{{ nomoreMessage }}</h3>
+                               </div>
+                       </div>
                        <div id="problemControls" class="button-group">
                                <button :aria-label='translate("Previous problem(s)")' class="tooltip"
                                        @click="showNext('backward')"
@@ -59,7 +105,7 @@ Vue.component('my-problems', {
                        </div>
                        <div>
                                <input type="text" placeholder="Type problem number" v-model="pbNum"/>
-                               <button @click="showProblem">Show problem</button>
+                               <button @click="() => showProblem(pbNum)">Show problem</button>
                        </div>
                        <button v-if="!!userId" @click="toggleListDisplay"
                                :class="{'only-mine':display=='mine'}"
@@ -72,51 +118,6 @@ Vue.component('my-problems', {
                                v-for="p in curProblems()" @click="curProb=p"
                                v-bind:prob="p" v-bind:userid="userId" v-bind:key="p.id">
                        </my-problem-summary>
-                       <input type="checkbox" id="modal-newproblem" class="modal"/>
-                       <div role="dialog" aria-labelledby="modalProblemTxt">
-                               <div v-show="!modalProb.preview" class="card newproblem-form">
-                                       <label for="modal-newproblem" class="modal-close">
-                                       </label>
-                                       <h3 id="modalProblemTxt">{{ translate("Add a problem") }}</h3>
-                                       <form @submit.prevent="previewProblem()">
-                                               <fieldset>
-                                                       <label for="newpbFen">FEN</label>
-                                                       <input id="newpbFen" type="text" v-model="modalProb.fen"
-                                                               :placeholder='translate("Full FEN description")'/>
-                                               </fieldset>
-                                               <fieldset>
-                                                       <p class="emphasis">{{ translate("Safe HTML tags allowed") }}</p>
-                                                       <label for="newpbInstructions">{{ translate("Instructions") }}</label>
-                                                       <textarea id="newpbInstructions" v-model="modalProb.instructions"
-                                                               :placeholder='translate("Describe the problem goal")'>
-                                                       </textarea>
-                                                       <label for="newpbSolution">{{ translate("Solution") }}</label>
-                                                       <textarea id="newpbSolution" v-model="modalProb.solution"
-                                                               :placeholder='translate("How to solve the problem?")'>
-                                                       </textarea>
-                                                       <button class="center-btn">{{ translate("Preview") }}</button>
-                                               </fieldset>
-                                       </form>
-                               </div>
-                               <div v-show="modalProb.preview" class="card newproblem-preview">
-                                       <label for="modal-newproblem" class="modal-close"
-                                               @click="modalProb.preview=false">
-                                       </label>
-                                       <my-problem-summary :prob="modalProb" :userid="userId" :preview="true">
-                                       </my-problem-summary>
-                                       <div class="button-group">
-                                               <button @click="modalProb.preview=false">{{ translate("Cancel") }}</button>
-                                               <button @click="sendProblem()">{{ translate("Send") }}</button>
-                                       </div>
-                               </div>
-                       </div>
-                       <input id="modalNomore" type="checkbox" class="modal"/>
-                       <div role="dialog" aria-labelledby="nomoreMessage">
-                               <div class="card smallpad small-modal text-center">
-                                       <label for="modalNomore" class="modal-close"></label>
-                                       <h3 id="nomoreMessage" class="section">{{ nomoreMessage }}</h3>
-                               </div>
-                       </div>
                </div>
        `,
        watch: {
@@ -138,8 +139,7 @@ Vue.component('my-problems', {
                        this.fetchProblems("mine", "bacwkard");
                        this.listsInitialized = true;
                },
-               showProblem: function(num) {
-                       const pid = num || this.pbNum;
+               showProblem: function(pid) {
                        location.hash = "#problems?id=" + pid;
                        for (let parray of [this.singletons,this.problems,this.myProblems])
                        {