quick fix 10.1

yukiarimo · Aug 12, 2023 · 7a7100a · 7a7100a
1 parent ed60fe9
commit 7a7100a
Show file tree

Hide file tree

Showing 11 changed files with 271 additions and 92 deletions.
diff --git a/README.md b/README.md
@@ -48,8 +48,8 @@ If you're going to use different parts of the franework, you can read about them
 Here is a simple Hello World example using Kawai:
 ```
 <div class="block-l el-9 shadow">
-  <div class="text-block la">Hi from Kawai</div>
-  <div class="text-block lb">Kawai - is the world famous framework for build anything that you want in one sec!</div>
+  <div class="block-text la">Hi from Kawai</div>
+  <div class="block-text lb">Kawai - is the world famous framework for build anything that you want in one sec!</div>
 </div>
 ```
 

diff --git a/assets/css/kawai.css b/assets/css/kawai.css
@@ -88,6 +88,7 @@
     word-wrap: break-word;
     align-content: stretch;
     background: white;
+    border: 1px solid #DDE1E5;
 }
 
 .block-card {
@@ -96,6 +97,7 @@
     height: auto;
     width: 30%;
     background: white;
+    border: 1px solid #DDE1E5;
     padding: 1%;
     border-radius: 6px;
     justify-content: space-between;
@@ -128,11 +130,9 @@
     width: auto;
     height: fit-content;
     padding: 2%;
-    background: rgb(53, 120, 246);
+    border: 1px solid rgb(53, 120, 246);
     border-radius: 6px;
-    color: white;
     display: flex;
-    border: 0;
 }
 
 .block-list {
@@ -170,7 +170,7 @@
 }
 
 /*  TEXT  */
