Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Add xlarge props to documentation (fixes #184) #187

Merged
merged 2 commits into from
Apr 10, 2024
Merged

Fix: Add xlarge props to documentation (fixes #184) #187

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d89fe82
Add xlarge props to documentation
swashbuck Apr 9, 2024
7292ebf
Change example _minimumHeights values for large and xlarge
swashbuck Apr 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,9 @@ The following attributes, set within *course.json*, configure the defaults for *

>>**alt** (string): A description of the image; required when it has meaning that must be conveyed to the learner. For 'decorative' images, leave this blank

>**\_backgroundImage** (object): The backgroundImage object that contains values for **\_large**, **\_medium** and **\_small**.
>**\_backgroundImage** (object): The backgroundImage object that contains values for **\_xlarge**, **\_large**, **\_medium** and **\_small**.

>>**\_xlarge** (string): File name (including path) of the image used with xlarge 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*).

Expand Down Expand Up @@ -79,7 +81,9 @@ Left: Aligns the body to the left of the container. Center: Aligns the body to t
>>>**\_instruction**: (string): This attribute defines the alignment of the instruction element. Properties include **left**, **center**, and **right**.
Left: Aligns the instruction to the left of the container. Center: Aligns the instruction to the center of the container. Right: Aligns the instruction to the right of the container. The alignment automatically inverses for right-to-left languages. The default is `` which inherits the natural page direction.

>>**\_backgroundImage** (object): The backgroundImage object that contains values for **\_large**, **\_medium** and **\_small**.
>>**\_backgroundImage** (object): The backgroundImage object that contains values for **\_xlarge**, **\_large**, **\_medium** and **\_small**.

>>>**\_xlarge** (string): File name (including path) of the image used with xlarge 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*).

Expand All @@ -98,7 +102,9 @@ Auto: The background image is displayed in its original size. Cover: Resize the
>>>**\_backgroundPosition** (string): This attribute sets the position of the background image. Options include **left top**, **left center**, **left bottom**, **center top**, **center center**, **center bottom**, **right top**, **right center**, **right bottom**.
The first value is the horizontal position and the second value is the vertical.

>>**\_minimumHeights** (object): The minimumHeights object that contains values for **\_large**, **\_medium** and **\_small**.
>>**\_minimumHeights** (object): The minimumHeights object that contains values for **\_xlarge**, **\_large**, **\_medium** and **\_small**.

>>>**\_xlarge** (number): The minimum height should only be used in instances where the menu header height needs to be greater than the content e.g. to prevent a background image being cropped.

>>>**\_large** (number): The minimum height should only be used in instances where the menu header height needs to be greater than the content e.g. to prevent a background image being cropped.

Expand Down
3 changes: 3 additions & 0 deletions example.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"_src": "course/en/images/logo-graphic.jpg"
},
"_backgroundImage": {
"_xlarge": "course/en/images/example.jpg",
"_large": "course/en/images/example.jpg",
"_medium": "course/en/images/example.jpg",
"_small": "course/en/images/example.jpg"
Expand All @@ -21,6 +22,7 @@
"_instruction": "right"
},
"_backgroundImage": {
"_xlarge": "course/en/images/example.jpg",
"_large": "course/en/images/example.jpg",
"_medium": "course/en/images/example.jpg",
"_small": "course/en/images/example.jpg"
Expand All @@ -31,6 +33,7 @@
"_backgroundPosition": "center center"
},
"_minimumHeights": {
"_xlarge": 600,
swashbuck marked this conversation as resolved.
Show resolved Hide resolved
"_large": 600,
"_medium": 400,
"_small": 200
Expand Down
Loading