Improve footer of standalone client

RESOLVED FIXED in Firefox 41

Status

Hello (Loop)
Client
P1
normal
Rank:
14
RESOLVED FIXED
3 years ago
3 years ago

People

(Reporter: sevaan, Assigned: standard8)

Tracking

unspecified
mozilla41
x86
All
Points:
3
Dependency tree / graph
Bug Flags:
firefox-backlog +
qe-verify -

Firefox Tracking Flags

(firefox41 fixed)

Details

Attachments

(4 attachments)

(Reporter)

Description

3 years ago
Created attachment 8545493 [details]
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!).
(Reporter)

Comment 1

3 years ago
SVG of Logo: http://people.mozilla.org/~smartell/GDC/2015/mozilla.svg
(Assignee)

Comment 2

3 years ago
Taking as part of the text-chat work, to give us a little bit more room on the standalone display.
Assignee: nobody → standard8
Blocks: 1168829
Iteration: --- → 41.3 - Jun 29
Points: --- → 3
Rank: 14
Flags: qe-verify-
Flags: firefox-backlog+
Priority: -- → P1
(Assignee)

Updated

3 years ago
Depends on: 1173036
(Assignee)

Comment 3

3 years ago
Created attachment 8617596 [details] [diff] [review]
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.
Attachment #8617596 - Flags: review?(mdeboer)
(Assignee)

Comment 4

3 years ago
Created attachment 8617764 [details]
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.
Attachment #8617764 - Flags: ui-review?(sfranks)
(Assignee)

Comment 5

3 years ago
Created attachment 8617765 [details]
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.
Attachment #8617765 - Flags: ui-review?(sfranks)
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.
Attachment #8617596 - Flags: review?(mdeboer) → review+
(Assignee)

Comment 7

3 years ago
(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.
(Reporter)

Updated

3 years ago
Attachment #8617764 - Flags: ui-review?(sfranks) → ui-review+
(Reporter)

Updated

3 years ago
Attachment #8617765 - Flags: ui-review?(sfranks) → ui-review+

Comment 8

3 years ago
https://hg.mozilla.org/integration/fx-team/rev/afa6f51d27c3
https://hg.mozilla.org/mozilla-central/rev/afa6f51d27c3
Status: NEW → RESOLVED
Last Resolved: 3 years ago
status-firefox41: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla41
You need to log in before you can comment on or make changes to this bug.