New: Allow any component to use mobileBody for smaller devices (fixes #…

…538)
adaptlearning · May 29, 2024 · c8e4c95 · c8e4c95
1 parent 4d6f06e
commit c8e4c95
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/templates/header.jsx b/templates/header.jsx
@@ -5,11 +5,12 @@ import { classes, prefixClasses, compile } from 'core/js/reactHelpers';
 
 /**
  * Content header for displayTitle, body, instruction text, etc.
- * instruction and mobileInstruction will switch automatically
+ * body / mobileBody and instruction / mobileInstruction will switch automatically
  * @param {Object} props
  * @param {string} [props.displayTitle]
  * @param {string} [props.body]
  * @param {string} [props.instruction]
+ * @param {string} [props.mobileBody]
  * @param {string} [props.mobileInstruction]
  * @param {string} [props._type]
  * @param {string} [props._component]
@@ -22,6 +23,7 @@ export default function Header(props) {
  displayTitle,
  body,
  instruction,
+ mobileBody,
  mobileInstruction,
  _type,
  _component,
@@ -33,6 +35,9 @@ export default function Header(props) {
  _extension && _extension.toLowerCase()
  ].filter(Boolean)
  } = props;
+ const sizedBody = (mobileBody && !device.isScreenSizeMin('medium')) ?
+ mobileBody :
+ body;
  const sizedInstruction = (mobileInstruction && !device.isScreenSizeMin('medium')) ?
  mobileInstruction :
  instruction;
@@ -69,9 +74,9 @@ export default function Header(props) {
  </div>
  }
 
- {body &&
+ {sizedBody &&
  <div className={prefixClasses(classNamePrefixes, ['__body'])}>
- <div className={prefixClasses(classNamePrefixes, ['__body-inner'])} dangerouslySetInnerHTML={{ __html: compile(body, props) }}>
+ <div className={prefixClasses(classNamePrefixes, ['__body-inner'])} dangerouslySetInnerHTML={{ __html: compile(sizedBody, props) }}>
  </div>
  </div>
  }

diff --git a/templates/partials/component.hbs b/templates/partials/component.hbs
@@ -13,13 +13,13 @@
 
  {{component_description}}
 
- {{#if body}}
+ {{#any body mobileBody}}
  <div class="component__body {{lowercase _component}}__body">
  <div class="component__body-inner {{lowercase _component}}__body-inner">
  {{{compile body}}}
  </div>
  </div>
- {{/if}}
+ {{/any}}
 
  {{#any instruction mobileInstruction}}
  <div class="component__instruction {{lowercase _component}}__instruction">