-.text-block {
+.block-text {
     display: block;
     text-decoration: none;
     color: black;
@@ -248,7 +248,7 @@
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
-.topbar-o>.text-block {
+.topbar-o>.block-text {
     line-height: normal;
 }
 
@@ -425,7 +425,7 @@
 }
 
 /*  STYLISHING  */
-.sidebar-o>.text-block {
+.sidebar-o>.block-text {
     text-align: center;
     font-size: 27px;
     display: flex;

diff --git a/assets/js/kawai.js b/assets/js/kawai.js
@@ -33,28 +33,20 @@ if (checkMode == '1') {
 }
 
 // Functions
-function SideBarSwitch() {
+function SideBarSwitch(idSide) {
     if (checkSide == 0) {
-        SideDisabler('sidebar');
-        document.location.reload(true);
+        SideDisabler(idSide);
     } else {
         localStorage.setItem('side', '0');
         document.location.reload(true);
     }
 }
 
-function SideDisabler() {
-    localStorage.setItem('sideid', 'sidebar');
-    document.getElementById(localStorage.getItem('sideid')).style = "display: none";
+function SideDisabler(idSide) {
+    document.getElementById(idSide).style = "display: none";
     document.getElementsByClassName('block-o')[0].classList.remove('uside')
-    /*const howmanytabs = document.querySelectorAll('.tab-o');
-    if (howmanytabs.length) {
-        for (let step = 0; step < howmanytabs.length; step++) {
-            const element = howmanytabs[step];
-            element.style.display = 'block'
-        }
-    }*/
     localStorage.setItem('side', '1');
+    checkSide = 1
 }
 
 function PopupClose() {
@@ -110,23 +102,92 @@ function OpenTab(gettab) {
 }
 
 function DarkEnabler() {
-    document.getElementsByTagName('body')[0].style = "background-color: rgb(30, 30, 30)";
-    document.getElementsByClassName('topbar-o')[0].style = "color: white";
-    document.getElementsByClassName('sidebar-o')[0].style = "background-color: rgb(36, 38, 38)";
+    var body = document.querySelectorAll('body');
+    var topbarO = document.querySelectorAll('.topbar-o');
+    var sidebarO = document.querySelectorAll('.sidebar-o');
 
-    var text = document.querySelectorAll('.text-block');
+    var text = document.querySelectorAll('.block-text');
+    var textLa = document.querySelectorAll('.la');
+    var textLb = document.querySelectorAll('.lb');
+    var textLc = document.querySelectorAll('.lc');
     var blocksidetabse = document.querySelectorAll('.side-tab-block-e');
     var blockinput = document.querySelectorAll('.block-input');
+    var blockL = document.querySelectorAll('.block-l');
+    var blockCard = document.querySelectorAll('.block-card');
+    var blockButton = document.querySelectorAll('.block-button');
     var blockliste = document.querySelectorAll('.block-list-e');
     var blockdropdowntab = document.querySelectorAll('.block-dropdown-tab')
 
+    if (body.length) {
+        for (let step = 0; step < body.length; step++) {
+            var element = body[step];
+            element.style = "background: rgb(30, 30, 30)";
+        }
+    }
+
+    if (topbarO.length) {
+        for (let step = 0; step < topbarO.length; step++) {
+            var element = topbarO[step];
+            element.style = "color: white";
+        }
+    }
+
+    if (sidebarO.length) {
+        for (let step = 0; step < sidebarO.length; step++) {
+            var element = sidebarO[step];
+            element.style = "background: rgb(30, 30, 30)";
+        }
+    }
+
     if (text.length) {
         for (let step = 0; step < text.length; step++) {
             var element = text[step];
             element.style = "color: white";
         }
     }
 
+    if (textLa.length) {
+        for (let step = 0; step < textLa.length; step++) {
+            var element = textLa[step];
+            element.style = "color: white";
+        }
+    }
+
+    if (textLb.length) {
+        for (let step = 0; step < textLb.length; step++) {
+            var element = textLb[step];
+            element.style = "color: white";
+        }
+    }
+
+    if (textLc.length) {
+        for (let step = 0; step < textLc.length; step++) {
+            var element = textLc[step];
+            element.style = "color: white";
+        }
+    }
+
+    if (blockL.length) {
+        for (let step = 0; step < blockL.length; step++) {
+            var element = blockL[step];
+            element.style = "background: rgb(30, 30, 30)";
+        }
+    }
+
+    if (blockCard.length) {
+        for (let step = 0; step < blockCard.length; step++) {
+            var element = blockCard[step];
+            element.style = "background: rgb(30, 30, 30)";
+        }
+    }
+
+    if (blockButton.length) {
+        for (let step = 0; step < blockButton.length; step++) {
+            var element = blockButton[step];
+            element.style = "color: white";
+        }
+    }
+
     if (blocksidetabse.length) {
         for (let step = 0; step < blocksidetabse.length; step++) {
             var element = blocksidetabse[step];

diff --git a/docs.html b/docs.html
@@ -17,8 +17,17 @@
 </head>
 
 <body>
-  <div class="sidebar-o desktop-only">
-    <div class="text-block-block text la">Hi</div>
+  <div class="sidebar-o desktop-only" id="sidebar">
+    <div class="block-text-block text la">Hi</div>
+    <div class="block-button" onclick="SideBarSwitch('sidebar')">SideClose</div>
+    <div class="side-tab-block">
+      <div class="side-tab-block-e" onclick="OpenTab('1')">Test1</div>
+      <div class="side-tab-block-e" onclick="OpenTab('2')">Test2</div>
+    </div>
+  </div>
+
+  <div class="sidebar-o desktop-only" id="sidebar">
+    <div class="block-text-block text la">Hi</div>
     <div class="block-button" onclick="SideBarSwitch('sidebar')">SideClose</div>
     <div class="side-tab-block">
       <div class="side-tab-block-e" onclick="OpenTab('1')">Test1</div>
@@ -29,7 +38,7 @@
   <div class="block-o uside">
     <div class="topbar-o">
       <div class="block-button" onclick="SideBarSwitch('sidebar')">SideClose</div>
-      <div class="la text-block">Kawai</div>
+      <div class="la block-text">Kawai</div>
       <div class="toggle-menu-block"></div>
       <div class="top-tab-block">
         <div class="top-tab-block-e">Home</div>
@@ -46,33 +55,33 @@
       </div>
       <div class="coll-lo">
         <div class="block-l el-9">
-          <div class="text-block la">Helllo my friend</div>
-          <div class="text-block lb">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
+          <div class="block-text la">Helllo my friend</div>
+          <div class="block-text lb">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
         </div>
       </div>
 
       <div class="coll-lo">
         <div class="block-card">
-          <div class="text-block lb">Hello title</div>
-          <div class="text-block lc">Some quick example text to build on the card title and make up the bulk of the
+          <div class="block-text lb">Hello title</div>
+          <div class="block-text lc">Some quick example text to build on the card title and make up the bulk of the
             card's content.
           </div>
           <br>
           <div class="block-button" onclick="OpenPopup('test-modal-1')">Simple button</div>
         </div>
 
         <form class="block-form">
-          <input type="text-block" class="block-input">
-          <input type="text-block" class="block-input">
+          <input type="block-text" class="block-input">
+          <input type="block-text" class="block-input">
           <button class="block-button">Button</button>
         </form>
       </div>
 
       <div class="coll-lo">
         <div class="block-l el-4">
-          <div class="text-block la">Why RoundStep? bla rege fw </div>
+          <div class="block-text la">Why RoundStep? bla rege fw </div>
           <div class="block-scroll">
-            <div class="text-block lc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum pariatur
+            <div class="block-text lc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum pariatur
               dolores
               quas illo vdfkghdikgrdigdkhg k rhrkhrs ssh srgregregrgr erg erg reg ergegerge g ererg
               vitae! Nemo unde sit quibusdam magnam harum recusandae quis perferendis minus recusandae
@@ -84,12 +93,12 @@
               vitae! Nemo unde sit quibusdam magnam harum recusandae quis perferendis minus recusandae
             </div>
 
-            <div class="text-block ld">Fuck you</div>
+            <div class="block-text ld">Fuck you</div>
           </div>
         </div>
         <div class="block-l el-4">
-          <div class="text-block la">What about pfkepkgee ?</div>
-          <div class="text-block lc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe provident
+          <div class="block-text la">What about pfkepkgee ?</div>
+          <div class="block-text lc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe provident
             blanditiis inventore
             quidem dolor? Nisi esse aspernatur perspiciatis laborum temporibus adipisci</div>
         </div>
@@ -141,9 +150,9 @@
   </div>
 
   <div class="block-popup" id="te1">
-    <div class="text-block la">Hello</div>
+    <div class="block-text la">Hello</div>
 
-    <div class="text-block lb">Welcome to RoundStep</div>
+    <div class="block-text lb">Welcome to RoundStep</div>
   </div>
 </body>
 

diff --git a/docs/kawai-html.md b/docs/kawai-html.md
@@ -9,11 +9,11 @@ The top bar is a header that appears at the top of the page and contains the log
 The topbar-o component creates a top navigation bar with a header, tabs, and a toggle menu button.
 ```
 <div class="topbar-o">
-  <div class="la text-block">Kawai</div>
+  <div class="la block-text">Kawai</div>
   <div class="top-tab-block">
-    <div class="top-tab-block-e text-block lc">Home</div>
-    <div class="top-tab-block-e text-block lc">Docs</div>
-    <div class="top-tab-block-e text-block lc">Contact</div>
+    <div class="top-tab-block-e block-text lc">Home</div>
+    <div class="top-tab-block-e block-text lc">Docs</div>
+    <div class="top-tab-block-e block-text lc">Contact</div>
   </div>
   <div class="toggle-menu-block"></div>
 </div>
@@ -31,8 +31,8 @@ The block-o is the main block that serves as a container for your content.
 The Block component is a simple container for your content. You can wrap any content inside the Block component, including text, images, or other components.
 ```
 <div class="block-l">
-  <div class="text-block la">Hi from Kawai</div>
-    <div class="text-block lb">
+  <div class="block-text la">Hi from Kawai</div>
+    <div class="block-text lb">
       Kawai - is the world famous framework for building anything you want in one sec!
     </div>
 </div> 
@@ -107,14 +107,14 @@ A dropdown is a component for displaying a list of options that can be selected.
 ### Elements:
 
 - sidebar-o (before block-o)
-    - text-block
+    - block-text
     - side-tab-block > side-tab-block-e
 
 - block-o
   - < all blocks here>
 
 - topbar-o
-    - text-block
+    - block-text
     - toggle-menu-block (for mobile)
     - top-tab-block > top-tab-block-e