From a03212d7b4910f89bf1db7a104841725a73d885b Mon Sep 17 00:00:00 2001
From: Sisha3342 <spalanevich@mail.ru>
Date: Thu, 19 May 2022 09:53:57 +0300
Subject: [PATCH] fix(page): remove global .main styles from example

---
 pages/views/samples/multiple_playgrounds.njk  | 141 +++++++++---------
 pages/views/samples/playground.njk            |  28 ++--
 .../styles/samples/multiple_playgrounds.less  |   6 +-
 3 files changed, 86 insertions(+), 89 deletions(-)

diff --git a/pages/views/samples/multiple_playgrounds.njk b/pages/views/samples/multiple_playgrounds.njk
index 12a222a7..96df19f4 100644
--- a/pages/views/samples/multiple_playgrounds.njk
+++ b/pages/views/samples/multiple_playgrounds.njk
@@ -1,77 +1,78 @@
 ---
 title: Example with multiple playgrounds
 ---
+<div>
+  <section 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>
+  </section>
 
-<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>
 
-<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>
+  <section 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>
+  </section>
 
-<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>
+  <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>
 </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>
diff --git a/pages/views/samples/playground.njk b/pages/views/samples/playground.njk
index ed09283a..e0758eec 100644
--- a/pages/views/samples/playground.njk
+++ b/pages/views/samples/playground.njk
@@ -15,25 +15,25 @@ title: Example with playground
       </uip-header>
       <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 class="user-card aqua-user">Alexander</div>
+          <div class="user-card aqua-user">Alexey</div>
+          <div class="user-card 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 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>
       </template>
       <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>
@@ -45,9 +45,9 @@ title: Example with playground
   </script>
   <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>
   <uip-preview></uip-preview>
diff --git a/pages/views/styles/samples/multiple_playgrounds.less b/pages/views/styles/samples/multiple_playgrounds.less
index 766fbf61..4370b466 100644
--- a/pages/views/styles/samples/multiple_playgrounds.less
+++ b/pages/views/styles/samples/multiple_playgrounds.less
@@ -1,7 +1,3 @@
-.main {
-    display: block;
-}
-
 .component-section {
     margin: 2rem 0;
     font-family: sans-serif;
@@ -9,4 +5,4 @@
     .component-title {
         margin-bottom: 1rem;
     }
-}
\ No newline at end of file
+}