IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve markup and design of Paginate component

Browse Source
This commit is contained in:
Alina Beck 2019-12-19 11:44:31 +05:30
parent 4e6ec6eba7
commit 2941b1392e
2 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
webapp/components/Paginate/Paginate.spec.js
View File

@ -23,13 +23,13 @@ describe('Paginate.vue', () => {
beforeEach(() => {
propsData.hasNext = true
wrapper = Wrapper()
nextButton = wrapper.findAll('.ds-button').at(0)
nextButton = wrapper.findAll('.base-button').at(0)
})
it('is disabled by default', () => {
propsData = {}
wrapper = Wrapper()
nextButton = wrapper.findAll('.ds-button').at(0)
nextButton = wrapper.findAll('.base-button').at(0)
expect(nextButton.attributes().disabled).toEqual('disabled')
})
@ -47,13 +47,13 @@ describe('Paginate.vue', () => {
beforeEach(() => {
propsData.hasPrevious = true
wrapper = Wrapper()
backButton = wrapper.findAll('.ds-button').at(1)
backButton = wrapper.findAll('.base-button').at(1)
})
it('is disabled by default', () => {
propsData = {}
wrapper = Wrapper()
backButton = wrapper.findAll('.ds-button').at(1)
backButton = wrapper.findAll('.base-button').at(1)
expect(backButton.attributes().disabled).toEqual('disabled')
})

22
webapp/components/Paginate/Paginate.vue
View File

@ -1,13 +1,10 @@
<template>
<ds-flex direction="row-reverse">
<ds-flex-item width="50px">
<ds-button @click="next" :disabled="!hasNext" icon="arrow-right" primary />
</ds-flex-item>
<ds-flex-item width="50px">
<ds-button @click="back" :disabled="!hasPrevious" icon="arrow-left" primary />
</ds-flex-item>
</ds-flex>
<div class="paginate">
<base-button @click="back" :disabled="!hasPrevious" icon="arrow-left" circle />
<base-button @click="next" :disabled="!hasNext" icon="arrow-right" circle />
</div>
</template>
<script>
export default {
props: {
@ -24,3 +21,12 @@ export default {
},
}
</script>
<style lang="scss">
.paginate {
display: flex;
justify-content: space-around;
width: 100px;
margin: $space-x-small auto;
}
</style>