search

HubPress / hubpress.io

A web application to build your blog on GitHub
MIT License
2.81k stars 2.63k forks source link

Add text to icon buttons #389

Open simevidas opened 8 years ago

simevidas commented 8 years ago

I accidentally published a post because I thought the icon meant “Save to GitHub”.

Before:

before

After:

after

jaredmorgs commented 8 years ago

I like the idea of Textual labels, but perhaps keep them as hover-text, or long tap in Android.

If you were using this on a Tablet in Portrait, those text labels would be cut off. Particularly with release 0.5.1 now having an extra icon in the blog editing view.

I've noticed that if you long tap on the icons in Android Marshmallow, Google Now On Tap displays the original file name of the icon pack, not the actual function of the button.

@anthonny should fix that behaviour so it meets Accessibility guidelines.

anthonny commented 8 years ago

I like this idea too. There a big rework to do with the UI, in the first the UI was handcrafted and in the current version i use material-ui.

But for me it is not beautiful, there is not any identity instead of the logo and the orange color :)

simevidas commented 8 years ago

If you make people hover despite this much empty space in the bar (on desktop), people might get annoyed; there is responsive design (CSS media queries) to show/hide element parts based on available space 😋

Another ambiguity:

foo

anthonny commented 8 years ago

there is responsive design (CSS media queries)

Yes, i use MQ to adapt the view on mobile only. Like i said i did not invest a lot of time on the design of HubPress 😄 If you have some skills in UX/UI and have time, feel free to make some proposal 👍

I agree with you the pen is not the best icon to say "new post", a "+" should be better :D

simevidas commented 8 years ago

@anthonny Where could I check out the code that generates those UI buttons? The app.js file is a minified bundle 😅

anthonny commented 8 years ago

Everything is here https://github.com/HubPress/dev.hubpress.io/tree/development It's a React app using Redux and Material-ui

anthonny commented 8 years ago

Feel free to join our slack http://hubpressio-slack.herokuapp.com if you have any question

jaredmorgs commented 7 years ago

It is now a vue2 app. 😁

I still think this is a valid issue. The textual lables under each icon would be better in mobile browsers because you can't hover over the button.

anthonny commented 7 years ago

I agree with you @jaredmorgs it is still a valid issue