From b6fde9a2904b79285d65e4cc8c841cc1c665ff95 Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Tue, 9 Jan 2024 08:51:54 -0700 Subject: [PATCH 1/4] Add _classes to hotgrid__item-btn --- templates/hotgrid.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/templates/hotgrid.jsx b/templates/hotgrid.jsx index c9091e1..24cc1a3 100644 --- a/templates/hotgrid.jsx +++ b/templates/hotgrid.jsx @@ -52,7 +52,7 @@ export default function Hotgrid(props) {
- {_items.map(({ _index, _graphic, _isVisited, _isActive }) => + {_items.map(({ _index, _graphic, _isVisited, _isActive, _classes }) =>
Date: Tue, 9 Jan 2024 08:54:58 -0700 Subject: [PATCH 2/4] Readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 56ca8f6..c63e34a 100755 --- a/README.md +++ b/README.md @@ -57,7 +57,7 @@ The main text for the popup that is shown when the item is selected by the learn Defines the alignment of the item image in the pop up. Left: Image aligned to the left of the text area. Top: Image aligned above the text area. Right: Image aligned to the right of the text area. Bottom: Image aligned below the text area. The default alignment is `right`. #### \_classes (string): -CSS class name(s) to be applied to the popup item. Classes available by default are: +CSS class name(s) to be applied to the item button and popup item. Classes available by default are: * `"hide-desktop-image"` (hides the pop up image in desktop view) * `"hide-popup-image"` (hides the pop up image for all screen sizes) From 6ead6c19fd453bf658f31ef307939315d4b0d3bc Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Tue, 9 Jan 2024 09:08:00 -0700 Subject: [PATCH 3/4] Move _classes to .hotgrid__item --- README.md | 2 +- templates/hotgrid.jsx | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index c63e34a..091db71 100755 --- a/README.md +++ b/README.md @@ -57,7 +57,7 @@ The main text for the popup that is shown when the item is selected by the learn Defines the alignment of the item image in the pop up. Left: Image aligned to the left of the text area. Top: Image aligned above the text area. Right: Image aligned to the right of the text area. Bottom: Image aligned below the text area. The default alignment is `right`. #### \_classes (string): -CSS class name(s) to be applied to the item button and popup item. Classes available by default are: +CSS class name(s) to be applied to the item and item popup. Classes available by default are: * `"hide-desktop-image"` (hides the pop up image in desktop view) * `"hide-popup-image"` (hides the pop up image for all screen sizes) diff --git a/templates/hotgrid.jsx b/templates/hotgrid.jsx index 24cc1a3..bdc07a5 100644 --- a/templates/hotgrid.jsx +++ b/templates/hotgrid.jsx @@ -55,7 +55,10 @@ export default function Hotgrid(props) { {_items.map(({ _index, _graphic, _isVisited, _isActive, _classes }) =>
Date: Wed, 10 Jan 2024 09:01:46 -0700 Subject: [PATCH 4/4] Add _graphic._classes property for grid item --- README.md | 5 ++++- example.json | 9 ++++++--- templates/hotgrid.jsx | 4 ++-- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 091db71..7c4d6c6 100755 --- a/README.md +++ b/README.md @@ -57,7 +57,7 @@ The main text for the popup that is shown when the item is selected by the learn Defines the alignment of the item image in the pop up. Left: Image aligned to the left of the text area. Top: Image aligned above the text area. Right: Image aligned to the right of the text area. Bottom: Image aligned below the text area. The default alignment is `right`. #### \_classes (string): -CSS class name(s) to be applied to the item and item popup. Classes available by default are: +CSS class name(s) to be applied to the popup item. Classes available by default are: * `"hide-desktop-image"` (hides the pop up image in desktop view) * `"hide-popup-image"` (hides the pop up image for all screen sizes) @@ -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: diff --git a/example.json b/example.json index ea471ee..33b694d 100755 --- a/example.json +++ b/example.json @@ -28,7 +28,8 @@ "srcHover": "", "srcVisited": "", "alt": "", - "title": "Grid Title 1" + "title": "Grid Title 1", + "_classes": "" }, "_itemGraphic": { "src": "course/en/images/example.jpg", @@ -46,7 +47,8 @@ "srcHover": "", "srcVisited": "", "alt": "", - "title": "Grid Title 2" + "title": "Grid Title 2", + "_classes": "" }, "_itemGraphic": { "src": "course/en/images/example.jpg", @@ -64,7 +66,8 @@ "srcHover": "", "srcVisited": "", "alt": "", - "title": "Grid Title 3" + "title": "Grid Title 3", + "_classes": "" }, "_itemGraphic": { "src": "course/en/images/example.jpg", diff --git a/templates/hotgrid.jsx b/templates/hotgrid.jsx index bdc07a5..5523a7b 100644 --- a/templates/hotgrid.jsx +++ b/templates/hotgrid.jsx @@ -52,12 +52,12 @@ export default function Hotgrid(props) {
- {_items.map(({ _index, _graphic, _isVisited, _isActive, _classes }) => + {_items.map(({ _index, _graphic, _isVisited, _isActive }) =>