Skip to content

Commit

Permalink
Improve large sidebar counters (#23)
Browse files Browse the repository at this point in the history
- We need 3 digits, make flatter badge
- everything above 999: show 1K etc.
- everything about 99K: 99K and that's it....
  • Loading branch information
reebalazs committed Apr 16, 2024
1 parent c8effab commit c54b319
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 2 deletions.
1 change: 1 addition & 0 deletions news/23.feature
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Add support for sidebar facet conditions @reebalazs
9 changes: 8 additions & 1 deletion src/components/theme/SolrSearch/SearchConditionsValue.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@ const ValueLabel = ({ value }) => (
<span className="searchConditionsHasValueLabel">{value}</span>
);

const formattedCounter = (value) =>
value < 1000
? `${value}`
: value < 100000
? `${Math.floor(value / 1000)}K`
: '99K';

export const SearchConditionsValue = ({
fieldDef,
value,
Expand All @@ -24,7 +31,7 @@ export const SearchConditionsValue = ({
<div className="searchConditionsValue">
{counter != null ? (
<div className="searchConditionsCounter ui circular label lightgrey">
{counter < 100 ? counter : '...'}
{formattedCounter(counter)}
</div>
) : (
<div className="searchConditionsCounter" />
Expand Down
2 changes: 1 addition & 1 deletion src/theme/solrsearch.less
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,7 @@
white-space: nowrap;
}
.searchConditionsCounter {
width: 2em;
width: 3em;
flex: 0 0 auto;
font-weight: bold;
text-align: center;
Expand Down

0 comments on commit c54b319

Please sign in to comment.