<template> <div class="group-feed-component"> <div v-if="!initalLoad"> <p class="text-center mt-5 pt-5 font-weight-bold">Loading...</p> </div> <div v-else> <div class="mb-3 border-bottom"> <div class="container-xl"> <group-banner :group="group" /> <group-header-details :group="group" :isAdmin="isAdmin" :isMember="isMember" @refresh="handleRefresh" /> <group-nav-tabs :group="group" :isAdmin="isAdmin" :isMember="isMember" :atabs="atabs" /> </div> </div> <div class="container-xl group-feed-component-body"> <div class="row mb-5"> <div class="col-12 col-md-7 mt-3"> <div v-if="group.self.is_member"> <group-compose v-if="initalLoad" :profile="profile" :group-id="groupId" v-on:new-status="pushNewStatus" /> <div v-if="feed.length == 0" class="mt-3"> <div class="card card-body shadow-none border d-flex align-items-center justify-content-center" style="height: 200px;"> <p class="font-weight-bold mb-0">No posts yet!</p> </div> </div> <div v-else class="group-timeline"> <p class="font-weight-bold mb-1">Recent Posts</p> <!-- <div class="status-card-component shadow-sm mb-3 rounded-lg"> <div class="card shadow-none border rounded-0"> <div class="card-body pb-0"> <div class="media"> <img src="https://pixelfed.test/storage/avatars/321493203255693312/5a6nqo.jpg?v=2" width="42px" height="42px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar" class="rounded-circle box-shadow mr-2"> <div class="media-body"> <div class="pl-2 d-flex align-items-top"> <div> <p class="mb-0"> <a href="https://pixelfed.test/dansup" class="username font-weight-bold text-dark text-decoration-none text-break"> dansup </a> </p> <p class="mb-0"> <a href="https://pixelfed.test/groups/328821658771132416/329186991407239168" class="font-weight-light text-muted small">13h</a> <span class="text-lighter" style="padding-left: 2px; padding-right: 2px;">·</span> <span class="text-muted small"> <i class="fas fa-globe"></i> </span> </p> </div> <span class="text-right" style="flex-grow: 1;"> <button type="button" class="btn btn-link text-dark py-0"> <span class="fas fa-ellipsis-h text-lighter"></span> <span class="sr-only">Post Menu</span> </button> </span> </div> </div> </div> <div> <div> <div class=""> <p class="pt-2 text-break" style="font-size: 15px;"> Made some improvements! </p> <div class="my-3 row px-0 mx-0 card card-body my-0 py-0 border shadow-none"> <img src="https://opengraph.githubassets.com/f66d0f7bf17df4a45382b83c1ffde2f25e3d700f9d87ab8c9ec2029c3a1e16b6/pixelfed/pixelfed/pull/2865" class="img-fluid"> <div class="bg-light px-3 pt-2 pb-3"> <p class="text-muted mb-0 small">GITHUB.COM</p> <p class="mb-0" style="font-size: 16px;font-weight:500;">Update LikeController, add UndoLikePipeline and federate Undo Like ac… by dansup · Pull Request #2865 · pixelfed/pixelfed</p> <p class="mb-0 text-muted" style="font-size:14px;line-height:15px;">…tivities</p> </div> </div> <div class="border-top my-0"> <div class="d-flex justify-content-between py-2 px-4"> <button class="btn btn-link py-0 text-decoration-none text-muted"> <i class="far fa-heart mr-1"></i> Like </button> <div> <i class="far fa-comment cursor-pointer text-muted mr-1"></i> Comment </div> <div> <i class="fas fa-external-link-alt cursor-pointer text-muted mr-1"></i> Share </div> </div> </div> </div> </div> </div> </div> </div> </div> --> <!-- OGP --> <!-- <div class="status-card-component shadow-sm mb-3 rounded-lg"> <div class="card shadow-none border rounded-0"> <div class="card-body pb-0"> <div class="media"> <img src="https://pixelfed.test/storage/avatars/321493203255693312/5a6nqo.jpg?v=2" width="42px" height="42px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar" class="rounded-circle box-shadow mr-2"> <div class="media-body"> <div class="pl-2 d-flex align-items-top"> <div> <p class="mb-0"> <a href="https://pixelfed.test/dansup" class="username font-weight-bold text-dark text-decoration-none text-break"> dansup </a> </p> <p class="mb-0"> <a href="https://pixelfed.test/groups/328821658771132416/329186991407239168" class="font-weight-light text-muted small">13h</a> <span class="text-lighter" style="padding-left: 2px; padding-right: 2px;">·</span> <span class="text-muted small"> <i class="fas fa-globe"></i> </span> </p> </div> <span class="text-right" style="flex-grow: 1;"> <button type="button" class="btn btn-link text-dark py-0"> <span class="fas fa-ellipsis-h text-lighter"></span> <span class="sr-only">Post Menu</span> </button> </span> </div> </div> </div> <div> <div> <div class=""> <div class="my-3 row px-0 mx-0 card card-body my-0 py-0 border shadow-none"> <img src="https://www.ctvnews.ca/polopoly_fs/1.5533318.1628281952!/httpImage/image.jpg_gen/derivatives/landscape_620/image.jpg" class="img-fluid"> <div class="bg-light px-3 pt-2 pb-3"> <p class="text-muted mb-0 small">CTVNEWS.CA</p> <p class="mb-0" style="font-size: 16px;font-weight:500;">No charges against Alberta man who fatally shot home intruder: RCMP</p> <p class="mb-0 text-muted" style="font-size:14px;line-height:15px;">No charges will be laid against an Alberta man who shot and killed an intruder after being beaten with a baseball bat, RCMP announced Friday.</p> </div> </div> <div class="border-top my-0"> <div class="d-flex justify-content-between py-2 px-4"> <button class="btn btn-link py-0 text-decoration-none text-muted"> <i class="far fa-heart mr-1"></i> Like </button> <div> <i class="far fa-comment cursor-pointer text-muted mr-1"></i> Comment </div> <div> <i class="fas fa-external-link-alt cursor-pointer text-muted mr-1"></i> Share </div> </div> </div> </div> </div> </div> </div> </div> </div> --> <!-- SOUNDCLOUD --> <!-- <div class="status-card-component shadow-sm mb-3 rounded-lg"> <div class="card shadow-none border rounded-0"> <div class="card-body pb-0"> <div class="media"> <img src="https://pixelfed.test/storage/avatars/321493203255693312/5a6nqo.jpg?v=2" width="42px" height="42px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar" class="rounded-circle box-shadow mr-2"> <div class="media-body"> <div class="pl-2 d-flex align-items-top"> <div> <p class="mb-0"> <a href="https://pixelfed.test/dansup" class="username font-weight-bold text-dark text-decoration-none text-break"> dansup </a> </p> <p class="mb-0"> <a href="https://pixelfed.test/groups/328821658771132416/329186991407239168" class="font-weight-light text-muted small">13h</a> <span class="text-lighter" style="padding-left: 2px; padding-right: 2px;">·</span> <span class="text-muted small"> <i class="fas fa-globe"></i> </span> </p> </div> <span class="text-right" style="flex-grow: 1;"> <button type="button" class="btn btn-link text-dark py-0"> <span class="fas fa-ellipsis-h text-lighter"></span> <span class="sr-only">Post Menu</span> </button> </span> </div> </div> </div> <div> <div> <div class=""> <p class="pt-2 text-break" style="font-size: 15px;"> What does everyone think?? </p> <div class="my-3 row p-0 m-0"> <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/34019569&color=0066cc"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/the-bugle" title="The Bugle" target="_blank" style="color: #cccccc; text-decoration: none;">The Bugle</a> · <a href="https://soundcloud.com/the-bugle/bugle-179-playas-gon-play" title="Bugle 179 - Playas gon play" target="_blank" style="color: #cccccc; text-decoration: none;">Bugle 179 - Playas gon play</a></div> </div> <div class="border-top my-0"> <div class="d-flex justify-content-between py-2 px-4"> <button class="btn btn-link py-0 text-decoration-none text-muted"> <i class="far fa-heart mr-1"></i> Like </button> <div> <i class="far fa-comment cursor-pointer text-muted mr-1"></i> Comment </div> <div> <i class="fas fa-external-link-alt cursor-pointer text-muted mr-1"></i> Share </div> </div> </div> </div> </div> </div> </div> </div> </div> --> <!-- YOUTUBE --> <!-- <div class="status-card-component shadow-sm mb-3 rounded-lg"> <div class="card shadow-none border rounded-0"> <div class="card-body pb-0"> <div class="media"> <img src="https://pixelfed.test/storage/avatars/321493203255693312/5a6nqo.jpg?v=2" width="42px" height="42px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar" class="rounded-circle box-shadow mr-2"> <div class="media-body"> <div class="pl-2 d-flex align-items-top"> <div> <p class="mb-0"> <a href="https://pixelfed.test/dansup" class="username font-weight-bold text-dark text-decoration-none text-break"> dansup </a> </p> <p class="mb-0"> <a href="https://pixelfed.test/groups/328821658771132416/329186991407239168" class="font-weight-light text-muted small">13h</a> <span class="text-lighter" style="padding-left: 2px; padding-right: 2px;">·</span> <span class="text-muted small"> <i class="fas fa-globe"></i> </span> </p> </div> <span class="text-right" style="flex-grow: 1;"> <button type="button" class="btn btn-link text-dark py-0"> <span class="fas fa-ellipsis-h text-lighter"></span> <span class="sr-only">Post Menu</span> </button> </span> </div> </div> </div> <div> <div> <div class=""> <p class="pt-2 text-break" style="font-size: 15px;"> What does everyone think?? </p> <div class="my-3 row p-0 m-0"> <iframe width="100%" height="315" src="https://www.youtube.com/embed/lH78Tb0r_f8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <div class="border-top my-0"> <div class="d-flex justify-content-between py-2 px-4"> <button class="btn btn-link py-0 text-decoration-none text-muted"> <i class="far fa-heart mr-1"></i> Like </button> <div> <i class="far fa-comment cursor-pointer text-muted mr-1"></i> Comment </div> <div> <i class="fas fa-external-link-alt cursor-pointer text-muted mr-1"></i> Share </div> </div> </div> </div> </div> </div> </div> </div> </div> --> <!-- PHOTOS --> <!-- <div class="status-card-component shadow-sm mb-3 rounded-lg"> <div class="card shadow-none border rounded-0"> <div class="card-body pb-0"> <div class="media"> <img src="https://pixelfed.test/storage/avatars/321493203255693312/5a6nqo.jpg?v=2" width="42px" height="42px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar" class="rounded-circle box-shadow mr-2"> <div class="media-body"> <div class="pl-2 d-flex align-items-top"> <div> <p class="mb-0"> <a href="https://pixelfed.test/dansup" class="username font-weight-bold text-dark text-decoration-none text-break"> dansup </a> </p> <p class="mb-0"> <a href="https://pixelfed.test/groups/328821658771132416/329186991407239168" class="font-weight-light text-muted small">13h</a> <span class="text-lighter" style="padding-left: 2px; padding-right: 2px;">·</span> <span class="text-muted small"> <i class="fas fa-globe"></i> </span> </p> </div> <span class="text-right" style="flex-grow: 1;"> <button type="button" class="btn btn-link text-dark py-0"> <span class="fas fa-ellipsis-h text-lighter"></span> <span class="sr-only">Post Menu</span> </button> </span> </div> </div> </div> <div> <div> <div class=""> <p class="pt-2 text-break" style="font-size: 15px;"> What does everyone think?? </p> <div class="mb-1 row px-3"> <div class="col px-0"> <img src="https://pixelfed.test/img/sample-post.jpeg" class="img-fluid border rounded-lg"> </div> <div class="col px-0"> <img src="https://pixelfed.test/img/sample-post.jpeg" class="img-fluid border rounded-lg"> </div> </div> <div class="mb-3 row px-3"> <div class="col px-0"> <img src="https://pixelfed.test/img/sample-post.jpeg" class="img-fluid border rounded-lg"> </div> <div class="col px-0"> <img src="https://pixelfed.test/img/sample-post.jpeg" class="img-fluid border rounded-lg"> </div> </div> <div class="border-top my-0"> <div class="d-flex justify-content-between py-2 px-4"> <button class="btn btn-link py-0 text-decoration-none text-muted"> <i class="far fa-heart mr-1"></i> Like </button> <div> <i class="far fa-comment cursor-pointer text-muted mr-1"></i> Comment </div> <div> <i class="fas fa-external-link-alt cursor-pointer text-muted mr-1"></i> Share </div> </div> </div> </div> </div> </div> </div> </div> </div> --> <group-status v-for="(status, index) in feed" :key="'gs:' + status.id + index" :prestatus="status" :profile="profile" :group-id="groupId" v-on:comment-focus="commentFocus(index)" v-on:status-delete="statusDelete(index)" v-on:likes-modal="showLikesModal(index)" /> <b-modal ref="likeBox" size="sm" centered hide-footer title="Likes" body-class="list-group-flush p-0"> <div class="list-group py-1" style="max-height:300px;overflow-y:auto;"> <div class="list-group-item border-top-0 border-left-0 border-right-0 py-2" :class="{ 'border-bottom-0': index + 1 == likes.length }" v-for="(user, index) in likes" :key="'modal_likes_'+index"> <div class="media align-items-center"> <a :href="user.url"> <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg';"> </a> <div class="media-body"> <p class="mb-0" style="font-size: 14px"> <a :href="user.url" class="font-weight-bold text-dark"> {{user.username}} </a> </p> <p v-if="!user.local" class="text-muted mb-0 text-truncate mr-3" style="font-size: 14px" :title="user.acct" data-toggle="dropdown" data-placement="bottom"> <span class="font-weight-bold">{{user.acct.split('@')[0]}}</span><span class="text-lighter">@{{user.acct.split('@')[1]}}</span> </p> <p v-else class="text-muted mb-0 text-truncate" style="font-size: 14px"> {{user.display_name}} </p> </div> </div> </div> <infinite-loading @infinite="infiniteLikesHandler" :distance="800" spinner="spiral"> <div slot="no-more"></div> <div slot="no-results"></div> </infinite-loading> </div> </b-modal> <div v-if="feed.length > 2" :distance="800"> <infinite-loading @infinite="infiniteFeed"> <div slot="no-more"></div> <div slot="no-results"></div> </infinite-loading> </div> </div> </div> <div v-else> <div class="card card-body mt-3 shadow-none border d-flex align-items-center justify-content-center" style="height: 100px;"> <p class="lead mb-0">Join to participate in this group.</p> </div> </div> </div> <div class="col-12 col-md-5"> <group-info-card :group="group" /> </div> </div> <search-modal ref="searchModal" :group="group" :profile="profile" /> <invite-modal ref="inviteModal" :group="group" :profile="profile" /> </div> </div> </div> </template> <script type="text/javascript"> import StatusCard from '~/partials/StatusCard.vue'; import GroupCompose from './partials/GroupCompose.vue'; import GroupStatus from './partials/GroupStatus.vue'; import GroupInfoCard from './partials/GroupInfoCard.vue'; import LeaveGroup from './partials/LeaveGroup.vue'; import SearchModal from './partials/GroupSearchModal.vue'; import InviteModal from './partials/GroupInviteModal.vue'; import GroupBanner from '@/groups/partials/Page/GroupBanner.vue'; import GroupNavTabs from '@/groups/partials/Page/GroupNavTabs.vue'; import GroupHeaderDetails from '@/groups/partials/Page/GroupHeaderDetails.vue'; export default { props: { groupId: { type: String }, path: { type: String }, permalinkMode: { type: Boolean, default: false }, permalinkId: { type: String, } }, components: { 'status-card': StatusCard, 'group-status': GroupStatus, 'group-compose': GroupCompose, 'group-info-card': GroupInfoCard, 'leave-group': LeaveGroup, 'search-modal': SearchModal, 'invite-modal': InviteModal, 'group-banner': GroupBanner, 'group-header-details': GroupHeaderDetails, 'group-nav-tabs': GroupNavTabs, }, data() { return { initalLoad: false, profile: undefined, group: {}, isMember: false, isAdmin: false, tab: 'feed', requestingMembership: false, composeText: null, feed: [], ids: [], maxId: null, status: undefined, likes: [], likesPage: 1, likesId: undefined, renderIdx: 1, atabs: { moderation_count: 0, request_count: 0 } }; }, created() { this.fetchSelf(); }, methods: { fetchSelf() { axios.get('/api/v1/accounts/verify_credentials?_pe=1') .then(res => { this.profile = res.data; }) .catch(err => { window.location.href = '/login?_next=' + encodeURIComponent(window.location.href); }) .finally(() => { this.fetchGroup(); }); }, initObservers() { // let video = document.querySelectorAll('video'); // let isPaused = false; // let observer = new IntersectionObserver((entries, observer) => { // entries.forEach(entry => { // if (entry.intersectionRatio !=1 && !video.paused){ // video.pause(); // isPaused = true; // } // else if (isPaused) { // video.play(); // isPaused = false // } // }); // }, {threshold: 1}); // observer.observe(video); }, fetchGroup() { axios.get('/api/v0/groups/' + this.groupId) .then(res => { this.group = res.data; this.isMember = res.data.self.is_member; this.isAdmin = ['founder', 'admin'].includes(res.data.self.role); if(this.isAdmin) { this.fetchAdminTabs(); } if(this.path) { if(this.isMember && ['about', 'topics', 'members', 'events', 'media', 'polls'].includes(this.path)) { setTimeout(() => { this.tab = this.path; this.initalLoad = true; }, 500); } else if (this.isAdmin && ['insights', 'moderation'].includes(this.path)) { setTimeout(() => { this.tab = this.path; this.initalLoad = true; }, 500); } else { history.pushState(null, null, this.group.url); this.initalLoad = true; } } else { this.initalLoad = true; } }) .catch(err => { window.location.href = '/groups/unavailable'; }) .finally(() => { this.fetchFeed(); }); }, fetchAdminTabs() { axios.get('/api/v0/groups/' + this.groupId + '/atabs') .then(res => { this.atabs = res.data; }) }, fetchFeed() { axios.get('/api/v0/groups/' + this.groupId + '/feed') .then(res => { let self = this; if(res.data && res.data.length) { this.feed = res.data; this.maxId = this.feed[this.feed.length - 1].id; res.data.forEach(d => { if(self.ids.indexOf(d.id) == -1) { self.ids.push(d.id); } }); } this.initObservers(); }) }, fetchPermalink() { axios.get('/api/v0/groups/status', { params: { gid: this.groupId, sid: this.permalinkId } }).then(res => { this.status = res.data; if(this.status.in_reply_to_id) { this.status.showCommentDrawer = true; } }).catch(err => { this.permalinkMode = false; this.fetchFeed(); }); }, handleRefresh() { this.initialLoad = false; this.init(); this.renderIdx++; }, timestampFormat(date, showTime = false) { let ts = new Date(date); return showTime ? ts.toDateString() + ' · ' + ts.toLocaleTimeString() : ts.toDateString(); }, switchTab(tab) { window.scrollTo(0,0); if(tab == 'feed' && this.permalinkMode) { this.permalinkMode = false; this.fetchFeed(); } let url = tab == 'feed' ? this.group.url : this.group.url + '/' + tab; history.pushState(tab, null, url); this.tab = tab; }, joinGroup() { this.requestingMembership = true; axios.post('/api/v0/groups/'+this.groupId+'/join') .then(res => { this.requestingMembership = false; this.group = res.data; this.fetchGroup(); this.fetchFeed(); }).catch(err => { let body = err.response; if(body.status == 422) { this.tab = 'feed'; history.pushState('', null, this.group.url); this.requestingMembership = false; swal('Oops!', body.data.error, 'error'); } }); }, cancelJoinRequest() { if(!window.confirm('Are you sure you want to cancel your request to join this group?')) { return; } axios.post('/api/v0/groups/'+this.groupId+'/cjr') .then(res => { this.requestingMembership = false; }).catch(err => { let body = err.response; if(body.status == 422) { swal('Oops!', body.data.error, 'error'); } }); }, leaveGroup() { if(!window.confirm('Are you sure you want to leave this group? Any content you shared will remain accessible. You won\'t be able to rejoin for 24 hours.')) { return; } axios.post('/api/v0/groups/'+this.groupId+'/leave') .then(res => { this.tab = 'feed'; history.pushState('', null, this.group.url); this.feed = []; this.isMember = false; this.isAdmin = false; this.group.self.role = null; this.group.self.is_member = false; }); }, pushNewStatus(status) { this.feed.unshift(status); }, commentFocus(index) { let status = this.feed[index]; status.showCommentDrawer = true; }, statusDelete(index) { this.feed.splice(index, 1); }, infiniteFeed($state) { if(this.feed.length < 3) { $state.complete(); return; } let apiUrl = '/api/v0/groups/' + this.groupId + '/feed'; axios.get(apiUrl, { params: { limit: 6, max_id: this.maxId }, }).then(res => { if (res.data.length) { // let self = this; // data.forEach(d => { // if(self.ids.indexOf(d.id) == -1) { // if(self.maxId >= d.id) { // self.maxId = d.id; // } // self.ids.push(d.id); // self.feed.push(d); // } // }); let posts = res.data.filter(p => this.ids.indexOf(p.id) == -1); this.maxId = posts[posts.length - 1].id; this.feed.push(...posts); this.ids.push(...posts.map(p => p.id)); setTimeout(() => { this.initObservers(); }, 1000); $state.loaded(); } else { $state.complete(); } }); }, decrementModCounter(amount) { let count = this.atabs.moderation_count; if(count == 0) { return; } this.atabs.moderation_count = (count - amount); }, setModCounter(amount) { this.atabs.moderation_count = amount; }, decrementJoinRequestCount(amount = 1) { let count = this.atabs.request_count; this.atabs.request_count = (count - amount) }, incrementMemberCount() { let count = this.group.member_count; this.group.member_count = (count + 1); }, copyLink() { window.App.util.clipboard(this.group.url); this.$bvToast.toast(`Succesfully copied group url to clipboard`, { title: 'Success', variant: 'success', autoHideDelay: 5000 }); }, reportGroup() { swal('Report Group', 'Are you sure you want to report this group?') .then(res => { if(res) { location.href = `/i/report?id=${this.group.id}&type=group`; } }); }, showSearchModal() { event.currentTarget.blur(); this.$refs.searchModal.open(); }, showInviteModal() { event.currentTarget.blur(); this.$refs.inviteModal.open(); }, showLikesModal(index) { this.likesId = this.feed[index].id; axios.get('/api/v0/groups/'+this.groupId+'/likes/'+this.likesId) .then(res => { this.likes = res.data; this.likesPage++; this.$refs.likeBox.show(); }); }, infiniteLikesHandler($state) { if(this.likes.length < 3) { $state.complete(); return; } axios.get('/api/v0/groups/'+this.groupId+'/likes/'+this.likesId, { params: { page: this.likesPage, }, }).then(res => { if (res.data.length > 0) { this.likes.push(...res.data); this.likesPage++; if(res.data.length != 10) { $state.complete(); } else { $state.loaded(); } } else { $state.complete(); } }); }, } } </script> <style lang="scss"> .group-feed-component { &-header { display: flex; justify-content: space-between; align-items: flex-end; padding: 1rem 0; background-color: transparent; .cta-btn { width: 190px; } } .header-jumbotron { background-color: #F3F4F6; height: 320px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } &-menu { display: flex; justify-content: space-between; align-items: center; padding: 0; &-nav { .nav-item { .nav-link { padding-top: 1rem; padding-bottom: 1rem; color: #6c757d; &.active { color: #2c78bf; border-bottom: 2px solid #2c78bf; } } } &:not(last-child) { .nav-item { margin-right: 14px; } } } } &-body { min-height: 40vh; } .member-label { padding: 2px 5px; font-size: 12px; color: rgba(75, 119, 190, 1); background:rgba(137, 196, 244, 0.2); border:1px solid rgba(137, 196, 244, 0.3); font-weight:400; text-transform: capitalize; } .dropdown-item { font-weight: 600; } .remote-label { padding: 2px 5px; font-size: 12px; color: #B45309; background: #FEF3C7; border: 1px solid #FCD34D; font-weight: 400; text-transform: capitalize; } } </style>