search

theotherp / nzbhydra2

Usenet meta search
Other
1.22k stars 74 forks source link

State of the UI (css & bootstrap mainly) #947

Open saurori opened 3 months ago

saurori commented 3 months ago

Hey - I wanted to first say thanks for maintaining NZBHydra for so long. I've used it for years. However, as a developer, the UI has always been a frustration - mainly the horizontal scrollbars and lack of responsive layout. When I dig into the html/css it becomes obvious that fixing simple things are not so simple. I'd love to help, but want to get some feedback before I proceed.

Status & Contributing

  1. Are there any existing (current) plans for revamping the UI? I see this Issue: https://github.com/theotherp/nzbhydra2/issues/698
  2. If I wanted to work on fixes, what is the process for building css/js etc? I see use of less, bower, gulp. The front end stack is quite dated as I'm sure you know. Bower is deprecated, bootstrap-less doesn't go beyond v3, etc
  3. Is there a development setup you can share (docker, bare)? This thread has some information for the UI, if it is still relevant.

UI Questions

  1. It seems the source of many UI problems are abuses of the Bootstrap framework. For example, instead of proper layout classes being applied, the css overrides classes and breaks expectations everywhere. The biggest offender is overriding column classes in theme css files bright.css, dark.css, grey.css. Take for example .col-sm-10{width:50%} which more or less makes it a col-sm-6.
  2. Is there a source for the minified bright.css, dark.css, grey.css ? I can't find any.

Paths Forward

  1. There's a lot of tech debt on the front end. Ideally I would say starting from scratch with npm, boostrap v5 + SASS, esbuild, and more or less redoing the UI html to be responsive from day 1. But that is a lot of work for 1 person.
  2. The shortest path to fixing issues is working with the current stack and getting a development workflow set up so that css can be built (and possibly do this separate from the JS if that breaking things)
saurori commented 2 months ago

@theotherp looks like a relative url issue with less. Try this in gulpfile.js:

.pipe(less({
        relativeUrls: true
    }))

There is also a rootPath (--root-path) option that may work but I would try the above first.

theotherp commented 2 months ago

Thats for the quick response. For now I just changed the path in the .less files back to ../img which seems to fix it.

theotherp commented 2 months ago

But yours works as well!