Skip to content
This repository has been archived by the owner on Nov 6, 2020. It is now read-only.

Fix SectionList hovering issue #4749

Merged
merged 4 commits into from
Mar 7, 2017
Merged

Fix SectionList hovering issue #4749

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ae849b1
Fix SectionList Items hover when <3 items
ngotchac Mar 3, 2017
06a8059
Even easier...
ngotchac Mar 3, 2017
5acb782
Merge branch 'master' into ng-fix-sectionlist-hover
ngotchac Mar 7, 2017
c9f1a21
Merge branch 'master' into ng-fix-sectionlist-hover
jacogr Mar 7, 2017
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
23 changes: 7 additions & 16 deletions js/src/ui/SectionList/sectionList.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@

$transition: all 0.25s;
$widthNormal: 33.33%;
$widthShrunk: 29%;
$widthExpanded: 42%;

.section {
Expand All @@ -39,41 +38,33 @@ $widthExpanded: 42%;
display: flex;
justify-content: center;

/* TODO: As per JS comments, the flex-base could be adjusted in the future to allow for */
/* TODO: As per JS comments, the flex-base could be adjusted in the future to allow for
/* case where <> 3 columns are required should the need arrise from a UI pov. */
.item {
box-sizing: border-box;
display: flex;
flex: 0 1 $widthNormal;
max-width: $widthNormal;
opacity: 0.85;
padding: 0.25em;

/* https://www.binarymoon.co.uk/2014/02/fixing-css-transitions-in-google-chrome/ */
transform: translateZ(0);
transition: $transition;
width: 0;

&:hover {
opacity: 1;
z-index: 100;
}
}

&:hover {
.item {
&.stretchOn {
flex: 0 1 $widthShrunk;
max-width: $widthShrunk;

&:hover {
flex: 0 0 $widthExpanded;
max-width: $widthExpanded;
}
}
}
.item.stretchOn:hover {
Copy link
Contributor

@jacogr jacogr Mar 3, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

There is a reason for the shrinking. When the name (Title) is at exactly 33% and you hover over the row the affected item does not shrink and go into text-overflow, rather the browser just shrinks the other card, so you end up with one tiny, one normal and one big. (Chrome)

This is the original implementation, sadly the simplest, sadly broken in edge-cases due to what I think is a browser bug.

flex: 0 0 $widthExpanded;
max-width: $widthExpanded;
}
}
}

.section+.section {
.section + .section {
margin-top: 1em;
}