New: Added xlarge breakpoint, added isScreenSizeMin

js/device.js

@@ -52,13 +52,12 @@ class Device extends Backbone.Controller {
  }
 
  /**
- * Compares the calculated screen width to the breakpoints defined in config.json.
- *
- * @returns {string} 'large', 'medium' or 'small'
+ * Returns an object of screen size names and em values
+ * @returns {Object}
  */
- checkScreenSize() {
+ get screenSizes() {
  const screenSizes = { ...Adapt.config.get('screenSize') };
- let screenSizesList = Object.entries(screenSizes);
+ const screenSizesList = Object.entries(screenSizes);
  const screensizeEmThreshold = 300;
  const baseFontSize = 16;
  for (const [name, value] of screenSizesList) {
@@ -69,11 +68,38 @@ class Device extends Backbone.Controller {
  ? value / baseFontSize
  : value;
  }
- // Reread list after modifications
- screenSizesList = Object.entries(screenSizes);
+ return screenSizes;
+ }
+
+ /**
+ * Returns a boolean if the current screen size is equal to or above the named
+ * screen size.
+ * @param {string} name
+ * @returns {boolean}
+ */
+ isScreenSizeMin(name) {
+ return Boolean(window.matchMedia(`(min-width: ${this.screenSizes[name]}em)`)?.matches);
+ }
+
+ /**
+ * Returns a boolean if the current screen size is equal to or below the named
+ * screen size.
+ * @param {string} name
+ * @returns {boolean}
+ */
+ isScreenSizeMax(name) {
+ return Boolean(window.matchMedia(`(max-width: ${this.screenSizes[name]}em)`)?.matches);
+ }
+
+ /**
+ * Returns the calculated screen width name.
+ * @returns {string} 'large', 'medium' or 'small'
+ */
+ checkScreenSize() {
+ const screenSizesList = Object.entries(this.screenSizes);
+ screenSizesList.sort((a, b) => a[1] - b[1]);
  const fontSize = parseFloat($('html').css('font-size'));
  const screenSizeEmWidth = (window.innerWidth / fontSize);
- screenSizesList.sort((a, b) => a[1] - b[1]);
  const smallestScreenSize = screenSizesList[0][0];
  // Find the best sized screen size
  const screenSize = screenSizesList.reduce((screenSize, [name, value]) => {
@@ -154,9 +180,12 @@ class Device extends Backbone.Controller {
  const newScreenSize = this.checkScreenSize();
  if (newScreenSize !== this.screenSize) {
  this.screenSize = newScreenSize;
- this.$html.toggleClass('size-small', this.screenSize === 'small');
- this.$html.toggleClass('size-medium', this.screenSize === 'medium');
- this.$html.toggleClass('size-large', this.screenSize === 'large');
+ const screenSizes = this.screenSizes;
+ for (const name in screenSizes) {
+ if (name === this.screenSize) continue;
+ this.$html.removeClass(`size-${name}`);
+ }
+ this.$html.toggleClass(`size-${this.screenSize}`, true);
  Adapt.trigger('device:changed', this.screenSize);
  }
 

less/_defaults/_variables.less

@@ -16,17 +16,16 @@
 // --------------------------------------------------
 // html = 16px
 
-// 20rem = 320px
-// 32.5rem = 520px
-// 47.5rem = 760px
-// 56.25rem = 900px
+// 45rem = 720px
+// 60rem = 960px
 // 80rem = 1280px
 // 90rem = 1440px
 // 120rem = 1920px
 
 @device-width-small: unit(@adapt-device-small, rem);
 @device-width-medium: unit(@adapt-device-medium, rem);
 @device-width-large: unit(@adapt-device-large, rem);
+@device-width-xlarge: unit(@adapt-device-xlarge, rem);
 
 @max-width: 90rem;
 

schema/config.model.schema

@@ -195,29 +195,38 @@
  "small": {
  "type": "number",
  "required": true,
- "default": 520,
+ "default": 0,
  "title": "Small",
  "inputType": "Number",
  "validators": ["required", "number"],
- "help": "Pixel width for the small breakpoint, e.g. cellphones"
+ "help": "Pixel width for the start of the small breakpoint, e.g. cellphones"
  },
  "medium": {
  "type": "number",
  "required": true,
- "default": 760,
+ "default": 720,
  "title": "Medium",
  "inputType": "Number",
  "validators": ["required", "number"],
- "help": "Pixel width for the medium breakpoint, e.g. tablet devices"
+ "help": "Pixel width for the start of the medium breakpoint, e.g. tablet devices"
  },
  "large": {
  "type": "number",
  "required": true,
- "default": 900,
+ "default": 960,
  "title": "Large",
  "inputType": "Number",
  "validators": ["required", "number"],
- "help": "Pixel width for the large breakpoint, e.g. laptop/desktop computers"
+ "help": "Pixel width for the start of the large breakpoint, e.g. laptop/desktop computers"
+ },
+ "xlarge": {
+ "type": "number",
+ "required": true,
+ "default": 1280,
+ "title": "Large",
+ "inputType": "Number",
+ "validators": ["required", "number"],
+ "help": "Pixel width for the start of the extra large breakpoint, e.g. hd laptop/desktop computers"
  }
  }
  },

schema/config.schema.json

@@ -179,20 +179,26 @@
  "small": {
  "type": "number",
  "title": "Small",
- "description": "Pixel width for the small breakpoint, e.g. cellphones",
- "default": 520
+ "description": "Pixel width for the start of the small breakpoint, e.g. cellphones",
+ "default": 0
  },
  "medium": {
  "type": "number",
  "title": "Medium",
- "description": "Pixel width for the medium breakpoint, e.g. tablet devices",
- "default": 760
+ "description": "Pixel width for the start of the medium breakpoint, e.g. tablet devices",
+ "default": 720
  },
  "large": {
  "type": "number",
  "title": "Large",
- "description": "Pixel width for the large breakpoint, e.g. laptop/desktop computers",
- "default": 900
+ "description": "Pixel width for the start of the large breakpoint, e.g. laptop/desktop computers",
+ "default": 960
+ },
+ "xlarge": {
+ "type": "number",
+ "title": "Large",
+ "description": "Pixel width for the start of the extra large breakpoint, e.g. hd laptop/desktop computers",
+ "default": 1280
  }
  }
  },

templates/header.jsx

@@ -34,7 +34,7 @@ export default function Header(props) {
  _extension && _extension.toLowerCase()
  ].filter(Boolean)
  } = props;
- const sizedInstruction = (mobileInstruction && device.screenSize !== 'large') ?
+ const sizedInstruction = (mobileInstruction && device.isScreenSizeMax('small')) ?
  mobileInstruction :
  instruction;
  const _globals = Adapt.course.get('_globals');

templates/image.jsx

@@ -10,10 +10,10 @@ import { html, classes, prefixClasses } from 'core/js/reactHelpers';
  * @param {Array} [props.attributionClassNamePrefixes]
  */
 export default function Image(props) {
- const hasMediumSetting = (Object.prototype.hasOwnProperty.call(props, '_medium') || Object.prototype.hasOwnProperty.call(props, 'medium'));
- const screenSize = hasMediumSetting
+ const hasMatchingSetting = (Object.hasOwn(props, `_${device.screenSize}`) || Object.hasOwn(props, device.screenSize));
+ const screenSize = hasMatchingSetting
  ? device.screenSize
- : (device.screenSize === 'large' ? 'large' : 'small');
+ : (device.isScreenSizeMin('medium') ? 'large' : 'small');
  const src = (
  props[`_${screenSize}`] ||
  props[`${screenSize}`] ||