Incompatabile UI with Nextcloud server version 25.0.0

[Grotax]

Explain the Problem

I tested news under the current master branch of Server, which will eventually end up as release 25.
I took some screenshots to show the effects.

There might be more broken pieces. I didn't mark the problematic spots but it's obvious that many icons are missing.

Themes probably also don't work properly, I tested it quickly but no screenshots yet.

System Information

• News app version: master/8ce114def268f8e01b8bd3f2a7cf905b01f2eddc
• Nextcloud version: master/48ece9f345eac0d889c10ceacd48a5cf3999f4cf
• Cron type: -
• PHP version: 8.1.7
• Database and version: sqlite3
• Browser and version: Firefox 102
• OS and version: -

Screenshots

[Grotax]

The first beta for NC 25 is out now.

So far no change to fix the current UI.

[anoymouserver]

I assume nextcloud/server#32060 and https://help.nextcloud.com/t/scss-support-dropped-with-nextcloud-25/ could help.

• The broken explore page is very likely caused by the removed SCSS support.
  For this app it only affects css/explorer.scss and css/mobile.scss which shouldn't be too hard to rewrite in plain CSS.
• According to the linked issue, the previous icon names still work, but should use a dedicated div/span for the icon only.
  Currently the icons are applied directly to the enclosing element:
  

  news/templates/part.navigation.explore.php

  Line 2 in 71d635d

  <a class="icon-link" ng-href="#/explore/?lang={{Navigation.getLanguageCode()}}">

[CarlSchwan]

Fixed it in #1880 (comment)

[Grotax]

Mostly fixed by #1880 only the buttons don't have their icons

[Grotax]

According to the linked issue, the previous icon names still work, but should use a dedicated div/span for the icon only.

Seems like that is no longer the case, I tried it and it doesn't work. There are also no examples in the linked issues they all use vue already and therefore switch to the vue icon module.

[Grotax]

On my test instance the icons still appear with beta3 ...

[daffydock]

As FYI: On Nextcloud RC5, the News app is disabled when server update is applied. On console, trying to re-enable it via occ will output:

App "News" cannot be installed because it is not compatible with this version of the server.

To those who read this, be aware, that you may not be able to re-enable the app in this manner.

[Grotax]

Yea you can also use --force to enable the app via occ. The api should work fine, but the UI will not work correctly.

Also see
#1932

[daffydock]

Yea you can also use --force to enable the app via occ. The api should work fine, but the UI will not work correctly.

Also see #1932

Yeah, I did that when I updated to RC5. Luckily for me, my use case for your app is 99% on mobile. I barely, if at all can tell the difference aside having the podcast controls pop up for half a second.

In general, this is great for me, since your app is one of the top three I use on Nextcloud. Having it not work, at all of the sudden would have been undesirable. On PC, I do not see any glaring issues that I have noticed yet, except for a bit of a hiccup when starting the app. Where only the right hand side shows first for about a second or two before the whole thing populates. For now, I can wait until whenever you get around to making it compatible with 25. Oh, and yes, that the items do not change to "read" on PC, but they not do do that on mobile.

Just wanted to let others know.
Cheers.

[rhyst]

Not sure if I should make a new issue but I have just updated to 25 and for the most part News seems to work fine. I spotted one UI bug where the compact title bar floats a little bit too low when scrolling:

For me this can be fixed by changing the top positioning on line 234 of css/content.css from top: 50px to top: 0px.

I also wasn't sure if it was easier just to post this or make a PR so let me know if you'd prefer a PR.

EDIT: I made a PR #1944

[daffydock]

Not sure if I should make a new issue but I have just updated to 25 and for the most part News seems to work fine. I spotted one UI bug where the compact title bar floats a little bit too low when scrolling:

![image]

For me this can be fixed by changing the top positioning on line 234 of css/content.css from top: 50px to top: 0px.

I also wasn't sure if it was easier just to post this or make a PR so let me know if you'd prefer a PR.

EDIT: I made a PR #1944

I saw your PR and its response. For what is worth, I took your recommendation and changed it locally for my instance. Thanks.

[Grotax]

I decided to make a new issue, since my original findings were not accurate.
#1945