Show message when there is no data to display

This commit is contained in:
Angelina Filippova 2019-05-23 00:17:42 +02:00
parent 63bf0ecb84
commit b14805d889
2 changed files with 14 additions and 3 deletions

View file

@ -8,6 +8,9 @@
<el-timeline class="timeline"> <el-timeline class="timeline">
<timeline-item v-loading="loading" v-for="report in reports" :report="report" :key="report.id"/> <timeline-item v-loading="loading" v-for="report in reports" :report="report" :key="report.id"/>
</el-timeline> </el-timeline>
<div v-if="reports.length === 0" class="no-reports-message">
<p>There are no reports to display</p>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -46,6 +49,10 @@ export default {
<style rel='stylesheet/scss' lang='scss' scoped> <style rel='stylesheet/scss' lang='scss' scoped>
.reports-container { .reports-container {
.el-timeline {
margin: 45px 45px 45px 19px;
padding: 0px;
}
.filter-container { .filter-container {
margin: 22px 15px 22px 15px; margin: 22px 15px 22px 15px;
padding-bottom: 0 padding-bottom: 0
@ -53,9 +60,10 @@ export default {
h1 { h1 {
margin: 22px 0 0 15px; margin: 22px 0 0 15px;
} }
.el-timeline { .no-reports-message {
margin: 45px 45px 45px 19px; color: gray;
padding: 0px; margin-left: 19px
} }
} }
@media @media

View file

@ -102,6 +102,9 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div v-if="users.length === 0" class="no-users-message">
<p>There are no users to display</p>
</div>
<div v-if="!loading" class="pagination"> <div v-if="!loading" class="pagination">
<el-pagination <el-pagination
:total="usersCount" :total="usersCount"