Fix: Add missing xlarge to vanilla theme (adaptlearning#432)

* Add missing xlarge to vanilla theme * tidy up spaces / tabs
redwoodperforms · May 25, 2023 · 3614bf5 · 3614bf5
1 parent ac2c8ca
commit 3614bf5
Show file tree

Hide file tree

Showing 8 changed files with 229 additions and 166 deletions.
diff --git a/example.json b/example.json
@@ -11,6 +11,7 @@
 // contentObjects.json
 "_vanilla": {
     "_backgroundImage": {
+        "_xlarge": "",
         "_large": "",
         "_medium": "",
         "_small": ""
@@ -21,6 +22,7 @@
         "_backgroundPosition": ""
     },
     "_responsiveClasses": {
+        "_xlarge": "",
         "_large": "",
         "_medium": "",
         "_small": ""
@@ -32,6 +34,7 @@
             "_instruction": ""
         },
         "_backgroundImage": {
+            "_xlarge": "",
             "_large": "",
             "_medium": "",
             "_small": ""
@@ -42,6 +45,7 @@
             "_backgroundPosition": ""
         },
         "_minimumHeights": {
+            "_xlarge": 0,
             "_large": 0,
             "_medium": 0,
             "_small": 0
@@ -57,6 +61,7 @@
         "_instruction": ""
     },
     "_backgroundImage": {
+        "_xlarge": "",
         "_large": "",
         "_medium": "",
         "_small": ""
@@ -67,6 +72,7 @@
         "_backgroundPosition": ""
     },
     "_responsiveClasses": {
+        "_xlarge": "",
         "_large": "",
         "_medium": "",
         "_small": ""
@@ -81,6 +87,7 @@
         "_instruction": ""
     },
     "_backgroundImage": {
+        "_xlarge": "",
         "_large": "",
         "_medium": "",
         "_small": ""
@@ -91,11 +98,13 @@
         "_backgroundPosition": ""
     },
     "_minimumHeights": {
+        "_xlarge": 0,
         "_large": 0,
         "_medium": 0,
         "_small": 0
     },
     "_responsiveClasses": {
+        "_xlarge": "",
         "_large": "",
         "_medium": "",
         "_small": ""

diff --git a/js/themePageView.js b/js/themePageView.js
@@ -12,9 +12,7 @@ export default class ThemePageView extends ThemeView {
   processHeader() {
     const header = this.model.get('_pageHeader');
     if (!header) return;
-
     const $header = this.$('.page__header');
-
     this.setHeaderTextAlignment(header);
     this.addHeaderBackgroundLayer($header);
     this.setHeaderBackgroundImage(header, $header);
@@ -40,72 +38,28 @@ export default class ThemePageView extends ThemeView {
   setHeaderBackgroundImage(config, $header) {
     const backgroundImages = config._backgroundImage;
     if (!backgroundImages) return;
-
-    let backgroundImage;
-
-    switch (Adapt.device.screenSize) {
-      case 'large':
-        backgroundImage = backgroundImages._large;
-        break;
-      case 'medium':
-        backgroundImage = backgroundImages._medium;
-        break;
-      default:
-        backgroundImage = backgroundImages._small;
-    }
-
-    if (backgroundImage) {
-      $header.addClass('has-bg-image');
-      this.$headerBackground
-        .css('background-image', 'url(' + backgroundImage + ')');
-      return;
-    }
-
-    $header.removeClass('has-bg-image');
-    this.$headerBackground.css('background-image', '');
+    const backgroundImage = backgroundImages[`_${Adapt.device.screenSize}`] ?? backgroundImages._small;
+    $header.toggleClass('has-bg-image', Boolean(backgroundImage));
+    this.$headerBackground.css('background-image', backgroundImage ? 'url(' + backgroundImage + ')' : '');
   }
 
   setHeaderBackgroundStyles(config, $header) {
     const styles = config._backgroundStyles;
     if (!styles) return;
-
-    this.$headerBackground
-      .css({
-        'background-repeat': styles._backgroundRepeat,
-        'background-size': styles._backgroundSize,
-        'background-position': styles._backgroundPosition
-      });
+    this.$headerBackground.css({
+      'background-repeat': styles._backgroundRepeat,
+      'background-size': styles._backgroundSize,
+      'background-position': styles._backgroundPosition
+    });
   }
 
   setHeaderMinimumHeight(config, $header) {
     const minimumHeights = config._minimumHeights;
     if (!minimumHeights) return;
-
-    let minimumHeight;
-
-    switch (Adapt.device.screenSize) {
-      case 'large':
-        minimumHeight = minimumHeights._large;
-        break;
-      case 'medium':
-        minimumHeight = minimumHeights._medium;
-        break;
-      default:
-        minimumHeight = minimumHeights._small;
-    }
-
-    if (minimumHeight) {
-      $header
-        .addClass('has-min-height')
-        .css('min-height', minimumHeight + 'px');
-      return;
-    }
-
+    const minimumHeight = minimumHeights[`_${Adapt.device.screenSize}`] ?? minimumHeights._small;
     $header
-      .removeClass('has-min-height')
-      .css('min-height', '');
+      .toggleClass('has-min-height', Boolean(minimumHeight))
+      .css('min-height', minimumHeight ? minimumHeight + 'px' : '');
   }
 
-  onRemove() {}
-
 }
diff --git a/js/themeView.js b/js/themeView.js
@@ -1,5 +1,4 @@
 import Adapt from 'core/js/adapt';
-import device from 'core/js/device';
 
 export default class ThemeView extends Backbone.View {
 
@@ -20,7 +19,6 @@ export default class ThemeView extends Backbone.View {
 
   remove() {
     super.remove();
-
     this.onRemove();
   }
 
@@ -57,70 +55,30 @@ export default class ThemeView extends Backbone.View {
   setBackgroundImage() {
     const backgroundImages = this.model.get('_backgroundImage');
     if (!backgroundImages) return;
-
-    let backgroundImage;
-
-    switch (device.screenSize) {
-      case 'large':
-        backgroundImage = backgroundImages._large;
-        break;
-      case 'medium':
-        backgroundImage = backgroundImages._medium;
-        break;
-      default:
-        backgroundImage = backgroundImages._small;
-    }
-
-    if (backgroundImage) {
-      this.$el.addClass('has-bg-image');
-      this.$background
-        .css('background-image', 'url(' + backgroundImage + ')');
-      return;
-    }
-
-    this.$el.removeClass('has-bg-image');
-    this.$background.css('background-image', '');
+    const backgroundImage = backgroundImages[`_${Adapt.device.screenSize}`] ?? backgroundImages._small;
+    this.$el.toggleClass('has-bg-image', Boolean(backgroundImage));
+    this.$background
+      .css('background-image', backgroundImage ? 'url(' + backgroundImage + ')' : '');
   }
 
   setBackgroundStyles() {
     const styles = this.model.get('_backgroundStyles');
     if (!styles) return;
-
-    this.$background
-      .css({
-        'background-repeat': styles._backgroundRepeat,
-        'background-size': styles._backgroundSize,
-        'background-position': styles._backgroundPosition
-      });
+    this.$background.css({
+      'background-repeat': styles._backgroundRepeat,
+      'background-size': styles._backgroundSize,
+      'background-position': styles._backgroundPosition
+    });
   }
 
   setMinimumHeight() {
     const minimumHeights = this.model.get('_minimumHeights');
     if (!minimumHeights) return;
 
-    let minimumHeight;
-
-    switch (Adapt.device.screenSize) {
-      case 'large':
-        minimumHeight = minimumHeights._large;
-        break;
-      case 'medium':
-        minimumHeight = minimumHeights._medium;
-        break;
-      default:
-        minimumHeight = minimumHeights._small;
-    }
-
-    if (minimumHeight) {
-      this.$el
-        .addClass('has-min-height')
-        .css('min-height', minimumHeight + 'px');
-      return;
-    }
-
+    const minimumHeight = minimumHeights[`_${Adapt.device.screenSize}`] ?? minimumHeights._small;
     this.$el
-      .removeClass('has-min-height')
-      .css('min-height', '');
+      .toggleClass('has-min-height', Boolean(minimumHeight))
+      .css('min-height', minimumHeight ? minimumHeight + 'px' : '');
   }
 
   setResponsiveClasses() {

diff --git a/less/_defaults/_spacing-containers.less b/less/_defaults/_spacing-containers.less
@@ -3,6 +3,7 @@
 @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;