Broken Material Design Theme

solonovamax commented 3 days ago

Please complete the following tasks.

[X] Web browser cache cleared
[X] Link provided to install script if applicable
[X] Not using broken rtinst install script
[X] Web browser, ruTorrent, PHP and OS version provided

Tell us about your environment

Web Browser: Firefox 133.0b9 ruTorrent: 5.0.0 PHP: 8.3.13 OS: Arch Linux 6.11.6-zen1-1-zen x86_64

Tell us how you installed ruTorrent

Using the package in the AUR

Describe the bug

The Material Design theme is broken in several ways. See screenshots for non comprehensive list.

Bad icon offsets:

Badly aligned details table background:

Cut off text:

Misaligned checkboxes:

Incorrectly size buttons:

There may be others I missed.

Steps to reproduce

Change theme to Material Design
Observe broken theme

Expected behavior

Theme is not broken

Additional context

Here are some fixes:

bad icon offsets:

 div#gcont div.row.Header span {
-   background: transparent url(./images/status_icons.png) no-repeat 0 -288px;
+   background: transparent url(./images/status_icons.png) no-repeat 0 -286px;
   padding-left: 17px;
 }
 div#gcont div.row:not(.Header) span.det-hdr {
-   background: transparent url(./images/status_icons.png) no-repeat 0 -306px;
+   background: transparent url(./images/status_icons.png) no-repeat 0 -303px;
   padding-left: 17px;
 }

badly aligned details table background:

 div#gcont div.row > div {
-   background:#181818 url(./images/headers.png) repeat-x 0 -38px;
+   background:#181818 url(./images/headers.png) repeat-x 0 -30px;
 }

cut off text:

-.stable-body td div { font-family: Ubuntu, Verdana, Arial, Helvetica, sans-serif; height: 16px !important; }
+.stable-body td div { font-family: Ubuntu, Verdana, Arial, Helvetica, sans-serif; }

-.stable-body td div {font-size: 11px; overflow: hidden; height: 16px !important;}
+.stable-body td div {font-size: 11px; overflow: hidden;}

-.stable-icon {width: 16px; height: 16px; margin-right: -6px; margin: 0 5px; padding: 0 !important; float: left}
+.stable-icon {width: 16px; height: 16px; margin-right: -6px; margin: 0 5px; padding: 0 !important; float: left; position: relative; top: 50%;}

squished sidebar text (there are many instances of this, for whatever reason):

:host {
  display: flex;
  padding: 3px;
  flex-flow: row nowrap;
  align-items: center;
-  height: 16px;
  cursor: pointer;
  overflow: hidden;
  --prefix-color: black;
  --prefix-fontsize: 19px;
  --badge-color: black;
  --badge-background-color: #f0f0f0;
  --status-image: url(../images/tstatus.png);
  --icon-size: 16px;
}

Airman8 commented 3 days ago

From what I understand of the new release schedule, v5.0 was intended to get mobile support up and running to a usable extent, but not to iron out all the UI issues that might come up.

v5.1 is coming up for release soon. It is intended for long-term support and has already resolved numerous bugs from v5.0. If you're willing to test the 5.1 beta, it could help to see if these bugfixes will resolve your issues. (For reference, I'm on the 5.1 Beta and I'm not seeing any of the issues you're having in v5.0 with the Material Design theme, so perhaps an upgrade will help.)

stickz commented 2 days ago

Yes that is correct, we'll be releasing v5.1 in the near future with 40 plus bug fixes.

Novik / ruTorrent