Implement new Vue Virtual Grid

[Mikescops]

This implement the new virtual grid lib I created: https://www.npmjs.com/package/vue-virtual-grid

Also fast forward #125

And finally fix a bug with title rendering and the new sidebar.

Please take time to QA this to make sure there is no regression I couldn't catch.

Preview of it:

and:

[Mikescops]

I found few bugs:

• (not related to this PR) XML parsing has an issue when there is no images
• when resizing the window the computation goes wrong for full width items (this has to be fixed in the virtual grid lib)
• the viewer is locked to folders once again (maybe we will also have to edit the virtual grid lib to manually trigger the next batch of data)

[Mikescops]

* when resizing the window the computation goes wrong for full width items (this has to be fixed in the virtual grid lib)

* the viewer is locked to folders once again (maybe we will also have to edit the virtual grid lib to manually trigger the next batch of data)

Both issues are now fixed + the ones reported by @skjnldsv

@jancborchardt if you can give a try

[jancborchardt]

Very nice! Only some small feedback:

• With the new date headings, the "Your photos" heading is not necessary anymore and can be cut :) But make sure there’s some nice whitespace on top of the first date heading
• The date headings could do with some more whitespace above them, let’s say double of what’s there now (so 72px)
• I get this strange preview glitch when scrolling (in Firefox) where already loaded pictures fall back to displaying only the filetype icon:
  

[Mikescops]

I have the same glitches and I'm not sure why they are there, and it seems somehow that the old grid what already doing that but less visible.

I'll try to find why and fix the other spacing issues.

[Mikescops]

@jancborchardt it's fixed 😄
thanks @skjnldsv

[skjnldsv]

it's fixed

Congrats! Was not that easy :p

[skjnldsv]

• Header Navigation is missing when there is pictures (present when there is none)
• Loading indicator is missing
• Grid sizes config is not used anymore
• See inline comments too :)

[Mikescops]

Header Navigation is missing when there is pictures (present when there is none)

@jancborchardt asked to remove it when there is pictures

Loading indicator is missing

I'm not sure how we can re-add the loading indicator, the lib is not ready for this, I think we can open an issue on the lib and fix this later, I'm not convinced it's a blocker

Grid sizes config is not used anymore

As answered in the small comments, gridconfig is now handled on the lib side. It is configurable through functions passed to the grid component. In my opinion we can remove it and set the batch size with a param.

[Mikescops]

I have fixed all suggested issues except the loading icon when waiting for next batch.
For this one I created an issue on the lib side: Mikescops/vue-virtual-grid#8
If it's a non blocking regression we can move forward here.

[jancborchardt]

Nice! Only found little issues:

• .grid-container has a white background set which shows in dark mode. It doesn’t actually need any background set? (If it does then we should use variables – but I really don’t think the background needs to be there?)
• There’s a bit too much space on the top. It’s the padding-top of the heading plus the 66px of padding on the grid-container. I’d just remove the 66px top on the grid container, for any form factor. The padding of the heading is enough :)
• The bottom of the photo list has very little space, I’d go for something like 256px down there to signify the list is over.
  

[Mikescops]

@jancborchardt nice catch! done

[jancborchardt]

Looks good design-wise! :) Nice!

[Mikescops]

@skjnldsv can I let you merge this?

[TKFRvisionOfficial]

Hey guys, that is maybe a long shot but have you thought about implementing a little side timeline (a litle line with points on it on the site) where every point is a month so you can easily find pictures. Like at amazon cloud?

[Mikescops]

See #426

[axellebot]

Should we update the screenshot in Readme.md with the one provided here ?

[sanchosk]

Would it be somehow possible to separate not only by months, but also by days?

[axellebot]

Would it be somehow possible to separate not only by months, but also by days?

You should open a new issue to request it :)