Fast Reply: New and Responsive Interface
Repository
https://github.com/mktcode/fast-reply-ui
Task Request
https://steemit.com/utopian-io/@roxane/task-request-fast-reply-needs-a-responsive-interface
As a response to @roxane's task request, I created this new UI concept.
Demo
It's just a static HTML file, using pure Bootstrap 4 and and a little bit of custom jQuery to make some things interactive, like the vote weight input. The actual implementation will follow soon.
Key aspects are the responsive behavior and the more minimalistic and intuitive design.
The main issue was to find a solution for small screens to switch between the list of comments and the reply/vote dialogue. I decided to implement a slide animation to toggle between both.
The main content area has 200 % width and simply slides back and forth.
https://github.com/mktcode/fast-reply-ui/blob/master/style.css#L83
https://github.com/mktcode/fast-reply-ui/blob/master/index.html#L809
|
|
|
To save some space in the top menu bar, I moved the broadcasting related information to a new bar at the bottom.
Since on mobile you only see the list at first, I added some buttons to each comment box, to cover some common actions (follow, vote, ignore, mute). These buttons trigger some for confirmation.
https://github.com/mktcode/fast-reply-ui/blob/master/index.html#L498
|
|
|
|
|
|
The vote weight input works a little bit different from what you are used to because I don't like those sliders on mobile, so I tried to find another simple and easy to use way.
https://github.com/mktcode/fast-reply-ui/blob/master/index.html#L429
https://github.com/mktcode/fast-reply-ui/blob/master/index.html#L828
As requested I added a settings modal. But since there are no settings yet, I added some obvious ones.
This link that currently gets appended to the comments you write with fast reply, could be disabled for a small one-time fee. Just an idea.
Check out the Demo!
...and feel free to give me your feedback. Especially @roxane and @oroger... I hope you like it so far. I will be happy to help with the implementation next.
And here are some screenshots from larger screens.
@roxane @oroger I just realized that there are some issues with the navbars on mobile. I'll fix it asap.
Desktop
Small Desktop
Tablet
Hi @mkt, when creating a contribution in response to a task request it is best to make a PR to the main repository (so in this case this one) and then submit your contribution once it has been merged (e.g. the project owner could ask you to change a few things before they merge it). I'll wait until @oroger or @roxane reply here (or wherever) before reviewing this (I am sure they will like it, as it looks great!).
@amosbastian the task request was not about implementing a new UI but about providing a mockup/concept in the form of an interactive HTML template for easy integration afterwards. The actual implementation will follow of course.
I realise that, but I still think it's better to get some kind of feedback from whoever created the task request before submitting it as a contribution.
I'm in close contact with @roxane and @oroger. Don't worry! :D
Hey @mkt, we really like this improved version of the UI.
I did not knew this trick with the sliding panel to allow a different view in Mobile and desktop. I have to make some tests with this but in overall this seems to be a creative way allowing to use the tool on devices of any size.
Your replacement for the voting slider is indeed a good idea, still allowing fine grained control of the voting power to use while optimizing the screen real eastate.
The settings screen might require some changes in the future as more item will be added but for now this is perfectly usable. One details I found, I have a small mobile screen and I cannot see the last 2 items of the menu, is there a way to scroll on the menu ? (If not, no worries, we will reduce the menu size as there are some 'dev' features that do not really belong there (maybe moving those to the settings screen).
I went quickly through the code and I see you are using media queries to adapt to the targeted sizes, which is exactly what I expected. I will spend some more time on this to see how I can integrate this.
How should we proceed for the integration? I plan to create a dedicate branch to update the UI based on your code, I will probably have some small question, I guess we can continue this on discord ?
Hey @oroger! Thanks for your feedback! I'm sure there will be no issues with the final integration. I actually want to help with that too, as I told you. The settings screen is of course only a placeholder currently. The menus can be scrollable or we reduce them in a reasonable way. I'm a little bit busy with the frog over the next two days but let's continue with the details in discord.
Your help on integrating this is very welcome, I am also quite busy till Wednesday but I will already prepare a branch to upgrade to your design.
Thanks for the support !
You're welcome! :)
Thanks for the contribution, @mkt!
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
Thanks! :)
Hey @mkt
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Contributing on Utopian
Learn how to contribute on our website or by watching this tutorial on Youtube.
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!