Fixed layout

tobinatore · Sep 10, 2020 · 7a7d7a4 · 7a7d7a4
1 parent bbd4417
commit 7a7d7a4
Show file tree

Hide file tree

Showing 21 changed files with 71 additions and 54 deletions.
diff --git a/bfs.html b/bfs.html
@@ -49,7 +49,7 @@
       id="topbar"
       class="d-none d-lg-flex align-items-center fixed-top header-inner-pages"
     >
-      <div class="container d-flex">
+      <div class="container-fluid d-flex">
         <div class="contact-info mr-auto">
           <i class="icofont-envelope"></i>
           <a href="mailto:[email protected]">[email protected]</a>
@@ -99,7 +99,7 @@ <h1 class="logo mr-auto"><a href="index.html">Algovis.io</a></h1>
     <main id="main">
       <!-- ======= Breadcrumbs ======= -->
       <section id="breadcrumbs" class="breadcrumbs">
-        <div class="container">
+        <div class="container-fluid">
           <ol>
             <li><a href="index.html">Home</a></li>
             <li><a href="graphs.html">Graphs</a></li>

diff --git a/bogosort.html b/bogosort.html
@@ -49,7 +49,7 @@
       id="topbar"
       class="d-none d-lg-flex align-items-center fixed-top header-inner-pages"
     >
-      <div class="container d-flex">
+      <div class="container-fluid d-flex">
         <div class="contact-info mr-auto">
           <i class="icofont-envelope"></i>
           <a href="mailto:[email protected]">[email protected]</a>
@@ -99,7 +99,7 @@ <h1 class="logo mr-auto"><a href="index.html">Algovis.io</a></h1>
     <main id="main">
       <!-- ======= Breadcrumbs ======= -->
       <section id="breadcrumbs" class="breadcrumbs">
-        <div class="container">
+        <div class="container-fluid">
           <ol>
             <li><a href="index.html">Home</a></li>
             <li><a href="sorting.html">Sorting</a></li>

diff --git a/bubblesort.html b/bubblesort.html
@@ -49,7 +49,7 @@
       id="topbar"
       class="d-none d-lg-flex align-items-center fixed-top header-inner-pages"
     >
-      <div class="container d-flex">
+      <div class="container-fluid d-flex">
         <div class="contact-info mr-auto">
           <i class="icofont-envelope"></i>
           <a href="mailto:[email protected]">[email protected]</a>
@@ -99,7 +99,7 @@ <h1 class="logo mr-auto"><a href="index.html">Algovis.io</a></h1>
     <main id="main">
       <!-- ======= Breadcrumbs ======= -->
       <section id="breadcrumbs" class="breadcrumbs">
-        <div class="container">
+        <div class="container-fluid">
           <ol>
             <li><a href="index.html">Home</a></li>
             <li><a href="sorting.html">Sorting</a></li>

diff --git a/cocktailshakersort.html b/cocktailshakersort.html
@@ -49,7 +49,7 @@
       id="topbar"
       class="d-none d-lg-flex align-items-center fixed-top header-inner-pages"
     >
-      <div class="container d-flex">
+      <div class="container-fluid d-flex">
         <div class="contact-info mr-auto">
           <i class="icofont-envelope"></i>
           <a href="mailto:[email protected]">[email protected]</a>
@@ -99,7 +99,7 @@ <h1 class="logo mr-auto"><a href="index.html">Algovis.io</a></h1>
     <main id="main">
       <!-- ======= Breadcrumbs ======= -->
       <section id="breadcrumbs" class="breadcrumbs">
-        <div class="container">
+        <div class="container-fluid">
           <ol>
             <li><a href="index.html">Home</a></li>
             <li><a href="sorting.html">Sorting</a></li>

diff --git a/combsort.html b/combsort.html
@@ -49,7 +49,7 @@
       id="topbar"
       class="d-none d-lg-flex align-items-center fixed-top header-inner-pages"
     >
-      <div class="container d-flex">
+      <div class="container-fluid d-flex">
         <div class="contact-info mr-auto">
           <i class="icofont-envelope"></i>
           <a href="mailto:[email protected]">[email protected]</a>
@@ -99,7 +99,7 @@ <h1 class="logo mr-auto"><a href="index.html">Algovis.io</a></h1>
     <main id="main">
       <!-- ======= Breadcrumbs ======= -->
       <section id="breadcrumbs" class="breadcrumbs">
-        <div class="container">
+        <div class="container-fluid">
           <ol>
             <li><a href="index.html">Home</a></li>
             <li><a href="sorting.html">Sorting</a></li>

