1205206 - Move the ToS links on the standalone UI to be shown below the Join button

Status: RESOLVED FIXED

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

Description

[Mark Banner (:standard8)]

As part of the UX refresh, we should move the ToS link from the footer to below the join button.

Comment 1

[David Critchley (:dcritch)]

Should look like this:
http://i.sevaan.com/image/031q2Z3M1N0R

Comment 2

[Mark Banner (:standard8)]

Yes, but don't worry about the look of the join button.

It might be simpler with the dev plan to move the ToS into a new view - I'll need a separate view for bug 1208466. So e.g. the new ToSView would render just the <p> element with the text content, and contain the existing _getContent & recordClick.

We might still want a separate view for the button + tos, but I think that could come later with a rework of the "InfoArea" elements.

Comment 3

[David Critchley (:dcritch)]

UX/UI image for ToS change from Sevaan:
http://i.sevaan.com/image/031q2Z3M1N0R

Sevaan requested text color to be #999999 due to current dark background. Also, requested period to be added to end of sentence, will change that as part of this bug fix.

Comment 4

[David Critchley (:dcritch)]

Attachment: Attachment to Bug 1205206 - Move the ToS links on the standalone UI to be shown below the Join button

Moving Loop Standalone Terms of Service text from footer to under Join button

Comment 5

[David Critchley (:dcritch)]

Attachment: Screenshot showing changes to string, color and position

Comment 6

[Mark Banner (:standard8)]

Comment on attachment 8667000 [details] [diff] [review]
Attachment to Bug 1205206 - Move the ToS links on the standalone UI to be shown below the Join button

Review of attachment 8667000 [details] [diff] [review]:
-----------------------------------------------------------------

Almost there, just needs a few tweaks to make the css a bit better.

::: browser/components/loop/standalone/content/css/webapp.css
@@ +59,5 @@
>  
> +/* Terms of Service */
> +
> +.terms-service {
> +  margin-top:20px;

Given this is a location specific setting for the margin, I would prefer for us to use `.room-inner-info-area > .terms-service` as the selector. That way we're keeping the styling of the element to itself, but using the parent elements to manage the layout.

nit: need a space after the colon.

@@ +64,5 @@
> +}
> +
> +.terms-service,
> +.terms-service a {
> +  color:#999;

Please use `.terms-service > a` if its really necessary. A child selector has better performance than a descendent selector.

nit: need a space after the colon.

@@ -246,5 @@
>  .room-inner-info-area {
>    color: #fff;
>    margin: auto;
> -  /* 290px is the width of the widest info child, i.e., a tile */
> -  width: 290px;

If we're removing this, we need a small amount of horizontal padding to avoid the case where strings might touch the sides of the containing box. Probably something like 5px either side.

Comment 7

[David Critchley (:dcritch)]

Attachment: Attachment to Bug 1205206 - Move the ToS links on the standalone UI to be shown below the Join button

Moving Loop Standalone Terms of Service text from footer to under Join button

Comment 8

[Mark Banner (:standard8)]

Comment on attachment 8667563 [details] [diff] [review]
Attachment to Bug 1205206 - Move the ToS links on the standalone UI to be shown below the Join button

Review of attachment 8667563 [details] [diff] [review]:
-----------------------------------------------------------------

Looks good, r=Standard8.

Comment 9

[Pulsebot]

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

Comment 10

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

https://hg.mozilla.org/mozilla-central/rev/99c2739225b0