Vue improvements

[powerpaul17]

Summary

I made some improvements to the new vue frontend:

• use Nextcloud components for item list & article view
• behaves better on small/narrow screens

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Changelog entry added for all important changes.

[SMillerDev]

Hi @powerpaul17, could you post some screenshots of the changes?

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (2245250) 89.28% compared to head (2d9f100) 0.00%.
Report is 7 commits behind head on master.

❗ Current head 2d9f100 differs from pull request most recent head 5410721. Consider uploading reports for the commit 5410721 to get more accurate results

Additional details and impacted files

@@             Coverage Diff              @@
##             master   #2401       +/-   ##
============================================
- Coverage     89.28%       0   -89.29%     
============================================
  Files            67       0       -67     
  Lines          3239       0     -3239     
============================================
- Hits           2892       0     -2892     
+ Misses          347       0      -347     

see 67 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[devlinjunker]

awesome work! i'm glad to have made the push on the migration which seems to have inspired you as well!

[devlinjunker]

should this style be moved to a css rule?

[powerpaul17]

This was just moved, I did not change/add it.. but I can move it into a class if you like.. 😉

[powerpaul17]

awesome work! i'm glad to have made the push on the migration which seems to have inspired you as well!

Yes, it's way easier once all the tooling and such is set up.. 😊 Thanks a lot for taking up (and finishing) the rewrite..

[powerpaul17]

Also I noticed I have to fix the frontend tests.. 😅

[Grotax]

Tested, works for me. I think good improvements.

The explore page seems to be visually broken now. No more background.

[powerpaul17]

Tested, works for me. I think good improvements.

The explore page seems to be visually broken now. No more background.

I also noticed that, but wasn't sure if it is because of my changes.. but I'll have a look at it..

[devlinjunker]

is it possible when no item is selected for the details section to be hidden so we can just show the list of news items?

Rather than this empty space:

[devlinjunker]

we'll also probably need to make a way to mark items as read without having to open them in the mobile view, or to navigate through the items, since they take up the whole screen now and you can't select another item without pressing the back button..

[powerpaul17]

were you able to fix the explore page so it has the white background? can you post a screenshot of it if so?

Yes, I forgot to add the content wrapper to the explore page since I moved it out of the app skeleton into the routes. Already fixed it.

[powerpaul17]

we'll also probably need to make a way to mark items as read without having to open them in the mobile view, or to navigate through the items, since they take up the whole screen now and you can't select another item without pressing the back button..

That occurred to me too, but I did not want to include everything in one PR but start slowly.. 😉

[powerpaul17]

is it possible when no item is selected for the details section to be hidden so we can just show the list of news items?

Rather than this empty space:

I think there is a component for the empty view when no item is selected. Removing the details content would seem rather strange I guess.

[devlinjunker]

we'll also probably need to make a way to mark items as read without having to open them in the mobile view, or to navigate through the items, since they take up the whole screen now and you can't select another item without pressing the back button..

That occurred to me too, but I did not want to include everything in one PR but start slowly.. 😉

Should we merge this to a branch then rather than master, so we can fix this before it is released?

I think there is a component for the empty view when no item is selected. Removing the details content would seem rather strange I guess.

Can we just hide the details if there is nothing selected? just seems like a huge waste of screen real estate

[Grotax]

I don't mind merging it into master when you both are done with the stuff you want to cover in this PR.

I don't intend to release a stable until the front-end is "done" until then we will release alphas and people have to deal with the imperfections. Or stay on the last stable release..

They could even roll-back with some manual effort.

[powerpaul17]

As I already said, I would do it in another PR as this one deals with the list/content view. I just want to address the empty content issue and fix the failing tests.

[devlinjunker]

Sounds good!

[powerpaul17]

@devlinjunker I had to remove the two failing tests for showing feed title and unread count because it doesn't work anymore with shallowMount. The header is also positioned absolutely at the moment which should also be moved into the right component but I did not want to do it now. Would it be ok for another PR?

[devlinjunker]

that seems fine to me

[Grotax]

Can we merge this or anything left for this PR?

[Grotax]

Might need a rebase on master and maybe check of npm lock file, since the recently merged changes

[powerpaul17]

From my perspective it can be merged. I would rather do further improvements in a separate PR.

[anoymouserver]

Apparently the main-container in FeedItemRow.vue is now dependent on the content width.

[powerpaul17]

Apparently the main-container in FeedItemRow.vue is now dependent on the content width.

I'll take a look at it. Will do a follow-up PR soon..