diff --git a/README.md b/README.md index ab6dc135..a451cdb4 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # adapt-contrib-vanilla -**Vanilla** is a *theme* bundled with the [Adapt framework](https://github.com/adaptlearning/adapt_framework). +**Vanilla** is a _theme_ bundled with the [Adapt framework](https://github.com/adaptlearning/adapt_framework). sample colors from the vanilla theme @@ -8,19 +8,19 @@ It provides specific values to styles, including colors, padding, margins, and a ## Installation -As Adapt's *[core theme](https://github.com/adaptlearning/adapt_framework/wiki/Core-Plug-ins-in-the-Adapt-Learning-Framework#theme),* **Vanilla** is included with the [installation of the Adapt framework](https://github.com/adaptlearning/adapt_framework/wiki/Manual-installation-of-the-Adapt-framework#installation) and the [installation of the Adapt authoring tool](https://github.com/adaptlearning/adapt_authoring/wiki/Installing-Adapt-Origin). +As Adapt's _[core theme](https://github.com/adaptlearning/adapt_framework/wiki/Core-Plug-ins-in-the-Adapt-Learning-Framework#theme),_ **Vanilla** is included with the [installation of the Adapt framework](https://github.com/adaptlearning/adapt_framework/wiki/Manual-installation-of-the-Adapt-framework#installation) and the [installation of the Adapt authoring tool](https://github.com/adaptlearning/adapt_authoring/wiki/Installing-Adapt-Origin). -* If **Vanilla** has been uninstalled from the Adapt framework, it may be reinstalled. -With the [Adapt CLI](https://github.com/adaptlearning/adapt-cli) installed, run the following from the command line: -`adapt install adapt-contrib-vanilla` +- If **Vanilla** has been uninstalled from the Adapt framework, it may be reinstalled. + With the [Adapt CLI](https://github.com/adaptlearning/adapt-cli) installed, run the following from the command line: + `adapt install adapt-contrib-vanilla` - Alternatively, this component can also be installed by adding the following line of code to the *adapt.json* file: - `"adapt-contrib-vanilla": "*"` - Then running the command: - `adapt install` - (This second method will reinstall all plug-ins listed in *adapt.json*.) + Alternatively, this component can also be installed by adding the following line of code to the *adapt.json* file: + `"adapt-contrib-vanilla": "*"` + Then running the command: + `adapt install` + (This second method will reinstall all plug-ins listed in *adapt.json*.) -* If **Vanilla** has been uninstalled from the Adapt authoring tool, it may be reinstalled using the [Plug-in Manager](https://github.com/adaptlearning/adapt_authoring/wiki/Plugin-Manager). +- If **Vanilla** has been uninstalled from the Adapt authoring tool, it may be reinstalled using the [Plug-in Manager](https://github.com/adaptlearning/adapt_authoring/wiki/Plugin-Manager). ## Uninstallation @@ -29,80 +29,90 @@ The Adapt framework does not allow the installation of more than one theme at a ## Settings overview -Unlike most Adapt plug-ins, the **Vanilla** theme has no attributes that are required to be configured in the course JSON files. There is, however, additional functionality available to apply background images and supporting styles for pages, articles and blocks as desired. These attributes are properly formatted as JSON in [*example.json*](https://github.com/adaptlearning/adapt-contrib-vanilla/blob/master/example.json) and available as configurable attributes in the Adapt authoring tool. +Unlike most Adapt plug-ins, the **Vanilla** theme has no attributes that are required to be configured in the course JSON files. There is, however, additional functionality available to apply background images and supporting styles for pages, articles and blocks as desired. These attributes are properly formatted as JSON in [_example.json_](https://github.com/adaptlearning/adapt-contrib-vanilla/blob/master/example.json) and available as configurable attributes in the Adapt authoring tool. -Alongside this, the [*example.json*](https://github.com/adaptlearning/adapt-contrib-vanilla/blob/master/example.json#L86) contains a collection of custom classes that Adapt and the Vanilla theme support as standard. These classes are mostly designed to provide additional visual options to increase flexibility. +Alongside this, the [_example.json_](https://github.com/adaptlearning/adapt-contrib-vanilla/blob/master/example.json#L86) contains a collection of custom classes that Adapt and the Vanilla theme support as standard. These classes are mostly designed to provide additional visual options to increase flexibility. -The **Vanilla** theme also exposes [*colour variables*](https://github.com/adaptlearning/adapt-contrib-vanilla/blob/master/less/_defaults/colors.less) in the Adapt authoring tool for theme editing. This feature allows you to apply and save 'preset' theme styles. +The **Vanilla** theme also exposes [_colour variables_](https://github.com/adaptlearning/adapt-contrib-vanilla/blob/master/less/_defaults/colors.less) in the Adapt authoring tool for theme editing. This feature allows you to apply and save 'preset' theme styles. **\_vanilla** (object): The following attributes configure the defaults for **Vanilla**. These include **\_backgroundImage**, **\_backgroundStyles** and **\_minimumHeights**. Global attributes are available at page, article and block level. #### Global background image ->**\_backgroundImage** (object): The backgroundImage object that contains values for **\_large**, **\_medium** and **\_small**. ->>**\_large** (string): File name (including path) of the image used with large device width. Path should be relative to the *src* folder (e.g., *course/en/images/origami-menu-one.jpg*). +> **\_backgroundImage** (object): The backgroundImage object that contains values for **\_large**, **\_medium** and **\_small**. ->>**\_medium** (string): File name (including path) of the image used with medium device width. Path should be relative to the *src* folder (e.g., *course/en/images/origami-menu-one.jpg*). +> > **\_large** (string): File name (including path) of the image used with large device width. Path should be relative to the _src_ folder (e.g., _course/en/images/origami-menu-one.jpg_). ->>**\_small** (string): File name (including path) of the image used with small device width. Path should be relative to the *src* folder (e.g., *course/en/images/origami-menu-one.jpg*). +> > **\_medium** (string): File name (including path) of the image used with medium device width. Path should be relative to the _src_ folder (e.g., _course/en/images/origami-menu-one.jpg_). + +> > **\_small** (string): File name (including path) of the image used with small device width. Path should be relative to the _src_ folder (e.g., _course/en/images/origami-menu-one.jpg_). #### Global background image styles ->**_backgroundStyles** (object): Additional attributes available to customise how background images display. The backgroundStyles object contains values for **\_backgroundRepeat**, **\_backgroundSize** and **\_backgroundPosition**. ->>**\_backgroundRepeat** (string): This attribute defines how the background image repeats. Properties include **repeat**, **repeat-x**, **repeat-y** and **no-repeat**. -Repeat-x: The background image is repeated only horizontally. Repeat-y: The background image is repeated only vertically. +> **\_backgroundStyles** (object): Additional attributes available to customise how background images display. The backgroundStyles object contains values for **\_backgroundRepeat**, **\_backgroundSize** and **\_backgroundPosition**. + +> > **\_backgroundRepeat** (string): This attribute defines how the background image repeats. Properties include **repeat**, **repeat-x**, **repeat-y** and **no-repeat**. +> > Repeat-x: The background image is repeated only horizontally. Repeat-y: The background image is repeated only vertically. ->>**\_backgroundSize** (string): This attribute defines the size the background image display. Properties include **auto**, **cover**, **contain**, and **100% 100%**. -Auto: The background image is displayed in its original size. Cover: Resize the background image to cover the entire container, even if it has to stretch or crop the image. Contain: Resize the background image to make sure the image is fully visible. 100% 100%: Resize the background image to match the dimensions of the container. +> > **\_backgroundSize** (string): This attribute defines the size the background image display. Properties include **auto**, **cover**, **contain**, and **100% 100%**. +> > Auto: The background image is displayed in its original size. Cover: Resize the background image to cover the entire container, even if it has to stretch or crop the image. Contain: Resize the background image to make sure the image is fully visible. 100% 100%: Resize the background image to match the dimensions of the container. #### Global minimum heights ->**_minimumHeights** (object): The minimum heights attribute group specifies the minimum height of the image container at different device widths (`_large`, `_medium`, and `_small`). ->>**\_large** (number): The minimum height should only be used in instances where the image container height needs to be greater than the content e.g. to prevent a background image being cropped. +> **\_minimumHeights** (object): The minimum heights attribute group specifies the minimum height of the image container at different device widths (`_large`, `_medium`, and `_small`). + +> > **\_large** (number): The minimum height should only be used in instances where the image container height needs to be greater than the content e.g. to prevent a background image being cropped. ->>**\_medium** (number): The minimum height should only be used in instances where the image container height needs to be greater than the content e.g. to prevent a background image being cropped. +> > **\_medium** (number): The minimum height should only be used in instances where the image container height needs to be greater than the content e.g. to prevent a background image being cropped. ->>**\_small** (number): The minimum height should only be used in instances where the image container height needs to be greater than the content e.g. to prevent a background image being cropped. +> > **\_small** (number): The minimum height should only be used in instances where the image container height needs to be greater than the content e.g. to prevent a background image being cropped. #### Global responsive classes ->**\_responsiveClasses** (object): The responsive classes object adds the associated CSS class(es) to the container element at different device widths (`_large`, `_medium`, `_small`). The class(es) are removed between each device width. Useful for applying styles for a particular device width only rather than applying a global `_classes` style. ->>**\_large** (string): Custom CSS class that is applied at the large device width. +> **\_responsiveClasses** (object): The responsive classes object adds the associated CSS class(es) to the container element at different device widths (`_large`, `_medium`, `_small`). The class(es) are removed between each device width. Useful for applying styles for a particular device width only rather than applying a global `_classes` style. ->>**\_medium** (string): Custom CSS class that is applied at the medium device width. +> > **\_large** (string): Custom CSS class that is applied at the large device width. ->>**\_small** (string): Custom CSS class that is applied at the small device width. +> > **\_medium** (string): Custom CSS class that is applied at the medium device width. + +> > **\_small** (string): Custom CSS class that is applied at the small device width. #### **contentObject.json** ->**\_pageHeader** (object): The backgroundImage object that contains values for **\_large**, **\_medium** and **\_small**. ->>**\_large** (string): File name (including path) of the image used with large device width. Path should be relative to the *src* folder (e.g., *course/en/images/origami-menu-one.jpg*). +> **\_pageHeader** (object): The backgroundImage object that contains values for **\_large**, **\_medium** and **\_small**. + +> > **\_large** (string): File name (including path) of the image used with large device width. Path should be relative to the _src_ folder (e.g., _course/en/images/origami-menu-one.jpg_). ->>**\_medium** (string): File name (including path) of the image used with medium device width. Path should be relative to the *src* folder (e.g., *course/en/images/origami-menu-one.jpg*). +> > **\_medium** (string): File name (including path) of the image used with medium device width. Path should be relative to the _src_ folder (e.g., _course/en/images/origami-menu-one.jpg_). ->>**\_small** (string): File name (including path) of the image used with small device width. Path should be relative to the *src* folder (e.g., *course/en/images/origami-menu-one.jpg*). +> > **\_small** (string): File name (including path) of the image used with small device width. Path should be relative to the _src_ folder (e.g., _course/en/images/origami-menu-one.jpg_). #### **blocks.json** ->**\_isDividerBlock** (boolean): - Determines whether the CSS class `is-divider-block` will be applied. Acceptable values are `true` and `false`. ->**\_componentVerticalAlignment** (string): Defines the vertical alignment of the child component(s) in relation to the block. +> **\_isDividerBlock** (boolean): Determines whether the CSS class `is-divider-block` will be applied. Acceptable values are `true` and `false`. + +> **\_paddingTop** (string): Changes the value of the blocks top spacing. Double: Doubles the blocks top spacing. Standard: Retains the standard blocks top spacing. Half: Halves the blocks top spacing. Remove: Removes the blocks top spacing. The default value is `standard`. + +> **\_paddingBottom** (string): Changes the value of the blocks bottom spacing. Double: Doubles the blocks bottom spacing. Standard: Retains the standard blocks bottom spacing. Half: Halves the blocks bottom spacing. Remove: Removes the blocks bottom spacing. The default value is `standard`. + +> **\_componentVerticalAlignment** (string): Defines the vertical alignment of the child component(s) in relation to the block. Visit the [**Vanilla** wiki](https://github.com/adaptlearning/adapt-contrib-vanilla/wiki) for more information about how to use and manipulate the theme. ## Structure -| Folder/File | Description | -| :------------- |:-------------| -| 📁 assets | Optional global assets can be added here | -| 📁 fonts | Optional global fonts can be added here | -| 📁 js | JavaScript files on which the theme depends | -| 📁 less | Location of any [LESS](http://lesscss.org/) based CSS files | -| 📁 less/_defaults | Location of configuration LESS files | -| 📄 less/_defaults/colors.less | Location of global colour variables | -| 📁 less/core | Location of Adapt Framework LESS file styles | -| 📁 less/plugins | Location of Adapt plugin LESS file styles | -| 📁 less/project | Location of additional LESS file styles | -| 📁 templates | Optional global template overrides can be added here | +| Folder/File | Description | +| :----------------------------- | :---------------------------------------------------------- | +| 📁 assets | Optional global assets can be added here | +| 📁 fonts | Optional global fonts can be added here | +| 📁 js | JavaScript files on which the theme depends | +| 📁 less | Location of any [LESS](http://lesscss.org/) based CSS files | +| 📁 less/\_defaults | Location of configuration LESS files | +| 📄 less/\_defaults/colors.less | Location of global colour variables | +| 📁 less/core | Location of Adapt Framework LESS file styles | +| 📁 less/plugins | Location of Adapt plugin LESS file styles | +| 📁 less/project | Location of additional LESS file styles | +| 📁 templates | Optional global template overrides can be added here | ## Templates @@ -112,9 +122,10 @@ Visit the [**Vanilla** wiki](https://github.com/adaptlearning/adapt-contrib-vani No known limitations. ----------------------------- -**Version number:** 6.2.1 adapt learning logo
-**Framework versions:** 5.20.1+
+--- + +**Version number:** 6.2.1 adapt learning logo
+**Framework versions:** 5.22.9+
**Author / maintainer:** Adapt Core Team with [contributors](https://github.com/adaptlearning/adapt-contrib-vanilla/graphs/contributors)
**Accessibility support:** WAI AA
**RTL support:** Yes
diff --git a/bower.json b/bower.json index dd3fde2a..ca56308a 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "adapt-contrib-vanilla", "version": "7.2.0", - "framework": ">=5.20.1", + "framework": ">=5.22.9", "homepage": "https://github.com/adaptlearning/adapt-contrib-vanilla", "bugs": "https://github.com/adaptlearning/adapt-contrib-vanilla/issues", "theme": "vanilla", diff --git a/example.json b/example.json index fecacff7..ba07885d 100644 --- a/example.json +++ b/example.json @@ -84,6 +84,8 @@ blocks.json }, // Divider Block - adds class to `.block` element "_isDividerBlock": false, + "_paddingTop": "double", + "_paddingBottom": "half", // Defines the vertical alignment of the child component(s) in relation to the block. // Top: Aligns descendents to the top of the block. Center: Aligns descendents to the center of the block. Bottom: Aligns descendents to the bottom of the block. // The default alignment is `top`. @@ -155,24 +157,6 @@ Block classes "_classes": "extend-container", "_comment": "Extend width of block to max page width (default is 1440px).", -"_classes": "remove-padding-top | remove-top-padding", -"_comment": "Removes the top padding from block.", - -"_classes": "remove-padding-bottom | remove-bottom-padding", -"_comment": "Removes the bottom padding from block.", - -"_classes": "reduce-padding-top", -"_comment": "Reduce the blocks top padding by half.", - -"_classes": "reduce-padding-bottom", -"_comment": "Reduce the blocks bottom padding by half.", - -"_classes": "increase-padding-top", -"_comment": "Double the blocks top padding.", - -"_classes": "increase-padding-bottom", -"_comment": "Double the blocks bottom padding.", - Component classes -------------------------------------------------- diff --git a/js/themeBlockView.js b/js/themeBlockView.js index 49fcad85..ffeab5cc 100644 --- a/js/themeBlockView.js +++ b/js/themeBlockView.js @@ -7,9 +7,23 @@ export default class ThemeBlockView extends ThemeView { } setCustomStyles() { + this.setPaddingTop(); + this.setPaddingBottom(); this.setComponentVerticalAlignment(); } + setPaddingTop() { + const paddingTop = this.model.get('_paddingTop'); + if (!paddingTop) return; + this.$el.addClass(`${paddingTop}-padding-top`); + } + + setPaddingBottom() { + const paddingBottom = this.model.get('_paddingBottom'); + if (!paddingBottom) return; + this.$el.addClass(`${paddingBottom}-padding-bottom`); + } + setComponentVerticalAlignment() { const componentVerticalAlignment = this.model.get('_componentVerticalAlignment'); if (!componentVerticalAlignment) return; diff --git a/less/core/block.less b/less/core/block.less index a3996963..3b33d3f6 100644 --- a/less/core/block.less +++ b/less/core/block.less @@ -37,13 +37,21 @@ .link-text; } + // Double the blocks top or bottom padding + &.double-padding-top &__inner { padding-top: @block-padding-ver * 2; } + &.double-padding-bottom &__inner { padding-bottom: @block-padding-ver * 2; } + + // Half the blocks top or bottom padding + &.half-padding-top &__inner { padding-top: @block-padding-ver / 2; } + &.half-padding-bottom &__inner { padding-bottom: @block-padding-ver / 2; } + + // Remove the top or bottom padding from block + &.remove-padding-top &__inner { padding-top: 0; } + &.remove-padding-bottom &__inner { padding-bottom: 0; } + // Aligns child components centrally on the vertical axis - &.align-vert-center .component__container { - align-items: center; - } + &.align-vert-center .component__container { align-items: center; } // Aligns child components to the bottom of the parent block on the vertical axis - &.align-vert-bottom .component__container { - align-items: flex-end; - } + &.align-vert-bottom .component__container {align-items: flex-end; } } diff --git a/less/project/theme-extras.less b/less/project/theme-extras.less index bb649357..3756335d 100644 --- a/less/project/theme-extras.less +++ b/less/project/theme-extras.less @@ -78,44 +78,6 @@ max-width: @max-width; } -// Remove top padding from block -// -------------------------------------------------- -.block.remove-padding-top .block__inner, -.block.remove-top-padding .block__inner { - padding-top: 0; -} - -// Remove bottom padding from block -// -------------------------------------------------- -.block.remove-padding-bottom .block__inner, -.block.remove-bottom-padding .block__inner { - padding-bottom: 0; -} - -// Reduce the blocks top padding by half -// -------------------------------------------------- -.block.reduce-padding-top .block__inner { - padding-top: @block-padding-ver / 2; -} - -// Reduce the blocks bottom padding by half -// -------------------------------------------------- -.block.reduce-padding-bottom .block__inner { - padding-bottom: @block-padding-ver / 2; -} - -// Double the blocks top padding -// -------------------------------------------------- -.block.increase-padding-top .block__inner { - padding-top: @block-padding-ver * 2; -} - -// Double the blocks bottom padding -// -------------------------------------------------- -.block.increase-padding-bottom .block__inner { - padding-bottom: @block-padding-ver * 2; -} - // DEPRECATED in favour of bg-color-mixin // Block background color mixin // Add to block to enable diff --git a/package.json b/package.json index dd3fde2a..ca56308a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "adapt-contrib-vanilla", "version": "7.2.0", - "framework": ">=5.20.1", + "framework": ">=5.22.9", "homepage": "https://github.com/adaptlearning/adapt-contrib-vanilla", "bugs": "https://github.com/adaptlearning/adapt-contrib-vanilla/issues", "theme": "vanilla", diff --git a/properties.schema b/properties.schema index e32f5f60..b2050bce 100644 --- a/properties.schema +++ b/properties.schema @@ -1147,12 +1147,28 @@ "validators": [], "help": "If enabled, applies a divider class to the block" }, + "_paddingTop": { + "type": "string", + "required": false, + "default": "standard", + "inputType": {"type":"Select", "options":["double","standard","half","remove"]}, + "title": "Spacing top", + "help": "Changes the value of the blocks top spacing. Double: Doubles the blocks top spacing. Standard: Retains the standard blocks top spacing. Half: Halves the blocks top spacing. Remove: Removes the blocks top spacing. The default value is `standard`." + }, + "_paddingBottom": { + "type": "string", + "required": false, + "default": "standard", + "inputType": {"type":"Select", "options":["double","standard","half","remove"]}, + "title": "Spacing bottom", + "help": "Changes the value of the blocks bottom spacing. Double: Doubles the blocks bottom spacing. Standard: Retains the standard blocks bottom spacing. Half: Halves the blocks bottom spacing. Remove: Removes the blocks bottom spacing. The default value is `standard`." + }, "_componentVerticalAlignment": { "type": "string", "required": false, "default": "top", "inputType": {"type":"Select", "options":["top","center","bottom"]}, - "title": "Set the vertical alignment of the child component(s).", + "title": "Set the vertical alignment of the child component(s)", "help": "Defines the vertical alignment of the child component(s) in relation to the block. Top: Aligns descendents to the top of the block. Center: Aligns descendents to the center of the block. Bottom: Aligns descendents to the bottom of the block. The default alignment is `top`." } } diff --git a/schema/block.schema.json b/schema/block.schema.json index a6652b7f..98ea34e2 100644 --- a/schema/block.schema.json +++ b/schema/block.schema.json @@ -160,9 +160,35 @@ "description": "If enabled, applies a divider class to the block", "default": false }, + "_paddingTop": { + "type": "string", + "title": "Spacing top", + "description": "Changes the value of the blocks top spacing. Double: Doubles the blocks top spacing. Standard: Retains the standard blocks top spacing. Half: Halves the blocks top spacing. Remove: Removes the blocks top spacing. The default value is `standard`.", + "default": "standard", + "enum": [ + "double", + "standard", + "half", + "remove" + ], + "_backboneForms": "Select" + }, + "_paddingBottom": { + "type": "string", + "title": "Spacing bottom", + "description": "Changes the value of the blocks bottom spacing. Double: Doubles the blocks bottom spacing. Standard: Retains the standard blocks bottom spacing. Half: Halves the blocks bottom spacing. Remove: Removes the blocks bottom spacing. The default value is `standard`.", + "default": "standard", + "enum": [ + "double", + "standard", + "half", + "remove" + ], + "_backboneForms": "Select" + }, "_componentVerticalAlignment": { "type": "string", - "title": "Set the vertical alignment of the child component(s).", + "title": "Set the vertical alignment of the child component(s)", "description": "Defines the vertical alignment of the child component(s) in relation to the block. Top: Aligns descendents to the top of the block. Center: Aligns descendents to the center of the block. Bottom: Aligns descendents to the bottom of the block. The default alignment is `top`.", "default": "top", "enum": [