1119000 - Improve footer of standalone client

Status: RESOLVED FIXED

(Hello (Loop) :: Client, defect, P1)

Description

[Sevaan Franks [:sevaan]]

Attachment: Old (top) and new (bottom) footers.

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!).

Comment 1

[Sevaan Franks [:sevaan]]

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

Comment 2

[Mark Banner (:standard8)]

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

Comment 3

[Mark Banner (:standard8)]

Attachment: Improve the layout of Loop's standalone footer - reduce the height it takes up.

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.

Comment 4

[Mark Banner (:standard8)]

Attachment: After patch screenshot - normal displays

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.

Comment 5

[Mark Banner (:standard8)]

Attachment: Narrow window format

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 6

[Mike de Boer [:mikedeboer]]

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.

Comment 7

[Mark Banner (:standard8)]

(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.

Comment 8

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/afa6f51d27c3

Comment 9

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/afa6f51d27c3