Bootstrap 4 grid span over two rows and aurelia

1

Dear aurelia crew,

im trying to create a frontpage with 5 news items. The first item is larger and consists of two rows.
EG:

SZ_home
SZ_home780×318 202 KB

Normally in bootstrap grid it is pretty easy and I would do something like:

<div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
      </div>
      <div class="col-md-6">
        <div class="row">
          <div class="col-md-6">
          </div>
          <div class="col-md-6">
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
          </div>
          <div class="col-md-6">
          </div>
        </div>
      </div>
    </div>
  </div>

But the tricky part is combining aurelia and this design together.
I really want to use the repeat for loop instead of hardcoding everything.

Any ideas on how to do this?

1 Like
2

You could use the $index value to specify what to do. And combine this with the modulus operator %.

<div class="container-fluid">
    <div class="row" repeat.for="newsItem of newsItems">
<template if.bind="$index % 5 === 1 || $index % 5 === 3">
        <div class="row">
          <div class="col-md-6">
</template>
          <div class="col-md-6">
<template if.bind="$index % 5 === 2 || $index % 5 === 4">
            </div>
</template>
          </div>
<template if.bind="$index % 5 === 0">
      </div>
</template>
    </div>
  </div>
</div>

Disclaimer: untested and probably not best solution, but to give you a hint in how to solve the problem. :wink: Please share your solution afterwards.

See bottom of next paragraph: https://aurelia.io/docs/fundamentals/cheat-sheet#templating-view-resources

2 Likes
3

I’m not getting why you would want to use a repeat.for here, your UI is static, so why shouldn’t your bindings be static?

<div class="container-fluid">
    <div class="row">
      <div class="col-md-6" with.bind="newsItems[0]">
      </div>
      <div class="col-md-6">
        <div class="row">
          <div class="col-md-6"  with.bind="newsItems[1]">
          </div>
          <div class="col-md-6" with.bind="newsItems[2]">
          </div>
        </div>
        <div class="row">
          <div class="col-md-6"  with.bind="newsItems[3]">
          </div>
          <div class="col-md-6"  with.bind="newsItems[4]">
          </div>
        </div>
      </div>
    </div>
  </div>

You could opt for a hybrid approach, making the first block static and iterate the four smaller ones, but I really don’t see the point, it will be less performant with no added benefit.
If you would want to go with this approach, see this SO post: https://stackoverflow.com/questions/38532233/dynamically-create-another-row-of-images-using-aurelia/38606955#38606955

1 Like
4

Hmm. Good point actually.
I think I have read somewhere that the :active state is not available if you don’t use the for loop. But I could be wrong. Will definitly look into that solution! Thanks.

1 Like
5

might be my dumb ass but I cant get that to work.
I am trying to get it from an array of posts. So trying posts[0] didn’t do much.
What am I missing here?

1 Like
6

Might be good to reproduce your issue in a codesandbox, working example:

1 Like