From 0f565b302b736906d25df9b1d21c727ba7be30f6 Mon Sep 17 00:00:00 2001 From: etowahadams Date: Fri, 17 May 2024 14:59:44 -0400 Subject: [PATCH 1/3] feat: fixed and responsive --- docs/fixed-responsive.mdx | 36 ++++++++++++++++++++++++++++++++++++ sidebarDocs.js | 1 + 2 files changed, 37 insertions(+) create mode 100644 docs/fixed-responsive.mdx diff --git a/docs/fixed-responsive.mdx b/docs/fixed-responsive.mdx new file mode 100644 index 0000000..3b349be --- /dev/null +++ b/docs/fixed-responsive.mdx @@ -0,0 +1,36 @@ +--- +title: Fixed and Responsive Layouts +description: Make your visualization responsive to the screen size +--- + +Gosling visualizations can be fixed or responsive to the screen size. + +## Fixed size + +A Gosling visualization can have a fixed size by setting the `width` and `height` properties. The tracks will have a fixed size regardless of the screen size. + +When the `width` and `height` properties are set in the root of the spec, all tracks will have this height and width unless they are overridden in the track specification. + +```javascript +{ + // highlight-start + width: 800, + height: 200, + // highlight-end + // ... rest of the Gosling spec +} +``` + +## Responsive size +A Gosling visualization can be made responsive to the screen size by setting the `responsiveSize` property in the root of the Gosling specification. When the screen size changes, the visualization will automatically adjust its size to fit the screen. + +Here is an example of a Gosling specification with responsive size enabled: + +```javascript +{ + // highlight-start + responsiveSize: { width: true }, + // highlight-end + // ... rest of the Gosling spec +} +``` \ No newline at end of file diff --git a/sidebarDocs.js b/sidebarDocs.js index 8c0ec87..a2dba5d 100644 --- a/sidebarDocs.js +++ b/sidebarDocs.js @@ -27,6 +27,7 @@ module.exports = { 'genome-builds', 'user-interaction', 'semantic-zoom', + 'fixed-responsive', ], }, { From 8ad720c36c7377a7cd81b63269a3c6d52cf0ead9 Mon Sep 17 00:00:00 2001 From: etowahadams Date: Fri, 17 May 2024 18:02:08 -0400 Subject: [PATCH 2/3] Update docs/fixed-responsive.mdx Co-authored-by: SEHI L'YI --- docs/fixed-responsive.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/fixed-responsive.mdx b/docs/fixed-responsive.mdx index 3b349be..c321283 100644 --- a/docs/fixed-responsive.mdx +++ b/docs/fixed-responsive.mdx @@ -1,5 +1,5 @@ --- -title: Fixed and Responsive Layouts +title: Responsive Visualizations description: Make your visualization responsive to the screen size --- From c7d22121b07017e800d6181d816ef35482590be1 Mon Sep 17 00:00:00 2001 From: etowahadams Date: Fri, 17 May 2024 18:05:25 -0400 Subject: [PATCH 3/3] feat: change order --- docs/fixed-responsive.mdx | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/docs/fixed-responsive.mdx b/docs/fixed-responsive.mdx index c321283..901d78d 100644 --- a/docs/fixed-responsive.mdx +++ b/docs/fixed-responsive.mdx @@ -3,34 +3,35 @@ title: Responsive Visualizations description: Make your visualization responsive to the screen size --- -Gosling visualizations can be fixed or responsive to the screen size. +Gosling visualizations can be responsive or fixed to the screen size. -## Fixed size - -A Gosling visualization can have a fixed size by setting the `width` and `height` properties. The tracks will have a fixed size regardless of the screen size. +## Responsive size +A Gosling visualization can be made responsive to the screen size by setting the `responsiveSize` property in the root of the Gosling specification. When the screen size changes, the visualization will automatically adjust its size to fit the screen. -When the `width` and `height` properties are set in the root of the spec, all tracks will have this height and width unless they are overridden in the track specification. +Here is an example of a Gosling specification with responsive size enabled: ```javascript { // highlight-start - width: 800, - height: 200, + responsiveSize: { width: true }, // highlight-end // ... rest of the Gosling spec } ``` -## Responsive size -A Gosling visualization can be made responsive to the screen size by setting the `responsiveSize` property in the root of the Gosling specification. When the screen size changes, the visualization will automatically adjust its size to fit the screen. +## Fixed size -Here is an example of a Gosling specification with responsive size enabled: +A Gosling visualization can have a fixed size by setting the `width` and `height` properties. The tracks will have a fixed size regardless of the screen size. + +When the `width` and `height` properties are set in the root of the spec, all tracks will have this height and width unless they are overridden in the track specification. ```javascript { // highlight-start - responsiveSize: { width: true }, + width: 800, + height: 200, // highlight-end // ... rest of the Gosling spec } -``` \ No newline at end of file +``` +