Hey Cooltey, I added some more screens to Zeplin:
In general, I think truncating text like that does not necessarily indicate to the user that the view is scrollable. Would an approach like the one described below work?
- Stretch text field to bottom of the card (z-index: 1):
- At the bottom of the card, add an overlay (z-index: 2):
I’m having an equivalent in HTML/CSS in mind, which should work like that. But yeah, we both know it’s not quite same ;) Lets discuss it together!
Not exactly 48px since we're using the dp.
The parent view which contains the extra or image summary has a 16dp bottom padding.
And, in the parent view, I insert the gradient view which has 24dp height with -6dp bottom margin so it can overlap the last sentence if the text reaches to the edge.
I cannot reproduce it. They are having the same gradient view on the bottom, and also the left (license) and right (CC-BY-SA 4.0) label view are in the same view group.
One thing I've noticed is that the lineSpacing for the left and right labels are not equal, maybe it causes the issue.
Will let you verify it again if https://github.com/wikimedia/apps-android-wikipedia/pull/413 gets merged.
I found a solution to implement the ScrollView with a great gradient bottom, and also make the ScrollView not be able to scroll. (kind of a hack way)
Please see the screenshots below and to see if they look good to you.
You can see it on the latest alpha once https://github.com/wikimedia/apps-android-wikipedia/pull/427 gets merged.
Hey @cooltey and @Dbrant, you’ve managed to elegantly implement it, I’m impressed! 💯 I’ve just used the feed with the new behavior and it feels perfect! Did we finally crack the code for handling cards with more information? I think so!
May I ask, is this behavior applied in larger viewports (tablets) as well? Especially in landscape view it could be a great relief (https://phabricator.wikimedia.org/T225635#5299612).