Skip to content

Commit

Permalink
Reorganize demos [skip ci] (#116)
Browse files Browse the repository at this point in the history 
* Reorganize demos

* Rename height demo snippets
  • Loading branch information
@samiheikki @web-padawan
samiheikki authored and web-padawan committed Aug 1, 2018
1 parent 301b356 commit 984000c
Show file tree
Hide file tree
Showing 5 changed files with 107 additions and 77 deletions.
27 changes: 19 additions & 8 deletions demo/demos.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,25 @@
"name": "Vaadin Split Layout",
"pages": [
{
"name": "Basic Examples",
"name": "Basics",
"url": "split-layout-basic-demos",
"src": "split-layout-basic-demos.html",
"meta": {
"title": "vaadin-split-layout Basic Examples",
"description": "",
"image": ""
}
}
}
,
{
"name": "Height",
"url": "split-layout-height-demos",
"src": "split-layout-height-demos.html",
"meta": {
"title": "vaadin-split-layout Height Examples",
"description": "",
"image": ""
}
}
,
{
Expand All @@ -20,18 +31,18 @@
"title": "vaadin-split-layout Integration",
"description": "",
"image": ""
}
}
}
,
{
"name": "Lumo Theme Variations",
"url": "split-layout-lumo-theme-demos",
"src": "split-layout-lumo-theme-demos.html",
"name": "Theme Variants",
"url": "split-layout-theme-demos",
"src": "split-layout-theme-demos.html",
"meta": {
"title": "vaadin-split-layout Lumo Theme Variations",
"title": "vaadin-split-layout Theme Variants",
"description": "",
"image": ""
}
}
}
]
}
63 changes: 0 additions & 63 deletions demo/split-layout-basic-demos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,43 +43,6 @@ <h3>Layout Combination</h3>
</vaadin-demo-snippet>


<h3>Split Layout Element Height</h3>

<h4>Using Fixed Height</h4>
<vaadin-demo-snippet id="split-layout-basic-demos-split-layout-element-height">
<template preserve-content>
<vaadin-split-layout style="height: 200px;">
<div>First content element</div>
<div>Second content element</div>
</vaadin-split-layout>
</template>
</vaadin-demo-snippet>

<h4>Using Relative Height</h4>
<vaadin-demo-snippet id="split-layout-basic-demos-split-layout-element-height">
<template preserve-content>
<div style="height: 200px;">
<vaadin-split-layout style="height: 100%;">
<div>First</div>
<div>Second</div>
</vaadin-split-layout>
</div>
</template>
</vaadin-demo-snippet>

<h4>Using Flexbox Layout</h4>
<vaadin-demo-snippet id="split-layout-basic-demos-split-layout-element-height">
<template preserve-content>
<div style="height: 160px; display: flex;">
<vaadin-split-layout style="flex: 1;">
<div>First</div>
<div>Second</div>
</vaadin-split-layout>
</div>
</template>
</vaadin-demo-snippet>


<h3>Initial Splitter Position</h3>
<vaadin-demo-snippet id="split-layout-basic-demos-initial-splitter-position">
<template preserve-content>
Expand All @@ -102,32 +65,6 @@ <h3>Specifying Min- and Max- Sizes</h3>
</vaadin-demo-snippet>


<h3>Resize Notification for the Nested Elements</h3>
<vaadin-demo-snippet id="split-layout-basic-demos-resize-notification-for-the-nested-elements">
<template preserve-content>
<vaadin-split-layout>
<div>First</div>
<custom-resizable>Second</custom-resizable>
</vaadin-split-layout>
<script>
window.addDemoReadyListener('#split-layout-basic-demos-resize-notification-for-the-nested-elements', function(document) {
Polymer({
is: 'custom-resizable',
behaviors: [
Polymer.IronResizableBehavior
],
listeners: {
'iron-resize': '_onIronResize'
},
_onIronResize: function() {
console.log('Resized');
}
});
});
</script>
</template>
</vaadin-demo-snippet>

