Fix swarming Task Page layout

Fix swarming Task Page layout

1. Fix the flexing such that the two columns are properly displayed on
smaller screens.

2. Fix CIPD layouts to be more user friendly.

BUG=670873, 670877, 670872
Committed: https://github.com/luci/luci-py/commit/7accffd689653e501f311a82d5dd15c61b3cd123

[kjlubick, 2016-12-05 15:10:27]

kjlubick@google.com changed reviewers:
+ iannucci@chromium.org, stephana@google.com

[kjlubick, 2016-12-05 15:10:28]

This is what the CIPD packages look like:
https://screenshot.googleplex.com/c3KfC3T4bmW

That addresses https://bugs.chromium.org/p/chromium/issues/detail?id=670877
right?

This is live at
https://2514-d64460c-tainted-kjlubick-dot-chromium-swarm-dev.appspot.com/task...
if you want to confirm it looks good on small screens.

[stephana, 2016-12-05 18:25:51]

https://codereview.chromium.org/2554533002/diff/1/appengine/swarming/ui/res/i...
File appengine/swarming/ui/res/imp/taskpage/task-page.html (right):

https://codereview.chromium.org/2554533002/diff/1/appengine/swarming/ui/res/i...
appengine/swarming/ui/res/imp/taskpage/task-page.html:373: <b
style="user-select:none">&nbsp;&nbsp;&nbsp;&nbsp;Requested:
</b>[[cipd.requested]]
It seem user select is experimental
https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

I think <b> is a deprecated tag and the using &nbsp; like this feels a bit
clunky. 
Could ould you use CSS instead. i.e. (details probably wrong)

.whateverClass {
     margin-left: 4em;
     font-weight: bold; 
} 

<span class="whateverClass">Request</span>

[iannucci1, 2016-12-05 18:43:27]

Yep that would fix 670877 from my pov :)

[kjlubick, 2016-12-05 18:55:28]

https://codereview.chromium.org/2554533002/diff/1/appengine/swarming/ui/res/i...
File appengine/swarming/ui/res/imp/taskpage/task-page.html (right):

https://codereview.chromium.org/2554533002/diff/1/appengine/swarming/ui/res/i...
appengine/swarming/ui/res/imp/taskpage/task-page.html:373: <b
style="user-select:none">&nbsp;&nbsp;&nbsp;&nbsp;Requested:
</b>[[cipd.requested]]
On 2016/12/05 at 18:25:50, stephana wrote:
> It seem user select is experimental
> https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
> 
> I think <b> is a deprecated tag and the using &nbsp; like this feels a bit
clunky. 
> Could ould you use CSS instead. i.e. (details probably wrong)
> 
> .whateverClass {
>      margin-left: 4em;
>      font-weight: bold; 
> } 
> 
> <span class="whateverClass">Request</span>

I am aware user-select is experimental.  It seems to have good browser support,
despite this.  I've added in the browser-prefixed versions, just to be sure.

I've moved all of this into CSS, as you requested.

[stephana, 2016-12-06 14:23:54]

On 2016/12/05 18:55:28, kjlubick wrote:
>
https://codereview.chromium.org/2554533002/diff/1/appengine/swarming/ui/res/i...
> File appengine/swarming/ui/res/imp/taskpage/task-page.html (right):
> 
>
https://codereview.chromium.org/2554533002/diff/1/appengine/swarming/ui/res/i...
> appengine/swarming/ui/res/imp/taskpage/task-page.html:373: <b
> style="user-select:none">&nbsp;&nbsp;&nbsp;&nbsp;Requested:
> </b>[[cipd.requested]]
> On 2016/12/05 at 18:25:50, stephana wrote:
> > It seem user select is experimental
> > https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
> > 
> > I think <b> is a deprecated tag and the using &nbsp; like this feels a bit
> clunky. 
> > Could ould you use CSS instead. i.e. (details probably wrong)
> > 
> > .whateverClass {
> >      margin-left: 4em;
> >      font-weight: bold; 
> > } 
> > 
> > <span class="whateverClass">Request</span>
> 
> I am aware user-select is experimental.  It seems to have good browser
support,
> despite this.  I've added in the browser-prefixed versions, just to be sure.
> 
> I've moved all of this into CSS, as you requested.

lgtm

[KevinL, 2016-12-06 14:31:01]

kjlubick@chromium.org changed reviewers:
+ kjlubick@chromium.org

[KevinL, 2016-12-06 14:31:01]

The CQ bit was checked by kjlubick@chromium.org

[KevinL, 2016-12-06 14:31:02]

lgtm

[commit-bot: I haz the power, 2016-12-06 14:31:07]

CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2016-12-06 14:34:30]

CQ is committing da patch.

Bot data: {"patchset_id": 20001, "attempt_start_ts": 1481034661957320,
"parent_rev": "8294f5d059ac992b55b7515838690600b30601f0", "commit_rev":
"7accffd689653e501f311a82d5dd15c61b3cd123"}

[commit-bot: I haz the power, 2016-12-06 14:34:32]

Description was changed from

==========
Fix swarming Task Page layout

1. Fix the flexing such that the two columns are properly displayed on
smaller screens.

2. Fix CIPD layouts to be more user friendly.

BUG=670873, 670877, 670872
==========

to

==========
Fix swarming Task Page layout

1. Fix the flexing such that the two columns are properly displayed on
smaller screens.

2. Fix CIPD layouts to be more user friendly.

BUG=670873, 670877, 670872

Committed:
https://github.com/luci/luci-py/commit/7accffd689653e501f311a82d5dd15c61b3cd123
==========

[commit-bot: I haz the power, 2016-12-06 14:34:33]

Committed patchset #2 (id:20001) as
https://github.com/luci/luci-py/commit/7accffd689653e501f311a82d5dd15c61b3cd123