mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-13 19:42:01 +00:00
finished survey and profile panel
This commit is contained in:
supertiger1234
parent
0cb94dcba9
commit
ef32c8f528
17 changed files with 916 additions and 403 deletions
922
package-lock.json
generated
922
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -30,7 +30,7 @@
|
|||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.0.5",
|
||||
"@vue/cli-plugin-eslint": "^3.0.5",
|
||||
"@vue/cli-service": "^3.5.1",
|
||||
"@vue/cli-service": "^3.6.0",
|
||||
"@vue/eslint-plugin": "^4.2.0",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"eslint": "^5.8.0",
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-icon survay-button" @click="openSettings">
|
||||
<div class="setting-icon survay-button" v-if="!user.survey_completed || user.survey_completed === false" @click="openSurvey">
|
||||
<div class="survay-inner">
|
||||
<i class="material-icons">error</i>
|
||||
</div>
|
||||
|
|
@ -44,10 +44,15 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
closeMenus() {
|
||||
this.status.isPoppedOut = false;
|
||||
},
|
||||
openSurvey(){
|
||||
this.$store.dispatch("setPopoutVisibility", {
|
||||
name: "surveyPopout",
|
||||
visibility: true
|
||||
});
|
||||
},
|
||||
async changeStatus (status){
|
||||
// emit to server to change their status.
|
||||
console.log(status)
|
||||
|
|
|
|||
|
|
@ -7,15 +7,17 @@
|
|||
<image-large-preview key="ilp" v-if="popouts.ImagePreviewURL"/>
|
||||
<drag-drop-file-upload-dialog key="ddfud" v-if="showUploadDrapDrop"/>
|
||||
<user-information-popout key="uip" v-if="popouts.userInformationPopoutID"/>
|
||||
<take-survey-popout key="tsp" v-if="popouts.surveyPopout"/>
|
||||
</transition-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { bus } from "@/main";
|
||||
|
||||
//popouts
|
||||
import userInformationPopout from "@/components/app/userInformationPopout.vue";
|
||||
import Settings from "@/components/app/Settings.vue";
|
||||
import TakeSurveyPopout from "@/components/app/TakeSurveyPopout.vue";
|
||||
import uploadDialog from "@/components/app/uploadDialog.vue";
|
||||
import GDriveLinkMenu from "@/components/app/GDriveLinkMenu.vue";
|
||||
import imageLargePreview from "@/components/app/imageLargePreview.vue";
|
||||
|
|
@ -28,7 +30,8 @@ export default {
|
|||
GDriveLinkMenu,
|
||||
userInformationPopout,
|
||||
DragDropFileUploadDialog,
|
||||
imageLargePreview
|
||||
imageLargePreview,
|
||||
TakeSurveyPopout
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -49,6 +49,9 @@ export default {
|
|||
watch: {
|
||||
updateItems() {
|
||||
this.selected = null;
|
||||
},
|
||||
itemSelected(){
|
||||
this.selected = this.itemSelected;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="survey">
|
||||
<div class="survey" v-show="previousLoaded">
|
||||
<div class="title">
|
||||
<i class="material-icons">error</i>
|
||||
Take Survey
|
||||
|
|
@ -64,9 +64,10 @@ export default {
|
|||
components: { DropDown },
|
||||
data() {
|
||||
return {
|
||||
surveyItems,
|
||||
surveyItems: Object.assign({},surveyItems),
|
||||
surveyErrorMessage: null,
|
||||
surveyValidMessage: null,
|
||||
previousLoaded: false,
|
||||
selected: {
|
||||
name: "",
|
||||
gender: null,
|
||||
|
|
@ -79,12 +80,11 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
async surveySubmitButton() {
|
||||
|
||||
this.surveyValidMessage = null;
|
||||
this.surveyErrorMessage = null;
|
||||
//checks if all drop boxes are not null.
|
||||
for (let item in this.selected) {
|
||||
if (this.selected[item] === null) {
|
||||
if (this.selected[item] === null && item !== "country") {
|
||||
this.surveyErrorMessage =
|
||||
"Make sure you select / fill in all fields!";
|
||||
return;
|
||||
|
|
@ -96,10 +96,12 @@ export default {
|
|||
return;
|
||||
}
|
||||
this.surveyValidMessage = "Saving..."
|
||||
//gets the country index after unfiltering.
|
||||
const selectedCountryName = this.filterCountry[this.selected.country].name;
|
||||
const countryIndex = this.surveyItems.countries.findIndex(el => el.name == selectedCountryName);
|
||||
|
||||
//gets the country index after unfiltering.
|
||||
let countryIndex = undefined;
|
||||
if (this.filterCountry[this.selected.country]) {
|
||||
const selectedCountryName = this.filterCountry[this.selected.country].name;
|
||||
countryIndex = this.surveyItems.countries.findIndex(el => el.name == selectedCountryName);
|
||||
}
|
||||
|
||||
const { ok, error, result } = await userService.setSurvey({
|
||||
name: this.selected.name,
|
||||
|
|
@ -117,6 +119,26 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
async mounted(){
|
||||
const {ok, error, result} = await userService.getSurvey();
|
||||
if (ok) {
|
||||
this.selected.continent = result.data.result.continent
|
||||
this.selected.age = result.data.result.age
|
||||
this.selected.name = result.data.result.name
|
||||
this.selected.about_me = result.data.result.about_me
|
||||
this.selected.gender = result.data.result.gender
|
||||
//filter the country
|
||||
if(result.data.result.country) {
|
||||
setTimeout(() => {
|
||||
const continentCode = surveyItems.continents[this.selected.continent].code;
|
||||
const filter = surveyItems.countries.filter(e => e.code === continentCode);
|
||||
const countryName = surveyItems.countries[result.data.result.country].name;
|
||||
this.selected.country = filter.findIndex(e => e.name === countryName);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
this.previousLoaded = true;
|
||||
},
|
||||
computed: {
|
||||
filterCountry() {
|
||||
const selectedContinentIndex = this.selected.continent;
|
||||
|
|
@ -124,8 +146,9 @@ export default {
|
|||
selectedContinentIndex
|
||||
];
|
||||
const code = selectedContinent.code;
|
||||
|
||||
return this.surveyItems.countries.filter(element => {
|
||||
return element.code == code;
|
||||
return element.code == code || !element.code;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
104
src/components/app/TakeSurveyPopout.vue
Normal file
104
src/components/app/TakeSurveyPopout.vue
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<div class="darken-background">
|
||||
<div class="box">
|
||||
<div class="survay-icon">
|
||||
<i class="material-icons">error</i>
|
||||
</div>
|
||||
<div class="text">There is a survey you can complete about yourself. Would you like to take it?</div>
|
||||
<div class="text">You can always take the survey again by going to settings.</div>
|
||||
<div class="buttons">
|
||||
<div class="button warning" @click="laterButtonClickEvent">Later</div>
|
||||
<div class="button valid" @click="TakeThereClickEvent">Take Me There</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userService from "@/services/userService.js";
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
close() {
|
||||
this.$store.dispatch("setPopoutVisibility", {
|
||||
name: "surveyPopout",
|
||||
visibility: false
|
||||
});
|
||||
},
|
||||
laterButtonClickEvent(){
|
||||
userService.skipSurvey()
|
||||
this.$store.dispatch('surveyCompleted')
|
||||
this.close();
|
||||
},
|
||||
TakeThereClickEvent(){
|
||||
this.close();
|
||||
this.$store.dispatch('surveyCompleted')
|
||||
this.$store.dispatch('setPopoutVisibility', {name: 'settings', visibility: true})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.darken-background {
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.541);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
color: white;
|
||||
}
|
||||
.box {
|
||||
height: 330px;
|
||||
width: 400px;
|
||||
display: flex;
|
||||
margin: auto;
|
||||
background-color: rgba(43, 43, 43, 0.959);
|
||||
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.507);
|
||||
padding: 10px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.survay-icon .material-icons{
|
||||
color: cyan;
|
||||
font-size: 120px;
|
||||
}
|
||||
.survay-icon {
|
||||
margin: auto;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
}
|
||||
.button {
|
||||
padding: 10px;
|
||||
margin: 3px;
|
||||
background: rgb(27, 133, 255);
|
||||
border-radius: 5px;
|
||||
transition: 0.3s;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
.valid {
|
||||
background: rgba(27, 133, 255, 0.767);
|
||||
}
|
||||
.valid:hover{
|
||||
background: rgb(27, 133, 255);
|
||||
}
|
||||
.warning {
|
||||
background: rgba(255, 27, 27, 0.589)
|
||||
}
|
||||
.warning:hover{
|
||||
background: rgb(255, 27, 27)
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -75,6 +75,11 @@ export default {
|
|||
|
||||
|
||||
<style scoped>
|
||||
.username{
|
||||
width: 201px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.friend {
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.137);
|
||||
|
|
@ -135,6 +140,7 @@ export default {
|
|||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
transition: 0.3s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.information{
|
||||
margin: auto;
|
||||
|
|
|
|||
|
|
@ -50,6 +50,11 @@ export default {
|
|||
|
||||
|
||||
<style scoped>
|
||||
.username{
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.pending-friend {
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.137);
|
||||
|
|
@ -75,6 +80,7 @@ export default {
|
|||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.information{
|
||||
margin: auto;
|
||||
|
|
|
|||
|
|
@ -42,10 +42,74 @@
|
|||
<div class="material-icons">block</div>Block
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="cross"><i class="material-icons">close</i></div>
|
||||
</div>
|
||||
<div class="about-me-box">
|
||||
<spinner v-if="!user"/>
|
||||
<div class="title" v-else>About {{user.username}}</div>
|
||||
<div class="about-me-box" v-if="user && user.about_me">
|
||||
<div class="title">About {{user.username}}</div>
|
||||
<div class="about-me-inner">
|
||||
<div class="about-me-detail" v-if="user.about_me.name">
|
||||
<div class="about-me-title">
|
||||
<div class="main-title-about-me">Name:</div>
|
||||
<div class="emoji-about-me"></div>
|
||||
{{user.about_me.name}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-me-detail" v-if="user.about_me.gender == 0 || user.about_me.gender">
|
||||
<div class="about-me-title">
|
||||
<div class="main-title-about-me">Gender:</div>
|
||||
<div
|
||||
class="emoji-about-me"
|
||||
v-html="emojiParse(surveyItems.gender[user.about_me.gender].emoji)"
|
||||
></div>
|
||||
{{surveyItems.gender[user.about_me.gender].name}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-me-detail" v-if="user.about_me.age == 0 || user.about_me.age">
|
||||
<div class="about-me-title">
|
||||
<div class="main-title-about-me">Age:</div>
|
||||
<div
|
||||
class="emoji-about-me"
|
||||
v-html="emojiParse(surveyItems.age[user.about_me.age].emoji)"
|
||||
></div>
|
||||
{{surveyItems.age[user.about_me.age].name}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="about-me-detail"
|
||||
v-if="user.about_me.continent == 0 || user.about_me.continent"
|
||||
>
|
||||
<div class="about-me-title">
|
||||
<div class="main-title-about-me">Continent:</div>
|
||||
<div
|
||||
class="emoji-about-me"
|
||||
v-html="emojiParse(surveyItems.continents[user.about_me.continent].emoji)"
|
||||
></div>
|
||||
{{surveyItems.continents[user.about_me.continent].name}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-me-detail" v-if="user.about_me.country == 0 || user.about_me.country">
|
||||
<div class="about-me-title">
|
||||
<div class="main-title-about-me">Country:</div>
|
||||
<div
|
||||
class="emoji-about-me"
|
||||
v-html="emojiParse(surveyItems.countries[user.about_me.country].emoji)"
|
||||
></div>
|
||||
{{surveyItems.countries[user.about_me.country].name}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-me-detail" v-if="user.about_me.about_me">
|
||||
<div class="about-me-title about_me">
|
||||
<div class="main-title-about-me">About Me:</div>
|
||||
<div class="emoji-about-me"></div>
|
||||
<div class="about-me-format" v-html="formatAboutMe(user.about_me.about_me)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -56,10 +120,14 @@ import Spinner from "@/components/Spinner.vue";
|
|||
import profilePicture from "@/components/ProfilePictureTemplate.vue";
|
||||
import userService from "@/services/userService.js";
|
||||
import relationshipService from "@/services/RelationshipService.js";
|
||||
import surveyItems from "@/utils/surveyItems.js";
|
||||
import emojiParser from "@/utils/emojiParser.js";
|
||||
import messageFormatter from "@/utils/messageFormatter.js";
|
||||
export default {
|
||||
components: { Spinner, profilePicture },
|
||||
data() {
|
||||
return {
|
||||
surveyItems: Object.assign({}, surveyItems),
|
||||
user: null,
|
||||
avatarDomain: config.domain + "/avatars/"
|
||||
};
|
||||
|
|
@ -92,6 +160,13 @@ export default {
|
|||
uniqueID: this.uniqueID,
|
||||
channelName: this.user.username
|
||||
});
|
||||
},
|
||||
emojiParse(emoji) {
|
||||
if (emoji.startsWith("<img")) return emoji;
|
||||
return emojiParser.replaceEmojis(emoji);
|
||||
},
|
||||
formatAboutMe(string) {
|
||||
return messageFormatter(string);
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
|
|
@ -117,8 +192,19 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
.about-me-box{
|
||||
.cross {
|
||||
margin: auto;
|
||||
opacity: 0.1;
|
||||
}
|
||||
.cross .material-icons {
|
||||
font-size: 150px;
|
||||
}
|
||||
.about_me {
|
||||
flex-direction: column;
|
||||
align-items: initial !important;
|
||||
font-size: 15px;
|
||||
}
|
||||
.about-me-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(31, 31, 31, 0.704);
|
||||
|
|
@ -126,6 +212,30 @@ export default {
|
|||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
margin-left: 10px;
|
||||
overflow: auto;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.about-me-detail {
|
||||
margin-top: 10px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.about-me-title {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.about-me-format {
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.emoji-about-me {
|
||||
margin-left: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.main-title-about-me {
|
||||
color: rgb(179, 179, 179);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -229,4 +339,42 @@ export default {
|
|||
.tag {
|
||||
color: grey;
|
||||
}
|
||||
@media (max-width: 815px) {
|
||||
.box {
|
||||
flex-direction: column;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.about-me-box {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-top: 10px;
|
||||
flex-shrink: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
.inner {
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
height: initial;
|
||||
}
|
||||
.bottom {
|
||||
flex-shrink: 0;
|
||||
height: initial;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.bottom .button {
|
||||
margin: 2px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
height: 100px;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: 1;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,7 +4,13 @@ export default {
|
|||
get (uniqueID) {
|
||||
return wrapper(instance().get(`user/${uniqueID}`))
|
||||
},
|
||||
getSurvey() {
|
||||
return wrapper(instance().get('/user/survey'));
|
||||
},
|
||||
setSurvey(data) {
|
||||
return wrapper(instance().put('/user/survey', data));
|
||||
},
|
||||
skipSurvey() {
|
||||
return wrapper(instance().delete('/user/survey/skip'));
|
||||
}
|
||||
}
|
||||
|
|
@ -13,6 +13,7 @@ const state = {
|
|||
|
||||
userInformationPopoutID: null,
|
||||
|
||||
surveyPopout: false,
|
||||
dragDropFileUploadDialog: false,
|
||||
settings: false,
|
||||
GDLinkMenu: false,
|
||||
|
|
|
|||
|
|
@ -118,6 +118,9 @@ const actions = {
|
|||
},
|
||||
['socket_customEmoji:rename'](context, emoji) {
|
||||
context.dispatch('settingsModule/renameCustomEmoji', emoji)
|
||||
},
|
||||
['socket_survey:completed'](context) {
|
||||
context.dispatch('surveyCompleted');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,10 +34,16 @@ const actions = {
|
|||
},
|
||||
changeStatus(context, status) {
|
||||
context.commit('changeStatus', status)
|
||||
},
|
||||
surveyCompleted(context) {
|
||||
context.commit('surveyCompleted')
|
||||
}
|
||||
}
|
||||
|
||||
const mutations = {
|
||||
surveyCompleted(context) {
|
||||
Vue.set(state.user, "survey_completed", true)
|
||||
},
|
||||
changeAvatar(state, avatar) {
|
||||
//changes my avatar
|
||||
Vue.set(state.user, "avatar", avatar)
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
const config = [
|
||||
{
|
||||
version: 1,
|
||||
title: 'Make your own guild',
|
||||
shortTitle: 'Make your guild',
|
||||
date: '31/03/2019',
|
||||
title: 'Profile Panel',
|
||||
shortTitle: 'Profile Panel',
|
||||
date: '21/04/2019',
|
||||
headColor: "rgba(39, 14, 204, 0.77)",
|
||||
new: [
|
||||
'You can now make your own guild.',
|
||||
"Tabs have been added at the top of the screen.",
|
||||
"Added an option to display your messages on the right and other messages to the left.",
|
||||
"Added users information page which allows you to block, End friendship, message someone and view their information.",
|
||||
"Replaced 'Sending' and 'Sent' with icons."
|
||||
"Added users information page which allows you to block (Block not implemented yet), End friendship, message someone and view their information.",
|
||||
"Replaced 'Sending' and 'Sent' with icons.",
|
||||
"Added a survey option to display your hobbies and age in your profile page."
|
||||
],
|
||||
fix: ["Some formatting issues with custom emojis have been fixed."],
|
||||
next: ['link previews.']
|
||||
next: ['Make your own servers']
|
||||
},
|
||||
{
|
||||
title: 'Custom emojis!',
|
||||
|
|
|
|||
|
|
@ -237,6 +237,7 @@ export default {
|
|||
{ name: "Mayotte", emoji: "🇾🇹", code: "AF" },
|
||||
{ name: "South Africa", emoji: "🇿🇦", code: "AF" },
|
||||
{ name: "Zambia", emoji: "🇿🇲", code: "AF" },
|
||||
{ name: "Zimbabwe", emoji: "🇿🇼", code: "AF" }
|
||||
{ name: "Zimbabwe", emoji: "🇿🇼", code: "AF" },
|
||||
{ emoji: "😶", name: "Rather not say" }
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -38,6 +38,10 @@
|
|||
</transition>
|
||||
<RightPanel/>
|
||||
</span>
|
||||
<div class="coming-soon" v-if="currentTab > 1">
|
||||
<div class="icon"><i class="material-icons">cached</i></div>
|
||||
<div class="text">Coming soon!</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
|
@ -115,6 +119,23 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
|
||||
.coming-soon{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.39);
|
||||
color: white;
|
||||
}
|
||||
.coming-soon .icon{
|
||||
|
||||
}
|
||||
.coming-soon .material-icons {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.direct-message-tab{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
@ -124,9 +145,16 @@ export default {
|
|||
|
||||
.tabs {
|
||||
display: flex;
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.tabs::-webkit-scrollbar {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex-shrink: 0;
|
||||
margin: auto;
|
||||
margin-right: 1px;
|
||||
margin-left: 1px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue