Use bootstrap for UI! - Githubissues

devsnd commented 11 years ago

I've spend too much time on writing silly css rules. Maybe we should use bootstrap instead. It seems to be more lightweight than jQuery UI and comes with many components, which can be made interactive easily.

http://twitter.github.com/bootstrap/components.html

any thoughts?

tilboerner commented 11 years ago

I'm just judging from the demos, but, ooooh! shiny! me like big time!

in comparison, jQuery UI is most interesting for their sortable, draggable, etc.able stuff, and they have some widgets that bootstrap seems to lack, like autocomplete, dialog and slider.

if they get along and the css remains manageable, i wouldn't mind using both. very useful stuff, all of it. if I had to decide now, I'd go with bootstrap based on features.

@devsnd, any experience which is better/easier/simpler to use?

devsnd commented 11 years ago

Well, I know that jQuery UI was very easy to use, but a pain in the :sailboat: to customize. also it came with a lot of stuff we don't need. Right now, we need ways to easily get menus, popups and stuff liek that working. I don't need a datepicker right now...

bootstrap seems to have all we need to spend less time on the css side of cherrymusic. Oh i hate CSS so much. It would be okay if CSS had inheritance natively. but right now it's crazy rules all over the place.

tilboerner commented 11 years ago

I was impressed last week when I learned (again) that elements can have multiple classes. :) Can't we make that work for us somehow? Like, splitting into functional classes and style classes? But then I'm only guessing what you're up against.

Bootstrap sounds good, regardless. Let's go for it.

devsnd commented 11 years ago

New branch: bootstrap. Took some time to get everything nice an shiny... but there is still a lot of work to do. But many of the issues could be solved much faster with bootstrap, because a dialog box is just 5 lines of HTML away, and it will work just as expected and so on... So check it out, literally.

The nice thing: I had to change almost no code there. only mark-up shizm.

devsnd commented 11 years ago

So, I have come a long way, bootstrap is almost ready. But now to the shit part:

Bootstrap doesnt run smoothly in my mobile browser. Seems that all the fancy effects and nice looking buttons are to much for my crappy phone. WHAT NOW??!!1eleven!1

First, I found out that most of this sluggishness comes from updating some html-elements every second or second second. Second, it turned out, that there are two modes in opera mobile: rendering and scrolling. I can scroll, but then everything halts, or, when the phone needs to rerender (because of the updated elements), i cant scroll. Basically, this sucks. BUT my phone is the probably lowest end smartphone with HTML5 support you could find. Could somebody else try their luck with the bootstrap branch?

(Maybe the first iPhone would be a good base?)

tilboerner commented 11 years ago

I can't say anything about the mobile experience, unfortunately. So Opera Mobile stops scrolling after a second?

The UI looks very nice, though. Three issues, in decreasing severity:

[ ] browse link in dropdown list. I think that's too hidden a location. It also doesn't really make sense there: I'd expect things related to / modifying the search functionality in that list. Better would be a plain link to the left of the search button.
[ ] The x buttons on the playlist tabs might be too small a target to hit now. There should also be a space between them and the playlist name.
[ ] I don't like the colorful Queue command buttons (save, remove played, clear). Plain-style buttons would be more consistent and look better.

I'm still a bit disoriented as to where I can make changes. bootstrap.css, is that right?

tilboerner commented 11 years ago

A "Samsung Galaxy Ace" seems to run things just fine. Scrolling works; the pulldown menu for browse mode does not.

It appears, however, that beyond the track loaded first no others can be played:

once it's done playing, the next track doesn't become active;
>> and << change the current track and cause a request for the file, but the player does not indicate the new track was loaded;
clicking tracks in the queue changes the current track, there's a file request, the player pretends it loaded a track of 100 mins and plays nothing.

The phone has the same problem with the old UI, though. Its browser app is helpfully called "Internet" and identifies as "Mozilla/5.0 (Linux; U; Android 2.3.6; de-de; GT-S5830 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1".

edit: repost in proper language. til

devsnd commented 11 years ago

Ah I see: But this means a low-end phone can actually make it. This is great. The galaxy ace only has 800mhz and 384mb ram.

The reason it doesn't work so well, is that the Galaxy Ace still runs Android 2.2. This version of android doesn't really support the full HTML5 spec using the default browser. So the misbehavior you experienced is to be expected to some extend.

Fortunately, according to google, only about 11% of all android phones are still froyo (2.2) or lower. This changed rapidly within the last year, so I think it's same to assume that those phones will soon be replaced by better models.

