Modernizing the Foundation theme

[sk-or-v1-contents]

Is this issue still going to be fixed?

Modernizing the Foundation theme

Theres a small gap under the Related button [Related button] [Suggested button] Becomes more obvious if the font size is increased Stylus .more-topics__container .nav .d-button-label { font-size: 150%; } [Related button enlarged font] [Suggested button enlarged font]

I can still see the issue.

[chapoi]

@Moin

It’s a shame that accessibility is such a low priority for you.

That’s quite a leap you’re making. I just said “keep reporting issues” – what part of that makes it sound I don’t care about accessibility?

As it happens, on this same issue reported elsewhere, I have replied

@chapoi

There wont be a built-in way but you can alwaya customise it regularly with CSS. That being said, Im having a look at this particular change, because I think we can/should use REM instead of EM which would avoid this size.

That being said, another designer is assigned to this project, so the final decision on what to do is not up to me. Perhaps we’ll just fix it up in the WCAG theme instead.

@Moin

I’m sure you’ll understand that it’s not much fun to use a site where you can’t see the interface properly.

In the mean time, perhaps increase the font-size in settings so you can see the interface properly again.

While I understand us testing on Meta can sometimes be annoying, it’s also quite necessary.

[jordan.vidrine]

@Moin I want to apologize for the lack of addressing your early feedback here. It’s not a great excuse but I am the “owner” of this project in the sense that it was my idea. I have also taken on a lot of other projects / tasks as the design manager since then and let this project fall to the back of the line.

I will make a priority this week to address the feedback stated about these changes here and give you an update soon.

[jordan.vidrine]

UX: Implement foundation fixes & feedback (#40494)

@Moin

It seems some icon colors don’t work well with the wcag palette.

Fixed

@Moin

Another example where the icon and text color do not match is the expand button on my profile

Fixed

@Moin

I think the icon in the language dropdown is now very large in relation to the text.
Before:

After:

Fixed

[/quote]

Fixed

@Canapin

Search input and submit are squished!

fixed

@dax

Assigned (button border missing):

fixed

@Canapin

On mobile, the notification button’s transparent background cause issues:

fixed

@Moin

The group selection for the upcoming change also looks unusually large in the new design:

fixed

@sk-or-v1-contents

I think the navbar text size is too small on mobile (less legible than it looks like in the screenshot as it’s at the top of the page).

Fixed

---

@Moin

I think you didn’t mention that not only the font size of the table headers, but also the size of the numbers in the Replies, Views, and Activity columns, seem to be decreased.

Yes this is true, all “data” has been decreased in size slightly. From 16px → ~14px. I will not be changing this.

@sk-or-v1-contents

Theres a small gap under the Related button

I will try and fix these, but this is actually a markup issue of how this part of the app is implemented. It needs some tweaks

[haydenjames]

I hate to start a topic for this. But what did you guys change recently to the UI of these forums? I logged in today, and the font and layout feel MUCH better but in a subtle way. Was this announced somewhere? Am I imagining things?

[haydenjames]

Thanks! Looks beautiful! Less is more.

[sniper756]

The issue with the small font and tight spacing has persisted. Will this be optimized?

After the recent rebuild update, the homepage font became very small - Contributions / User Experience - Discourse Meta

[Moin]

The border around tags is larger than the tag field itself

I think there is no border around these buttons in the review queue, but there is one around “edit post”

I noticed that the colored border of the category boxes is smaller now, mentioning it in case that was not intentional because the first post says

@jordan.vidrine

• removal of thicc left colored border

The group names in the dropdown on the group pages are shortened now. Since the default trust_level groups only differ at the end this is a little disadvantageous. Without the change the full name is visible

Edit button on data explorer list:

The placeholders are not longer centered vertically

Similarly, the icons on the bot PM page are no longer centered

[sk-or-v1-contents]

Modernizing the Foundation theme

I think the navbar text size is too small on mobile (less legible than it looks like in the screenshot as it’s at the top of the page). The Suggested/Related font is too small too. [New font sizes too small] Old font sizes are good: [Old font sizes] See also

The Related text spacing is fixed! Thanks

[jordan.vidrine]

@Moin

I noticed that the colored border of the category boxes is smaller now, mentioning it in case that was not intentional because the first post says

@jordan.vidrine

• removal of thicc left colored border

This was intentional. It felt too strong to completely remove something that’s been a staple in the app for so long. So I just thinned it out instead of completely removing.

@Moin

The group names in the dropdown on the group pages are shortened now. Since the default trust_level groups only differ at the end this is a little disadvantageous. Without the change the full name is visible

I have adjusted this slightly to allow more characters to show.

---

All will be addressed here

UX: Core foundation changes (#40847)