audrius/web
1
0
Fork 1
mirror of https://github.com/OCA/web.git synced 2025-02-22 13:21:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

[IMP] web_timeline: Overflow text, add hover colors

Browse Source 
When an item label does not fit in its date-range box, overflow
according to
https://visjs.github.io/vis-timeline/examples/timeline/items/rangeOverflowItem.html

Previous CSS code was already trying to do that, but was selecting
`.vis-item.vis-item-content` instead of `.vis-item .vis-item-content`.

Displaying overflow text brings up layout issues solved by removing the
forced-100% width instruction.

This change also adds highlight when hovering a box, which is useful on
text that has overflown (as it has no borders).
This commit is contained in:
Houzéfa Abbasbhay
2024-03-21 11:59:14 +01:00
committed by Carlos Lopez
parent 97d02aa2ee
commit 0e325c7126
5 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web_timeline/static/src/scss/web_timeline.scss
View File

@@ -1,3 +1,4 @@
$vis-hover-background-color: linen;
$vis-weekend-background-color: #dcdcdc;
$vis-item-content-padding: 0 3px !important;
@@ -10,16 +11,18 @@ $vis-item-content-padding: 0 3px !important;
}
.vis-item {
&.vis-box:hover {
&:hover {
background-color: $vis-hover-background-color !important;
cursor: pointer !important;
}
&.vis-item-overflow {
.vis-item-overflow {
overflow: visible;
}
.vis-item-content {
width: 100%;
padding: $vis-item-content-padding;
&:hover {
background-color: $vis-hover-background-color !important;
}
}
}
}