Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Add _classes to hotgrid__item (fixes #143) #144

Merged
merged 4 commits into from
Jan 10, 2024
Merged

Fix: Add _classes to hotgrid__item (fixes #143) #144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b6fde9a
Add _classes to hotgrid__item-btn
swashbuck Jan 9, 2024
1c745ca
Readme
swashbuck Jan 9, 2024
6ead6c1
Move _classes to .hotgrid__item
swashbuck Jan 9, 2024
2111a20
Add _graphic._classes property for grid item
swashbuck Jan 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,9 @@ The 'visited' state of the grid item image. This setting is optional and does no
##### alt (string):
The alternative text for the item image. Assign [alt text](https://github.com/adaptlearning/adapt_framework/wiki/Providing-good-alt-text) to images that convey course content only. By default, the item is labelled by the `title` (if set), otherwise a generic 'Item 1, 2, 3 etc' label is applied, followed by the alternative text (if set).

##### \_classes (string):
CSS class name(s) to be applied to the grid item.

#### \_itemGraphic (object):
The itemGraphic object defines the image displayed in the popup that is shown when the item is selected by the learner. You only need to include this object if you want to display a different image in the popup. It contains the following settings:

Expand Down
9 changes: 6 additions & 3 deletions example.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@
"srcHover": "",
"srcVisited": "",
"alt": "",
"title": "Grid Title 1"
"title": "Grid Title 1",
"_classes": ""
},
"_itemGraphic": {
"src": "course/en/images/example.jpg",
Expand All @@ -46,7 +47,8 @@
"srcHover": "",
"srcVisited": "",
"alt": "",
"title": "Grid Title 2"
"title": "Grid Title 2",
"_classes": ""
},
"_itemGraphic": {
"src": "course/en/images/example.jpg",
Expand All @@ -64,7 +66,8 @@
"srcHover": "",
"srcVisited": "",
"alt": "",
"title": "Grid Title 3"
"title": "Grid Title 3",
"_classes": ""
},
"_itemGraphic": {
"src": "course/en/images/example.jpg",
Expand Down
5 changes: 4 additions & 1 deletion templates/hotgrid.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,10 @@ export default function Hotgrid(props) {
{_items.map(({ _index, _graphic, _isVisited, _isActive }) =>

<div
className="hotgrid__item"
className={classes([
'hotgrid__item',
_graphic._classes
])}
role="listitem"
key={_index}
style={(_columns && hasColumnLayout) ?
Expand Down