JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[V3-1113] empty search result area bug fixed (#1303)

Browse Source
This commit is contained in:
Nikolay Yurchenko 2019-02-15 23:19:17 +10:00 committed by GitHub
parent 12261c0624
commit df20597f67
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/satellite/src/components/common/EmptyStateArea.vue
View File

@ -6,9 +6,8 @@
<div class="empty-state__wrap"> <div class="empty-state__wrap">
<h1>{{mainTitle}}</h1> <h1>{{mainTitle}}</h1>
<div class="empty-state__wrap__additional-text" v-html="additionalText"/> <div class="empty-state__wrap__additional-text" v-html="additionalText"/>
<div id="addApiKeysPopupEmptyButton"> <div id="addApiKeysPopupEmptyButton" v-if="isButtonShown">
<Button <Button
v-if="isButtonShown"
:onPress="onButtonClick" :onPress="onButtonClick"
:label="buttonLabel" :label="buttonLabel"
width="170px" /> width="170px" />
@ -60,7 +59,7 @@ export default class EmptyStateProjectArea extends Vue {
&__additional-text { &__additional-text {
font-family: 'montserrat_regular'; font-family: 'montserrat_regular';
font-size: 16px; font-size: 16px;
width: 50%; width: 60%;
margin-bottom: 10px; margin-bottom: 10px;
b { b {
@ -70,7 +69,7 @@ export default class EmptyStateProjectArea extends Vue {
} }
&__img { &__img {
margin-top: 90px; margin-top: 50px;
} }
h1 { h1 {
@ -78,6 +77,7 @@ export default class EmptyStateProjectArea extends Vue {
font-size: 32px; font-size: 32px;
line-height: 35px; line-height: 35px;
margin-bottom: 30px; margin-bottom: 30px;
min-width: 900px;
} }
p { p {

35
web/satellite/src/components/team/TeamArea.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information. // See LICENSE for copying information.
<template> <template>
<div> <div class="team-area">
<div class="team-header"> <div class="team-header">
<HeaderArea/> <HeaderArea/>
</div> </div>
@ -20,10 +20,10 @@
<Footer/> <Footer/>
</div> </div>
</div> </div>
<EmptyState <div class="empty-search-result-area" v-if="projectMembers.length === 0">
v-if="projectMembers.length === 0" <h1 class="empty-search-result-area__text">No results found</h1>
mainTitle="No results found" <div class="empty-search-result-area__image" v-html="emptyImage"></div>
:imageSource="emptyImage" /> </div>
</div> </div>
</template> </template>
@ -32,7 +32,6 @@ import { Component, Vue } from 'vue-property-decorator';
import TeamMemberItem from '@/components/team/TeamMemberItem.vue'; import TeamMemberItem from '@/components/team/TeamMemberItem.vue';
import HeaderArea from '@/components/team/headerArea/HeaderArea.vue'; import HeaderArea from '@/components/team/headerArea/HeaderArea.vue';
import Footer from '@/components/team/footerArea/Footer.vue'; import Footer from '@/components/team/footerArea/Footer.vue';
import EmptyState from '@/components/common/EmptyStateArea.vue';
import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages'; import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
import { NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames'; import { NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames';
@ -80,7 +79,6 @@ import { NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames'
TeamMemberItem, TeamMemberItem,
HeaderArea, HeaderArea,
Footer, Footer,
EmptyState,
} }
}) })
@ -89,6 +87,10 @@ export default class TeamArea extends Vue {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.team-area {
position: relative;
}
.team-header { .team-header {
position: fixed; position: fixed;
top: 100px; top: 100px;
@ -120,6 +122,25 @@ export default class TeamArea extends Vue {
height: 160px; height: 160px;
} }
.empty-search-result-area {
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
&__text {
font-family: 'montserrat_bold';
font-size: 32px;
line-height: 39px;
margin-top: 100px;
}
&__image {
margin-top: 40px;
}
}
@media screen and (max-width: 1600px) { @media screen and (max-width: 1600px) {
.team-container { .team-container {