The footer of the standalone client can be streamlined a little bit to allow for a slightly bigger video area by fitting everything onto one line instead of two. (Thanks to mart3ll for the mockup!).

SVG of Logo: http://people.mozilla.org/~smartell/GDC/2015/mozilla.svg

Taking as part of the text-chat work, to give us a little bit more room on the standalone display.

Depends on the patch in bug 1173036. This adjusts the footer ahead of the relayout for text chat, so there's a little more space, and its a bit tidier. I've gone for moving the footer styles to webapp.css as they apply only to the standalone, I've also tried to indicate where some of the older call-url footer styles versus room footer styles are for easier understanding and cleanup later on. Also added an initial mobile layout view to the ui-showcase. I expect we'll want more, but its a start.

Here's the new layout of the footer after the patch. Sevaan - only the footer is up for review here ;-) We'll obviously change it again in the ui-refresh, but this is an improved intermediate state which also buys us some css cleanup.

Same patch, shown for narrower/mobile-like windows. Again just the footer for review - we'll tidy up more as we go. The logo is hidden the same as on the existing standalone UI.

Comment on attachment 8617596 [details] [diff] [review] Improve the layout of Loop's standalone footer - reduce the height it takes up. Review of attachment 8617596 [details] [diff] [review]: ----------------------------------------------------------------- r=me with comments addressed. Looks good, much better!! ::: browser/components/loop/content/shared/css/conversation.css @@ +1117,5 @@ > } > > .standalone .room-conversation-wrapper .video-layout-wrapper { > + /* 50px = height of header, 3em = height of footer */ > + height: calc(100% - 50px - 3em); I'm not too worried about this, but these measurements are different when in mobile display. (Footer height will be 25px, no?) ::: browser/components/loop/standalone/content/css/webapp.css @@ +140,5 @@ > +} > + > +.rooms-footer p { > + /* Right-margin offset to account for .footer-logo plus 20px */ > + /* Zero other margins due to 1em margin from reset.css */ nit: missing dots. @@ +142,5 @@ > +.rooms-footer p { > + /* Right-margin offset to account for .footer-logo plus 20px */ > + /* Zero other margins due to 1em margin from reset.css */ > + margin: 0 120px 0 0; > + /* vertically-align in the middle */ nit: Comment formatting. @@ +157,5 @@ > + color: #555; > +} > + > +.rooms-footer .footer-logo { > + /* vertically-align in the middle */ nit: Comment formatting. @@ +161,5 @@ > + /* vertically-align in the middle */ > + position: absolute; > + top: 50%; > + transform: translate(0, -50%); > + /* Align to the right */ nit: missing dot. @@ +162,5 @@ > + position: absolute; > + top: 50%; > + transform: translate(0, -50%); > + /* Align to the right */ > + right: 0px; nit: 'px' suffix not necessary. @@ +166,5 @@ > + right: 0px; > +} > + > +html[dir="rtl"] .rooms-footer .footer-logo { > + left: 0px; nit: 'px' suffix not necessary.

(In reply to Mike de Boer [:mikedeboer] from comment #6) > ::: browser/components/loop/content/shared/css/conversation.css > > .standalone .room-conversation-wrapper .video-layout-wrapper { > > + /* 50px = height of header, 3em = height of footer */ > > + height: calc(100% - 50px - 3em); > > I'm not too worried about this, but these measurements are different when in > mobile display. (Footer height will be 25px, no?) Yeah, its slightly wrong, I've added an XXX comment in, as I think bug 1168829 should be able to address it.