UI improvement for front-page posts

[zorbathut]

Tildes' UI is, in my opinion, kind of eyesearing. Clean it up and spend some effort focusing user attention on the things that matter.

[AI-WAIFU]

As a start on this, you can change the display settings for a given user in the settings. We could just change the default theme from white to something that's less hard on the eyes. (I'm partial to solarized dark).

[zorbathut]

I suspect this is going to end up needing a UX expert's touch, and while I'm not a UI expert, I am at least experienced with it. So I'm probably going to end up being the one to do the work here.

In terms of white-on-black vs. black-on-white, I'm all in favor of allowing people to choose white-on-black if they prefer, but black-on-white has evidence that it's easier to read in most cases and it also looks more official and legitimate. So I'm definitely keeping black-on-white as the default.

[ColeT]

I really like the starting point of this website. I don't know if I'd call it eye-searing, but my preferences are mostly in line with whats available on reddit. I've been doing front end web development for ~seven years. I'm not explicitly a designer, but I know enough of their job to get my job done when they are dragging their feet. If I'm not at an expert in UI then I am at least a journeyman.

I do think there are some things to improve and I've already got the first one complete:

1. Create a new custom coloring theme that will become the default theme. This color theme will mostly stay in line with what the 'White' base theme offers. Some minor soft colors tweaks and nothing more.
2. Small reorganization of discussion topic information. The 'Source' is in its own section, but I'd lump it in with metadata. I'd also always include the post author as part of metadata, and the time it was posted is also meta-data. The discussions topic posts would then always be composed of four sections: TITLE - METADATA - PREVIEW - ACTIONS
3. Preview section could maybe use minor tweaks. I don't think I like that when the preview section is open it isn't tabbed or clearly the child content of the parent topic. I think boxing it in with a 1px rounded border might help. All font styling and formatting is also lost in the unexpanded preview, not sure how to make this better. One possible option is is to allow the user to write their own preview sentence (that would probably need to be its own ticket though).
4. Action section needs more oopmh. I've always hated how hard it is to click on the tiny text links on reddit. I know it saves space, but if the main point of the website is discussion then it should probably be more prominent. I'd maybe turn the comments button and the options in the action menu into tertiary buttons.
5. ~Bar on the left? Not sure what its doing. I guess it makes the posts look visually similar to comments, but it serves no purpose on the main discussion page. I'd probably opt to remove it.~ That bar is whether the current user posted a topic. I didn't notice until I started logging in as a different user.
6. (edit) Tags should be pills. When tags are turned on they just show up as normal link text. I think we should turn them into pill buttons, pretty standard for tagging things.
7. (edit) Metadata should be labelled. There should be labels of some kind to clarify what each piece of metadata represents.

[zorbathut]

That all sounds reasonable to me, but I'd definitely like a mockup first (although that might be easiest done by just putting it together). I admit I'm going to be a bit picky on this one, warning in advance :) but it sounds like you're around the same skill level I am so it might go pretty smoothly.

[ColeT]

For part 1, here is the background color change:

(edit - one thing to note is that an earlier PR got the "Vote" and "Voted" button text switched up: https://github.com/themotte/tildes/pull/21/commits/180b441311ce11a72462ad40d48c2b5e25277e5d)

[ColeT]

I opened up another separate PR for the tags issue. Which felt like some low hanging fruit that i could quickly accomplish

The PR: https://github.com/themotte/tildes/pull/29

Image of main improvement:

This is the Appearance when hovering over 'person' tag:

My style changes also impacted the screen where tags are added. Tags no longer have a square highlight:

[ColeT]

changes to the preview section, PR: https://github.com/themotte/tildes/pull/31

I decided not to add a full border around the preview section. Just a left hand border worked pretty well to distinguish the content, both when the content is collapsed:

And when the content is expanded: