[WIP] Improving the readability of bugs and the meta information by magsout · Pull Request #1104 · webcompat/webcompat.com

magsout · 2016-06-18T10:30:13Z

Before:

After:

First step:

improved the readability of bugs and the meta information
modification on Comment Header
added Labels and Labels Editor on right side

Closed #545

magsout · 2016-06-30T06:57:24Z

oops didn't ping anybody...

what you think ? @miketaylr @karlcow @adamopenweb

miketaylr · 2016-06-30T14:32:19Z

I think it looks awesome @magsout (assuming you have "Before" and "After" swapped here).

Where does the QR code go?

magsout · 2016-06-30T14:35:18Z

I think it looks awesome @magsout (assuming you have "Before" and "After" swapped here).

ah ah yes...

Where does the QR code go?

trashed? forget it

miketaylr · 2016-06-30T15:08:50Z

I don't use it, but I wonder if it can appear in the side next to the labels somehow. Or can just be a power-user keyboard shortcut thing.

miketaylr · 2016-06-30T16:14:27Z

Or can just be a power-user keyboard shortcut thing.

Right now Q and Esc work to open and close it. I think if we had side labels, we could have a small box under them with keyboard shortcuts (G for GitHub, Q for QR code)

magsout · 2016-06-30T19:59:53Z

Right now Q and Esc work to open and close it. I think if we had side labels, we could have a small box under them with keyboard shortcuts (G for GitHub, Q for QR code)

Yes, good idea. I will try to add this idea in the next stape

karlcow · 2016-07-01T00:50:23Z

I think it looks awesome @magsout (assuming you have "Before" and "After" swapped here).

The before and after seems to be in the right order. Maybe @magsout fixed the images.

Probably "New Issue" needs to be aligned with the rest of the text. And probably with a bit of breathing. but we can fix/tweak in another iteration, or if you have a static page we can play with. that would help.
(Thinking out Loud, that could help when we work on design iteration to have a static version of each routes, each time we release the site.)

magsout · 2016-07-01T05:04:45Z

@karlcow

The before and after seems to be in the right order. Maybe @magsout fixed the images.

heh, yes.

Probably "New Issue" needs to be aligned with the rest of the text.

yes, you're right

And probably with a bit of breathing

more padding.

but we can fix/tweak in another iteration, or if you have a static page we can play with. that would help.
(Thinking out Loud, that could help when we work on design iteration to have a static version of each routes, each time we release the site.)

what do u mean ?

magsout · 2016-07-01T05:18:13Z

@karlcow

magsout · 2016-07-01T05:19:10Z

Full page:

miketaylr · 2016-07-05T13:33:42Z

This looks good. So what's the next step? We land this (or are there some TODOs before you want to land @magsout)?

magsout · 2016-07-05T14:06:12Z

@miketaylr

This looks good. So what's the next step? We land this (or are there some TODOs before you want to land @magsout)?

modification on Comment Header
added Labels and Labels Editor on right side

magsout · 2016-07-05T14:08:12Z

I had issue with backbone, so I can't merged each step standalone, so I have to split my dev in 2 step. II prefer to validate each step with you before starting next step ;)

miketaylr · 2016-07-05T14:10:43Z

II prefer to validate each step with you before starting next step ;)

Sounds good! Ping me if I can help move things around as well.

magsout · 2016-07-06T07:00:48Z

@miketaylr @karlcow @adamopenweb @deepthivenkat

New idea of Header:

Before:

After:

Full Page:

deepthivenkat · 2016-07-06T07:42:13Z

Looks very neat! I like it

karlcow · 2016-07-06T08:57:29Z

Let's see. Much better, and I'm ok with it. I feel we can do a bit better Maybe. But that can come in a second iteration.

Trying to noodle around what I'm thinking.

magsout · 2016-07-06T08:59:23Z

On left side avatar with an border-radius, and on right side, pseudo / time on two line ?

karlcow · 2016-07-06T09:05:30Z

I tweaked a couple of things in there:

Let me try to remember (static pages I would have save the new css ^_^ ) stupid me.

