support better reading in a tablet screen

[nachoparker]

This PR is aimed at better reading on a >1024px width tablet.

Because the screen is quite narrow, we can see how the titles get truncated.

After this patch, the sidebar collapses just like it does on the phone.

I replicated the relevant CSS code from server.css and changed the media query for the new screen size.

[Grotax]

I appreciate the effort but:

1. You ignored the indentation
2. The media query's where sorted by size big -> smaller screen
3. There are options in there that don't belong in the news app
4. Even a cleaner approach would probably violate rule number 3 https://docs.nextcloud.com/server/stable/developer_manual/design/navigation.html#basic-rules

I will wait for @SMillerDev but for me its 👎

[SMillerDev]

I appreciate the effort but I don't actually see anything news specific here. I think all these fixes should be submitted to the nextcloud server repo. It'll make it better for a lot more apps then just news.

[nachoparker]

Well, the issue is that these CSS rules are ok for other apps, like Files but not for News.

The reason is that we have a lot of relevant text that should fit in one single line. In Files normally the file names are not that long and even if they get truncated it is not a big deal.

@Grotax thanks for your comments. I am not familiar with NC development but I can address those issues if we want to go ahead with this.

[Grotax]

@nextcloud/designers any opinion on this?

[skjnldsv]

Yep, such changes should probably be integrated into server. Though I doubt we can aim to fit all the differents tablet settings. By deciding only two modes, we simplify our layout a bit. But if we add 1024px, we'll better remove the 768px limit. Having two sizes that do the same thing doesn't really make sense to me :)

[nachoparker]

Thanks for not dropping the issue. The fact is that this doesn't look good on a tablet so something should be done somewhere.

IMHO this is a News app issue, because other Apps look just fine (for instance, Bookmarks does line wrapping).

That being said, if it makes sense for NC designers to switch the media query cut from 768px to 1024px that would also work and would be perfect. Also it would be a tiny change codewise :)

Should I open an issue/PR with this in nextcloud/server? Please, point me in the right direction

[skjnldsv]

That being said, if it makes sense for NC designers to switch the media query cut from 768px to 1024px that would also work and would be perfect. Also it would be a tiny change codewise :)

@jancborchardt there is a 2% diff between 768px and 1024, maybe we should indeed switch to 1024 🤔 https://www.w3schools.com/browsers/browsers_display.asp

In the meantime this could indeed be addressed in news. In files for example we simplify the current view on sizes < = 938px.

<= 938	> 938

[jancborchardt]

@skjnldsv that seems good indeed! Makes the view much simpler.

[nachoparker]

I created a PR here nextcloud/server#15199 for the server side

Should I try to cleanup this PR and get it merged? I think it still needs fixing before that gets accepted

[SMillerDev]

There's nothing in this review that wouldn't affect other apps right?

[jancborchardt]

This should be solved in the server repository rather than single apps. We have or had similar discussions e.g. in the Maps app, Calendar app, and others.

[nachoparker]

I planted a proposal in the server code -> nextcloud/server#15199

Still, news needs a little tweak. I pushed a change to this PR that depends on the server change. What do you people think about changing mobile.css to mobile.scss so this change can just be

--- a/css/mobile.css
+++ b/css/mobile.scss
@@ -1,4 +1,4 @@
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: $mobile-breakpoint) {

?

[SMillerDev]

If that is all that's needed I'm fine with it. But is there no css var for this?

[nachoparker]

The server var is $mobile-breakpoint, but we would have to change news/css/mobile.css to scss if I am not mistaken so it can evaluate it through sass

[SMillerDev]

I meant variables like the colors we use.

[nachoparker]

Doesn't seem like news uses scss at all

css
├── admin.css
├── app.css
├── content.css
├── custom.css
├── explore.css
├── mobile.css
├── navigation.css
├── settings.css
└── shortcuts.css

[nachoparker]

Please, review this last change. This allows to use server global variables, which is a step forward IMO. I agree that it would be nice to use other server variables as well.

https://github.com/nextcloud/server/blob/master/core/css/variables.scss

Once the change is merged in the server, the fix will work automatically in News.

Just rename and use variables -> https://docs.nextcloud.com/server/15/developer_manual/design/css.html

[Grotax]

Needs signature and a rebase :)

[nachoparker]

merged and signed. Still DCO complaints...

[nachoparker]

ok, I had to sign all the commits. Done :)