Skip to content

Commit

Permalink
Added CSS adjustments for group-heading alignment and implemented tit…
Browse files Browse the repository at this point in the history
…le attribute for tooltips in program-calendar.js

- Updated .group-header and .left-block CSS classes to prevent text wrapping and ensure proper alignment of group heading and count elements.
- Applied text-overflow: ellipsis to .group-heading to handle long text and prevent it from breaking the layout.
- Added a title attribute to the group-heading div in program-calendar.js to display the full text as a tooltip when truncated.
  • Loading branch information
TyroneAEM committed Aug 6, 2024
1 parent 604c439 commit 4aad732
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 6 deletions.
20 changes: 15 additions & 5 deletions blocks/gmo-program-details/gmo-program-details.css
Original file line number Diff line number Diff line change
Expand Up @@ -408,17 +408,19 @@ body {
color: white;
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-wrap: nowrap; /* Prevent wrapping */
align-content: center;
justify-content: space-between;
border-radius: 7px 7px 0px 0px;
padding-right: 0; /* Adjust padding if needed */
&.content-hidden {
border-radius: 7px;
}
& .left-block {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center; /* Vertically center the items */
flex-wrap: nowrap; /* Prevent wrapping within left-block */
align-content: center;
border-radius: 7px 7px 0px 0px;
}
Expand All @@ -433,17 +435,25 @@ body {
line-height: 24px;
height: 24px;
margin-left: 10px;
white-space: nowrap; /* Prevents the text from wrapping to a new line */
overflow: hidden; /* Hides the overflow text */
text-overflow: ellipsis; /* Adds an ellipsis (...) to indicate truncated text */
max-width: calc(100% - 50px); /* Adjusts the width to leave space for the group count */
display: inline-block; /* Ensures the element respects the max-width */
vertical-align: middle; /* Aligns it properly with other inline elements */
}
& .group-count {
display: inline-flex; /* Changed from flex to inline-flex */
align-items: center; /* Vertically center the content */
justify-content: center; /* Center the content horizontally */
min-width: 24px; /* Set minimum width instead of fixed width */
margin-left: 8px;
margin-right: 10px; /* Add margin if necessary to prevent overlapping */
height: 24px;
width: 32px;
border-radius: 10px;
line-height: 24px;
background-color: black;
background: rgba(0,0,0,0.2);
display: flex;
justify-content: center;
}
& .group-controls {
margin-left: 15px;
Expand Down
2 changes: 1 addition & 1 deletion scripts/program-calendar.js
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ export async function buildCalendar(dataObj, block, type, mappingArray, period)
<div class="left-block">
<img src="/icons/chevron-right.svg" class="group-expand group-controls inactive"></img>
<img src="/icons/chevron-right.svg" class="group-collapse group-controls"></img>
<div class="group-heading">${lookupType(group)}</div>
<div class="group-heading" title="${lookupType(group)}">${lookupType(group)}</div>
<div class="group-count">${matchedItems.length}</div>
</div>
<div class="right-block">
Expand Down

0 comments on commit 4aad732

Please sign in to comment.