Trellis with Card Layout

This example demonstrates how you can use the Trellis Gouping Strategy with the Card Layout Engine, which is useful for implementations like task management.

<p>This example demonstrates how you can use the Trellis Gouping Strategy with the Card Layout Engine, which is useful for implementations like task management. This view is essentially a grouped card layout that allows the user to change groups by dragging and dropping. You can see this by clicking the <strong>Default</strong> button. You can see the cards in a list grouped by category. This demo also serves as a simple game. If the item on the card matches the category, a green check mark appears.</p> <p>There are three primary parts that make this demo work:</p> <ul> <li>References to&nbsp;<strong>cardlayout.js</strong>&nbsp;and&nbsp;<strong>trellis.js</strong>&nbsp;provide the core functionality.</li> <li>A row template is configured to format each row as a card.</li> <li>The&nbsp;<strong>groupStrategy: trellis</strong>&nbsp;option/value pair is used to set the group strategy.</li> </ul>
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/DataViews/Trellis/TrellisWithCardLayout/purejs/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="grouping, card, trellies" /> <meta name="description" content="This example demonstrates how you can use the Trellis Gouping Strategy with the Card Layout Engine, which is useful for implementations like task management." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Trellis with Card Layout | Data Views | GrapeCity DataViewsJS JavaScript Demos</title> <link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/css/bootstrap-snippet.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.trellis.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.cardlayout.min.css" rel="stylesheet" type="text/css" /> <link href="styles.css" rel="stylesheet" type="text/css" /> <!-- Google Tag Manager --> <script> (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ'); </script> <!-- End Google Tag Manager --> <script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script> <script type="text/javascript"> window.process = { env: { NODE_ENV: 'production', USE_NPM: false, USE_CDN: false, SITE_ROOT: '/dataviewsjs/demos', FRAMEWORK: 'purejs', DVJS_LICENSE_KEY: 'E674186349827489#B0LYWQMpFdP3WSHlVaGdjTFtyLCxUQjdFV5MHey9kTyBnY0pkY6tWcr34caJjSPlEVlR6QpJnZEdjSj9kbkRUZChzMsRFS99mN4ZGO72yK7FXe5tmN59Eai5UM7dEVvgUeYN5MqdUTIpWTpBnSTJEWv24YwoFWr9mWEl6UNVmVMxUd5ckUQdlUNV4MDhENaV5KNNWbJtiSwFUYCVUax4GUuBjZDN7T5dWdDpFNyJjSxJkes3mUt94QrdnMK5mZORGeFZ4QyFTMmdWOWdlMmJ4ZJhTS5MmZatyZ7k5c0JXVB3mWVNke7AFRiojITJCLikjNBNjNzcjI0ICSiwSN8AjN9YjMwUTM0IicfJye35XX3JSWUVVOiojIDJCLiEjdgMlSzdXZpZVY4FGRiojIOJyebpjIkJHUiwiI9MDMykDMggDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WSgkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI9gDN7IDO9QzM6gTM4cjNiojIklkI1pjIEJCLi4TPn3UZuJ7cPZTW5hUMtN7MJN6aQFnT5gmd9FEZ4EETlFmW63kU8IGdiRGTJZle5UDbZJHTR34T0JzZoZmbalXQwNmM8EndEFEdSVlMiVnckFmQUJTOahmc7AzRHhlU4I4Vs3kN6lHaHR4LuhWULNIe', SJS_LICENSE_KEY: '*.grapecity.com,E613631884219496#B0qRgJHWSJ7NyBlc8BjNMRHW7g7YldTZXFTQuFnW4hVOCplVSlVV09ERlhEZuVTVKlTazE4Q6VGSw2CdWZUWSVmbjVXbrxmWFVWR8ZzQro7U84WMGdlbuVHb73kS5kjUTN4NvFVdLdXWVR4Nox6Z7UUSysEcXJEMsN6bDN4TxMDVwVmWBRzKxhkTzAXTaJmdD3CRFJTd8R4R6M5RklWa6oUaLlXMwR4R8ZUdtRWVxUUaQh6VXNDdEhlZ7FHR6QXTPJTVvkWcyZnbSdHRtZHcYF6TKN4axYGcZNjTDF7TvFTTr24VqZjVHVjcLd7QkRmdNxkI0IyUiwiI5gDOEF4QGVjI0ICSiwiMzkTO9kTOyMTM0IicfJye35XX3JSSGljQiojIDJCLiITMuYHITpEIkFWZyB7UiojIOJyebpjIkJHUiwiI4MDMyEDMgkDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WagkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI6kDN9EjM4gDOxMjNzEjNiojIklkIs4XZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34TQ72kNBV6YXpXdGxGWxdHcol4MyUGUHJVbQVHRx44Sw84YxRkS4QnZadDNmhWWxV5QxFlTlZEbBJ5N8gUNQlDb7J6Kl36YHVnb4NGN92UMFdlNORFU8VDSaFlQSVlS4EHTrA5Ohh', }, }; </script> <script src="/dataviewsjs/demos/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.trellis.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.cardlayout.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script> </head> <body class="theme-default"> <!-- Google Tag Manager (noscript) --> <noscript ><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WT462SJ" height="0" width="0" style="display: none; visibility: hidden;" ></iframe ></noscript> <!-- End Google Tag Manager (noscript) --> <noscript>You need to enable JavaScript to run this app.</noscript> <div class="main-container"> <div class="sample-options"> <div class="btn-group"> <button id="normal" type="button" class="btn btn-default">Default</button> <button id="trellis" type="button" class="btn btn-default active">Trellis</button> </div> </div> <div id="grid" class="grid"></div> </div> <script src="data.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> </body> </html>
var rowTemplate = '<div class="group-item-container">\n <div class="group-item-container-inner">\n <div class="image-container" data-column="image"></div>\n <div class="name-container" data-column="name"></div>\n {{?it.currentCategory===it.category}}\n <div class="correct-mark"></div>\n {{?}}\n </div>\n</div>'; var imagePresenter = '<img class="flash-image" src={{=it.image}} />'; var cols = [ { id: 'image', dataField: 'image', presenter: imagePresenter, }, { id: 'name', dataField: 'name', }, ]; var trellis = new GC.DataViews.TrellisGrouping({ panelUnitWidth: 300, }); var layout = new GC.DataViews.CardLayout({ cardHeight: 150, cardWidth: 150, grouping: [ { field: 'currentCategory', preDefinedGroups: groups, header: { height: 30, }, }, ], groupStrategy: trellis, rowTemplate: rowTemplate, }); var dataView = new GC.DataViews.DataView(document.getElementById('grid'), data, cols, layout); function changeToNormalLayout() { $('#normal').addClass('active'); $('#trellis').removeClass('active'); var options = dataView.options; options.groupStrategy = null; dataView.invalidate(); } function changeToTrellisLayout() { $('#normal').removeClass('active'); $('#trellis').addClass('active'); var options = dataView.options; options.groupStrategy = trellis; dataView.invalidate(); } $('#normal').click(changeToNormalLayout); $('#trellis').click(changeToTrellisLayout);
// flashcard dataset var SITE_ROOT = window.process.env.SITE_ROOT; var data = [ { currentCategory: 'unclassified', category: 'animal', name: 'cat', image: SITE_ROOT + '/images/cat.png', }, { currentCategory: 'unclassified', category: 'animal', name: 'dog', image: SITE_ROOT + '/images/dog.png', }, { currentCategory: 'unclassified', category: 'animal', name: 'chicken', image: SITE_ROOT + '/images/chicken.png', }, { currentCategory: 'unclassified', category: 'animal', name: 'lion', image: SITE_ROOT + '/images/lion.png', }, { currentCategory: 'unclassified', category: 'animal', name: 'mouse', image: SITE_ROOT + '/images/mouse.png', }, { currentCategory: 'unclassified', category: 'animal', name: 'pig', image: SITE_ROOT + '/images/pig.png', }, { currentCategory: 'unclassified', category: 'animal', name: 'rabbit', image: SITE_ROOT + '/images/rabbit.png', }, { currentCategory: 'unclassified', category: 'weather', name: 'snow', image: SITE_ROOT + '/images/snow.png', }, { currentCategory: 'unclassified', category: 'weather', name: 'cloud', image: SITE_ROOT + '/images/cloud.png', }, { currentCategory: 'unclassified', category: 'weather', name: 'rain', image: SITE_ROOT + '/images/rain.png', }, { currentCategory: 'unclassified', category: 'weather', name: 'rainbow', image: SITE_ROOT + '/images/rainbow.png', }, { currentCategory: 'unclassified', category: 'weather', name: 'wind', image: SITE_ROOT + '/images/wind.png', }, { currentCategory: 'unclassified', category: 'weather', name: 'water', image: SITE_ROOT + '/images/water.png', }, { currentCategory: 'unclassified', category: 'emotion', name: 'happy', image: SITE_ROOT + '/images/happy.png', }, { currentCategory: 'unclassified', category: 'emotion', name: 'sad', image: SITE_ROOT + '/images/sad.png', }, { currentCategory: 'unclassified', category: 'emotion', name: 'surprised', image: SITE_ROOT + '/images/surprised.png', }, { currentCategory: 'unclassified', category: 'emotion', name: 'proud', image: SITE_ROOT + '/images/proud.png', }, { currentCategory: 'unclassified', category: 'emotion', name: 'angry', image: SITE_ROOT + '/images/angry.png', }, { currentCategory: 'unclassified', category: 'emotion', name: 'inlove', image: SITE_ROOT + '/images/inlove.png', }, { currentCategory: 'unclassified', category: 'shape', name: 'circle', image: SITE_ROOT + '/images/circle.png', }, { currentCategory: 'unclassified', category: 'shape', name: 'heart', image: SITE_ROOT + '/images/heart.png', }, { currentCategory: 'unclassified', category: 'shape', name: 'cross', image: SITE_ROOT + '/images/cross.png', }, { currentCategory: 'unclassified', category: 'shape', name: 'rectangle', image: SITE_ROOT + '/images/rect.png', }, { currentCategory: 'unclassified', category: 'shape', name: 'star', image: SITE_ROOT + '/images/star.png', }, { currentCategory: 'unclassified', category: 'shape', name: 'triangle', image: SITE_ROOT + '/images/triangle.png', }, ]; var groups = ['animal', 'weather', 'emotion', 'shape']; data.forEach(function (item) { item.currentCategory = item.category; });
.main-container { display: flex; flex-direction: column; width: 100%; height: 100%; } .sample-options { flex-grow: 0; flex-shrink: 0; display: flex; background: #fbfbfb; box-sizing: border-box; overflow: hidden; padding: 10px; } .grid { width: calc(100% - 20px); height: 100%; flex-grow: 1; flex-shrink: 1; margin: 0 10px; } .card-layout .group-item-container { overflow: hidden; position: relative; z-index: 1; padding: 5px; border-radius: 0; } .card-layout .group-item-container .group-item-container-inner { border: 1px solid #ccc; border-radius: 5px; } .card-layout .group-item-container .image-container { height: 115px; } .card-layout .group-item-container .name-container { font-size: 16px; height: 25px; text-align: center; justify-content: center; } .flash-image { height: 100%; width: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px; } .gc-trellis-row.gc-trellis-place-holder { border: 1px solid #d3d3d3; border-radius: 12px; } .correct-mark { position: absolute; left: 10px; top: 10px; display: flex; align-items: center; justify-content: center; padding: 7px 5px 8px 5px; border: 4px solid #27d7b1; border-radius: 100%; } .correct-mark:after { display: block; content: ""; width: 10px; height: 5px; border: 4px solid #27d7b1; border-top: none; border-right: none; background: transparent; transform: rotate(-45deg); } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFWaWV3cy9UcmVsbGlzL1RyZWxsaXNXaXRoQ2FyZExheW91dC9wdXJlanMvc3R5bGVzLnNjc3MiLCJEYXRhVmlld3MvVHJlbGxpcy9UcmVsbGlzV2l0aENhcmRMYXlvdXQvcHVyZWpzL3N0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxhQUFBO0VBQ0Esc0JBQUE7RUFDQSxXQUFBO0VBQ0EsWUFBQTtBQ0NGOztBREVBO0VBQ0UsWUFBQTtFQUNBLGNBQUE7RUFDQSxhQUFBO0VBQ0EsbUJBQUE7RUFDQSxzQkFBQTtFQUNBLGdCQUFBO0VBQ0EsYUFBQTtBQ0NGOztBREVBO0VBQ0Usd0JBQUE7RUFDQSxZQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7RUFDQSxjQUFBO0FDQ0Y7O0FER0U7RUFDRSxnQkFBQTtFQUNBLGtCQUFBO0VBQ0EsVUFBQTtFQUNBLFlBQUE7RUFDQSxnQkFBQTtBQ0FKO0FERUk7RUFDRSxzQkFBQTtFQUNBLGtCQUFBO0FDQU47QURHSTtFQUNFLGFBQUE7QUNETjtBRElJO0VBQ0UsZUFBQTtFQUNBLFlBQUE7RUFDQSxrQkFBQTtFQUNBLHVCQUFBO0FDRk47O0FET0E7RUFDRSxZQUFBO0VBQ0EsV0FBQTtFQUNBLDJCQUFBO0VBQ0EsNEJBQUE7QUNKRjs7QURPQTtFQUNFLHlCQUFBO0VBQ0EsbUJBQUE7QUNKRjs7QURXQTtFQUNFLGtCQUFBO0VBQ0EsVUFBQTtFQUNBLFNBQUE7RUFDQSxhQUFBO0VBQ0EsbUJBQUE7RUFDQSx1QkFBQTtFQUNBLHdCQUFBO0VBQ0EseUJBQUE7RUFDQSxtQkFBQTtBQ1JGO0FEVUU7RUFDRSxjQUFBO0VBQ0EsV0FBQTtFQUNBLFdBakJjO0VBa0JkLFdBakJlO0VBa0JmLHlCQUFBO0VBQ0EsZ0JBQUE7RUFDQSxrQkFBQTtFQUNBLHVCQUFBO0VBQ0EseUJBQUE7QUNSSiIsImZpbGUiOiJEYXRhVmlld3MvVHJlbGxpcy9UcmVsbGlzV2l0aENhcmRMYXlvdXQvcHVyZWpzL3N0eWxlcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIubWFpbi1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuXG4uc2FtcGxlLW9wdGlvbnMge1xuICBmbGV4LWdyb3c6IDA7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICBkaXNwbGF5OiBmbGV4O1xuICBiYWNrZ3JvdW5kOiAjZmJmYmZiO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBwYWRkaW5nOiAxMHB4O1xufVxuXG4uZ3JpZCB7XG4gIHdpZHRoOiBjYWxjKDEwMCUgLSAyMHB4KTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBmbGV4LWdyb3c6IDE7XG4gIGZsZXgtc2hyaW5rOiAxO1xuICBtYXJnaW46IDAgMTBweDtcbn1cblxuLmNhcmQtbGF5b3V0IHtcbiAgLmdyb3VwLWl0ZW0tY29udGFpbmVyIHtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICB6LWluZGV4OiAxO1xuICAgIHBhZGRpbmc6IDVweDtcbiAgICBib3JkZXItcmFkaXVzOiAwO1xuXG4gICAgLmdyb3VwLWl0ZW0tY29udGFpbmVyLWlubmVyIHtcbiAgICAgIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7XG4gICAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgfVxuXG4gICAgLmltYWdlLWNvbnRhaW5lciB7XG4gICAgICBoZWlnaHQ6IDExNXB4O1xuICAgIH1cblxuICAgIC5uYW1lLWNvbnRhaW5lciB7XG4gICAgICBmb250LXNpemU6IDE2cHg7XG4gICAgICBoZWlnaHQ6IDI1cHg7XG4gICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB9XG4gIH1cbn1cblxuLmZsYXNoLWltYWdlIHtcbiAgaGVpZ2h0OiAxMDAlO1xuICB3aWR0aDogMTAwJTtcbiAgYm9yZGVyLXRvcC1sZWZ0LXJhZGl1czogNXB4O1xuICBib3JkZXItdG9wLXJpZ2h0LXJhZGl1czogNXB4O1xufVxuXG4uZ2MtdHJlbGxpcy1yb3cuZ2MtdHJlbGxpcy1wbGFjZS1ob2xkZXIge1xuICBib3JkZXI6IDFweCBzb2xpZCAjZDNkM2QzO1xuICBib3JkZXItcmFkaXVzOiAxMnB4O1xufVxuXG4kY2hlY2ttYXJrLWNvbG9yOiAjMjdkN2IxO1xuJGNoZWNrbWFyay13aWR0aDogMTBweDtcbiRjaGVja21hcmstaGVpZ2h0OiA1cHg7XG5cbi5jb3JyZWN0LW1hcmsge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGxlZnQ6IDEwcHg7XG4gIHRvcDogMTBweDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHBhZGRpbmc6IDdweCA1cHggOHB4IDVweDtcbiAgYm9yZGVyOiA0cHggc29saWQgJGNoZWNrbWFyay1jb2xvcjtcbiAgYm9yZGVyLXJhZGl1czogMTAwJTtcblxuICAmOmFmdGVyIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBjb250ZW50OiAnJztcbiAgICB3aWR0aDogJGNoZWNrbWFyay13aWR0aDtcbiAgICBoZWlnaHQ6ICRjaGVja21hcmstaGVpZ2h0O1xuICAgIGJvcmRlcjogNHB4IHNvbGlkICRjaGVja21hcmstY29sb3I7XG4gICAgYm9yZGVyLXRvcDogbm9uZTtcbiAgICBib3JkZXItcmlnaHQ6IG5vbmU7XG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoLTQ1ZGVnKTtcbiAgfVxufVxuIiwiLm1haW4tY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLnNhbXBsZS1vcHRpb25zIHtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMDtcbiAgZGlzcGxheTogZmxleDtcbiAgYmFja2dyb3VuZDogI2ZiZmJmYjtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgcGFkZGluZzogMTBweDtcbn1cblxuLmdyaWQge1xuICB3aWR0aDogY2FsYygxMDAlIC0gMjBweCk7XG4gIGhlaWdodDogMTAwJTtcbiAgZmxleC1ncm93OiAxO1xuICBmbGV4LXNocmluazogMTtcbiAgbWFyZ2luOiAwIDEwcHg7XG59XG5cbi5jYXJkLWxheW91dCAuZ3JvdXAtaXRlbS1jb250YWluZXIge1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHotaW5kZXg6IDE7XG4gIHBhZGRpbmc6IDVweDtcbiAgYm9yZGVyLXJhZGl1czogMDtcbn1cbi5jYXJkLWxheW91dCAuZ3JvdXAtaXRlbS1jb250YWluZXIgLmdyb3VwLWl0ZW0tY29udGFpbmVyLWlubmVyIHtcbiAgYm9yZGVyOiAxcHggc29saWQgI2NjYztcbiAgYm9yZGVyLXJhZGl1czogNXB4O1xufVxuLmNhcmQtbGF5b3V0IC5ncm91cC1pdGVtLWNvbnRhaW5lciAuaW1hZ2UtY29udGFpbmVyIHtcbiAgaGVpZ2h0OiAxMTVweDtcbn1cbi5jYXJkLWxheW91dCAuZ3JvdXAtaXRlbS1jb250YWluZXIgLm5hbWUtY29udGFpbmVyIHtcbiAgZm9udC1zaXplOiAxNnB4O1xuICBoZWlnaHQ6IDI1cHg7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG59XG5cbi5mbGFzaC1pbWFnZSB7XG4gIGhlaWdodDogMTAwJTtcbiAgd2lkdGg6IDEwMCU7XG4gIGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDVweDtcbiAgYm9yZGVyLXRvcC1yaWdodC1yYWRpdXM6IDVweDtcbn1cblxuLmdjLXRyZWxsaXMtcm93LmdjLXRyZWxsaXMtcGxhY2UtaG9sZGVyIHtcbiAgYm9yZGVyOiAxcHggc29saWQgI2QzZDNkMztcbiAgYm9yZGVyLXJhZGl1czogMTJweDtcbn1cblxuLmNvcnJlY3QtbWFyayB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgbGVmdDogMTBweDtcbiAgdG9wOiAxMHB4O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgcGFkZGluZzogN3B4IDVweCA4cHggNXB4O1xuICBib3JkZXI6IDRweCBzb2xpZCAjMjdkN2IxO1xuICBib3JkZXItcmFkaXVzOiAxMDAlO1xufVxuLmNvcnJlY3QtbWFyazphZnRlciB7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBjb250ZW50OiBcIlwiO1xuICB3aWR0aDogMTBweDtcbiAgaGVpZ2h0OiA1cHg7XG4gIGJvcmRlcjogNHB4IHNvbGlkICMyN2Q3YjE7XG4gIGJvcmRlci10b3A6IG5vbmU7XG4gIGJvcmRlci1yaWdodDogbm9uZTtcbiAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gIHRyYW5zZm9ybTogcm90YXRlKC00NWRlZyk7XG59Il19 */