Made table responsive on mobile, added a show password button on logi…

…n page and changed the background
BarokDG · Feb 16, 2021 · f8c9b4e · f8c9b4e
1 parent aadcb65
commit f8c9b4e
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 76 deletions.
diff --git a/admin.html b/admin.html
@@ -43,7 +43,7 @@ <h3 class="heading">AAIT Clearance System</h3>
             </div>
 
             <a href="./dash.html"><button><i class="fas fa-tachometer-slowest"></i>Dashboard</button></a>
-            <a href="./loan.html"><button class="active"><i class="fas fa-books"></i>Loan</button></a>
+            <a href="./loan.html"><button class="active"><i class="fas fa-books"></i>Students</button></a>
             <a href=""><button><i class="fas fa-info-circle"></i>How To Use</button></a>
             <a href=""><button><i class="fas fa-bell"></i>Announcements</button></a>
             <a href=""><button><i class="fas fa-sign-out-alt"></i>Log out</button></a>
@@ -55,7 +55,7 @@ <h3 class="heading my-5">AAIT Clearance System</h3>
 
             <a href="./dash.html"><button class="side-button"><i
                         class="fas fa-tachometer-slowest fa-2x"></i>Dashboard</button></a>
-            <a href="./loan.html"><button class="side-button active"><i class="fas fa-books fa-2x"></i>Loan</button></a>
+            <a href="./loan.html"><button class="side-button active"><i class="fas fa-books fa-2x"></i>Students</button></a>
             <a href=""><button class="side-button"><i class="fas fa-info-circle fa-2x"></i>How To Use</button></a>
             <a href=""><button class="side-button"><i class="fas fa-bell fa-2x"></i>Announcements</button></a>
             <a href=""><button class="side-button"><i class="fas fa-sign-out-alt fa-2x"></i>Log out</button></a>

diff --git a/assets/css/login.css b/assets/css/login.css
@@ -1,6 +1,6 @@
 body {
     align-items: center;
-    background-image: url('../images/Echo\ Lines\ 10\ -\ 16x9.jpg');
+    background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2)), url('../images/Geo\ Dots\ Forest\ -\ 16x9.jpg');
     display: flex;
     justify-content: center;
     min-height: 100vh;
@@ -18,7 +18,7 @@ body {
 }
 
 #slideshow {
-    background-color: #FFA6AA;
+    /* background-color: #FFA6AA; */
     width: 55%;
 }
 
@@ -33,6 +33,16 @@ input {
     border-bottom: 1px solid rgba(100, 100, 100, 0.7) !important;
 }
 
+.eye-div {
+    position: relative;
+}
+
+#show_password {
+    position: absolute;
+    top: 12px;
+    left: 90%;
+}
+
 input:focus {
     box-shadow: none !important;
 }

diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -161,6 +161,11 @@ nav {
     width: 50px;
 }
 
