Start tour button placement

sadanandpai · Mar 30, 2024 · 8ceba82 · 8ceba82
1 parent 30a8c86
commit 8ceba82
Show file tree

Hide file tree

Showing 14 changed files with 49 additions and 79 deletions.
diff --git a/README.md b/README.md
@@ -14,16 +14,19 @@
 <a href="https://sadanandpai.github.io/algo-visualizers/"><img src="./public/images/bar.png" alt="cover" /></a>
 <br/>
 <a href="https://sadanandpai.github.io/algo-visualizers/"><img src="./public/images/path.png" alt="cover" /></a>
-<a href="https://sadanandpai.github.io/algo-visualizers/">Visualize the algorithms</a>
+<a href="https://sadanandpai.github.io/algo-visualizers/">Visualize the
+algorithms</a>
 
 </div>
 
 ---
 
 ### Algorithms Visualizers
+
 This repo is an attempt to help in learning popular algorithms by visualization
 
 #### Sorting Visualizer
+
 Helps to
 
 - understand the working of sorting algorithm

diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/public/assets/path.mp4 b/public/assets/path.mp4
diff --git a/setup.js b/setup.js
@@ -1,8 +1,6 @@
-import * as matchers from "@testing-library/jest-dom/matchers";
-
-import { afterEach, expect } from "vitest";
-
-import { cleanup } from "@testing-library/react";
+import * as matchers from '@testing-library/jest-dom/matchers';
+import { afterEach, expect } from 'vitest';
+import { cleanup } from '@testing-library/react';
 
 // extends Vitest's expect method with methods from react-testing-library
 expect.extend(matchers);

diff --git a/src/apps/path-finder/components/app-tour/app-tour.module.scss b/src/apps/path-finder/components/app-tour/app-tour.module.scss
@@ -1,13 +1,19 @@
 @use '/src/host/styles/theme';
 
