Picture of Ignacio Cinalli
New components
by Ignacio Cinalli - Wednesday, 8 December 2021, 8:59 PM
 

Hi, I would like to share some new Adapt components.

You can view them in action here.

All components are available on my github profile.

Thanks to all the adaptlearning community for their support.

Picture of Steve Cole
Re: New components
by Steve Cole - Wednesday, 8 December 2021, 11:11 PM
 

Super cool components! 

Picture of John Niezen
Re: New components
by John Niezen - Thursday, 9 December 2021, 7:26 AM
 

very nice additions, will force our team to move to FW5 very soon now.

Picture of Marissa Preciado
Re: New components
by Marissa Preciado - Thursday, 9 December 2021, 2:55 PM
 

Love these! Thank you so much for sharing!

Picture of Chris Gillison
Re: New components
by Chris Gillison - Thursday, 9 December 2021, 4:07 PM
 

Awesome!!

Picture of Oliver Foster
Re: New components
by Oliver Foster - Monday, 13 December 2021, 8:07 AM
 

Absolutely awesome. Thanks for sharing.

Picture of Mark Baldwin
Re: New components
by Mark Baldwin - Wednesday, 15 December 2021, 7:25 AM
 

Love these, thanks for sharing!

Picture of Jason Wilson
Re: New components
by Jason Wilson - Wednesday, 15 December 2021, 10:42 PM
 

These look great - thanks!

Picture of Sherri Fricker
Re: New components
by Sherri Fricker - Thursday, 6 January 2022, 11:28 PM
 

Hi Ignacio,

We really love these new plug-ins and have recently installed the Cards, Vertical Items, Counters, and Link Items.

We really like the 7th option (horizontal card with a picture on the far left or right) you have done with the cards and would like to know how you set this up. We also aren't sure how to get 3 cards side by side.

Any help you can provide would be greatly appreciated.

Currently we’re on:
  • Authoring tool version 0.10.5
  • Framework version 5.18.1

Thanks!

Sherri

Picture of Ignacio Cinalli
Re: New components
by Ignacio Cinalli - Friday, 7 January 2022, 6:00 PM
 

Hi Sherri, thank you I appreciate it.

By default, all these components have minimal css styling.
I prefer to modify the appearance from the theme.

The 7th option has 'list' class on the cards component.
You can add this to your custom theme or on your Authoring Tool from project settings >Custom CSS/LESS code

.cards{
    &.list{
      .cards__item-container{
        flex-direction: row;
        align-items: center;
      }
      .cards__item-body{
        margin-right: 2rem;
      }
      .cards__item__image{
        min-width: 180px;
        padding: .5rem;
      }
      .cards__item.row-reverse{
        .cards__item-container{
          flex-direction: row-reverse;
        }
        .cards__item-body{
          margin-right: 0;
          margin-left: 2rem;
        }
      }
      @media (max-width: @device-width-small) {
        .cards__item-container,.cards__item.row-reverse .cards__item-container{
          flex-direction: column;       
         }
         .cards__item-body{
           margin-left: 0.5rem;
           margin-right: 0.5rem;
         }
      }
    }
}


And then in the classes of one of the items add: row-reverse

To get 3 cards side by side you can use the property Columns.

I hope this helps!

Picture of Sherri Fricker
Re: New components
by Sherri Fricker - Wednesday, 12 January 2022, 10:15 PM
 

Yes! This worked so well, I have another question. We are using the counters, but only have 2. Is it possible to have them centred on th screen instead of both on the left?

Picture of Ignacio Cinalli
Re: New components
by Ignacio Cinalli - Thursday, 13 January 2022, 1:06 PM
 

Hi Sherri, you can add a css class to the counters component for example: counters-games.

And then in your theme / Custom CSS/LESS code:

.counters{
    &.counters-games{
        .counters__widget {
            @media (min-width: @device-width-large) {
               grid-template-columns: repeat(2, 1fr);
            }
        }
    }
}