chore(site): site content reorganization an improvements

site/src/playground/ui-playground.ts

@@ -26,8 +26,4 @@ UIPRenderingTemplatesService.add('default', `
   </html>
 `);
 
-// Add to UIP by default
-(UIPEditor.prototype as any)._onWheel = (e: WheelEvent): void => e.stopPropagation();
-ESLEventUtils.initDescriptor(UIPEditor.prototype as any, '_onWheel', {auto: true, event: 'wheel'});
-
 init();

site/views/_layouts/presentation.njk

@@ -12,6 +12,8 @@
                   type="default | none"
                   vertical count="1"
                   esl-carousel-wheel
+                  esl-carousel-wheel-ignore="uip-root, pre, [contenteditable]"
+                  esl-carousel-wheel-prevent-default
                   esl-carousel-touch="@mobile => swipe"
                   esl-carousel-keyboard
                   esl-carousel-anchored>

site/views/overview/quick/02-core/01-custom-tags.njk

@@ -1,5 +1,5 @@
 ---
-title: ESL Custom Tags
+title: Custom Tags
 hash: custom-tags
 tags: overview-quick
 parent: 00-core

site/views/overview/quick/02-core/03-tag-vs-attribute.njk

@@ -1,7 +1,7 @@
 ---
 title: ESLBaseElement vs ESLMixinElement
 hash: tag-vs-attribute
-tags: overview-quick
+tags: -overview-quick
 parent: 00-core
 ---
 

site/views/overview/quick/02-core/04-event-listener.njk

@@ -9,22 +9,46 @@ parent: 00-core
 
 <p>
   ESL Event Listener is an embedded ESL module that take care of the event listeners management and provide extended utilities to work with events.
