From 0ed11db15ce29e895af19472da6ebedf4c83a507 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Sun, 20 Dec 2020 18:52:38 +0000
Subject: [PATCH] Show follow status alongside player list on small screens

---
 src/components/Sidebar.vue              | 15 +++++++++++----
 src/components/sidebar/FollowTarget.vue |  4 ++++
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 1bc98ac..9ae1ba0 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -32,7 +32,7 @@
 		</header>
 		<WorldList v-if="mapCount > 1" v-show="menusActive.has('maps')"></WorldList>
 		<PlayerList v-show="menusActive.has('players')"></PlayerList>
-		<FollowTarget v-if="following" :target="following"></FollowTarget>
+		<FollowTarget v-if="following" v-show="followActive" :target="following"></FollowTarget>
 	</aside>
 </template>
 
@@ -67,7 +67,11 @@ export default defineComponent({
 
 					menusActive.add(menu);
 				}
-			};
+			},
+			followActive = computed(() => {
+				//Show following alongside playerlist on small screens
+				return (!smallScreen.value && following) || (smallScreen.value && menusActive.has('players'));
+			});
 
 		let menusActive = reactive(new Set<string>()),
 			smallScreen = ref(false),
@@ -83,11 +87,12 @@ export default defineComponent({
 			if(newValue && menusActive.size > 1) {
 				menusActive.clear();
 			}
-		})
+		});
 
 		return {
 			mapCount,
 			menusActive,
+			followActive,
 			toggleMenu,
 			following
 		}
@@ -186,7 +191,9 @@ export default defineComponent({
 	}
 
 	@media (max-width: 25rem), (max-height: 30rem) {
-		padding: 0.5rem;
+		padding-top: 0.5rem;
+		padding-bottom: 0.5rem;
+		padding-left: 0.5rem;
 	}
 
 	@media (max-width: 25rem) {
diff --git a/src/components/sidebar/FollowTarget.vue b/src/components/sidebar/FollowTarget.vue
index ae9eba9..1806461 100644
--- a/src/components/sidebar/FollowTarget.vue
+++ b/src/components/sidebar/FollowTarget.vue
@@ -101,5 +101,9 @@ export default defineComponent({
 				}
 			}
 		}
+
+		@media (max-width: 30rem), (max-height: 30rem) {
+			margin-top: 0;
+		}
 	}
 </style>
\ No newline at end of file