@vixcom/ui 1.0.0 → 1.2.0

package/{pages/tier-1/scripts → src/js}/sidebar.min.js

@@ -1,50 +1,50 @@
-'use strict';
-
-(() => {
-  let p = $('.sidebar-container'),
-    t; // Global scope for 'sidebar-container' and 'sidebar'
-  // const _b = (t, p) => { // Observable callback
-  //     let b = p.find('.sidebar-overlay');
-  //     if (window.screen.width <= 576 && p && t) {
-  //       if (p.is('.sidebar-toggled')) {
-  //         if (b.length == 0) {
-  //           b = $(document.createElement('div'));
-  //           b.on('click', e => {
-  //             p.removeClass('sidebar-toggled');
-  //           });
-  //           p.append(b);
-  //         }
-  //         b.attr('class', t.is('[with-backdrop]') ? 'sidebar-backdrop sidebar-overlay' : 'sidebar-overlay');
-  //       } else {
-  //         b.remove();
-  //       }
-  //     }
-  // };
-  // const _mc = (mt, o) => {
-  //   for (var m of mt) {
-  //     if (m.type == 'attributes' && m.attributeName == 'class') {
-  //       _b(t, p);
-  //     }
-  //   }
-  // };
-  // const _m = new MutationObserver(_mc);
-  // for (const _p of p) _m.observe(_p, {
-  //   attributes: true
-  // }); // Observe change in 'sidebar-container' classList
-  $('.page-container').click(e => { // Close sidebar on page-container shadow clicked
-    if (window.screen.width <= 576 && p && p.is('.sidebar-toggled') && !$(e.target).is('[data-toggle="sidebar"]')) p.removeClass('sidebar-toggled');
-  });
-  $('[data-toggle="sidebar"]').click(e => { // Listen for click event on sidebar toggler button
-    t = $(e.target).data('target') && $($(e.target).data('target')) || !!$(e.target).parents('.sidebar').length && $(e.target).parent('.sidebar') || !!$(e.target).next('.sidebar').length && $(e.target).next('.sidebar');
-    if (!t.length) return;
-    p = t.parents('.sidebar-container');
-    p.toggleClass('sidebar-toggled');
-  });
-  document.addEventListener('keyup', e => { // Close sidebar on ESC key pressed
-    if (window.screen.width <= 576 && p && p.is('.sidebar-toggled') && e.keyCode === 27) {
-      e.preventDefault();
-      // Process event...
-      p.removeClass('sidebar-toggled');
-    }
-  }, false);
+'use strict';
+
+(() => {
+  let p = $('.sidebar-container'),
+    t; // Global scope for 'sidebar-container' and 'sidebar'
+  // const _b = (t, p) => { // Observable callback
+  //     let b = p.find('.sidebar-overlay');
+  //     if (window.screen.width <= 576 && p && t) {
+  //       if (p.is('.sidebar-toggled')) {
+  //         if (b.length == 0) {
+  //           b = $(document.createElement('div'));
+  //           b.on('click', e => {
+  //             p.removeClass('sidebar-toggled');
+  //           });
+  //           p.append(b);
+  //         }
+  //         b.attr('class', t.is('[with-backdrop]') ? 'sidebar-backdrop sidebar-overlay' : 'sidebar-overlay');
+  //       } else {
+  //         b.remove();
+  //       }
+  //     }
+  // };
+  // const _mc = (mt, o) => {
+  //   for (var m of mt) {
+  //     if (m.type == 'attributes' && m.attributeName == 'class') {
+  //       _b(t, p);
+  //     }
+  //   }
+  // };
+  // const _m = new MutationObserver(_mc);
+  // for (const _p of p) _m.observe(_p, {
+  //   attributes: true
+  // }); // Observe change in 'sidebar-container' classList
+  $('.page-container').click(e => { // Close sidebar on page-container shadow clicked
+    if (window.screen.width <= 576 && p && p.is('.sidebar-toggled') && !$(e.target).is('[data-toggle="sidebar"]')) p.removeClass('sidebar-toggled');
+  });
+  $('[data-toggle="sidebar"]').click(e => { // Listen for click event on sidebar toggler button
+    t = $(e.target).data('target') && $($(e.target).data('target')) || !!$(e.target).parents('.sidebar').length && $(e.target).parent('.sidebar') || !!$(e.target).next('.sidebar').length && $(e.target).next('.sidebar');
+    if (!t.length) return;
+    p = t.parents('.sidebar-container');
+    p.toggleClass('sidebar-toggled');
+  });
+  document.addEventListener('keyup', e => { // Close sidebar on ESC key pressed
+    if (window.screen.width <= 576 && p && p.is('.sidebar-toggled') && e.keyCode === 27) {
+      e.preventDefault();
+      // Process event...
+      p.removeClass('sidebar-toggled');
+    }
+  }, false);
 })();

package/{pages/error/index.html → src/pages/404.html}

@@ -1,32 +1,32 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <base href="/">
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>An Echo of the Absyess</title>
-  <link rel="stylesheet" href="css/index.css">
-  <link rel="shortcut icon" href="assets/img/icon.png" type="image/png">
-  <script>
-    window.postMessage('Haha You\' be found', '*')
-  </script>
-</head>
-
-<body class="d-flex flex-center section bg-primary">
-  <div class="card card-body flex-none bg-secondary is-blur h4">You&apos;s wondered into the far abyss, <b class="h1">Good thing I found you.</b>
-    <hr class="s-1">
-    <a class="text-warn" href="/">Would you like to go home now?</a>
-  </div>
-  <style>
-    /* Set variable using HSL */
-    :root {
-      --primary: #080808;
-      --primary-hs: 0deg, 0%;
-      --primary-l: 3%;
-      --primary-c: #9F1BF7;
-    }
-  </style>
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <base href="/">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>An Echo of the Abysses</title>
+  <link rel="stylesheet" href="css/index.css">
+  <link rel="shortcut icon" href="assets/img/icon.png" type="image/png">
+  <script>
+    window.postMessage('Haha You\' be found', '*')
+  </script>
+</head>
+
+<body class="d-flex flex-center section bg-primary">
+  <div class="card card-body flex-none bg-secondary is-blur h4">You&apos;s wondered into the far abyss, <b class="h1">Good thing I found you.</b>
+    <hr class="s-1">
+    <a class="text-warn" href="/">Would you like to go home now?</a>
+  </div>
+  <style>
+    /* Set variable using HSL */
+    :root {
+      --primary: #080808;
+      --primary-hs: 0deg, 0%;
+      --primary-l: 3%;
+      --primary-c: #9F1BF7;
+    }
+  </style>
+</body>
+
 </html>

package/{pages/sidemenu/index.html → src/pages/sidemenu/flex.html}

@@ -1,36 +1,36 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <base href="../">
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Sidemenu - VX Dashboard</title>
-  <link rel="stylesheet" href="css/index.css">
-  <link rel="stylesheet" href="css/menu.css">
-  <link rel="stylesheet" href="css/icons/external/bootstrap.icons.css">
-  <link rel="shortcut icon" href="assets/img/favicon.png" type="image/png">
-</head>
-
-<body class="sidemenu-container">
-  <input type="checkbox" id="appmenu-trigger" class="appmenu-trigger">
-  <div class="sidemenu bg-secondary is-blur">
-    <div class="sidemenu-header">
-      <label for="appmenu-trigger" class="bi bi-list appmenu-toggle"></label>
-    </div>
-  </div>
-  <div class="page">
-    <div class="page-content">
-      <div class="app-header sticky">
-        <label for="appmenu-trigger" class="bi bi-list appmenu-toggle"></label>
-        <img src="assets/img/logo.png" alt="" class="app-logo">
-      </div>
-      <section>
-        <h1>VX Dashboard Sidemenu</h1>
-      </section>
-    </div>
-  </div>
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <base href="/dist">
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sidemenu - VX Dashboard</title>
+  <link rel="stylesheet" href="css/index.css">
+  <link rel="stylesheet" href="css/menu.css">
+  <link rel="stylesheet" href="css/icons/external/bootstrap.icons.css">
+  <link rel="shortcut icon" href="assets/img/favicon.png" type="image/png">
+</head>
+
+<body class="main-menu-container">
+  <input type="checkbox" id="main-menu-trigger" class="main-menu-trigger">
+  <div class="side-menu bg-secondary is-blur">
+    <div class="side-menu-header">
+      <label for="main-menu-trigger" class="bi bi-list main-menu-toggle"></label>
+    </div>
+  </div>
+  <div class="page">
+    <div class="page-content">
+      <div class="app-header sticky">
+        <label for="main-menu-trigger" class="bi bi-list main-menu-toggle"></label>
+        <img src="assets/img/logo.png" alt="" class="main-logo">
+      </div>
+      <section>
+        <h1>VX Dashboard Sidemenu</h1>
+      </section>
+    </div>
+  </div>
+</body>
+
 </html>

package/src/pages/sidemenu/grid.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <base href="/">
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sidemenu Grid - VX Dashboard</title>
+  <link rel="stylesheet" href="css/icons/external/bootstrap.icons.css">
+  <link rel="stylesheet" href="css/external/bootstrap.css">
+  <link rel="stylesheet" href="css/index.css">
+  <link rel="stylesheet" href="css/menu.css">
+  <link rel="shortcut icon" href="assets/img/favicon.png" type="image/png">
+</head>
+
+<body class="main-menu-container grid">
+  <input type="checkbox" id="main-menu-trigger" class="main-menu-trigger">
+  <div class="side-menu mini bg-primary">
+    <div class="menu-header">
+      <img src="assets/img/icon.png" class="main-logo menu-logo-alt" alt="icon">
+      <img src="assets/img/logo.png" class="main-logo menu-logo silhouette" alt="icon-alt">
+      <label for="main-menu-trigger" class="bi bi-list main-menu-toggle ml-auto" />
+    </div>
+    <nav>
+      <a class="item" href="flex.html">
+        <i class="icon bi bi-bounding-box"></i>
+        <span class="label">Flex</span>
+      </a>
+      <a class="item active" href="grid.html">
+        <i class="icon bi bi-grid"></i>
+        <span class="label">Grid</span>
+      </a>
+    </nav>
+
+  </div>
+  <main>
+    <header class="page-header sticky">
+      <label for="main-menu-trigger" class="bi bi-list main-menu-toggle"></label>
+      <img src="assets/img/default.png" alt="logo" class="sq-3">
+    </header>
+    <section>
+      <h1>VX Dashboard Sidemenu</h1>
+      <div>
+        <menu class="side-menu">
+          <li>UI</li>
+        </menu>
+      </div>
+    </section>
+    <footer>All rights reserved</footer>
+    <style>
+      .main-menu-trigger:checked~.page {
+        border-top: thick solid var(--secondary);
+      }
+    </style>
+</body>
+
+</html>