Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make entire sidebar scrollable instead of individual sections

Browse Source
This commit is contained in:
James Lyne 2021-05-25 19:26:51 +01:00
parent eaecba10c6
commit af8292f872
2 changed files with 28 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/Sidebar.vue
View File

@ -26,10 +26,12 @@
<SvgIcon name="players"></SvgIcon> <SvgIcon name="players"></SvgIcon>
</button> </button>
</header> </header>
<div class="sidebar__content">
<ServerList v-if="serverCount > 1" v-show="currentlyVisible.has('maps')"></ServerList> <ServerList v-if="serverCount > 1" v-show="currentlyVisible.has('maps')"></ServerList>
<WorldList v-if="mapCount > 1" v-show="currentlyVisible.has('maps')"></WorldList> <WorldList v-if="mapCount > 1" v-show="currentlyVisible.has('maps')"></WorldList>
<PlayerList v-if="previouslyVisible.has('players')" v-show="currentlyVisible.has('players')"></PlayerList> <PlayerList v-if="previouslyVisible.has('players')" v-show="currentlyVisible.has('players')"></PlayerList>
<FollowTarget v-if="following" v-show="followActive" :target="following"></FollowTarget> <FollowTarget v-if="following" v-show="followActive" :target="following"></FollowTarget>
</div>
</aside> </aside>
</template> </template>
@ -105,7 +107,6 @@ export default defineComponent({
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1rem; padding: 1rem;
width: 23rem;
font-size: 1.5rem; font-size: 1.5rem;
will-change: transform; will-change: transform;
pointer-events: none; pointer-events: none;
@ -155,16 +156,26 @@ export default defineComponent({
} }
} }
.sidebar__content {
position: relative;
display: flex;
flex-direction: column;
flex-shrink: 1;
min-height: 0;
overflow: auto;
pointer-events: auto;
margin-right: -0.5rem;
padding: 0.2rem 0.5rem 0 0.2rem;
width: 24rem;
align-items: flex-end;
}
.sidebar__section { .sidebar__section {
@extend %panel; @extend %panel;
flex: 0 1 auto;
min-height: 10rem;
margin-bottom: 1rem; margin-bottom: 1rem;
pointer-events: auto; box-sizing: border-box;
width: 100%;
&:last-child { max-width: 23rem;
margin-bottom: 0;
}
.section__heading { .section__heading {
font-size: 2rem; font-size: 2rem;
@ -183,12 +194,8 @@ export default defineComponent({
} }
.section__content { .section__content {
flex-shrink: 1;
min-height: 0;
overflow: auto;
padding: 0 0.5rem; padding: 0 0.5rem;
margin: 0 -.5rem 1rem; margin: 0 -.5rem 1rem;
will-change: transform;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -213,6 +220,11 @@ export default defineComponent({
display: none; display: none;
} }
} }
@media (max-width: 320px) {
box-sizing: border-box;
width: 100%;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
@ -229,11 +241,6 @@ export default defineComponent({
padding-right: 6.5rem; padding-right: 6.5rem;
} }
@media (max-width: 320px) {
box-sizing: border-box;
width: 100%;
}
@media print { @media print {
display: none; display: none;
} }

6
src/components/sidebar/PlayerList.vue
View File

@ -57,9 +57,3 @@ export default defineComponent({
} }
}); });
</script> </script>
<style scoped lang="scss">
.sidebar__section.sidebar__section--players {
flex-shrink: 10;
}
</style>