Now we should just make sure that it runs fine on android 2.3, to be able to judge if everything works out fine, but this actually has nothing to do with bootstrap. So, lets focus on getting this done.

browse link in dropdown list. I think that's too hidden a location. It also doesn't really make sense there: I'd expect things related to / modifying the search functionality in that list. Better would be a plain link to the left of the search button.

okay, i understand. any suggestions then? like before? but i didn't like how it was before, actually... maybe the search button is the browse button, when the search field is empty?

The x buttons on the playlist tabs might be too small a target to hit now. There should also be a space between them and the playlist name.

true. lets make a list of all those things in the first post.

I don't like the colorful Queue command buttons (save, remove played, clear). Plain-style buttons would be more consistent and look better.

okay, but i like the idea of making sure you see that the button does harm. maybe we can use this dropdown button to reduce the number of buttons there to make it less cluttered.

I'm still a bit disoriented as to where I can make changes. bootstrap.css, is that right?

it's the bootstrap-layout.css. I don't touch the actual bootstrap.css, because then it's easier to update to a new version later.

tilboerner commented 11 years ago

Now we should just make sure that it runs fine on android 2.3,

This particular phone seems to have the 2.3 upgrade, see browser string in my previous post. But that's not the issue here. Should we open a new one?

tilboerner commented 11 years ago

okay, i understand. any suggestions then? like before? but i didn't like how it was before, actually... maybe the search button is the browse button, when the search field is empty?

No, that'd be too confusing. How about putting the link next to the search form, as I suggested? (I said "to the left" but I meant "to the right", of course.) That might look better than if it's below.

[_____________] <Search>  browse

okay, but i like the idea of making sure you see that the button does harm. maybe we can use this dropdown button to reduce the number of buttons there to make it less cluttered.

There being three buttons is fine with me, I just think there are too many ~~notes~~ colors. These three boxes full of contrasting primary colors look very out of place. Personally, I think the words clear and remove are signal enough. If more warning is needed, couldn't we dial back the colors a bit? Like, use a reddish hue instead of RED!, or make red the font color, or have a red icon on the button...

The buttons should also use the same font size and padding like the normal buttons.

devsnd commented 11 years ago

when recreating the UI I just wanted to get as close as possible to the original layout, since we agreed in the structure: the buttons in the playlist where smaller, originally so i changed that. but I'm fine with removing the colors of the buttons.

i experienced all kind of behavior using different android devices,however, android compability is another issue, and has nothing to do with bootstrap so far.

there is still some work to do, but if you say it renders fine, then we can merge bootstrap into devel soon. i'll open boottrap specific issues later, so we can work out all this stuff fast, as i don't want to have 3 active branches for too long.

2013/1/25, tilboerner notifications@github.com:

okay, i understand. any suggestions then? like before? but i didn't like how it was before, actually... maybe the search button is the browse button, when the search field is empty?

No, that'd be too confusing. How about putting the link next to the search form, as I suggested? (I said "to the left" but I meant "to the right", of course.) That might look better than if it's below.
[_____________] <Search>  browse
okay, but i like the idea of making sure you see that the button does harm. maybe we can use this dropdown button to reduce the number of buttons there to make it less cluttered.

There being three buttons is fine with me, I just think there are too many ~~notes~~ colors. These three boxes full of contrasting primary colors look very out of place. Personally, I think the words clear and remove are signal enough. If more warning is needed, couldn't we dial back the colors a bit? Like, use a reddish hue instead of RED!, or make red the font color, or have a red icon on the button...

The buttons should also use the same font size and padding like the normal buttons.

Reply to this email directly or view it on GitHub: https://github.com/devsnd/cherrymusic/issues/181#issuecomment-12702706

devsnd commented 11 years ago

Just merged. 95ba4aaaee28b613d4a2574b2208580cf101f351

6arms1leg commented 11 years ago

just updated to newest devel. awesometastic! zaubertraum! now the old ui feels like from the 80s. really nice. not sure what the discussion about the browse button was, as i havent seen the early version, but i think its fine the way it is now. i go with @tilboerner opinion here. browse shouldnt be hidden. i like it the way it is now (although it feels a little like google :warning:).

you wanted to know about how it performs on smart phones: i works perfectly on my phone (htc desire)! everything is readable/usable, all functions/options are easily accessable. but most important: the page layout is great. even on my tiny display, i can easily do anything i can do on a normal display. :clap:

device info: cm 7.2.0.1 (based on android 2.3.7), stock browser (v. 2.3.7)

nice work. :smile_cat:

devsnd / cherrymusic

Use bootstrap for UI! #181