diff --git a/countingsort.html b/countingsort.html
@@ -49,7 +49,7 @@
       id="topbar"
       class="d-none d-lg-flex align-items-center fixed-top header-inner-pages"
     >
-      <div class="container d-flex">
+      <div class="container-fluid d-flex">
         <div class="contact-info mr-auto">
           <i class="icofont-envelope"></i>
           <a href="mailto:[email protected]">[email protected]</a>
@@ -99,7 +99,7 @@ <h1 class="logo mr-auto"><a href="index.html">Algovis.io</a></h1>
     <main id="main">
       <!-- ======= Breadcrumbs ======= -->
       <section id="breadcrumbs" class="breadcrumbs">
-        <div class="container">
+        <div class="container-fluid">
           <ol>
             <li><a href="index.html">Home</a></li>
             <li><a href="sorting.html">Sorting</a></li>

diff --git a/datastructures.html b/datastructures.html
@@ -45,7 +45,7 @@
       id="topbar"
       class="d-none d-lg-flex align-items-center fixed-top header-inner-pages"
     >
-      <div class="container d-flex">
+      <div class="container-fluid d-flex">
         <div class="contact-info mr-auto">
           <i class="icofont-envelope"></i>
           <a href="mailto:[email protected]">[email protected]</a>
@@ -75,7 +75,11 @@
 
     <!-- ======= Header ======= -->
     <header id="header" class="fixed-top header-inner-pages">
-      <div class="container d-flex align-items-center">
+      <div class="container-fluid d-flex align-items-center">
+        <a class="btn back-button mr-4" href="index.html#categories"
+          ><i class="bx bx-arrow-back white-text" aria-hidden="true"></i>
+          Back</a
+        >
         <h1 class="logo mr-auto"><a href="index.html">Algovis.io</a></h1>
         <!-- Uncomment below if you prefer to use an image logo -->
         <!-- <a href="index.html" class="logo mr-auto"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
@@ -99,7 +103,7 @@ <h1 class="logo mr-auto"><a href="index.html">Algovis.io</a></h1>
     <main id="main">
       <!-- ======= Breadcrumbs ======= -->
       <section id="breadcrumbs" class="breadcrumbs">
-        <div class="container">
+        <div class="container-fluid">
           <ol>
             <li><a href="index.html">Home</a></li>
             <li>Data structures</li>

diff --git a/dfs.html b/dfs.html
@@ -49,7 +49,7 @@
       id="topbar"
       class="d-none d-lg-flex align-items-center fixed-top header-inner-pages"
     >
-      <div class="container d-flex">
+      <div class="container-fluid d-flex">
         <div class="contact-info mr-auto">
           <i class="icofont-envelope"></i>
           <a href="mailto:[email protected]">[email protected]</a>
@@ -99,7 +99,7 @@ <h1 class="logo mr-auto"><a href="index.html">Algovis.io</a></h1>
     <main id="main">
       <!-- ======= Breadcrumbs ======= -->
       <section id="breadcrumbs" class="breadcrumbs">
-        <div class="container">
+        <div class="container-fluid">
           <ol>
             <li><a href="index.html">Home</a></li>
             <li><a href="graphs.html">Graphs</a></li>

diff --git a/gnomesort.html b/gnomesort.html
@@ -49,7 +49,7 @@
       id="topbar"
       class="d-none d-lg-flex align-items-center fixed-top header-inner-pages"
     >
-      <div class="container d-flex">
+      <div class="container-fluid d-flex">
         <div class="contact-info mr-auto">
           <i class="icofont-envelope"></i>
           <a href="mailto:[email protected]">[email protected]</a>
@@ -99,7 +99,7 @@ <h1 class="logo mr-auto"><a href="index.html">Algovis.io</a></h1>
     <main id="main">
       <!-- ======= Breadcrumbs ======= -->
       <section id="breadcrumbs" class="breadcrumbs">
-        <div class="container">
+        <div class="container-fluid">
           <ol>
             <li><a href="index.html">Home</a></li>
             <li><a href="sorting.html">Sorting</a></li>

diff --git a/graphs.html b/graphs.html
@@ -45,7 +45,7 @@
       id="topbar"
       class="d-none d-lg-flex align-items-center fixed-top header-inner-pages"
     >
-      <div class="container d-flex">
+      <div class="container-fluid d-flex">
         <div class="contact-info mr-auto">
           <i class="icofont-envelope"></i>
           <a href="mailto:[email protected]">[email protected]</a>
