Trellis with Card Layout | Data Views | MESCIUS DataViewsJS JavaScript Demos

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 Default 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. There are three primary parts that make this demo work: References to cardlayout.js and trellis.js provide the core functionality. A row template is configured to format each row as a card. The groupStrategy: trellis option/value pair is used to set the group strategy.

<!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 | MESCIUS 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" />
<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:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</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">
<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 */