fixed kebab and other stuff that i forgot

IPSystemTOPC/EmployeeProdDB/static/css/base.css

@@ -15,7 +15,7 @@ body {
 }
 
 .footer {
-    /* left: 0; */
+    position: sticky;
     bottom: 0px;
     width: 100%;
     height: max-content; 
@@ -51,6 +51,10 @@ body {
     padding: 16px 16px 16px;   
     display: flex;
     justify-content: space-between;
+    position: fixed;
+    z-index: 2;
+    top: 0px;
+    width: 100%;
 }
 
 
@@ -100,7 +104,7 @@ body {
     height: 100%;
     width: 85px;
     position: fixed;
-    top: 102.4;
+    top: 102.4px;
     left: 0;
     background-color: #461E0A;
     color: white;
@@ -144,12 +148,15 @@ body {
 .sidebar-hover {
     background-color: #461E0A;
     color: white;
+    text-decoration: none;
+}
+
+.sidebar-hover a:hover {
+    color: white;
 }
 
 .sidebar-hover:hover {
     background-color: #2C1206;
-    color: white;
-    text-decoration: none;
 
 }
 
@@ -160,6 +167,8 @@ body {
 
 .main {
     margin-left: 85px;
+    margin-top: 130px;
+    width: 93%;
 }
 
 .search-and-add-cont {
@@ -206,5 +215,5 @@ body {
 
 .page-container {
     position: relative;
-    min-height: 100vh;
+    /* min-height: 100vh; */
 }

IPSystemTOPC/EmployeeProdDB/static/css/edit_position.css

@@ -352,9 +352,3 @@ select {
   overflow: hidden;
   overflow-y: scroll;
 }
-
-.save-cancel-cont {
-    /* display: flex; */
-    /* flex-direction: column; */
-
-}
\ No newline at end of file

IPSystemTOPC/EmployeeProdDB/static/css/view_all_productivity.css

+body {
+  font-family: Helvetica;
+}
+
+.employee-info-cont {
+  margin: 30px 50px 0px;
+  background-color: #00802d;
+  color: white;
+  width: 91.5%;
+  height: 100px;
+  margin-right: 50px;
+  border-radius: 4px;
+  padding: 5px 10px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.employee-info-contact {
+  display: flex;
+  margin-right: 50px;
+}
+
+.employee-nameID {
+  display: flex;
+  height: 100%;
+  margin-left: 30px;
+  flex-direction: column;
+  width: 30%;
+  justify-content: center;
+}
+
+#ID {
+  background-color: white;
+  color: #00802d;
+  border-radius: 4px;
+  padding: 3px;
+  font-weight: bold;
+}
+
+/* .employee-info-contact {
+    display: flex;
+    flex-direction: column;
+} */
+
+.SBP {
+  display: flex;
+  height: 100%;
+  margin-left: 30px;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.SBP h6 {
+  font-size: 16px;
+  margin: 0px;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.dashboard-options {
+  margin: 15px 50px 0px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.print-out button {
+  border-radius: 4px;
+  border: 1px solid black;
+  padding: 5px 10px;
+  background-color: white;
+  width: max-content;
+}
+
+.print-out button:hover {
+  background-color: #ddd;
+}
+
+.select-range {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.range-selected {
+  border-radius: 4px;
+  border: 1px solid black;
+  margin: 0px 5px;
+  padding: 5px 10px;
+  font-weight: bold;
+  background-color: white;
+}
+
+.range-selected:hover,
+.range-selected:focus {
+  background-color: #00802b;
+  color: white;
+}
+
+.vert-line {
+  border: 0.5px solid grey;
+  height: 80%;
+  width: 0.3px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  opacity: 50%;
+}
+
+.seperator {
+  display: flex;
+  justify-content: center;
+}
+
+.hori-line {
+  border: 0.5px solid grey;
+  width: 91.5%;
+  height: 0.3px;
+  margin-top: 15px;
+}
+
+.main {
+  margin-left: 85px;
+}
+
+.search-and-add-cont {
+  margin: 15px 50px 0px;
+  display: flex;
+  /* flex-direction: column; */
+  justify-content: space-between;
+}
+
+.search-and-add-cont button {
+  border-radius: 4px;
+  border: 1px solid black;
+  padding: 5px 10px;
+}
+
+.searchbar {
+  width: 80%;
+  background: url("%images/search-icon.png%") top left no-repeat scroll 7px 7px;
+}
+
+.searchbar input {
+  border-radius: 4px;
+  border: 1px solid black;
+  padding: 5px 10px;
+  margin-right: 20px;
+  width: 100%;
+  height: 100%;
+}
+
+.productivity-table-cont {
+  margin-left: 85px;
+  margin-top: 15px;
+}
+
+.productivity-table {
+  width: 95%;
+  text-align: center;
+}
+
+.productivity-table th {
+  background-color: #a9deba;
+  margin-top: 15px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.productivity-table td {
+  border-bottom: 1px solid #ddd;
+  border-right: 1px solid #ddd;
+  border-left: 1px solid #ddd;
+  padding: 8px;
+}
+
+.productivity-table tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+
+.productivity-table tr:hover {
+  background-color: #ddd;
+}
+
+/* kebab styling */
+.kebab {
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  padding: 0 16px;
+}
+
+.kebab figure {
+  width: 6px;
+  height: 6px;
+  border-radius: 5px;
+  background: white;
+  margin: 3px 0;
+}
+
+.middle {
+  transition: all 0.25s cubic-bezier(0.72, 1.2, 0.71, 0.72);
+  transform: scale(1);
+  position: relative;
+  box-shadow: 0 0.1px 0.1px 0 rgba(0, 0, 0, 0.16),
+    0 0.1px 0.3px 0 rgba(0, 0, 0, 0.12);
+  -webkit-filter: blur(0.1px);
+  filter: blur(0.1px);
+}
+
+.middle.active {
+  transform: scale(4.5);
+  transition: all 0.25s cubic-bezier(0.32, 2.04, 0.85, 0.54);
+  box-shadow: 0 0.1px 0.1px 0 rgba(0, 0, 0, 0.16),
+    0 0.1px 0.3px 0 rgba(0, 0, 0, 0.12);
+}
+
+.cross {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  margin-top: -1px;
+  color: white;
+  transition: all 0.2s cubic-bezier(0.72, 1.2, 0.71, 0.72);
+  font-size: 22px;
+  user-select: none;
+}
+
+.cross.active {
+  transform: translate(-50%, -50%) scale(1);
+  transition: all 0.15s cubic-bezier(0.32, 2.04, 0.85, 0.54);
+  color: black;
+}
+
+h1 {
+  font-size: 26px;
+  background: white;
+  color: white;
+  padding: 40px 0 40px 20%;
+  margin-bottom: 50px;
+}
+
+a,
+li {
+  color: darken(grey, 20%);
+  text-decoration: none;
+}
+
+.dropdown {
+  position: absolute;
+  right: 0;
+  top: 3em;
+  transition: all 0.25s ease-out;
+  transform: scale(0);
+  transform-origin: 100% 0;
+  /* box-shadow: $shadow; */
+}
+
+
+.dropdown ul:hover {
+  transform: scale(1);
+}
+.dropdown li {
+  display: block;
+  width: 100%;
+}
+
+.dropdown li:hover {
+    background-color: #ddd;
+}
+
+.dropdown a {
+  width: 100%;
+  padding: 1em 18px;
+  display: inline-block;
+  white-space: pre;
+  box-sizing: border-box;
+  color: black;
+}
+.dropdown a:hover {
+  background: darken(grey, 30%);
+    text-decoration: none;
+}
+.dropdown.active {
+  transform: scale(1);
+  transition: all 0.25s cubic-bezier(0.5, 1.8, 0.9, 0.8);
+  box-shadow:  2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
+  background-color: white;
+  padding: 0px;
+}

IPSystemTOPC/EmployeeProdDB/templates/EmployeeProdDB/base.html

@@ -3,12 +3,12 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <link
+    <!-- <link
     rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
     integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
     crossorigin="anonymous"
-    />
+    /> -->
     
     <link rel="stylesheet" href="{% static 'css/base.css' %}">
     <link rel="stylesheet" href="{% static 'css/style.css' %}" />

IPSystemTOPC/EmployeeProdDB/templates/EmployeeProdDB/view_all_productivity.html

+{% extends 'EmployeeProdDB/base.html' %} {% load static %} {% block content %}
+
+<head>
+  <link rel="stylesheet" href="{% static 'css/style.css' %}" />
+  <link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
+    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
+    crossorigin="anonymous"
+  />
+  <link
+    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
+    rel="stylesheet"
+  />
+  <link rel="stylesheet" href="{% static 'css/view_all_productivity.css' %}" />
+  <title>Employee Record</title>
+</head>
+<body>
+  <div class="employee-info-cont">
+    <div class="employee-nameID">
+      <h4 class="bold">March Leighton Chua</h4>
+      <div>
+        <span id="ID">ID# 1</span>
+        <span>Dataset: 44 Reports</span>
+      </div>
+    </div>
+    <div class="employee-info-contact">
+      <div class="SBP">
+        <h6>
+          Sex:
+          <span class="bold"> Male<!-- IMPORT INFO HERE --> </span>
+        </h6>
+        <h6>
+          Birthday:
+          <span class="bold"> 4/3/2023<!-- IMPORT INFO HERE --> </span>
+        </h6>
+        <h6>
+          Position: <span class="bold"> Leader<!-- IMPORT INFO HERE --> </span>
+        </h6>
+      </div>
+
+      <div class="SBP">
+        <h6>
+          Phone Number:
+          <span class="bold"> 098765143223<!-- IMPORT INFO HERE --> </span>
+        </h6>
+        <h6>
+          Email:
+          <span class="bold">
+            march.chua@obf.ateneo.edu<!-- IMPORT INFO HERE -->
+          </span>
+        </h6>
+        <h6>
+          Emergency Contact:
+          <span class="bold"> 0912344567<!-- IMPORT INFO HERE --> </span>
+        </h6>
+      </div>
+      <div class="SBP">
+        <div class="kebab">
+          <figure></figure>
+          <figure class="middle"></figure>
+          <p class="cross">x</p>
+          <figure></figure>
+          <ul class="dropdown">
+            <li><a href="#">View all Productivity Reports</a></li>
+            <li><a href="#">Edit User Profile</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="search-and-add-cont">
+    <div class="searchbar">
+      <input placeholder="Search Name" />
+    </div>
+    <div class="add-button">
+      <button type="submit" class="add-profile-button">Import File</button>
+    </div>
+  </div>
+
+  <div class="seperator">
+    <div class="hori-line"></div>
+  </div>
+
+  <div class="productivity-table-cont">
+    <h2>variable.name</h2>
+    <table class="productivity-table">
+      <tr>
+        <th>Report Number</th>
+        <th>Date</th>
+        <th>Duration</th>
+        <th>Process</th>
+        <th>Status</th>
+        <th>Productivity Score</th>
+      </tr>
+      <tr>
+        <td>1</td>
+        <td>Juan Dela Cruz</td>
+        <td>Jan 12, 2022</td>
+        <td>Packager</td>
+        <td>Juan Dela Paz</td>
+        <td>69.9%</td>
+      </tr>
+      <tr>
+        <td>1</td>
+        <td>Juan Dela Cruz</td>
+        <td>Jan 12, 2022</td>
+        <td>Packager</td>
+        <td>Juan Dela Paz</td>
+        <td>69.9%</td>
+      </tr>
+      <tr>
+        <td>1</td>
+        <td>Juan Dela Cruz</td>
+        <td>Jan 12, 2022</td>
+        <td>Packager</td>
+        <td>Juan Dela Paz</td>
+        <td>69.9%</td>
+      </tr>
+      <tr>
+        <td>1</td>
+        <td>Juan Dela Cruz</td>
+        <td>Jan 12, 2022</td>
+        <td>Packager</td>
+        <td>Juan Dela Paz</td>
+        <td>69.9%</td>
+      </tr>
+    </table>
+  </div>
+
+  <!-- EXTEND CHART JS AND REMARKS PAGE HEREHERE HERE HERE HERE -->
+  <!--  DUNNO HOW TO EXTEND ANOTHER HTML HERE    -->
+  <script>
+    const kebab = document.querySelector('.kebab');
+    const middle = document.querySelector('.middle');
+    const cross = document.querySelector('.cross');
+    const dropdown = document.querySelector('.dropdown');
+
+    kebab.addEventListener('click', () => {
+      middle.classList.toggle('active');
+      cross.classList.toggle('active');
+      dropdown.classList.toggle('active');
+    })
+  </script>
+</body>
+{% endblock %}

IPSystemTOPC/EmployeeProdDB/urls.py

@@ -16,5 +16,6 @@ urlpatterns = [
     path('position_list/', views.positionlist, name='positionlist'),
     path('create_position/', views.create_position, name='create_position'),
     path('edit_position/', views.edit_position, name='edit_position'),
+    path('view_all_productivity/', views.view_all_productivity, name='view_all_productivity'),
 
 ]
\ No newline at end of file

IPSystemTOPC/EmployeeProdDB/views.py

@@ -194,3 +194,6 @@ def create_position(request):
 
 def edit_position(request):
     return (render(request, 'EmployeeProdDB/edit_position.html'))
+
+def view_all_productivity(request):
+    return (render(request, 'EmployeeProdDB/view_all_productivity.html'))
\ No newline at end of file