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.

Sign up for GitHub

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

Redesign enterprise tile #35622

Merged
merged 11 commits into from
Jan 22, 2025
Merged

Redesign enterprise tile #35622

Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
8e45ee0
Have a help icon next to the metric number
jingcheng16 Jan 14, 2025
4129205
Prettify
jingcheng16 Jan 14, 2025
c220883
Use default button style
jingcheng16 Jan 14, 2025
ff7aab7
Change metric to the non-bold thickness
jingcheng16 Jan 14, 2025
4f2bd8d
Remove total_description for some straightforward metrics
jingcheng16 Jan 14, 2025
119baf6
Rename API Usage tile and remove total_description
jingcheng16 Jan 14, 2025
9119c9f
Override bootstrap position values
jingcheng16 Jan 17, 2025
632ff91
Display help icon until the stat is loaded
jingcheng16 Jan 18, 2025
92fbf76
"Bootstrap 5 Migration - Rebuilt diffs"
jingcheng16 Jan 19, 2025
b4f848a
Merge branch 'master' into jc/redesign-enterprise-tile
jingcheng16 Jan 21, 2025
7bbf8dd
Remove descriptor for DataExportReport
jingcheng16 Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions corehq/apps/enterprise/templates/enterprise/partials/project_tile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,20 @@
<h4 class="fs-5 pt-2">{{ report.title }}</h4>
</div>
<div class="card-body pb-1">
<div class="js-total fw-bold fs-1">
<i class="fa fa-spin fa-spinner"></i>
<div class="row justify-content-center">
<div class="col-auto align-items-center position-relative">
<div class="js-total fw-bold fs-1">
<i class="fa fa-spin fa-spinner"></i>
</div>
{% if report.total_description %}
<div class="position-absolute start-100" style="top: 25%">
Copy link
Contributor

Choose a reason for hiding this comment

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

The top: 25% style could be a top-25 class, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Bootstrap only have top-0, top-50 and top-100, so I have to use style: https://getbootstrap.com/docs/5.0/utilities/position/#arrange-elements

Copy link
Contributor

Choose a reason for hiding this comment

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

aha, got it

Copy link
Member

Choose a reason for hiding this comment

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

can override the sass map to include top-25
https://getbootstrap.com/docs/5.3/utilities/position/#sass-maps
also i would prefer end-0 instead of start-100

Copy link
Contributor Author

Choose a reason for hiding this comment

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

override in 9119c9f
start-100 put the left edge of the element at the right edge of the parent element
end-0 put the right edge of the element at the left edge of the parent element
So they're not exchangeable...

<span class="hq-help-template" data-content="{{ report.total_description }}" data-placement="right">
<i class="fa fa-info-circle"></i>
Copy link
Contributor

Choose a reason for hiding this comment

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

What would you think of putting the icon next to the header text instead of the number? It's more secondary/tertiary information than primary information.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I feel putting the icon next to the header text implies this description is to explain the header text, not the stat there anymore. But maybe I can move the icon to next to the header text, and then in the tooltip, I included a description of the stat, also a description of the report they will get. I'll bring it up with saas-product. Thank you!

jingcheng16 marked this conversation as resolved.
Show resolved Hide resolved
</span>
</div>
{% endif %}
</div>
</div>
<div class="fs-5 ">{{ report.total_description }}</div>
</div>
<div class="card-footer bg-transparent border-0 pt-0">
<div class="pb-2">
Expand Down