From be5efe81c20cd3f1990a857b63613d40cde49217 Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Thu, 17 Jan 2019 16:06:33 +0100 Subject: [PATCH] Modals first on page to avoid 'scroll to the end' effect --- public/javascripts/components/problems.js | 96 +++++++++++------------ 1 file changed, 48 insertions(+), 48 deletions(-) diff --git a/public/javascripts/components/problems.js b/public/javascripts/components/problems.js index d1ec9a21..51453a4c 100644 --- 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]) { -- 2.44.0