Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

web: Improve UI with bootstrap 4 #3079

Closed
wants to merge 42 commits into from

Conversation

Projects
None yet
4 participants
@matlads
Copy link

commented Nov 10, 2018

  • Upgrade jQuery, underscore, and backbone to the latest versions
  • Introduce bootstrap 3.3.7 CSS
  • Add a brand.png icon to use for the banner, and favicon
  • Patch template to use the bootstrap class for a bootstrap look

matlads added some commits Nov 10, 2018

web: Improve UI with bootstrap 3
* Upgrade jQuery, underscore, and backbone to the latest versions
* Introduce bootstrap 3.3.7 CSS
* Add a brand.png icon to use for the banner, and favicon
* Patch template to use the bootstrap class for a bootstrap look
@waweic

This comment has been minimized.

Copy link
Contributor

commented Dec 1, 2018

Thanks for the great work you have done there. I have installed you version of beets and tested it on my monitor. I really like your UI and see a lot of potential in it, although I still have some issues with it / some things I would consider changing. I have appended a little mockup of things that I would love to see implemented, next to a screenshot of the original version.

mockup_beets_2
screenshot_2018-12-01 beets 1

Apart from that, here are the issues I encountered while using your UI, though some of them already existed in the old one, with the things crossed out I changed in the mockup plus some personal preferences:

  • Progress bar does not have a line below the button
  • Neither playlist and lyrics take all available vertical space
  • I like play/stop buttons more than a play- and a stop-button (I don't really want to make a decision there)
  • Playing time looks like a button
  • No indication of playing title in playlist
  • No visible album art
  • Logo / icon is not centered vertically
  • Playlist scrollbar looks weird in firefox
  • Album title neither shown in playlist nor in progress bar
  • I can click replay and shuffle at once (replays)
  • Progress bar box is of different height compared to the buttons
  • Menu button in smartphone mode does nothing
  • Can't move progress bar indicator
  • Pause button does not keep pressed
  • Can't drag entries in playlist
  • Shuffle does not shuffle but randomly play
  • I don't like round corners. Can we make something material?

Furthermore, I have some questions for future development. I have never used bootstrap before, so I don't know too much about it.

  • Is bootstrap light enough to keep working on weak devices? I like to use the beets web UI on my ages old tablet and had yet no possibility to test it.
  • There is #2935 with a new logo. Will it be hard to integrate it into the new UI?

Thanks again for your work. My webdesigning capabilities are limited, but I will try to help as much as I can.

matlads added some commits Dec 3, 2018

Numerous fixes
* Fixed Progress bar does not have a line below the button (basically
ensure that is is a form-control)
* Fixed Neither playlist and lyrics take all available vertical space.
We got rid of the pre-scrollable thing. I had not taken into
consideration people with computers will large screens
* Merged the play and stop buttons just the way @waweic likes it.
* Playing time and total time, have moved left and right of the slider
* Added the album art if the album is specified. More error handling
required hered
* Fixed Shuffle to shuffle the current playlist
* Fixed Replay to actually replay the currently playing song.
* Fixed the bug where Progress bar box is of different height compared to the buttons (see #1)
* Removed the unused menu button in smartphone mode does nothing
@matlads

This comment has been minimized.

Copy link
Author

commented Dec 3, 2018

@waweic

  1. The new logo in #2935 should fit right in here without any major issues
  2. IMO Bootstrap is light enough, but if you test this, I would be grateful.
Fix docs build.
It fails with some obsure error: Bullet list ends without a blank line; unexpected unindent
@waweic

This comment has been minimized.

Copy link
Contributor

commented Dec 14, 2018

Sorry for replying late. I think your work looks really good, it totally seems like that player I would use as my daily driver. I still have some issues with the controls, I will hopefully be able do a little research on that tomorrow. Really appreciating your effort.

waweic and others added some commits Dec 16, 2018

@martinkirch

This comment has been minimized.

Copy link

commented Dec 23, 2018

Hello,
Too bad I'm discovering this after working on the web player, too. Went on a different direction though, I did not update the JS dependencies and worked on a more playlist-oriented interface (where items can be drag-and-dropped). If you're curious have a look at the master branch in https://github.com/martinkirch/beets

Anyway, this branch looks promising. However I also had troubles trying too seek in the music with the progress bar.

@matlads

This comment has been minimized.

Copy link
Author

commented Mar 15, 2019

Anyway, this branch looks promising. However I also had troubles trying too seek in the music with the progress bar.

This fixed in the latest code.

@matlads matlads changed the title web: Improve UI with bootstrap 3 web: Improve UI with bootstrap 4 Mar 16, 2019

@matlads matlads closed this Jun 15, 2019

@dbogdanov

This comment has been minimized.

Copy link
Contributor

commented Jul 5, 2019

@matlads will this PR be superseded by another one? I am interested to try the improved UI.

@matlads

This comment has been minimized.

Copy link
Author

commented Jul 9, 2019

@matlads will this PR be superseded by another one? I am interested to try the improved UI.

I have been a little too busy to work on improving this PR. Would you like to make some improvements to it? I will next have bandwith for this in August...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.