From: Benjamin Auder <benjamin.auder@somewhere>
Date: Thu, 17 Jan 2019 15:06:33 +0000 (+0100)
Subject: Modals first on page to avoid 'scroll to the end' effect
X-Git-Url: https://git.auder.net/%7B%7B%20asset%28%27mixstore/images/%7B%7B%20path%28%27mixstore_static_policy%27%29%20%7D%7D?a=commitdiff_plain;h=be5efe81c20cd3f1990a857b63613d40cde49217;p=vchess.git

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 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])
 			{