JSFiddle - React, Tailwind, and code Playground
CSS
.todos-panels {
width:320px;
}
.todos-panels > * {
width:320px;
}
.todos-panels-shadow {
box-shadow: -4px 0px 4px rgba(0,0,0,0.3);
-moz-box-shadow: -4px 0px 4px rgba(0,0,0,0.3);
-webkit-box-shadow: -4px 0px 4px rgba(0,0,0,0.3);
}
.todos-list {
border:1px solid gray;
border-radius:5px;
margin:10px;
background:white;
}
.todos-list-item {
border-bottom:1px solid gray;
}
.todo-name {
display:inline-block;
margin-left:10px;
}
JavaScript
enyo.kind({
name: "App",
fit: true,
components:[
{kind:"Panels", classes:"enyo-fit", arrangerKind:"CollapsingArranger", components: [
{kind:"Panels", name:"listPanels", classes:"onyx todos-panels", arrangerKind:"CarouselArranger", components: [
{kind:"FittableRows", components: [
{kind:"onyx.Toolbar", layoutKind:"FittableColumnsLayout", components: [
{content:"Lists", fit:true},
{kind:"onyx.Button", content:"Add"}
]},
{kind:"Scroller", fit:true, classes:"todos-list", components: [
{kind:"Repeater", count:"8", components: [
{kind:"onyx.Item", classes:"todos-list-item", content:"List Name", ontap:"selectList"}
]}
]},
{kind:"onyx.Toolbar", components: [
{kind:"onyx.Grabber"}
]}
]},
{kind:"FittableRows", components: [
{kind:"onyx.Toolbar", layoutKind:"FittableColumnsLayout", components: [
{content:"Todos", fit:true},
{kind:"onyx.Button", content:"Add"},
{kind:"onyx.Button", content:"Clear Done"}
]},
{kind:"Scroller", fit:true, classes:"todos-list", components: [
{kind:"Repeater", count:"20", components: [
{kind:"onyx.Item", classes:"todos-list-item", components: [
{kind:"onyx.Checkbox"},
{content:"Todo Name", classes:"todo-name"}
]}
]}
]},
{kind:"onyx.Toolbar", layoutKind:"FittableColumnsLayout", components: [
{kind:"onyx.Button", content:"Back", ontap:"backToLists"},
...