removed the caret
put the avatar inside the header
added border-radius 50% to the avatar
changed the background-color of the header to a lighter gray which is matching the one from the code.
removed the commented
increased the line-height of the comments wc-Markdown from 1.5 to 1.7
removed the border and radius of the box
added a box-shadow box-shadow: 0 1px 3px rgba(0,0,0, 0.10), 0 1px 2px rgba(0,0,0, 0.25);

miketaylr · 2016-07-06T14:09:59Z

The padding/margin here feels off, there's a different amount of space on top/right/bottom/left.

Avatar/container balance is much nicer here -- but all the whitespace in the middle feels like a waste. But I'd be happy for that to be figured out in a next iteration. 👍

magsout · 2016-07-06T16:00:32Z

With the ideas of @karlcow and @miketaylr:

magsout · 2016-07-06T16:01:23Z

Fullpage:

miketaylr · 2016-07-06T17:54:07Z

Looks good! If we can get the left padding of the avatar to be the same as the top and bottom, it would feel more balanced I think. (Maybe the avatar needs to shrink a little for that to work, dunno)

karlcow · 2016-07-07T00:43:42Z

Thanks a lot @magsout

Could we deploy it at a point on staging. Just to have a better feeling of the design and test it with different layouts/viewports ?

miketaylr · 2016-07-07T02:27:47Z

(Just ping me when ready and I can deploy the improving-the-readability-of-bugs-and-the-meta-information branch to staging.)

magsout · 2016-07-07T06:41:28Z

@karlcow I pushed my last commit, so if @miketaylr can deploy on staging ;)

Comment submit is broken (design) because of my last change on comment box

miketaylr · 2016-09-29T16:47:07Z

What's the status here? I would recommend we land what we think is good, and bikeshed what we can improve in new bugs.

(Do we need to re-design the label editor for this to land? Or possible to do after the fact @magsout?)

magsout · 2016-09-29T17:04:02Z

@miketaylr I have some issue with LabelEditor. No error but nothing happen

magsout · 2016-09-29T17:12:53Z

@miketaylr if you can help me ;)!

miketaylr · 2016-09-29T17:19:33Z

@miketaylr if you can help me ;)!

I can! (try anyways....). What's the issue, how to reproduce?

magsout · 2016-09-29T18:16:59Z

@miketaylr only add this code https://github.com/webcompat/webcompat.com/blob/master/webcompat/templates/issue.html#L8-L10 for LabelEditor..

miketaylr · 2016-10-17T02:45:07Z

Whoops, missed that last reply. Will look at this today or tomorrow.

magsout · 2016-11-06T07:17:26Z

@miketaylr ping ❤️

miketaylr · 2016-11-15T15:28:07Z

@miketaylr ping ❤️

Hehe, oops. protip: never write "tomorrow" on the internet, it will turn into "next month"

miketaylr · 2016-11-15T17:09:55Z

