-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: missing mediaviewer and responsive grid docs
- Loading branch information
1 parent
8b81dac
commit a5bca34
Showing
4 changed files
with
239 additions
and
0 deletions.
There are no files selected for viewing
3 changes: 3 additions & 0 deletions
3
packages/dm-core-plugins/docs/MediaViewerPlugin/Documentation.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| MediaViewerPlugin allows users to upload, preview and download assets. | ||
|
|
||
| Previews exists for image, video and audio filetypes + some application filetypes like like pdf, json, xml and javascript. |
51 changes: 51 additions & 0 deletions
51
packages/dm-core-plugins/docs/MediaViewerPlugin/Examples/Basic.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| { | ||
| "title": "Basic Example", | ||
| "description": "Minimal example of how to configure media viewer plugin", | ||
| "note": "", | ||
| "showDemo": false, | ||
| "entityFilePrefix": "sections", | ||
| "blueprint": { | ||
| "name": "MediaViewer", | ||
| "type": "CORE:Blueprint", | ||
| "attributes": [ | ||
| { | ||
| "name": "type", | ||
| "type": "CORE:BlueprintAttribute", | ||
| "attributeType": "string" | ||
| }, | ||
| { | ||
| "name": "name", | ||
| "type": "CORE:BlueprintAttribute", | ||
| "attributeType": "string" | ||
| }, | ||
| { | ||
| "name": "file", | ||
| "type": "CORE:BlueprintAttribute", | ||
| "attributeType": "CORE:File", | ||
| "contained": false | ||
| } | ||
| ] | ||
| }, | ||
| "entity": { | ||
| "name": "mediaViewerMOV", | ||
| "type": "./MediaViewer", | ||
| "file": { | ||
| "type": "dmss://system/SIMOS/Reference", | ||
| "address": "./static/example_image", | ||
| "referenceType": "link" | ||
| } | ||
| }, | ||
| "recipe": { | ||
| "name": "MediaExample", | ||
| "type": "CORE:UiRecipe", | ||
| "description": "Media example with basic config", | ||
| "plugin": "@development-framework/dm-core-plugins/media-viewer", | ||
| "config": { | ||
| "type": "PLUGINS:dm-core-plugins/media_viewer/MediaViewerConfig", | ||
| "description": "some description", | ||
| "caption": "some header", | ||
| "showMeta": true, | ||
| "width": 1000 | ||
| } | ||
| } | ||
| } |
80 changes: 80 additions & 0 deletions
80
packages/dm-core-plugins/docs/ResponsiveGridPlugin/Documentation.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| Plugin based on [react-grid-system](https://www.npmjs.com/package/react-grid-system) npm package which is a Bootstrap-like responsive grid system. | ||
|
|
||
| ### Passing views | ||
|
|
||
| ResponsiveGridPlugin config takes a list of rows. | ||
|
|
||
| ```json {3} | ||
| "config": { | ||
| "type": "PLUGINS:dm-core-plugins/responsive_grid/ResponsiveGridPluginConfig", | ||
| "rows": [] | ||
| } | ||
| ``` | ||
|
|
||
| A list of rows expects a column attribute which contains a list of `ColumnItems`. A ColumnItem expects a viewConfig and also allows you set what kind of width the column item should have based on various breakpoints. | ||
|
|
||
| ```json {6} | ||
| "config": { | ||
| "type": "PLUGINS:dm-core-plugins/responsive_grid/ResponsiveGridPluginConfig", | ||
| "rows": [ | ||
| { | ||
| "type": "PLUGINS:dm-core-plugins/responsive_grid/RowItem", | ||
| "columns": [ | ||
| { | ||
| "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnItem", | ||
| "viewConfig": {}, | ||
| "size": { | ||
| "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize", | ||
| "sm": 12, | ||
| "md": 4 | ||
| } | ||
| }, | ||
| { | ||
| "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnItem", | ||
| "viewConfig": {}, | ||
| "size": { | ||
| "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize", | ||
| "sm": 12, | ||
| "md": 4 | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| ] | ||
| } | ||
| ``` | ||
|
|
||
| ### Sizing and breakpoints | ||
|
|
||
| #### Breakpoints | ||
| CSS breakpoints allow you to style the website and specify layout according to the device width it's being viewed on. This plugin uses react-grid-system default breakpoints. | ||
|
|
||
| | **size** | **pixels** | | ||
| | -------- | ---------- | | ||
| | xs | 576 | | ||
| | sm | 768 | | ||
| | md | 992 | | ||
| | lg | 1200 | | ||
| | xl | 1600 | | ||
| | xxl | 1920 | | ||
|
|
||
| #### Sizing | ||
| A grid is based on 12 grid columns, meaning that you can split these 12 columns/section on the column items you have passed in the row. A full width item would have to span all 12 columns so we would pass a 12 to a breakpoint. | ||
| ```json {3} | ||
| "size": { | ||
| "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize", | ||
| "xs": 12, | ||
| } | ||
| ``` | ||
|
|
||
| #### Sizing based on breakpoints | ||
| When sizing for a breakpoint we define the value it's supposed to be for the width the breakpoint it represents and anything wider UNLESS a bigger breakpoint has been defined with another value. | ||
|
|
||
| In this example: on small devices the configured item would span 12 grid columns on devices smaller than 992px in width and span 4 grid columns on bigger than 992px in width. | ||
| ```json {3-4} | ||
| "size": { | ||
| "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize", | ||
| "xs": 12, | ||
| "md": 4, | ||
| } | ||
| ``` |
105 changes: 105 additions & 0 deletions
105
packages/dm-core-plugins/docs/ResponsiveGridPlugin/Examples/Basic.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| { | ||
| "title": "Basic Example", | ||
| "description": "Minimal example of how to configure responsive grid plugin", | ||
| "note": "As you can see in the config - this example is configured for items to take up 4/12 column on medium (md) sized screens or bigger, and 12/12 columns on small screens.", | ||
| "showDemo": true, | ||
| "entityFilePrefix": "example", | ||
| "blueprint": { | ||
| "type": "CORE:Blueprint", | ||
| "name": "Example", | ||
| "description": "", | ||
| "attributes": [ | ||
| { | ||
| "type": "dmss://system/SIMOS/BlueprintAttribute", | ||
| "name": "type", | ||
| "attributeType": "string", | ||
| "optional": false | ||
| } | ||
| ] | ||
| }, | ||
| "entity": { | ||
| "type": "./Example", | ||
| "_id": "1179c897-df62-445f-87e4-f393b4253936" | ||
| }, | ||
| "recipe": { | ||
| "type": "CORE:UiRecipe", | ||
| "name": "grid_example", | ||
| "description": "Person form", | ||
| "plugin": "@development-framework/dm-core-plugins/responsive_grid", | ||
| "config": { | ||
| "type": "PLUGINS:dm-core-plugins/responsive_grid/ResponsiveGridPluginConfig", | ||
| "rows": [ | ||
| { | ||
| "type": "PLUGINS:dm-core-plugins/responsive_grid/RowItem", | ||
| "columns": [ | ||
| { | ||
| "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnItem", | ||
| "viewConfig": { | ||
| "type": "CORE:InlineRecipeViewConfig", | ||
| "recipe": { | ||
| "type": "CORE:UiRecipe", | ||
| "name": "box", | ||
| "plugin": "custom-box-plugin", | ||
| "config": { | ||
| "type": "PLUGINS:custom-box-plugin-blueprint", | ||
| "content": "Item 1" | ||
| } | ||
| } | ||
| }, | ||
| "size": { | ||
| "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize", | ||
| "sm": 12, | ||
| "md": 4 | ||
| } | ||
| }, | ||
| { | ||
| "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnItem", | ||
| "viewConfig": { | ||
| "type": "CORE:InlineRecipeViewConfig", | ||
| "recipe": { | ||
| "type": "CORE:UiRecipe", | ||
| "name": "box", | ||
| "plugin": "custom-box-plugin", | ||
| "config": { | ||
| "type": "PLUGINS:custom-box-plugin-blueprint", | ||
| "content": "Item 2" | ||
| } | ||
| } | ||
| }, | ||
| "size": { | ||
| "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize", | ||
| "sm": 12, | ||
| "md": 4 | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "type": "PLUGINS:dm-core-plugins/responsive_grid/RowItem", | ||
| "columns": [ | ||
| { | ||
| "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnItem", | ||
| "viewConfig": { | ||
| "type": "CORE:InlineRecipeViewConfig", | ||
| "recipe": { | ||
| "type": "CORE:UiRecipe", | ||
| "name": "box", | ||
| "plugin": "custom-box-plugin", | ||
| "config": { | ||
| "type": "PLUGINS:custom-box-plugin-blueprint", | ||
| "content": "Item 3" | ||
| } | ||
| } | ||
| }, | ||
| "size": { | ||
| "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize", | ||
| "sm": 12, | ||
| "md": 4 | ||
| } | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| } | ||
| } |