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

Follow UI improvements

Browse Source 
- Stick to bottom of screen
- Prevent layout shift when player visibility changes
- Increase image size
This commit is contained in:
James Lyne 2022-01-16 00:50:10 +00:00
parent cfda231048
commit 846f894502
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/sidebar/FollowTargetSection.vue
View File

@ -19,12 +19,12 @@
<h2>{{ heading }}</h2> <h2>{{ heading }}</h2>
<div :class="{'following__target': true, 'following__target--hidden': target.hidden}"> <div :class="{'following__target': true, 'following__target--hidden': target.hidden}">
<img v-if="imagesEnabled" width="32" height="32" class="target__icon" :src="image" alt="" /> <img v-if="imagesEnabled" width="48" height="48" class="target__icon" :src="image" alt="" />
<span class="target__name" v-html="target.displayName"></span> <span class="target__name" v-html="target.displayName"></span>
<span class="target__status">{{ status }}</span> <span class="target__status">{{ status }}</span>
<span class="target__location" v-show="!target.hidden" v-clipboard:copy="location" <span class="target__location" v-clipboard:copy="location"
v-clipboard:success="copySuccess" v-clipboard:success="copySuccess"
v-clipboard:error="copyError">{{ location }}</span> v-clipboard:error="copyError">{{ location }}&#8288;</span>
<button class="target__unfollow" type="button" :title="messageUnfollowTitle" <button class="target__unfollow" type="button" :title="messageUnfollowTitle"
@click.prevent="unfollow" :aria-label="messageUnfollow"> @click.prevent="unfollow" :aria-label="messageUnfollow">
<SvgIcon name="cross"></SvgIcon> <SvgIcon name="cross"></SvgIcon>
@ -74,7 +74,7 @@ export default defineComponent({
location = computed(() => { location = computed(() => {
if (props.target.hidden) { if (props.target.hidden) {
return messageHidden.value; return '';
} }
return `${Math.floor(props.target.location.x)}, ${props.target.location.y}, ${Math.floor(props.target.location.z)}`; return `${Math.floor(props.target.location.x)}, ${props.target.location.y}, ${Math.floor(props.target.location.z)}`;
@ -118,8 +118,10 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.sidebar__section.following { .sidebar__section.following {
margin-top: auto; margin-top: auto;
min-height: 0;
flex: 0 0 auto; flex: 0 0 auto;
position: sticky;
bottom: 0.2rem;
z-index: 3;
.following__target { .following__target {
display: grid; display: grid;