-.tour {
-  border: 1px solid theme.$base;
-  padding: 2px 4px;
+.tourWrapper {
   display: none;
+  justify-content: center;
+  flex-grow: 1;
+  flex-basis: 0;
+
+  .tour {
+    border: 1px solid theme.$base;
+    padding: 2px 4px;
+  }
 }
 
 @media (width >= 1024px) {
-  .tour {
-    display: block;
+  .tourWrapper {
+    display: flex;
   }
 }
diff --git a/src/apps/path-finder/components/app-tour/app-tour.tsx b/src/apps/path-finder/components/app-tour/app-tour.tsx
@@ -20,6 +20,7 @@ function AppTour() {
               You can click on the boxes or drag to add walls & clear them. Move
               the start/end as per your wish
             </h2>
+            <br />
             <video autoPlay loop muted>
               <source src={mazeVideo} type="video/mp4" />
             </video>
@@ -52,6 +53,7 @@ function AppTour() {
         content: (
           <>
             <h2>You can move the start/end after search to see live results</h2>
+            <br />
             <video autoPlay loop muted>
               <source src={pathVideo} type="video/mp4" />
             </video>
@@ -100,9 +102,11 @@ function AppTour() {
         />
       </div>
 
-      <button onClick={handleClickStart} className={classes.tour}>
-        Take Tour
-      </button>
+      <div className={classes.tourWrapper}>
+        <button onClick={handleClickStart} className={classes.tour}>
+          Take Tour
+        </button>
+      </div>
     </>
   );
 }

diff --git a/src/apps/path-finder/components/cell-info/cell-info.module.scss b/src/apps/path-finder/components/cell-info/cell-info.module.scss
@@ -2,7 +2,10 @@
 
 .cellInfo {
   display: none;
+  justify-content: flex-end;
   gap: 20px;
+  flex-basis: 0;
+  flex-grow: 1;
   margin-right: 60px;
 
   & > div {

diff --git a/src/apps/path-finder/components/controller/execution.tsx b/src/apps/path-finder/components/controller/execution.tsx
@@ -104,8 +104,8 @@ function Execution({ defaultSpeed }: Props) {
 
       <select
         className={`${classes.speed}`}
-        name="speed"
-        id="speed"
+        name="path-finder-speed"
+        id="path-finder-speed"
         value={speed}
         onChange={(e) => setSpeed(+e.target.value)}
         disabled={disabled}

diff --git a/src/apps/path-finder/components/controller/operations.tsx b/src/apps/path-finder/components/controller/operations.tsx
@@ -66,8 +66,8 @@ function Operations({ defaultSpeed }: Props) {
 
       <select
         className={classes.speed}
-        name="speed"
-        id="speed"
+        name="maze-speed"
+        id="maze-speed"
         value={speed}
         onChange={(e) => setSpeed(+e.target.value)}
         disabled={disabled}

diff --git a/src/apps/path-finder/components/navbar/navbar.module.scss b/src/apps/path-finder/components/navbar/navbar.module.scss
@@ -4,7 +4,6 @@
   position: relative;
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: 10px 20px;
   margin-bottom: 20px;
   box-shadow: 0 4px 4px theme.$shadow1;
@@ -14,65 +13,17 @@
     height: 25px;
   }
 
-  ul {
-    position: absolute;
-    top: 65px;
-    left: 0;
-    z-index: 1;
-    gap: 10px;
-    width: 100%;
-    padding-bottom: 12px;
-    list-style: none;
-    background-color: theme.$background;
-    box-shadow: 0 4px 4px theme.$shadow1;
-
-    &[data-toggle='false'] {
-      display: none;
-    }
-
-    li {
-      width: 100%;
-      padding: 10px;
-
-      a {
-        display: block;
-        width: auto;
-        padding: 6px;
-        text-transform: capitalize;
-        border-radius: 8px;
-      }
-
-      a.active {
-        color: theme.$light;
-        background-color: theme.$primary;
-      }
-
-      a:hover {
-        outline: 1px solid theme.$primary;
-      }
-    }
+  h1 {
+    flex-grow: 1;
+    flex-basis: 0;
+    display: flex;
+    flex-basis: 60px;
   }
 }
 
 @media screen and (width >= 960px) {
   .navbar.navbar {
     padding: 10px 10px 10px 20px;
-
-    ul {
-      position: static;
-      display: flex;
-      width: auto;
-      padding-bottom: 0;
-      box-shadow: none;
-
-      li {
-        padding: 0;
-      }
-    }
-
-    .hamButton {
-      display: none;
-    }
   }
 }
 

diff --git a/src/apps/sorting-visualizer/components/controller/number-generator.tsx b/src/apps/sorting-visualizer/components/controller/number-generator.tsx
@@ -46,7 +46,12 @@ function NumberGenerator({ setInput }: NumberGenProps) {
         Generate
       </button>
 
-      <select className={classes.select} onChange={onChange} value={inputMode}>
+      <select
+        className={classes.select}
+        onChange={onChange}
+        value={inputMode}
+        name="sequence-type"
+      >
         {options.map((option) => (
           <option key={option} value={option}>
             {option}

diff --git a/src/apps/sorting-visualizer/components/controller/type-switch.tsx b/src/apps/sorting-visualizer/components/controller/type-switch.tsx
@@ -12,7 +12,7 @@ function TypeSwitch() {
 
   return (
     <div className={classes.switchContainer}>
-      <label>Cell</label>
+      <span>Cell</span>
       <Switch
         id="visualizerType"
         onChange={() => dispatch(toggleVisualizerType())}
@@ -24,7 +24,7 @@ function TypeSwitch() {
         offColor="#2b4bfe"
         onColor="#2b4bfe"
       />
-      <label>Bar</label>
+      <span>Bar</span>
     </div>
   );
 }

diff --git a/src/apps/sorting-visualizer/helpers/key-frames-helpers.ts b/src/apps/sorting-visualizer/helpers/key-frames-helpers.ts
@@ -16,8 +16,8 @@ export function getSwapAnimation(gap: number, time = 1000) {
     }
     75% {
         transform: translate(${gap * shiftSize}px, ${
-    Math.sign(gap) * (cellCSS.size + 5)
-  }px);
+          Math.sign(gap) * (cellCSS.size + 5)
+        }px);
     }
     100% {
         transform: translate(${gap * shiftSize}px, 0);

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
     extend: {},
   },