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 @@ - + @@ -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()), 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; + } } \ No newline at end of file