Skip to content

Commit

Permalink
feat(playground): create example with two uiproots
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sisha0
Sisha0 committed May 12, 2022
1 parent 7a1cbfc commit 0c66e7c
Show file tree
Hide file tree
Showing 5 changed files with 123 additions and 25 deletions.
1 change: 1 addition & 0 deletions pages/src/playground.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
@import "../views/styles/samples/form.less";
@import "../views/styles/samples/image.less";
@import "../views/styles/samples/list.less";
@import "../views/styles/samples/multiple_playgrounds.less";

@import "../../src/registration.less";

Expand Down
46 changes: 23 additions & 23 deletions pages/views/samples/list.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,53 +9,53 @@ title: Example with user list
</uip-header>
<script type="text/html" uip-snippet label="Users aqua 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 class="user-card aqua-user">Alexander</div>
<div class="user-card aqua-user">Alexey</div>
<div class="user-card aqua-user">Marina</div>
</div>
</script>
<script type="text/html" uip-snippet label="Long red users list containing seven items" 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 class="user-card red-user">Anton</div>
<div class="user-card red-user">Dmitri</div>
<div class="user-card red-user">Alexandra</div>
<div class="user-card red-user">Artem</div>
<div class="user-card red-user">Marina</div>
<div class="user-card red-user">Alexander</div>
<div class="user-card red-user">Alexander</div>
</div>
</script>
<script type="text/html" uip-snippet label="Users green list">
<div class="user-list">
<div class="user-block green-user">Alexander</div>
<div class="user-block green-user">Alexey</div>
<div class="user-block green-user">Marina</div>
<div class="user-card green-user">Alexander</div>
<div class="user-card green-user">Alexey</div>
<div class="user-card green-user">Marina</div>
</div>
</script>
<script type="text/html" uip-snippet label="Users aqua list two">
<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 class="user-card aqua-user">Alexander</div>
<div class="user-card aqua-user">Alexey</div>
<div class="user-card aqua-user">Marina</div>
</div>
</script>
<script type="text/html" uip-snippet label="Users aqua list three">
<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 class="user-card aqua-user">Alexander</div>
<div class="user-card aqua-user">Alexey</div>
<div class="user-card aqua-user">Marina</div>
</div>
</script>
<script type="text/html" uip-snippet label="Users aqua list four">
<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 class="user-card aqua-user">Alexander</div>
<div class="user-card aqua-user">Alexey</div>
<div class="user-card aqua-user">Marina</div>
</div>
</script>
<uip-preview></uip-preview>
<uip-settings target=".user-list">
<uip-select-setting label="User color" target=".user-block" attribute="class" mode="append">
<uip-select-setting label="User color" target=".user-card" attribute="class" mode="append">
<option value="red-user">Red</option>
<option value="aqua-user">Aqua</option>
<option value="green-user">Green</option>
Expand Down
77 changes: 77 additions & 0 deletions pages/views/samples/multiple_playgrounds.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
---
title: Example with multiple playgrounds
---

<div class="component-section">
<h1 class="component-title">USER CARD</h1>
<p class="component-description">
User card is a component for displaying user's info.
Can be in rectangle/rounded styles with multiple
colors supported.
</p>
</div>

<uip-root>
<uip-header>
<uip-snippets></uip-snippets>
<uip-options></uip-options>
</uip-header>
<script type="text/html" uip-snippet label="Rectangle user card">
<div class="user-card user-block aqua-user">Alexander</div>
</script>
<script type="text/html" uip-snippet label="Circle user card" wrap-items>
<div class="user-card user-circle aqua-user">Alexander</div>
</script>
<uip-preview></uip-preview>
<uip-settings target=".user-card">
<uip-select-setting label="User color" 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-settings>
<uip-editor></uip-editor>
</uip-root>

<div class="component-section">
<h1 class="component-title">USER LIST</h1>
<p class="component-description">
User list is a component for displaying multiple users' info.
Can manually wrap list items on new lines.
</p>
</div>

<uip-root>
<uip-header>
<uip-snippets></uip-snippets>
<uip-options></uip-options>
</uip-header>
<script type="text/html" uip-snippet label="Users aqua list">
<div class="user-list">
<div class="user-card aqua-user">Alexander</div>
<div class="user-card user-circle aqua-user">Alexey</div>
<div class="user-card aqua-user">Marina</div>
</div>
</script>
<script type="text/html" uip-snippet label="Long red users list containing seven items" wrap-items>
<div class="user-list">
<div class="user-card red-user">Anton</div>
<div class="user-card red-user">Dmitri</div>
<div class="user-card red-user">Alexandra</div>
<div class="user-card red-user">Artem</div>
<div class="user-card red-user">Marina</div>
<div class="user-card red-user">Alexander</div>
<div class="user-card red-user">Alexander</div>
</div>
</script>
<uip-preview></uip-preview>
<uip-settings target=".user-list">
<uip-select-setting label="User color" target=".user-card" 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></uip-editor>
</uip-root>
12 changes: 10 additions & 2 deletions pages/views/styles/samples/list.less
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,24 @@
.user {
&-list {
display: flex;
justify-content: center;
}

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

&-circle {
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
}

[wrap-items] {
Expand All @@ -24,7 +32,7 @@

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

.aqua-user {
Expand Down
12 changes: 12 additions & 0 deletions pages/views/styles/samples/multiple_playgrounds.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.main {
display: block;
}

.component-section {
margin: 2rem 0;
font-family: sans-serif;

.component-title {
margin-bottom: 1rem;
}
}

0 comments on commit 0c66e7c

Please sign in to comment.