closed livingstoneonline/livingstoneonline#10

Browse by Catalogue: Notes for IFrame

awisnicki

When we rebuild the Catalogue, we'll want to include the following:

  1. Lazy load
  2. Sticky header

We'll most likely also want to hide the "Repository" column in the default view, but this is something we can explore once the rebuild is done.

nigelgbanks

Lazy load and a sticky header will come a bit later and aren't currently deployed but "Repsoitory" is now hidden by default.

awisnicki

OK, looks good. What we'll want to do, ultimately, is to create enough space on the right and left sides of the page so that we can add the navigation arrows like we have on the other pages in the site. Leave this open for now.

awisnicki

Since we've taken this up in issue #61, when you get a chance, could you give me an estimate of how much time this would take? There are three things here, I believe: 1) Put the catalogue in an iFrame, 2) add a sticky header, 3) add lazy load.

Also, note that Kathy is working on the page arrows this week, so you can ignore the points above in relation to that.

nigelgbanks

It'll take me a while to do some investigation (what existing tools are out there and how can we integrate them etc), I'll try to prep a estimate for the tail end of next week.

nigelgbanks

I have put about an hour into this and I can't find anything that will readily work with Drupal and the form that we can plug in and use immediately, so we'd have to build something from scratch if we're to make use of what Drupal provides for rendering tables and paging, etc.

That being said there is another tool we could adopt to achieve a buffered table with sorting / searching and the like, provided by Ext JS, that we could embedded into the display.

http://examples.sencha.com/extjs/6.0.1/examples/classic/grid/filtered-buffered-store.html

I've worked with this tool in the past (although that was in it's 3.0 version and a lot has changed now that it's on version 6.0).

It has many many more features than dealing with the lazy loading table, which you might be interested in exploring.

The commercial licence fee is $4,340, but fortunately since this is an open source project we can use it under GPLv3 for free.

Before I spend any more time building an estimate, have a look at the demo and and some of the other features and see if the look and feel interests you or gives you any ideas.

awisnicki

OK, I will check this out and be back in touch. Quick question, when you say "see if the look and feel interests you," the point is we'd have to redo the visual appearance of the table correct? In other words, we wouldn't be leaving it as is and just changing the underlying functionality/technology?

nigelgbanks

It will change in look and feel of the table, we do have the ability to theme the Ext JS (So it won't look the same as the demo link above), but the table won't look the same as it currently does as well.

Some notable changes:

  • It will have a fixed height and width
  • Users will be able to adjust the width of columns
  • Users will be able to re-order columns
  • Users will be able to choose which columns they want to appear
nigelgbanks

revised-catalogue-header

Columns collapse and on download links can dispear on smaller devices.

nigelgbanks

Look into having the header sticky (should be posible) also have the title column sticky as well (might be tricky)(

awisnicki

See issue #131

nigelgbanks

Had a crack at this (sticky header), still not yet resolved as there are issues with implementing this for content that is hidden. Will continue to look into it.

awisnicki

Ok, thank you for your work on this. I'll stand by.

nigelgbanks

It's ready to be reviewed.

awisnicki

This works brilliantly on desktop. Thank you.

I looked at mobile also, but see it's slightly wonky there. See screen shot. img_6340

awisnicki

Just drawing attention to this as another mobile issue.

awisnicki

You didn't comment on this. This has been improved, but there's still a slightly small space between the top sticky row of the header and the sticky header of the site.

awisnicki

This remains an issue. Please see screen shot. Note that there's just a sliver of text peeking through in the circled area. img_6861

awisnicki

Looks resolved. Thank you~!