Skip to content

Commit

Permalink
Merge pull request #77 from exadel-inc/feature/demo-content
Browse files Browse the repository at this point in the history 
Feature/Demo content
  • Loading branch information
@Sisha0
Sisha0 authored May 31, 2021
2 parents f80648d + e1daa8d commit 052b965
Show file tree
Hide file tree
Showing 9 changed files with 383 additions and 189 deletions.
2 changes: 1 addition & 1 deletion bs-config.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,4 @@ module.exports = {
server: ['docs', 'lib'],
open: 'local',
browser: 'default'
};
};
77 changes: 77 additions & 0 deletions docs/demo1/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<!doctype html>
<html lang="en" class=" esl-scrollable-content">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>UI Playground</title>

<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.img-64 {
width: 64px;
height: 64px;
}

.img-128 {
width: 128px;
height: 128px;
}

.img-256 {
width: 256px;
height: 256px;
}
</style>
<link type="text/css" rel="stylesheet" href="/playground.css">

<!-- IE preview staff -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.2.8/es6-promise.min.js"></script>-->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.5.0/webcomponents-bundle.js"></script>-->
</head>
<body>
<header class="header"></header>
<main role="main">
<uip-root>
<uip-options label="Options:"></uip-options>
<uip-snippets label="Snippets">
<template uip-snippet label="Image">
<img class="demo-img" alt="patrick" src="patrick.png">
</template>
<template uip-snippet label="link image">
<a class="img-link" href="https://www.google.com/">
<img class="demo-img img-256" alt="patrick" src="patrick.png">
</a>
</template>
</uip-snippets>
<uip-preview label="Preview"></uip-preview>
<uip-settings label="Settings" target=".demo-img">
<uip-text-setting label="Source" attribute="src"></uip-text-setting>
<uip-text-setting label="Alternative text" attribute="alt"></uip-text-setting>
<uip-text-setting label="Height" attribute="height"></uip-text-setting>
<uip-text-setting label="Width" attribute="width"></uip-text-setting>
<uip-select-setting label="Resolution" attribute="class" mode="append">
<option value="img-64">64x64</option>
<option value="img-128">128x128</option>
<option value="img-256">256x256</option>
<option value="">None</option>
</uip-select-setting>
<uip-text-setting label="Link" attribute="href" target=".img-link"></uip-text-setting>
<uip-bool-setting label="Open in new window" attribute="target" target=".img-link" value="_blank"></uip-bool-setting>
</uip-settings>
<uip-editor label="Editor"></uip-editor>
</uip-root>
</main>
<footer class="footer bg-dark"></footer>

<script src="/playground.run.js"></script>
<esl-scrollbar class="page-scrollbar" target="html"></esl-scrollbar>
</body>
</html>
Binary file added docs/demo1/patrick.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
72 changes: 72 additions & 0 deletions docs/demo2/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!doctype html>
<html lang="en" class=" esl-scrollable-content">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>UI Playground</title>

<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.demo-form {
width: 160px;
}

.form-section {
margin: 10px 0;
}

.validation-input:invalid {
border: 2px solid red;
}
</style>
<link type="text/css" rel="stylesheet" href="/playground.css">

<!-- IE preview staff -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.2.8/es6-promise.min.js"></script>-->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.5.0/webcomponents-bundle.js"></script>-->
</head>
<body>
<header class="header"></header>
<main role="main">
<uip-root>
<uip-options label="Options:"></uip-options>
<uip-snippets label="Snippets">
<template uip-snippet label="User form">
<form class="demo-form">
<div class="form-section">
<label for="name">Name: </label>
<input type="text" id="name" name="userName">
</div>
<div class="form-section">
<label for="email">Email: </label>
<input type="email" pattern="^(([^<>()[\]\\.,;:\s@']+(\.[^<>()[\]\\.,;:\s@']+)*)|('.+'))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$" id="email" name="userEmail">
</div>
<div class="form-section">
<label for="pass">Password: </label>
<input type="password" id="pass" name="userPass">
</div>
<input type="submit" value="Send">
</form>
</template>
</uip-snippets>
<uip-preview class="centered-content" label="Preview"></uip-preview>
<uip-settings label="Settings" target=".demo-form">
<uip-bool-setting label="Email validation" target="#email" mode="append" attribute="class" value="validation-input"></uip-bool-setting>
</uip-settings>
<uip-editor label="Editor"></uip-editor>
</uip-root>
</main>
<footer class="footer bg-dark"></footer>

<script src="/playground.run.js"></script>
<esl-scrollbar class="page-scrollbar" target="html"></esl-scrollbar>
</body>
</html>
98 changes: 98 additions & 0 deletions docs/demo3/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<!doctype html>
<html lang="en" class=" esl-scrollable-content">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>UI Playground</title>

<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.user-list {
display: flex;
}

[wrap-items] {
flex-wrap: wrap;
}

