JSFiddle - React, Tailwind, and code Playground

by gorillawit

CSS

.panels-sample-panels {
	min-height: 320px;
	min-width: 320px;
}

.panels-sample-panels > * {
	border: 2px solid #333;
	font-size: 5em;
	text-align: center;
}

.panels-sample-wide > * {
	min-width: 50%;
}

.panels-sample-collapsible > * {
	min-width: 250px;
}

.panels-sample-spiral > * {
	min-width:150px;
	min-height:150px;
	max-height:150px;
	max-width:150px;
}

.panels-sample-grid > * {
	min-width:150px;
	min-height:150px;
	max-height:150px;
	max-width:150px;
}
.arranger-scroller {
}

@media screen and (max-width: 480px) {
	.arranger-scroller {
		max-height: 270px;
	}
}

JavaScript

enyo.kind({
	name: "enyo.sample.MyGridArranger",
	kind: "GridArranger",
	colHeight: "150",
	colWidth: "150"
});

enyo.kind({
	name: "enyo.sample.PanelsSample",
	kind: "FittableRows",
	classes: "enyo-fit",
	components: [
		{kind: "FittableColumns", noStretch: true, classes: "onyx-toolbar onyx-toolbar-inline", components: [
			{kind: "Scroller", thumb: false, fit: true, touch: true, vertical: "hidden", style: "margin: 0;", components: [
				{classes: "onyx-toolbar-inline", style: "white-space: nowrap;", components: [
					{kind: "onyx.MenuDecorator", components: [
						{content:"Arranger"},
						{name:"arrangerPicker", kind: "onyx.Menu", maxHeight: 360, floating: true, onSelect:"arrangerSelected"}
					]},
					{kind: "onyx.Button", content: "Previous", ontap: "prevPanel"},
					{kind: "onyx.Button", content: "Next", ontap: "nextPanel"},
					{kind: "onyx.InputDecorator", style: "width: 60px;", components: [
						{kind: "onyx.Input", value: 0, onchange: "gotoPanel"}
					]},
					{kind: "onyx.Button", content: "Go", ontap: "gotoPanel"},
					{kind: "onyx.Button", content: "Add", ontap: "addPanel"},
					{kind: "onyx.Button", content: "Delete", ontap: "deletePanel"}
				]}
			]}
		]},
		{kind: "Panels", name:"samplePanels", fit:true, realtimeFit: true, classes: "panels-sample-panels enyo-border-box", components: [
			{content:0, style:"background:red;"},
			{content:1, style:"background:orange;"},
			{content:2, style:"background:yellow;"},
			{content:3, style:"background:green;"},
			{content:4, style:"background:blue;"},
			{content:5, style:"background:indigo;"},
			{content:6, style:"background:violet;"}
		]}
	],
	bgcolors: ["red", "orange", "yellow", "green", "blue", "indigo", "violet"],

	// panels
	panelCount: 0,
	addPanel: function() {
		var sp = this.$.samplePanels;
		var i = this.panelCount++;
		var p = sp.createComponent({
			style:"background:" + this.bgcolors[i %...