-  ESL provides ability to register event listeners in declarative way using TS <i>@listen</i> decorator.
-  Module supports event delegation, custom event targets. Listeners registration works on the "host" concept that allows you to link the listener to the specific component instance (to manage subscriptions automatically.
+  Module supports event delegation, custom event targets. Listeners registration works on the "host" concept that allows you to link the listener to the specific component instance (to manage subscriptions automatically).
 </p>
 
-<div class="d-flex justify-content-center">
-  {% code 'typescript', 'code-block' %}
-    class MyComponent extends ESLBaseElement {
+<div class="row">
+  <div class="col-6">
+    <div class="text-gray tag-h5">Before</div>
+    <div style="overflow: auto; max-height: 350px">
+      {% code 'typescript', 'code-block' %}
+        connectedCallback() {
+          this.onBtnClick = this.onBtnClick.bind(this);
+          this.addEventListener('click', this.onBtnClick);
+
+          this.onResize = this.onResize.bind(this);
+          this._resizeObserver = new ResizeObserver(this.onResize);
+          this._resizeObserver.observe(this);
+        }
+
+        disconnectedCallback() {
+          this.removeEventListener('click', this.onBtnClick);
+          this._resizeObserver.disconnect();
+        }
+
+        onBtnClick(event) {
+          if (event.target.closest('button')) {
+            // Button click
+          }
+        }
+
+        onResize() {/* Resize subscription for component */}
+      {% endcode %}
+    </div>
+  </div>
+  <div class="col-6">
+    <div class="text-gray tag-h5">With ESL</div>
+    {% code 'typescript', 'code-block' %}
       @listen({event: 'click', selector: 'button'})
-      onBtnClick(event) {
-        console.log('Button click catched with delegation', event);
-      }
+      onBtnClick(event) {/* Click subscription with delegation */}
 
       @listen({event: 'resize', target: ESLResizeObserverTarget.for})
-      onResize(event) {
-        console.log('Component resized', event);
-      }
-    }
-  {% endcode %}
+      onResize(event) {/* Resize subscription for component */}
+    {% endcode %}
+  </div>
 </div>

site/views/overview/quick/02-core/05-esl-utils.njk

@@ -0,0 +1,39 @@
+---
+title: ESL Utils and syntax sugar
+hash: esl-utils
+tags: overview-quick
+parent: 00-core
+---
+
+<h3 class="text-center">{{ title }}</h3>
+
+<p class="esl-animate-slide up" esl-animate="{repeat: true}">
+  ESL Core provides big amount of utils and syntax sugar to simplify development process.
+</p>
+
+<ul class="list-spaced">
+  <li class="esl-animate-slide up" esl-animate="{repeat: true, group: true}">
+    <h5>Extended Media Query Syntax</h5>
+
+    <p>
+      Extended syntax for media queries allows to use breakpoint aliases and extended boolean logic.
+    </p>
+    <code class="language-css">(min-width: 600px) and (max-width: 1200px)</code> -> <code class="language-html">@SM</code>
+  </li>
+  <li class="esl-animate-slide up" esl-animate="{repeat: true, group: true}">
+    <h5>Extended Media Conditions Mapping</h5>
+
+    <p>
+      Ability to map extended media conditions to values.
+    </p>
+    <code class="language-html">@XS => accordion | @+SM => tabs</code>
+  </li>
+  <li class="esl-animate-slide up" esl-animate="{repeat: true, group: true}">
+    <h5>Extended Traversing Syntax</h5>
+
+    <p>
+      Extended syntax for DOM traversing, very similar to JQuery, with support for relative selectors.
+    </p>
+    <code class="language-html">::parent::next(esl-toggleable)</code>
+  </li>
+</ul>

site/views/overview/quick/02-core/05-media-query.njk

@@ -1,7 +1,7 @@
 ---
 title: ESL Extended Syntax - Media Query
 hash: esl-utils-media-query
-tags: overview-quick
+tags: -overview-quick
 parent: 00-core
 ---
 

site/views/overview/quick/02-core/06-traversing-query.njk

@@ -1,7 +1,7 @@
 ---
 title: ESL Extended Syntax - Traversing Query
 hash: esl-utils-traversing-query
-tags: overview-quick
+tags: -overview-quick
 parent: 00-core
 ---
 

site/views/overview/quick/03-components/04-responsiveness-n-flexibility.njk

@@ -1,22 +1,22 @@
 ---
 title: Built-In Responsiveness and Flexibility
 hash: responsiveness
+cls: text-center
 tags: overview-quick
 parent: 00-components
 ---
 
-<h3 class="text-center">Built-In Responsiveness and Flexibility</h3>
+<h3>Built-In Responsiveness and Flexibility</h3>
 
-<p class="text-center esl-animate-slide up" esl-animate="{repeat: true, group: true}">
-  ESL components can adapt their behavior based on patterns or device sizes.
+<p class="esl-animate-slide up" esl-animate="{repeat: true, group: true}">
+  ESL components can adapt their behavior based on environment (device type, screen size, etc).
 </p>
 
 <p class="mt-2 esl-animate-slide up" esl-animate="{repeat: true, group: true}">
-  The same Tab component can be presented as an Accordion on smaller screens without needing separate markup—just change
-  one parameter!
+  The same ESL components can be used to display both Tab and Accordion design patterns, depending on the screen size.
 </p>
 
-<p class="text-center mt-4 esl-animate-slide up" esl-animate="{repeat: true, group: true}">
+<p class="mt-4 esl-animate-slide up" esl-animate="{repeat: true, group: true}">
   <esl-trigger class="btn btn-link" target="::parent::next">
     See Example
   </esl-trigger>

site/views/overview/quick/04-playground/00-playground.njk

@@ -6,10 +6,7 @@ tags: overview-quick
 
 <h2>
   UI Playground
-  <a class="icon-inline icon-link"
-     href="https://github.com/exadel-inc/ui-playground" target="_blank" aria-label="Open UI Playground on GitHub">
-    {% include 'static/assets/common/github.svg' %}
-  </a>
+
 </h2>
 
 <p>
@@ -18,3 +15,11 @@ tags: overview-quick
 <p>
   The UI Playground is a great tool for developers who want to see how the components work and how they can be customized.
 </p>
+<p class="text-right mt-4">
+  <a class="btn-link"
+     href="https://github.com/exadel-inc/ui-playground"
+     target="_blank"
+     aria-label="Open UI Playground on GitHub">
+    See project on GitHub
+  </a>
+</p>

site/views/overview/quick/04-playground/03-settings.njk

@@ -20,7 +20,7 @@ parent: 00-playground
     </div>
   </script>
 
-  <uip-settings target=".btn" label="Settings" resizable vertical="@+sm">
+  <uip-settings style="font-size: 1.15rem" target=".btn" label="Settings" resizable vertical="@+sm">
     <uip-select-setting label="Style:" attribute="class" mode="append" inconsistency="Unknown">
       <option value="" selected>None</option>
       <option value="btn-link">Link</option>