Bug 1095826 - [RTL][Video] Thumbnail images do not appear #26456
Conversation
|
|
russnicoletti
| @@ -89,6 +89,18 @@ li .details { | |||
| right: 0; | |||
| overflow: hidden; | |||
| } | |||
|
|
|||
| /* In RTL languages, image and details are mirrored */ | |||
| *[dir=rtl] li .details { | |||
There was a problem hiding this comment.
I suspect that this would be more efficent CSS if you used "HTML[dir=rtl]" instead of "*[dir=rtl]"
russnicoletti
force-pushed
the
bug-1095826
branch
from
0bd31d2
to
3179738
Compare
| background: url(images/unwatched.png) no-repeat center / 100%; | ||
| position: absolute; | ||
| bottom: 0; | ||
| width: 0.4rem; | ||
| top: 0; | ||
| order: 1; |
There was a problem hiding this comment.
Ideally, the order would not be necessary and it would just be specified by the HTML. But I think currently the unwatched thing is second in the html instead of first.
russnicoletti
force-pushed
the
bug-1095826
branch
from
3179738
to
5829755
Compare
|
|
| @@ -88,7 +96,10 @@ li .details { | |||
| top: 0; | |||
| right: 0; | |||
| overflow: hidden; | |||
| order: 3; | |||
| -moz-margin-start: 22rem; | |||
There was a problem hiding this comment.
It seems to me that with the flexbox, you shouldn't have to use absolute positioning and a really wide margin and a width:calc(). Ideally, you'd just use the flex: property to make this a flexible child so that it fills up the available space. (Having said that, however, I'll confess that I have not used flexboxes myself yet)
russnicoletti
force-pushed
the
bug-1095826
branch
from
5829755
to
eb98f17
Compare
|
|
| } | ||
| .unwatched { | ||
|
|
||
| li .inner .unwatched { | ||
| background: url(images/unwatched.png) no-repeat center / 100%; | ||
| position: absolute; | ||
| bottom: 0; | ||
| width: 0.4rem; | ||
| top: 0; |
There was a problem hiding this comment.
I would guess you no longer need bottom and top declarations here now that you have align-items: stretch
There was a problem hiding this comment.
According to my testing, they do matter. They unwatched icon/image does not appear without the top and bottom properties.
russnicoletti
force-pushed
the
bug-1095826
branch
from
eb98f17
to
2b451d0
Compare
|
|
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: flex-start; | ||
| align-items: stretch; |
There was a problem hiding this comment.
I don't have much experience with display:flex, but it seems to me that you are not making much use of it. The align-items:stretch may actually be doing something helpful here, but you might actually be able to just do display:inline and have it work as well. Since you're using calc() in the .details element instead of making that flexible I'm not sure you need this.
There was a problem hiding this comment.
I found that display:inline doesn't provide the desired behavior (the image doesn't appear, the 'details' take up the entire screen). display:flex or display:inline-flex provide the desired behavior.
russnicoletti
force-pushed
the
bug-1095826
branch
from
2b451d0
to
f23ace6
Compare
Bug 1095826 - [RTL][Video] Thumbnail images do not appear r=djf
No description provided.