[Vue Rewrite] Basic Mobile accessible interface

[devlinjunker]

Related to #748

🗒️ Summary

• Add Media Queries and styles that make the article appear at the bottom of smaller screens (rather than on the right)
• Clean up a couple of other styles to make the article area appear more separate (box shadow + border)

✅ Checklist

• Code is properly formatted
• Sign-off message is added to all commits

- [ ] Changelog entry added for all important changes.

📷 Visual

On my Iphone:

Testing on narrow width browser:

Still working in normal width:

➡️ Up Next

• Fix Explore Page (WIP)
• Update Documentation for Front End
  • Developer
    • Frontend Tips/Organization
    • Front End Unit Tests
  • Sharing
  • Remove Frontend/JS Plugin Documentation ( should we just update this when we add the new addArticleAction Plugin API?)
• Settings in Sidebar
  • Component
  • Backend Requests + Application Behavior Changes
    • Keyboard Navigation
    • Mark on Scroll
    • Reverse Order (Oldest to Newest)
    • Upload/Download Subscriptions/Articles
• use ?selected=<id> url query parameter to store and parse which Feed Item is displayed in FeedItemDisplay (this will be useful for implementing the search bar - and allow navigating directly to the specific feed item)
  • Also need to update search provider php code
  • Update Documentation?
• addArticleAction Plugin API
  • Nextcloud News Code
  • Add to Bookmarks Example Plugin
  • Add New Frontend/JS Plugin Documentation

[Grotax]

Works for me, but I notice that the audio player seems to be gone (maybe already since the last PR)
And I have blank space at the top of the app.

[devlinjunker]

@Grotax which browser are you using? It seems to appear for me on firefox and chrome, and has no space at the top:

I didn't fully test the audio/video playback in mobile though... so i'll do that now

[devlinjunker]

I've made some changes to the css, using flex more properly rather than relying on media queries to set the height.

Let me know if it shows up now, and if it doesn't it would be great to include which browser it is not appearing in. I have tested on OSX chrome, safari and firefox and iOS chrome and safari so far

[Grotax]

Maybe the issues are related, I tried again based on this PR.

In both Firefox and Chromium I have the empty space at the top and the player is not visible.

I build the news app with make
For nextcloud I use https://github.com/juliushaertl/nextcloud-docker-dev
I use the stable27 branch of nextcloud server.
Latest Chromium and Firefox on Manjaro Linux.

I will try on my VM that is built like an actual standard nextcloud server

[Grotax]

Same on my vm.

Also in that context noticed that we will need to adjust the build process for the appstore a bit but that can be done later.

Not sure what else I can do, I also don't have much experience with frontend things.

[devlinjunker]

I bet that you’re correct that the space at the top and missing audio player are related. Hmmm…. I think I’m using stable28 on my development machine… so that may be the issue. I’ll look into testing on a stable27 version of nextcloud to see if I can reproduce. I’d be surprised that the operating system you are running the browser in is affecting it, but I haven’t tested with Linux so that may also be the issue.. if you have access to another OS to open it in that would be great to try to see if it is related.

[Grotax]

Same from a Windows 10 with Edge browser.

stable28 is not out yet :)

So i think it has something to do with building the app or the combination with the nextcloud version, some css rule not working with the servers css?

I will try with other nextcloud versions when I can

[devlinjunker]

you're right, I'm using stable27 (:

I built the app on using make on my dev machine

and it still doesn't seem to have the css issue, I also tried dark mode and I'm not seeing it yet

I am using osx though for hosting and building ... so idk if that would cause any differences..

[devlinjunker]

If someone else could test this that would be great to get a steps to reproduce

But until then it would also be awesome if @Grotax you could right click to inspect in the browser:

and then use the search feature of the inspector tab to search for .podcast and I think go to the 2nd instance of it. If you hover your mouse in the HTML DOM over the <div class="podcast" ..> element you should see where that is appearing in the page:

You can also use the inspect technique to right click in the blank space at the top of the screen, and it should navigate in the Inspector to show which element is causing that and you would have to try to parse the css rules on the right hand side of the inspector panel.

[Grotax]

After adding
#content {
margin-top: 0px
}

I can see the player again, so it was there all the time just hidden.
Also works in the mobile views simulated by Firefox, I think the break points are maybe not perfect.
And I noticed in the player that the buttons can get hidden, I think we will need a different design there.

But all in all works and based on modern tech so I like it.

We can merge this in my opinion but there seems to be some conflicts it requires a manual re-base.

[devlinjunker]

@Grotax I don't see any conflicts

should I just merge?

[SMillerDev]

Yeah, go for it