Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: change pagination examples #360

Merged
merged 4 commits into from
Oct 28, 2018
Merged

Conversation

AlejandroYanes
Copy link
Collaborator

fixes #356

const firstItem = lastItem - 3;
return this.content.slice(firstItem, lastItem).map(({ title, image }) => (
<Card className="rainbow-m-bottom_small rainbow-m-right_small" style={{ width: '32%' }}>
<div className="rainbow-flex rainbow-flex_column rainbow_vertical-stretch" style={{ height: '100%' }}>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no styles inline
fix all

<div className="rainbow-flex rainbow-flex_column rainbow_vertical-stretch" style={{ height: '100%' }}>
<img src={image} style={{ width: '100%', flex: '1' }} />
<span className="rainbow-font-size-text_large rainbow-color_dark-1 rainbow-p-bottom_small rainbow-p-top_small" style={{ alignSelf: 'center' }}>{title}</span>
</div>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use the footer for the title

const lastItem = activePage * 3;
const firstItem = lastItem - 3;
return this.content.slice(firstItem, lastItem).map(({ title, image }) => (
<Card className="rainbow-m-bottom_small rainbow-m-right_small" style={{ width: '32%' }}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use the rainbow-m-bottom_x-large instead rainbow-m-bottom_small

{this.getContent()}
</div>
<Pagination className="rainbow-m_auto" pages={6} activePage={activePage} onChange={this.handleOnChange} />
<Pagination className="rainbow-m_auto" pages={4} activePage={activePage} onChange={this.handleOnChange} />
</div>
Copy link
Collaborator

@TahimiLeonBravo TahimiLeonBravo Oct 27, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the arrows in the pagination componet is not centered
screen shot 2018-10-27 at 6 41 52 pm

you are using the wrong styles in the svg. You don't need put styles to the svg, you can styles to the parent for center the svg.

@coveralls
Copy link

coveralls commented Oct 28, 2018

Pull Request Test Coverage Report for Build 113

  • 3 of 3 (100.0%) changed or added relevant lines in 1 file are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage increased (+0.01%) to 74.76%

Totals Coverage Status
Change from base Build 77: 0.01%
Covered Lines: 1101
Relevant Lines: 1403

💛 - Coveralls

@TahimiLeonBravo TahimiLeonBravo merged commit 3eb03b8 into master Oct 28, 2018
@TahimiLeonBravo TahimiLeonBravo deleted the change-pagination-examples branch September 23, 2019 08:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

docs: fix the example for pagination component
4 participants