Smalltalk Seaside display in threes without using tables

user_11282377 0
Viewed 77

I have built a web site for my local plastic model club which involves showing multiple images on a page. I like to show them 3 abreast. Up to now, I have done this using a nested series of table codes which gets very messy.

Is there a simpler way. Let us say that I have 12 images and I want to show them three across and 4 rows down. I can do this using html table, html table row, etc. but it gets very complicated with lots of if statements, etc.

As I have had problems maintaining the web site from day to day, I have taken down the seaside version but you can see an example of the type of display on the current home page at http://www.ipms-clacton.org.uk under "A selection of member's models"

David

seaside smalltalk
3 Answers

If you want to make the table programmatically you could use the following code as a new message in your class. If you pass it the html and an orderedCollection it makes a new table 3 items wide and as many rows as it takes. The final row can be less than three elements. You will need to change it to display images rather than text but it's a place to start. The removeFirst: command removes a number of items from an ordered collection and returns those items as a new collection. That lets you break the collection apart into elements for your individual rows. Here is the message's definition:

make3Table: html using: anOrdCollection

html table: [ 
    [ anOrdCollection size >= 3 ] whileTrue: [ html tableRow: [
        (anOrdCollection removeFirst: 3) do: [ :item | html tableData: item ]
        ].
    ].
    anOrdCollection isNotEmpty ifTrue: [ 
        html tableRow: [ 
            anOrdCollection do: [  :item |  html tableData: item ]
        ]
    ].
]
user_184471760

The question isn't Seaside specific, but HTML/CSS related.

The solution for that is to use any element inside a container, and use CSS-grid layout for that container.

E.g.

.gallery-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 20px;
  padding: 20px;
}

.image-container {
  display: flex;
  background-color: navy;
  color: white;
  align-items: center;
  justify-content: center;
  height: 150px;
}

@media (min-width: 600px) {
  .gallery-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .gallery-container {
    grid-template-columns: repeat(4, 1fr);
  }
}
<html>

<body>
  <div class="gallery-container">
    <div class="image-container"></div>
    <div class="image-container">2</div>
    <div class="image-container">3</div>
    <div class="image-container">4</div>
    <div class="image-container">5</div>
    <div class="image-container">6</div>
    <div class="image-container">7</div>
    <div class="image-container">8</div>
    <div class="image-container">9</div>
    <div class="image-container">10</div>
  </div>

</html>

It will work for any number of elements, and it has two CSS width breakpoints to show 1, 2 or 4 elements per row.

Then the Seaside part is only about generating that container and the elements using the canvas tags.

user_6449180

If you don't want to use a table another couple simpler ways to do it with css + seaside is with CSS columns:

html div 
    style:'columns:3';
    with:[ myCollection do:[:ea | html div:ea]]

There are several css styling rules for columns.

Or using CSS flexbox

html div 
    style:'display:flex; flex-direction:row; flex-wrap:wrap; justify-content: space-between';
    with:[
          myCollection do:[:ea | html div 
                                      style:'width:32%'; 
                                      with: ea]
          ]

Those style: rules could/should be in your CSS file as a CSS class

user_61818470
Related