Flarum 2.0: UI/UX Improvements for enhanced search experience

Darkle

luceos I've tinkered a bit with the active state of the tab. Now, there's a coloured bottom border, a tweaked text colour (contrasting with the non-active tabs), and a bolder font weight. And yep, datitisev's on point — it's all based on the forum's primary colour. How's it looking to you?

SychO Totally with you on keeping that typing experience smooth.

When you mention highlighting, do you envision a pre-typing display of available gambits? This could also help address the toggle/input distinction that luceos brought up. It reminds me of a more detailed concept I played with earlier:

And while typing, an autocomplete feature might be useful. For instance, if someone begins with 'auth...', it could hint towards the 'author:' pill. And if they type something like the suspended pill, the autocomplete might suggest a 'true' or 'false' value, making it more intuitive. What are your thoughts on this approach?

luceos

Darkle Now, there's a coloured bottom border, a tweaked text colour (contrasting with the non-active tabs), and a bolder font weight. And yep, datitisev's on point — it's all based on the forum's primary colour. How's it looking to you?

I think that's a massive improvement 👏 And this really looks slick!

SychO

Darkle looks good! the autocomplete makes sense, luceos mentioned it would be valuable to somehow see a full list of gambits with descriptions on each one, maybe another modal or something? seems like we could even have such descriptions as part of the autocomplete 🤔 ?

Leonart

look nice

Darkle

I've further polished the desktop design and believe the updates are quite clear. If there's anything you're unsure about or need clarification on, feel free to ask. I'm eager to hear your thoughts on these changes!

During this phase, two important considerations have come up. First, for a intuitive/smoother typing experience, I suggest that we allow for pill formatting to include an optional space after the colon (is: example), while still supporting the current format without a space.

Second, the ability to translate gambits should be looked into; while I'm not certain of the current capabilities, making them translatable would be advantageous with the upcoming interface updates.

^Just ^caught ^a ^tiny ^hiccup ⁱⁿ ^this ^image ^about ^the ^padding ^tweaks ^🙈

luceos

Darkle I love it 👏

SychO

Darkle Let's gooo 🔥 Love it!

Darkle I suggest that we allow for pill formatting to include an optional space after the colon (is: example), while still supporting the current format without a space.

we can visually spaces them out while keeping the normal text format.

Darkle

Almost forgot this,

luceos luceos mentioned it would be valuable to somehow see a full list of gambits with descriptions on each one, maybe another modal or something?

Is the first image what you expected, or am I missing something about it?

SychO we can visually spaces them out while keeping the normal text format.

It would be a nice touch, actually upon further thought, I don't think it's as important as I initially believed. Plus, I think the select/autocomplete feature will be used more, so it should be quite straightforward.

Over the next few days, I'll keep an eye out for any suggestions and in the meantime, I'll update the mobile version with the latest changes📱

clarkwinkelmann

For translations, I would suggest having them be 100% client-side, and keep the REST API syntax and URL permalinks identical no matter the active language.

If a forum only supports one language different than English they could rename the REST/permalink key using an extender and we should make sure this works smoothly but I don't think this should be done by Flarum automatically since it makes things more complicated and more prone to issues/conflicts when multiple languages are used or when generating bug reports in English.

Since Flarum doesn't support language subdomains/subfolders natively, I don't think customizing the permalink (which includes the search query string) per-language would be possible anyway. I think this is best left to extensions, we just need to make sure the hooks are there to customize the values necessary.

Darkle

clarkwinkelmann Thank you for your insights. I was definitely afraid of potential language-specific complexities, like how is:unread translates to es:sin leer in Spanish, which includes a space, and there could be other examples in languages I'm less familiar with that might complicate things further. If handled client-side, I assume these issues could be managed more easily and predictably, right? It would be interesting to see what role language packages could play in this.

Darkle

What do you think, with the modal approach, does it make more sense to seize the opportunity to add a desktop search shortcut?

I'm currently dissecting this issue from the archive flarum/issue-archive438. In this case, we would address both the discovery of this particular shortcut and its addition.

SychO

Darkle I personally dislike the shortcut always being there 😬 having the shortcut is fin, but the visual aid seems unnecessary clutter. Takes away from Flarum's simple interface.

KarlReza1

I've always felt that the contrast of different elements in Flarum dark was considerably worse than the white theme... Like the contrast of the text, the elements in general...

Darkle

SychO I think you're right. I had considered continuing with Toby's original idea, but it sounds overly complicated. He talked about overlaying shortcuts on the UI elements by pressing a key. While it sounds cool, it would be hard to manage on some elements.

It would be simpler to place a button somewhere with a keyboard icon that opens a modal with all available shortcuts. This way, you wouldn't have to navigate to the specific UI element to learn its shortcut.

« Previous Page