search

alexta69 / metube

Self-hosted YouTube downloader (web UI for youtube-dl / yt-dlp)
GNU Affero General Public License v3.0
3.96k stars 259 forks source link

Added responsive and mobile friendly UI changes #388

Open vijayvcm opened 5 months ago

vijayvcm commented 5 months ago

The current bootstrap UI design is not so mobile-friendly. Added some CSS and changed UI styles to support both desktop and mobile devices

Unfortunately, I have some issues with my laptop on FFmpeg. It shows an error when I run it with localhost.

https://github.com/alexta69/metube/assets/11239522/412097c9-0fc6-42ef-92a5-13003e569495

https://github.com/alexta69/metube/assets/11239522/a44155eb-0e00-4163-b0e0-2e9dbccb2f7d

https://github.com/alexta69/metube/assets/11239522/92fe2804-7e93-408b-a26a-c641b63f1eff

alexta69 commented 5 months ago

Hi @vijayvcm , Thanks for the PR. I see that it changes the UI to be much less compact, which I think is not for the best. Let's keep the compact layout - the Add button alongside the options, and the advanced options in a drop-down under the Add button.

vijayvcm commented 5 months ago

Hi @alexta69,

Could you clarify what you mean by 'compact layout'? I'm having trouble understanding it.

Do you prefer keeping the old 'Add' dropdown button instead of implementing advanced options?

Is this preference specific to certain screens or devices?

Could you provide more details on areas needing improvement?

Regarding the separation of the download folder and custom name prefix: The download folder path is often too long and doesn't fit well into the button dropdown area. That's the reason I separated it.

alexta69 commented 4 months ago

Sorry for the delay in response. The current layout is compact, in that there are only two rows (the URL and the options + add button). I wouldn't want to expand it to four rows. On smaller screens, it currently unfolds into five rows, which is also fine. The only issue is with the Add dropdown in this case -- it overflows the screen and doesn't adapt to its size. This is the only problem that needs fixing, IMHO..