🎉🙌 Huge improvements with Pics

[Dean D. Babic]

Hi all,

this old thread touches on it: https://groups.google.com/g/jam-py/c/cZmBMbqeQkI/m/nj27hm20DAAJ

The Pics can be displayed vertically:

This is a template (simplified for here, no buttons):

<div class="pics-view" style="position: relative;">
  <div class="view-table"></div> <!-- Jam.py table, off-screen -->
  <div class="pics-grid">
  </div>
</div>

And JS plus CSS:

function on_view_form_created(item) {
    initPicsGrid();
}

function initPicsGrid() {
    const grid = document.querySelector(".pics-view .pics-grid");
    const imgs = document.querySelectorAll(".pics-view .view-table td.pic img");
    if (imgs.length === 0) {
        setTimeout(initPicsGrid, 500); // wait until Jam renders
        return;
    }

    imgs.forEach((img, i) => {
        const clone = img.cloneNode(true);
        grid.appendChild(clone);
    });
}

CSS:
.pics-view .view-table {
  position: absolute; /* remove from flow */
  left: -9999px;      /* move off screen */
  top: 0;
  width: 0;
  height: 0;
  overflow: hidden;   /* prevent scrollbars */
}
.pics-view .pics-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0; /* eliminate gap */
}
.pics-view .pics-grid img {
  width: 120px;
  height: auto;
  border-radius: 4px;
}

Next is to add event on each pic, which is now not the case

[Ari Sobel]

Its huge, @Dražen Babić !

Thanks for continuously improving this amazing Project!

--
You received this message because you are subscribed to the Google Groups "Jam.py Users Mailing List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jam-py+un...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/jam-py/edb06854-9e32-4518-b770-0588714c0fd1n%40googlegroups.com.