(i'm gonna delete some npm debug comments, it's making it very hard to figure out what's really happening on this issue)

miketaylr · 2016-11-15T17:47:44Z

ok @magsout -- I fixed the title not appearing and added the labels below the bug body.

Depending on where we want to stick them we might have to re-work some things. For example, they can't be nested inside .wc-Issue-information without doing some hacking on the backbone side of things. Let me know!

miketaylr · 2016-11-15T17:48:14Z

Also, maybe we can just kill the border around the comment widget and improve on that later?

miketaylr · 2016-12-10T00:12:10Z

OK! We're gonna go ahead and pull the trigger on this and deploy. It has a few rough edges, but is way better than the current version and we can continue to iterate. Thanks so much @karlcow and @magsout for the designs and work!

(Note: all the JS around "goBack" was unused, we apparently removed an "all issues" link from an issue, in favor of the top bar. Nobody seems to have complained yet!)

magsout · 2016-12-10T13:16:05Z

Ouch sorry for the delay...

Thanks @miketaylr
We can now open all issue for improving view... cc @karlcow @adamopenweb @denschub

miketaylr · 2016-12-13T23:15:38Z

This is now deployed -- thanks again @magsout!

And yeah, if anyone finds things we broke/missed/whatever, please file bugs. There are things to improve, but baby steps... 💃

magsout · 2016-12-13T23:25:55Z

Thanks @miketaylr

magsout added the status: in progress label Jun 18, 2016

miketaylr mentioned this pull request Jul 6, 2016

Re-think (or kill?) "Thanks" page #646

Closed

magsout force-pushed the improving-the-readability-of-bugs-and-the-meta-information branch from 76ca630 to 19e1ac5 Compare July 6, 2016 07:01

magsout added the type: design label Jul 6, 2016

karlcow mentioned this pull request Sep 20, 2016

Provide documentation for testing the branch of someone else #1177

Open

magsout added the status: blocked label Oct 14, 2016

miketaylr removed the status: blocked label Dec 10, 2016

magsout added 6 commits December 9, 2016 14:11

Issue #545 - added background color around Issue

03950ab

Issue #545 - improved the readability of bugs and meta information

2b76bef

Issue #545 - improved design of comment Header

1a725e8

Issue #545 - improved comment box

1ad0349

Issue #545 - fixed header for comment submit

4ccb2a1

Issue #545 - reset font-family for all input and textarea

77b1661

Mike Taylor added 2 commits December 9, 2016 14:15

Issue #545. Put title into MetaDataView and get rid of TitleView.

18bacff

(Note: all the JS around "goBack" was unused, we apparently removed an "all issues" link from an issue, in favor of the top bar. Nobody seems to have complained yet!)

Issue #545. Add back labels/label editor.

341287f

miketaylr force-pushed the improving-the-readability-of-bugs-and-the-meta-information branch from 8a34a8e to 341287f Compare December 10, 2016 00:18

miketaylr merged commit 551aab6 into master Dec 10, 2016

miketaylr deleted the improving-the-readability-of-bugs-and-the-meta-information branch December 10, 2016 00:26

miketaylr removed the status: in progress label Dec 10, 2016

Conversation

magsout commented Jun 18, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

magsout commented Jun 30, 2016

Uh oh!

miketaylr commented Jun 30, 2016

Uh oh!

magsout commented Jun 30, 2016

Uh oh!

miketaylr commented Jun 30, 2016

Uh oh!

miketaylr commented Jun 30, 2016

Uh oh!

magsout commented Jun 30, 2016

Uh oh!

karlcow commented Jul 1, 2016

Uh oh!

magsout commented Jul 1, 2016

Uh oh!

magsout commented Jul 1, 2016

Uh oh!

magsout commented Jul 1, 2016

Uh oh!

miketaylr commented Jul 5, 2016

Uh oh!

magsout commented Jul 5, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

magsout commented Jul 5, 2016

Uh oh!

miketaylr commented Jul 5, 2016

Uh oh!

magsout commented Jul 6, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before:

After:

Full Page:

Uh oh!

deepthivenkat commented Jul 6, 2016

Uh oh!

karlcow commented Jul 6, 2016

Uh oh!

magsout commented Jul 6, 2016

Uh oh!

karlcow commented Jul 6, 2016

Uh oh!

miketaylr commented Jul 6, 2016

Uh oh!

magsout commented Jul 6, 2016

Uh oh!

magsout commented Jul 6, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

miketaylr commented Jul 6, 2016

Uh oh!

karlcow commented Jul 7, 2016

Uh oh!

miketaylr commented Jul 7, 2016

Uh oh!

magsout commented Jul 7, 2016

Uh oh!

miketaylr commented Sep 29, 2016

Uh oh!

magsout commented Sep 29, 2016

Uh oh!

magsout commented Sep 29, 2016

Uh oh!

miketaylr commented Sep 29, 2016

Uh oh!

magsout commented Sep 29, 2016

Uh oh!

miketaylr commented Oct 17, 2016

Uh oh!

magsout commented Nov 6, 2016

Uh oh!

miketaylr commented Nov 15, 2016

Uh oh!

miketaylr commented Nov 15, 2016

Uh oh!

magsout commented Jun 18, 2016 •

edited

Loading

magsout commented Jul 5, 2016 •

edited

Loading

magsout commented Jul 6, 2016 •

edited

Loading

magsout commented Jul 6, 2016 •

edited

Loading