Discourse General Polish prior to V1

(Sam Saffron) #1

As we approach 1.0 I feel we need to spend a bit more time focusing on UI polish. I am creating this topic to collate issues I would like to see fixed.

Hopefully some people looking to help out with Discourse can try working on some of these.

Issues I want fixed

  • Footer padding gets out of sync: start typing a new topic in the composer … size it big … got to random topic … footer padding is not added so you can not see the last post on topic. (workaround, resize composer once more so footer padding is added). This need to be added everywhere automatically. Including admin screens.

  • Expanding user card (click on my avatar :arrow_left:) has a shoddy jarring visual effect, it sizes the window twice. Instead just setting a fixed width and sliding down if it needs extra height.

  • When you make a new post it jitters, first render renders without your avatar, then its re-rendered with avatar. Jitter must go, needs to be seamless. Feel free to try on try.discourse.org

  • Uneeded “Loading …” images when clicking between tabs. When you navigate from “latest” to “new” we unconditionally show a “Loading …” gif, this should only show up if you are waiting longer than say 500ms.

  • We unconditionally reload topic page if you click on “title”. instead it should scroll you to top if post 0 is already in memory. Same for in between posts navigation (eg quoting and so on)

  • Reloading a page with a big draft will often lead to this rendering bug:

  • Mac Chrome. Navigating back using the back button to the latest page is “glitchy” if you have scrolled down a topic. It rerenders the title undocked (as if you are on post 1) and then navigates back, this looks really glitchy

  • Synchronized editor, Ghost (open source) has a feature where it ensures the line you are typing in the composer is in view in the preview. This really helps composing longer posts like this or situations where space is tight. Whoever takes this needs to make sure perf does not suffer.

  • Mac OSX - Chrome … while typing stuff in search box search box is half visible.

Experiments needed

  • Page transitions: nodebb and stripe use a technique that fades out the page you are leaving and in the page you are going to. see: NodeBB Development | NodeBB and click on a topic. This can either be over-the-top or help usability - it is worth an experiment, if done in a subtle way it can look pretty good (probably a default off thing for now)

Am I missing any other polish issues here?

If you are helping out with Discourse and would like to take any of these on, reply here.

Quoting a link when replying doesn't include the link
Syncing the editor viewport scroll
Progress bar inaccurate
(Kris) #2

Why does this happen? (Chrome, OSX)

Search css problem using Chrome Version 33.0.1750.152
Search field z-index broken (covered) in Chrome
(Sam Saffron) #3

I see it, z-index crazy going on there, I bet its messing with DOM while typing, totally on this list!

Repro is type stuff into search box on chrome in osx.

Funny chrome on osx is so much more glitchy than chrome on linux/windows.

(Wojciech Zawistowski) #4

I’d like to try Synchronized editor issue.

If you’re not in a big hurry with this and I can reserve more than one item, I’d like to also take Unneeded “Loading…” when clicking between tabs.

(Sam Saffron) #5

Awesome sure, both reserved for you! Thank you so much :heart:

(YCH) #6

I’ve experienced nodebb style page transition is much more natural to me.

(Jeff Atwood) #7

I moved 10 posts to a new topic: Syncing the editor viewport scroll

(eriko) #12

In the groups page the members of staff, moderator, and admin have to (x) to remove them but it does not work. In the case of staff I am not sure how it would work as staff = admin+moderator.
The appearance of being able to remove someone should not be there.

(Erick Guan) #13

This can be simply done by adding display: inline-block. I can make a pull request.
But I have to ask a question here. Should we always show the user name just on the right of the avatar?

(Kane York) #14

That seems to mostly work (we still have two resizes, but they flow into each other better), but it also seems to break the act of closing them.

So some JS updates will be needed as well.

Syncing the editor viewport scroll
(Erick Guan) #15

Add display:inline-block to h1, not the poster_expansion div.


(Nick) #16

I would like to try to tackle the new post jitter. :slight_smile:

Syncing the editor viewport scroll
(Luke S) #17

This is not specific to Mac. I’m seeing it on WIN 7 pro as well. (I think. For me, it actually displays the entire first page full of the topic.) Used to see it more often, then it kind of stopped. Have noticed that it’s happening again in the last couple of weeks.

It is also not specific to going back to “Latest.” I just tried, and got this behavior on “New” as well. (The topic I tried was longer - actually the posts that @codinghorror pulled out of this topic. Perhaps you have not noticed this because most of the postes you reach from new are short, and have not been scrolled?)

EDIT: And, also, now that I have had a chance to confirm, if you got there from “Unread.” Seems to be a general part of the Back Button behavior on chrome.

(Erlend Sogge Heggen) #18

I know! I’ve experienced all sorts of weird issues with Chrome on OS X. They might make a Firefox user out of me, which I bet was their evil plan all along.

More on topic, I’d like to humbly suggest revisiting the sticky index menu.

(Larry Salibra) #19

Couple of iOS safari polish issues:

  1. Notification badge is causing weird issues - look at borders better notification icon & search icon.

  2. Weird layout of topic footer buttons

(Jeff Atwood) #20

#1 there is a straight up regression! can you look at it @awesomerobot?

(Erick Guan) #21

It seems we’d better implement this for Ember.js?

(Ryan Vergeront) #22

I opened a PR for this:


(Erick Guan) #23

We should control the length of the name(long version). It just can be too large…

(Paul Apostolos) #24

What about changing the site setting strings to proper labels? I know most of us understand:

But if I hand the site over to a non-programmer type, he might see this and be like O_o

What if human readable labels could be displayed and the title (tool tip) could be the actual site setting?

Just a suggestion.