@@ -75,7 +75,11 @@
 
     <!-- ======= Header ======= -->
     <header id="header" class="fixed-top header-inner-pages">
-      <div class="container d-flex align-items-center">
+      <div class="container-fluid d-flex align-items-center">
+        <a class="btn back-button mr-4" href="index.html#categories"
+          ><i class="bx bx-arrow-back white-text" aria-hidden="true"></i>
+          Back</a
+        >
         <h1 class="logo mr-auto"><a href="index.html">Algovis.io</a></h1>
         <!-- Uncomment below if you prefer to use an image logo -->
         <!-- <a href="index.html" class="logo mr-auto"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
@@ -97,7 +101,7 @@ <h1 class="logo mr-auto"><a href="index.html">Algovis.io</a></h1>
     <main id="main">
       <!-- ======= Breadcrumbs ======= -->
       <section id="breadcrumbs" class="breadcrumbs">
-        <div class="container">
+        <div class="container-fluid">
           <ol>
             <li><a href="index.html">Home</a></li>
             <li>Graphs</li>

diff --git a/insertionsort.html b/insertionsort.html
@@ -49,7 +49,7 @@
       id="topbar"
       class="d-none d-lg-flex align-items-center fixed-top header-inner-pages"
     >
-      <div class="container d-flex">
+      <div class="container-fluid d-flex">
         <div class="contact-info mr-auto">
           <i class="icofont-envelope"></i>
           <a href="mailto:[email protected]">[email protected]</a>
@@ -99,7 +99,7 @@ <h1 class="logo mr-auto"><a href="index.html">Algovis.io</a></h1>
     <main id="main">
       <!-- ======= Breadcrumbs ======= -->
       <section id="breadcrumbs" class="breadcrumbs">
-        <div class="container">
+        <div class="container-fluid">
           <ol>
             <li><a href="index.html">Home</a></li>
             <li><a href="sorting.html">Sorting</a></li>

diff --git a/kosarajus.html b/kosarajus.html
@@ -49,7 +49,7 @@
       id="topbar"
       class="d-none d-lg-flex align-items-center fixed-top header-inner-pages"
     >
-      <div class="container d-flex">
+      <div class="container-fluid d-flex">
         <div class="contact-info mr-auto">
           <i class="icofont-envelope"></i>
           <a href="mailto:[email protected]">[email protected]</a>
@@ -99,7 +99,7 @@ <h1 class="logo mr-auto"><a href="index.html">Algovis.io</a></h1>
     <main id="main">
       <!-- ======= Breadcrumbs ======= -->
       <section id="breadcrumbs" class="breadcrumbs">
-        <div class="container">
+        <div class="container-fluid">
           <ol>
             <li><a href="index.html">Home</a></li>
             <li><a href="graphs.html">Graphs</a></li>

diff --git a/kruskals.html b/kruskals.html
@@ -49,7 +49,7 @@
       id="topbar"
       class="d-none d-lg-flex align-items-center fixed-top header-inner-pages"
     >
-      <div class="container d-flex">
+      <div class="container-fluid d-flex">
         <div class="contact-info mr-auto">
           <i class="icofont-envelope"></i>
           <a href="mailto:[email protected]">[email protected]</a>
@@ -99,7 +99,7 @@ <h1 class="logo mr-auto"><a href="index.html">Algovis.io</a></h1>
     <main id="main">
       <!-- ======= Breadcrumbs ======= -->
       <section id="breadcrumbs" class="breadcrumbs">
-        <div class="container">
+        <div class="container-fluid">
           <ol>
             <li><a href="index.html">Home</a></li>
             <li><a href="graphs.html">Graphs</a></li>

diff --git a/linkedlist.html b/linkedlist.html
@@ -49,7 +49,7 @@
       id="topbar"
       class="d-none d-lg-flex align-items-center fixed-top header-inner-pages"
     >
-      <div class="container d-flex">
+      <div class="container-fluid d-flex">
         <div class="contact-info mr-auto">
           <i class="icofont-envelope"></i>
           <a href="mailto:[email protected]">[email protected]</a>
@@ -78,7 +78,7 @@
     <!-- ======= Header ======= -->
     <header id="header" class="fixed-top header-inner-pages">
       <div class="container-fluid d-flex align-items-center">
-        <a class="btn back-button mr-4" href="graphs.html"
+        <a class="btn back-button mr-4" href="datastructures.html"
           ><i class="bx bx-arrow-back white-text" aria-hidden="true"></i>
           Back</a
         >