+/* Table */
+.table-responsive {
+    display: table !important;
+}
+
 /* Responsiveness */
 @media screen and (max-width: 1000px) {
     #grid-container {
@@ -220,15 +225,15 @@ nav {
 
 @media screen and (max-width: 700px) {
     #grid-container {
-        grid-template-columns: auto;
+        display: block;
     }
 
     .menu-btn {
         display: block;
     }
 
     .sidebar-small {
-        width: 50%;
+        width: 30%;
         z-index: 1;
     }
 
@@ -238,7 +243,7 @@ nav {
     }
 
     .sidebar-small-hide {
-        left: -50% !important;
+        left: -30% !important;
     }
 
     .sidebar-small .heading {
@@ -252,4 +257,33 @@ nav {
     nav {
         display: block !important;
     }
+
+    table {
+        overflow-x: scroll;
+    }
+
+    .navbar-brand {
+        display: block;
+    }
 }
+
+@media screen and (max-width: 450px) {
+    .sidebar-small {
+        width: 50%;
+    }
+
+    .sidebar-small-hide {
+        left: -50% !important;
+    }
+
+    .table-responsive {
+        display: block !important;
+    }
+
+    th:first-child,
+    td:first-child {
+        position: sticky !important;
+        left: 0px !important;
+        background-color: grey;
+    }
+}
diff --git a/assets/images/Echo Lines 10 - 16x9.jpg b/assets/images/Echo Lines 10 - 16x9.jpg
diff --git a/assets/images/Geo Dots Forest - 16x9.jpg b/assets/images/Geo Dots Forest - 16x9.jpg
diff --git a/assets/js/login.js b/assets/js/login.js
@@ -1,9 +1,23 @@
 const loginbtn = document.querySelector('.btn');
 
+const show_password = document.querySelector('#show_password');
+const passwordInput = document.querySelector('#password');
+
 
 let db;
 
 onload = function (){
+    show_password.addEventListener('click', show);
+
+    function show () {
+        show_password.classList.toggle("fa-eye-slash");
+        if (passwordInput.type === "password") {
+            passwordInput.type = "text";
+        } else {
+            passwordInput.type = "password";
+        }
+    }
+
     // //////// Defining database schema
     // Request to open or create database
     let request = indexedDB.open('ClearanceDB', 1);

diff --git a/loan.html b/loan.html
@@ -92,7 +92,7 @@ <h3 class="heading my-5">AAIT Clearance System</h3>
                     </button>
                 </div>
 
-                <table class="table table-light table-hover">
+                <table class="table table-light table-hover table-responsive">
                     <thead class="thead-dark">
                         <tr>
                             <th scope="col">Student ID</th>
@@ -188,15 +188,14 @@ <h5 class="modal-title" id="exampleModalLabel">Record a Loan</h5>
     <script src="./assets/js/sidebar.js"></script>
 
     <!-- for indexedDB -->
-    <script src="../assets/js/db.js"></script>
+    <!-- <script src="./assets/js/db.js"></script> -->
     <script src="assets/js/modal.js"></script>
 
-
     <!-- Add and display -->
-    <script src="./assets/js/transactions.js"></script>
+    <!-- <script src="./assets/js/transactions.js"></script> -->
 
     <!-- personalize for each department -->
-    <script src="./assets/js/personalize.js"></script>
+    <!-- <script src="./assets/js/personalize.js"></script> -->
 
 </body>
 

diff --git a/login.html b/login.html
@@ -29,39 +29,6 @@
 
 <body>
   <!-- Main Content -->
-  <!-- <div class="container-fluid">
-       <h1 class="text-center">Clearance Management System</h1>
-        <div class="row main-content bg-success text-center">
-          <div class="col-md-4 text-center company__info">
-            <span class="company__logo"><h2><span class="class="fa fa-cuttlefish""> </span></h2></span>
-            <img src="assets/images/Logo.PNG" alt="">
-            <h2 class="company_title">Login</h2>
-          </div>
-          <div class="col-md-8 col-xs-12 col-sm-12 login_form ">
-            <div class="container-fluid">
-              <div class="row">
-                <form control="" class="form-group">
-                  <div class="row">
-                    <input type="text" name="Staff ID" id="staffId" class="form__input" placeholder="User ID">
-                  </div>
-                  <div class="row">
-                    <span class="fa fa-lock"></span> 
-                    <input type="password" name="password" id="password" class="form__input" placeholder="Password">
-                  </div>
-                  <div class="row">
-                    <input type="checkbox" name="remember_me" id="remember_me" class="">
-                    <label for="remember_me">Remember Me!</label>
-                  </div>
-                  <div class="row">
-                    <input type="submit" value="login" class="btn">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div> -->
-
   <div id="loginContent">
     <div id="slideshow">
       <div id="infoCarousel" class="carousel slide" data-ride="carousel">
@@ -80,7 +47,8 @@ <h2 class="company_title">Login</h2>
 
             <div class="carousel-caption d-none d-md-block">
               <h5>Centralized Administration</h5>
-              <p>Students can finalize their clearance at a single stop by either automatic approval or through further steps.</p>
+              <p>Students can finalize their clearance at a single stop by either automatic approval or through further
+                steps.</p>
             </div>
           </div>
           <div class="carousel-item">
@@ -91,7 +59,8 @@ <h5>Centralized Administration</h5>
 
             <div class="carousel-caption d-none d-md-block">
               <h5>Visual Representations</h5>
-              <p>Admins and department faculty get real-time statistics in the form of Pie Charts, Bar graphs, Progress bars, and more.</p>
+              <p>Admins and department faculty get real-time statistics in the form of Pie Charts, Bar graphs, Progress
+                bars, and more.</p>
             </div>
           </div>
           <div class="carousel-item">
@@ -101,7 +70,8 @@ <h5>Visual Representations</h5>
 
             <div class="carousel-caption d-none d-md-block">
               <h5>Secure Database</h5>
-              <p>Our database is maintained regularly to keep up with latest trends and to consistently provide accurate data.</p>
+              <p>Our database is maintained regularly to keep up with latest trends and to consistently provide accurate
+                data.</p>
             </div>
           </div>
           <div class="carousel-item">
@@ -127,22 +97,6 @@ <h5>Quick and Efficient experience</h5>
     </div>
 
     <div id="loginForm">
-      <!-- <form control="" class="form-group">
-        <div class="row">
-          <input type="text" name="Staff ID" id="staffId" class="form__input" placeholder="User ID">
-        </div>
-        <div class="row">
-          <span class="fa fa-lock"></span>
-          <input type="password" name="password" id="password" class="form__input" placeholder="Password">
-        </div>
-        <div class="row">
-          <input type="checkbox" name="remember_me" id="remember_me" class="">
-          <label for="remember_me">Remember Me!</label>
-        </div>
-        <div class="row">
-          <input type="submit" value="login" class="btn">
-        </div>
-      </form> -->
       <form>
         <img src="./assets/images/svg files/favicon.svg" id="svgImg" alt="">
 
@@ -152,13 +106,15 @@ <h1 class="mb-3 font-weight-light">Clearance Management System</h1>
           <div class="mb-3">
             <input type="text" class="form-control" name="Staff ID" id="staffId" placeholder="User ID">
           </div>
-          <div class="mb-3">
+          <div class="mb-3 eye-div">
             <input type="password" class="form-control" name="password" id="password" placeholder="Password">
+            <i id="show_password" class="fa fa-eye"></i>
           </div>
           <div class="mb-3 form-check">
             <input type="checkbox" class="form-check-input" name="remember_me" id="remember_me">
             <label class="form-check-label" for="remember_me">Stay Signed in</label>
           </div>
+
           <button type="submit" value="login" class="btn btn-primary">Log In</button>
         </div>
       </form>
@@ -175,17 +131,7 @@ <h1 class="mb-3 font-weight-light">Clearance Management System</h1>
     integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous">
   </script>
 
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
-        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
-    </script>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
-        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
-    </script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
-        integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous">
-    </script>
-
-    <script src="../assets/js/login.js"></script>
+  <script src="./assets/js/login.js"></script>
 </body>
 
 </html>