.user-block {
width: 200px;
height: 200px;
padding: 5px;
margin: 0 10px 20px 10px;
text-align: center;
overflow-wrap: break-word;
}

.red-user {
background-color: red;
color: white;
}

.green-user {
background-color: green;
color: green;
}

.aqua-user {
background-color: aqua;
}

</style>
<link type="text/css" rel="stylesheet" href="/playground.css">

<!-- IE preview staff -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.2.8/es6-promise.min.js"></script>-->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.5.0/webcomponents-bundle.js"></script>-->
</head>
<body>
<header class="header"></header>
<main role="main">
<uip-root>
<uip-options label="Options:"></uip-options>
<uip-snippets label="Snippets">
<template uip-snippet label="Users list">
<div class="user-list">
<div class="user-block aqua-user">Alexander</div>
<div class="user-block aqua-user">Alexey</div>
<div class="user-block aqua-user">Marina</div>
</div>
</template>
<template uip-snippet label="Long users list" wrap-items>
<div class="user-list">
<div class="user-block red-user">Anton</div>
<div class="user-block red-user">Dmitri</div>
<div class="user-block red-user">Alexandra</div>
<div class="user-block red-user">Artem</div>
<div class="user-block red-user">Marina</div>
<div class="user-block red-user">Alexander</div>
<div class="user-block red-user">Alexander</div>
</div>
</template>
</uip-snippets>
<uip-preview label="Preview"></uip-preview>
<uip-settings label="Settings" target=".user-list">
<uip-select-setting label="User color" target=".user-block" attribute="class" mode="append">
<option value="red-user">Red</option>
<option value="aqua-user">Aqua</option>
<option value="green-user">Green</option>
</uip-select-setting>
<uip-bool-setting label="Wrap items" attribute="wrap-items"></uip-bool-setting>
</uip-settings>
<uip-editor label="Editor"></uip-editor>
</uip-root>
</main>
<footer class="footer bg-dark"></footer>

<script src="/playground.run.js"></script>
<esl-scrollbar class="page-scrollbar" target="html"></esl-scrollbar>
</body>
</html>
109 changes: 109 additions & 0 deletions docs/demo4/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<!doctype html>
<html lang="en" class=" esl-scrollable-content">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>UI Playground</title>

<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.user-list {
display: flex;
}

[wrap-items] {
flex-wrap: wrap;
}

.user-block {
width: 200px;
height: 200px;
padding: 5px;
margin: 0 10px 20px 10px;
text-align: center;
overflow-wrap: break-word;
}

.red-user {
background-color: red;
color: white;
}

.green-user {
background-color: green;
color: green;
}

.aqua-user {
background-color: aqua;
}

</style>
<link type="text/css" rel="stylesheet" href="/playground.css">

<!-- IE preview staff -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.2.8/es6-promise.min.js"></script>-->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.5.0/webcomponents-bundle.js"></script>-->
</head>
<body>
<header class="header"></header>
<main role="main">
<uip-root>
<uip-options label="Options:"></uip-options>
<uip-snippets label="Snippets">
<template uip-snippet label="Playground">
<uip-root>
<uip-options label="Options:"></uip-options>
<uip-snippets label="Snippets">
<template uip-snippet label="Users list">
<div class="user-list">
<div class="user-block aqua-user">Alexander</div>
<div class="user-block aqua-user">Alexey</div>
<div class="user-block aqua-user">Marina</div>
</div>
</template>
<template uip-snippet label="Long users list" wrap-items>
<div class="user-list">
<div class="user-block red-user">Anton</div>
<div class="user-block red-user">Dmitri</div>
<div class="user-block red-user">Alexandra</div>
<div class="user-block red-user">Artem</div>
<div class="user-block red-user">Marina</div>
<div class="user-block red-user">Alexander</div>
<div class="user-block red-user">Alexander</div>
</div>
</template>
</uip-snippets>
<uip-preview label="Preview"></uip-preview>
<uip-settings label="Settings" target=".user-list">
<uip-select-setting label="User color" target=".user-block" attribute="class" mode="append">
<option value="red-user">Red</option>
<option value="aqua-user">Aqua</option>
<option value="green-user">Green</option>
</uip-select-setting>
<uip-bool-setting label="Wrap items" attribute="wrap-items"></uip-bool-setting>
</uip-settings>
<uip-editor label="Editor"></uip-editor>
</uip-root>
</template>
</uip-snippets>
<uip-preview label="Preview"></uip-preview>
<uip-settings label="Settings" target=".user-list">
</uip-settings>
<uip-editor label="Editor"></uip-editor>
</uip-root>
</main>
<footer class="footer bg-dark"></footer>

<script src="/playground.run.js"></script>
<esl-scrollbar class="page-scrollbar" target="html"></esl-scrollbar>
</body>
</html>
Loading

0 comments on commit 052b965

Please sign in to comment.