</template>
<script>
class SplitLayoutBasicDemos extends DemoReadyEventEmitter(SplitLayoutDemo(Polymer.Element)) {
Expand Down
54 changes: 54 additions & 0 deletions demo/split-layout-height-demos.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<dom-module id="split-layout-height-demos">
<template>
<style include="vaadin-component-demo-shared-styles">
:host {
display: block;
}
</style>


<h3>Fixed Height</h3>
<vaadin-demo-snippet id="split-layout-height-demos-height-fixed-height">
<template preserve-content>
<vaadin-split-layout style="height: 200px;">
<div>First content element</div>
<div>Second content element</div>
</vaadin-split-layout>
</template>
</vaadin-demo-snippet>

<h3>Relative Height</h3>
<vaadin-demo-snippet id="split-layout-height-demos-height-relative-height">
<template preserve-content>
<div style="height: 200px;">
<vaadin-split-layout style="height: 100%;">
<div>First</div>
<div>Second</div>
</vaadin-split-layout>
</div>
</template>
</vaadin-demo-snippet>

<h3>Flexbox Layout</h3>
<vaadin-demo-snippet id="split-layout-height-demos-height-flexbox-layout">
<template preserve-content>
<div style="height: 160px; display: flex;">
<vaadin-split-layout style="flex: 1;">
<div>First</div>
<div>Second</div>
</vaadin-split-layout>
</div>
</template>
</vaadin-demo-snippet>


</template>
<script>
class SplitLayoutHeightDemos extends DemoReadyEventEmitter(SplitLayoutDemo(Polymer.Element)) {
static get is() {
return 'split-layout-height-demos';
}
}
customElements.define(SplitLayoutHeightDemos.is, SplitLayoutHeightDemos);
</script>
</dom-module>
28 changes: 28 additions & 0 deletions demo/split-layout-integration-demos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,34 @@ <h3>Google Maps</h3>
</template>
</vaadin-demo-snippet>

<h3>Resize Notification for the Nested Elements</h3>
<vaadin-demo-snippet id="split-layout-basic-integration-resize-notification-for-the-nested-elements">
<template preserve-content>
<vaadin-split-layout>
<div>First</div>
<custom-resizable>Second</custom-resizable>
</vaadin-split-layout>
<script>
window.addDemoReadyListener('#split-layout-basic-integration-resize-notification-for-the-nested-elements', function(document) {
if (!window.customElements.get('custom-resizable')) {
Polymer({
is: 'custom-resizable',
behaviors: [
Polymer.IronResizableBehavior
],
listeners: {
'iron-resize': '_onIronResize'
},
_onIronResize: function() {
console.log('Resized');
}
});
}
});
</script>
</template>
</vaadin-demo-snippet>

</template>
<script>
class SplitLayoutIntegrationDemos extends DemoReadyEventEmitter(SplitLayoutDemo(Polymer.Element)) {
Expand Down
12 changes: 6 additions & 6 deletions demo/split-layout-lumo-theme-demos.html → demo/split-layout-theme-demos.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<dom-module id="split-layout-lumo-theme-demos">
<dom-module id="split-layout-theme-demos">
<template>
<style include="vaadin-component-demo-shared-styles">
:host {
Expand All @@ -7,7 +7,7 @@
</style>

<h3>Small</h3>
<vaadin-demo-snippet id="split-layout-lumo-theme-demos-small">
<vaadin-demo-snippet id="split-layout-theme-demos-small">
<template preserve-content>
<style>
vaadin-split-layout {
Expand All @@ -31,7 +31,7 @@ <h3>Small</h3>
</vaadin-demo-snippet>

<h3>Minimal</h3>
<vaadin-demo-snippet id="split-layout-lumo-theme-demos-minimal">
<vaadin-demo-snippet id="split-layout-theme-demos-minimal">
<template preserve-content>
<style>
vaadin-split-layout {
Expand All @@ -56,11 +56,11 @@ <h3>Minimal</h3>

</template>
<script>
class SplitLayoutLumoThemeDemos extends DemoReadyEventEmitter(SplitLayoutDemo(Polymer.Element)) {
class SplitLayoutThemeDemos extends DemoReadyEventEmitter(SplitLayoutDemo(Polymer.Element)) {
static get is() {
return 'split-layout-lumo-theme-demos';
return 'split-layout-theme-demos';
}
}
customElements.define(SplitLayoutLumoThemeDemos.is, SplitLayoutLumoThemeDemos);
customElements.define(SplitLayoutThemeDemos.is, SplitLayoutThemeDemos);
</script>
</dom-module>

0 comments on commit 984000c

Please sign in to comment.