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

VZV | Add padding to bottom text in summary widgets #903

Merged
merged 2 commits into from
Aug 17, 2020

Conversation

mddilley
Copy link
Contributor

@mddilley mddilley commented Aug 12, 2020

Closes cityofaustin/atd-data-tech#3650

This PR updates the SummaryWidget component styles to keep the padding within the card footers and the card heights even across the widgets whether the text wraps or not. The height of the card body and footer were change from 75%/25% to 70%/30% and then some custom CSS was replaced with Bootstrap classes to keep the arrows and text in the footer vertically aligned.

Update screenshots

Screen Shot 2020-08-13 at 11 08 07 AM

Screen Shot 2020-08-13 at 11 08 23 AM

Screen Shot 2020-08-13 at 11 08 46 AM

@mddilley mddilley added the WIP Work in progress label Aug 12, 2020
@mddilley mddilley removed the WIP Work in progress label Aug 13, 2020
Comment on lines +90 to +92
<span className="text-muted text-wrap pl-4">
{`${text} ${numberWithCommas(lastYearTotal)} this time last year`}
</div>
</span>
Copy link
Contributor

Choose a reason for hiding this comment

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

Cool stuff! Clever change!

Comment on lines +38 to +45
.widget-body {
height: 70%;
}

.widget-footer {
height: 30%;
}

Copy link
Contributor

Choose a reason for hiding this comment

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

👍

Copy link
Contributor

@sergiogcx sergiogcx left a comment

Choose a reason for hiding this comment

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

I only tested it on Desktop: Windows & Mac Chrome & Firefox, it works great! Clever work.

@mddilley mddilley merged commit e40a80d into master Aug 17, 2020
@mddilley mddilley deleted the 3650_summary_widget_padding branch August 17, 2020 16:16
Copy link
Contributor

@mateoclarke mateoclarke left a comment

Choose a reason for hiding this comment

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

👍

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.

Add padding to bottom text in summary widgets
3 participants