@@ -99,7 +99,7 @@ <h1 class="logo mr-auto"><a href="index.html">Algovis.io</a></h1>
     <main id="main">
       <!-- ======= Breadcrumbs ======= -->
       <section id="breadcrumbs" class="breadcrumbs">
-        <div class="container">
+        <div class="container-fluid">
           <ol>
             <li><a href="index.html">Home</a></li>
             <li><a href="datastructures.html">Data structures</a></li>
@@ -162,13 +162,13 @@ <h2>Linked list visualization</h2>
             <div id="posInput" class="col-sm-3" hidden>
               <form class="form-inline">
                 <div class="col-5">
-                  <label class="mr-2" for="data-pos-input"
+                  <label class="mr-2" for="data-pos-input" id="pos-label"
                     >Position (0..N-1)</label
                   >
                 </div>
                 <div class="col-7">
                   <input
-                    type="text"
+                    type="number"
                     class="form-control mx-auto w-100"
                     id="data-pos-input"
                     placeholder="0"
@@ -181,11 +181,11 @@ <h2>Linked list visualization</h2>
             <div id="valInput" class="col-sm-3" hidden>
               <form class="form-inline">
                 <div class="col-2">
-                  <label class="mr-2" for="data-val-input">Data</label>
+                  <label class="mr-2" for="data-val-input">Data:</label>
                 </div>
                 <div class="col-10">
                   <input
-                    type="text"
+                    type="number"
                     class="form-control mx-auto w-100"
                     id="data-val-input"
                     placeholder="22"
@@ -640,7 +640,7 @@ <h4>Useful Links</h4>
           })
           .remove();
 
-        let rand = Math.round(Math.random() * 5 + 4);
+        let rand = Math.round(Math.random() * 2 + 4);
 
         for (let i = 0; i < rand; i++) {
           let data = Math.round(Math.random() * 98 + 1);
@@ -664,6 +664,7 @@ <h4>Useful Links</h4>
             $("#dropdownOp").html("Insert element");
             $("#posInput, #valInput, #insert-pseudocode").prop("hidden", false);
             $("#remove-pseudocode, #search-pseudocode").prop("hidden", true);
+            $("#pos-label").html("Position (0 - " + list.length + "):");
             break;
           case 2:
             operation = "remove";
@@ -673,7 +674,7 @@ <h4>Useful Links</h4>
               "hidden",
               true
             );
-
+            $("#pos-label").html("Position (0 - " + (list.length - 1) + "):");
             break;
           case 3:
             operation = "search";
@@ -691,7 +692,6 @@ <h4>Useful Links</h4>
             $("#posInput, #valInput, #insert-pseudocode").prop("hidden", false);
             $("#remove-pseudocode, #search-pseudocode").prop("hidden", true);
             break;
-            break;
         }
       }
 
@@ -735,6 +735,11 @@ <h4>Useful Links</h4>
                 "Please select a number that's not already in the list."
               );
               error = true;
+            } else if (data < -9) {
+              $("#data-val-input").css("border-color", "red");
+              $("#data-error").prop("hidden", false);
+              $("#data-error").html("Please select a number > -10.");
+              error = true;
             } else if (list.length == 10) {
               $("#data-val-input").css("border-color", "red");
               $("#data-error").prop("hidden", false);

diff --git a/pathfinding.html b/pathfinding.html
@@ -49,7 +49,7 @@
       id="topbar"
       class="d-none d-lg-flex align-items-center fixed-top header-inner-pages"
     >
-      <div class="container d-flex">
+      <div class="container-fluid d-flex">
         <div class="contact-info mr-auto">
           <i class="icofont-envelope"></i>
           <a href="mailto:[email protected]">[email protected]</a>
@@ -78,7 +78,7 @@
     <!-- ======= Header ======= -->
     <header id="header" class="fixed-top header-inner-pages">
       <div class="container-fluid d-flex align-items-center">
-        <a class="btn back-button mr-4" href="graphs.html"
+        <a class="btn back-button mr-4" href="index.html#categories"
           ><i class="bx bx-arrow-back white-text" aria-hidden="true"></i>
           Back</a
         >
@@ -99,7 +99,7 @@ <h1 class="logo mr-auto"><a href="index.html">Algovis.io</a></h1>
     <main id="main">
       <!-- ======= Breadcrumbs ======= -->
       <section id="breadcrumbs" class="breadcrumbs">
-        <div class="container">
+        <div class="container-fluid">
           <ol>
             <li><a href="index.html">Home</a></li>
             <li>Pathfinding</li>