JSFiddle - React, Tailwind, and code Playground

by gorillawit

HTML

<script>
	new enyo.sample.PanelsFlickrSample().renderInto(document.body);
</script>

CSS

.panels-sample-flickr-panels {
	color: white;
	background: #555;
}
.panels-sample-flickr-panels > * {
	width: 320px;
	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);
}
.panels-sample-flickr-item {
	position: relative;
	border-bottom: 1px solid #0E0E0E;
	padding: 12px 16px;
	background-color: #333333;
}

.panels-sample-flickr-item.onyx-selected {
	background-color: MidnightBlue;
}

.panels-sample-flickr-title {
	position: absolute;
	top: 40px;
	right: 0;
	left: 100px;

	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.panels-sample-flickr-thumbnail {
	width: 75px;
	height: 75px;
}
.panels-sample-flickr-more-button {
	color: white; margin: 10px;
}
.panels-sample-flickr-more-spinner {
	vertical-align: middle;
	margin: -4px 0 0 4px;
}
.panels-sample-flickr-center {
	margin: auto;
}
.panels-sample-flickr-main {
	background-color: #333;
}
.panels-sample-flickr-image {
	box-sizing: border-box;
	max-height: 90%;
	max-width: 90%;
	border: solid 5px #CCC;
	box-shadow: 1px 1px 5px #999;
	width: auto;
	height: auto;
}

.panels-sample-flickr-image.wide {
	width: 100%;
}


@media all and (max-width: 800px) {
	.panels-sample-flickr-image.wide {
		width: auto;
	}
}

.panels-sample-flickr-image.tall {
	height: 100%;
}

JavaScript

enyo.kind({
	name: "enyo.sample.PanelsFlickrSample",
	kind: "Panels",
	classes: "panels-sample-flickr-panels enyo-unselectable enyo-fit",
	arrangerKind: "CollapsingArranger",
	components: [
		{layoutKind: "FittableRowsLayout", components: [
			{kind: "onyx.Toolbar", components: [
				{kind: "onyx.InputDecorator",
                 style: "width: 90%;",
                 layoutKind: "FittableColumnsLayout",
                 components: [
                     {
                      name: "searchInput",
                      fit: true, kind: "onyx.Input",
                      value: "Japan",
                      onchange: "search"
                     },{
                      kind: "Image",
                      src: "http://nightly.enyojs.com/latest/sampler/assets/search-input-search.png",
                      style: "width: 20px; height: 20px;"
                    }
                 ]
                }, {
                    name: "searchSpinner",
                    kind: "Image",
                    src: "http://nightly.enyojs.com/latest/sampler/assets/spinner.gif",
                    showing: false}
            ]
            }, {
                kind: "List",
                fit: true,
                touch: true,
                onSetupItem: "setupItem",
                components: [
                    {
                        name: "item",
                        style: "padding: 10px;",
                        classes: "panels-sample-flickr-item enyo-border-box",
                        ontap: "itemTap",
                        components: [
                            {
                                name: "thumbnail",
                                kind: "Image",
                                classes: "panels-sample-flickr-thumbnail"
                            }, {
                                name: "title",
                                classes: "panels-sample-flickr-title"
                            }
                        ]
          ...