Sort out panel CSS

src/components/project.vue

@@ -20,8 +20,8 @@ export default {
 	data() {
 		return {
 			panels: {
-				feedOpen: false,
-				settingsOpen: false
+				leftOpen: false,
+				rightOpen: false
 			},
 			feed: null,
 			settings: null,
@@ -537,7 +537,7 @@ export default {
 				if(!this.isMobile() && this.map) this.updateMapPadding(iAnimDuration);
 
 				//Open Close panels
-				this.$el.classList.toggle('with-'+sPanel);
+				this.$el.classList.toggle('with-'+sPanel+'-panel');
 			}
 		},
 		setFeed(vPanel) {
@@ -552,7 +552,7 @@ export default {
 
 <template>
 	<div class="projects">
-		<div id="background"></div>
+		<div id="space"></div>
 		<div id="submap">
 			<div class="loader">
 				<SpotIcon :icon="'map'" :classes="'flicker'" width="fixed" />
@@ -567,7 +567,7 @@ export default {
 			v-model:base-map="baseMap"
 			:map-initializing="mapInitializing"
 			:hikes="hikes"
-			@toggle="(bIsOpen, iAnimDuration) => onPanelToggle('settings', bIsOpen, iAnimDuration)"
+			@toggle="(bIsOpen, iAnimDuration) => onPanelToggle('left', bIsOpen, iAnimDuration)"
 		/>
 		<ProjectFeed
 			:ref="setFeed"
@@ -575,7 +575,7 @@ export default {
 			:mode-histo="modeHisto"
 			@request-last-update="settings?.setLastUpdate"
 			@new-markers="addNewMarkers"
-			@toggle="(bIsOpen, iAnimDuration) => onPanelToggle('feed', bIsOpen, iAnimDuration)"
+			@toggle="(bIsOpen, iAnimDuration) => onPanelToggle('right', bIsOpen, iAnimDuration)"
 		/>
 	</div>
   </template>

src/components/projectFeed.vue

@@ -196,8 +196,8 @@ export default {
 </script>
 
 <template>
-	<div id="feed" class="map-container map-container-right" @touchstart.passive="onTouchStart" @touchend.passive="onTouchEnd">
-		<Simplebar id="feed-panel" class="map-panel" ref="feedSimpleBar">
+	<div id="feed" class="panel panel-right" @touchstart.passive="onTouchStart" @touchend.passive="onTouchEnd">
+		<Simplebar id="feed-panel" class="panel-content" ref="feedSimpleBar">
 			<div id="feed-header">
 				<ProjectPost v-if="modeHisto" :options="{type: 'archived', headerless: true}" />
 				<ProjectPost v-else :options="{type: 'poster', relative_time: lang.get('post.new_message')}" />
@@ -209,7 +209,7 @@ export default {
 				<ProjectPost :options="{type: 'loading', headerless: true}" />
 			</div>
 		</Simplebar>
-		<div v-if="project" :class="'map-control map-control-icon feed-control map-control-'+(isMobile()?'bottom':'top')" @click="toggle">
+		<div v-if="project" :class="'panel-control panel-control-icon panel-control-'+(isMobile()?'bottom':'top')" @click="toggle">
 			<SpotIcon :icon="isOpen?'next':'post'" />
 		</div>
 	</div>

src/components/projectSettings.vue

@@ -74,8 +74,8 @@ export default {
 </script>
 
 <template>
-	<div id="settings" class="map-container map-container-left">
-		<div id="settings-panel" class="map-panel">
+	<div id="settings" class="panel panel-left">
+		<div id="settings-panel" class="panel-content">
 			<div class="settings-header settings-box">
 				<a class="logo" href="#project"><img src="images/logo_title.svg" :alt="consts.title" /></a>
 				<div class="last_update" v-if="project?.mode == consts.modes.blog && lastUpdate.unix_time > 0">
@@ -129,16 +129,16 @@ export default {
 				<span>&nbsp;{{ lang.get('credits.license') }}</span>
 			</div>
 		</div>
-		<div :class="'map-control map-control-icon settings-control map-control-'+(isMobile()?'bottom':'top')" @click="toggle">
+		<div :class="'panel-control panel-control-icon panel-control-'+(isMobile()?'bottom':'top')" @click="toggle">
 			<SpotIcon :icon="isOpen?'prev':'menu'" />
 		</div>
-		<div v-if="project?.id && !isMobile()" id="legend" class="map-control settings-control map-control-bottom">
+		<div v-if="project?.id && !isMobile()" id="legend" class="panel-control panel-control-bottom">
 			<div v-for="(color, hikeType) in hikes.colors" class="track">
 				<span class="line" :style="'background-color:'+color+'; height:'+hikes.width+'px;'"></span>
 				<span class="desc">{{ lang.get('track.'+hikeType) }}</span>
 			</div>
 		</div>
-		<div v-if="project?.id" id="title" :class="'map-control settings-control map-control-'+(isMobile()?'bottom':'top')">
+		<div v-if="project?.id" id="title" :class="'panel-control panel-control-'+(isMobile()?'bottom':'top')">
 			<span>{{ project.name }}</span>
 		</div>
 	</div>