Fix back button

src/App.vue

@@ -11,7 +11,7 @@ const aoRoutes = {
 export default {
 	data() {
 		return {
-			hash: {page: '', items: []},
+			hash: {page: '', items: [], prev: {}},
 			consts: this.appConfig.consts,
 			mobile: false
 		};
@@ -20,7 +20,9 @@ export default {
 		return {
 			hash: this.hash,
 			consts: this.consts,
-			isMobile: () => this.isMobile()
+			isMobile: () => this.isMobile(),
+			getAnchor: this.getAnchor,
+			getPrevAnchor: () => this.getPrevAnchor(),
 		};
 	},
 	computed: {
@@ -28,7 +30,8 @@ export default {
 			return aoRoutes[this.hash.page];
 		},
 		hashSnapshot() {
-			return JSON.stringify(this.hash);
+			const { prev, ...asHash } = this.hash;
+			return JSON.stringify(asHash);
 		}
 	},
 	inject: ['appConfig'],
@@ -49,11 +52,15 @@ export default {
 	watch: {
 		hashSnapshot(jNewHash, jOldHash) {
 			const asNewHash = JSON.parse(jNewHash);
+
 			//Sync variable -> #hash
 			if(asNewHash != this.getBrowserHash()) {
 				this.setBrowserHash(asNewHash.page, asNewHash.items);
 			}
 
+			//Store previous value
+			this.hash.prev = JSON.parse(jOldHash);
+
 			this.setPageTitle(asNewHash.page);
 		}
 	},
@@ -83,8 +90,13 @@ export default {
 		},
 		setBrowserHash(sPage = '', asItems = []) {
 			if(typeof asItems == 'string' && asItems != '') asItems = [asItems];
-			const sItems = (asItems.length > 0)?(this.consts.hash_sep + asItems.join(this.consts.hash_sep)):'';
+			window.location.hash = this.getAnchor([sPage, ...asItems]);
-			window.location.hash = '#' + sPage + sItems;
+		},
+		getAnchor(asBreadCrumbs) {
+			return '#' + asBreadCrumbs.filter(Boolean).join(this.consts.hash_sep);
+		},
+		getPrevAnchor() {
+			return this.getAnchor([this.hash.prev.page, ...this.hash.prev.items]);
 		}
 	},
 	beforeUnmount() {

src/components/admin.vue

@@ -1,7 +1,7 @@
 <script>
-import SpotIcon from '@components/spotIcon';
+import SpotIcon from '@components/spotIcon';
-import SpotButton from '@components/spotButton';
+import SpotButton from '@components/spotButton';
-import AdminInput from '@components/adminInput';
+import AdminInput from '@components/adminInput';
 
 export default {
 	components: {
@@ -9,7 +9,7 @@ export default {
 		SpotButton,
 		AdminInput
 	},
-	inject: ['api', 'lang'],
+	inject: ['api', 'lang', 'getPrevAnchor'],
 	data() {
 		return {
 			elems: {},
@@ -50,7 +50,7 @@ export default {
 			}
 		},
 		createElem(sType) {
-			this.api.post('admin_create', {type: sType})
+			this.api.post('admin_create', {type: sType})
 				.then((aoNewElemTypes) => {
 					for(const [sType, aoNewElems] of Object.entries(aoNewElemTypes)) {
 						for(const [iKey, oNewElem] of Object.entries(aoNewElems)) {
@@ -68,7 +68,7 @@ export default {
 				id: oElem.id
 			};
 
-			this.api.post('admin_delete', asInputs)
+			this.api.post('admin_delete', asInputs)
 				.then((asData) => {
 					delete this.elems[asInputs.type][asInputs.id];
 					this.addFeedback('success', this.l('admin.delete_success'), asInputs);
@@ -90,7 +90,7 @@ export default {
 					value:	sNewVal
 				};
 
-				this.api.post('admin_set', asInputs)
+				this.api.post('admin_set', asInputs)
 					.then((asData) => {
 						this.elems[oElem.type][oElem.id][oEvent.target.name] = sNewVal;
 						this.addFeedback('success', this.l('admin.save_success'), asInputs);
@@ -106,7 +106,7 @@ export default {
 			this.saveTimer = setTimeout(() => {this.updateElem(oElem, oEvent);}, 2000);
 		},
 		updateProject() {
-			this.api.post('update_project')
+			this.api.post('update_project')
 				.then((asData, sMsg) => {this.addFeedback('success', sMsg, {'update':'project'});})
 				.catch((sMsg) => {this.addFeedback('error', sMsg, {'update':'project'});});
 		}
@@ -115,7 +115,7 @@ export default {
 </script>
 <template>
 	<div id="admin">
-		<a name="back" class="button" href="#project"><SpotIcon :icon="'back'" :text="l('action.back')" /></a>
+		<a name="back" class="button" :href="getPrevAnchor()"><SpotIcon :icon="'back'" :text="l('action.back')" /></a>
 		<h1>{{ l('project.plural') }}</h1>
 		<div>
 			<table>

src/components/projectPost.vue

@@ -38,7 +38,7 @@
 				focusZoomLevel: 15
 			};
 		},
-		inject: ['api', 'lang', 'project', 'feed', 'user', 'map', 'hash', 'consts', 'isMobile'],
+		inject: ['api', 'lang', 'project', 'feed', 'user', 'map', 'hash', 'consts', 'isMobile', 'getAnchor'],
 		computed: {
 			postClass() {
 				let sHeaderLess = this.options.headerless?' headerless':'';
@@ -60,7 +60,7 @@
 				return this.mouseOverDrill?null:'footprint';
 			},
 			anchorLink() {
-				return '#'+[this.hash.page, this.project.project.codename, this.options.type, this.options.id].join(this.consts.hash_sep);
+				return this.getAnchor([this.hash.page, this.project.project.codename, this.options.type, this.options.id]);
 			},
 			modeHisto() {
 				return (this.project?.project?.mode == this.consts.modes.histo);

src/components/upload.vue

@@ -10,7 +10,7 @@ import SpotButton from '@components/spotButton';
 export default {
 	name: 'upload',
 	components: { SpotButton, SpotIcon },
-	inject: ['api', 'lang', 'projects', 'consts', 'user'],
+	inject: ['api', 'lang', 'projects', 'consts', 'user', 'getPrevAnchor'],
 	data() {
 		return {
 			project: this.projects.getDefaultProject(),
@@ -120,7 +120,7 @@ export default {
 <template>
 	<div id="upload">
 		<div class="section header">
-			<a name="back" class="button" href="#project"><SpotIcon :icon="'back'" :text="lang.get('action.back')" /></a>
+			<a name="back" class="button" :href="getPrevAnchor()"><SpotIcon :icon="'back'" :text="lang.get('action.back')" /></a>
 			<h1>{{ this.project.name }}</h1>
 		</div>
 		<div class="section" v-if="project.editable">

src/styles/_page.project.panel.settings.scss

@@ -11,6 +11,10 @@
 			background: color.$default-bg;
 			border-radius: var.$block-radius;
 			box-shadow: var.$map-shadow;
+
+			a.button:hover, button:hover {
+				background: color.$default-bg-light;
+			}
 		}
 
 		.settings-header {