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.
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.
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.
Thanks!
Sherri
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!
Hi Ignacio, loving your work on these components!
Just wondered if you have a guide to how to set up the 'Adapt notify links'. Basically, we have a course which is very academic and has references throughout, and we think this extension would be perfect for this use.
Thanks in advance!
Hi Mark, thanks.
- Add the adapt-notifyLinks extension to the adapt project
- Go to the project settings and check is enabled.
- Then, use a <a> tag with class 'notify-link' and use an adapt model id as href attribute, like this:
<a class="notify-link" href="#63efcfbf12a2cc56007f1cf5">Open an adapt model in a notify popup</a>.
Hope this helps.
Hi Ignacio,
I followed your steps but I'm only getting an empty notify popup...
Do I have to configure the component for the popup in a special way
or can I just copy a block oder component ID?
best,
Martin
Hi Martin,
Without looking at Ignacio's extension my guess is the content is within javascript or within the link like the example below. I personally try to use the javascript method but thought I would share the a tag inline version too. I will let him respond more to the functionality of his extension but perhaps this helps to lead you in the right direction. I also have a component version that works similar but might not be as flexible as his extension version.
EXAMPLE BELOW
<a href="#" onclick='require("coreJS/adapt").trigger("notify:popup",{title:"Notify Title Text",body:"Notify message"});return false;'>Click here to show a Notify popup!</a>
Here is what the javascript version looks like...
"_notifyOnComplete": {
"_isEnabled": true,
"title": "COURSE COMPLETE",
"body": "Well done! You have completed the course and may now close this window."
}
Hi Mike,
thanks for sharing your idea and your component!
In this case, unfortunately, it will not help me.
I have a course that had to contain a lot of videos.
My idea was to create a kind of link overview and with those links it opens a video/media component as a notiy popup...
Hi Martin, I just updated the notifyLinks extension.
Could you give it another try?
Hi Ignacio,
We're using the Vertical Items component, and wondered if there was a way to alter the 'percentage in view' within the viewport for the animations?
Many thanks in advance.
Mark
https://github.com/nachocinalli/adapt-verticalItems/blob/master/js/VerticalItemsView.js#L23-L32
Not without changing the code, the inview even is reasonably brutal, the onscreen event has more detail.
See
https://github.com/cgkineo/adapt-graphicLottie/blob/master/js/LottieView.js#L32-L42
Thanks for the reply.
Sorry, I'm not a coder by trade. Would you suggest I swap the code between the 2 examples and import my own version of the plugin?