updated some screens. working on add position

IPSystemTOPC/EmployeeProdDB/static/css/base.css

@@ -3,6 +3,7 @@
 @import url('https://unpkg.com/css.gg@2.0.0/icons/css/import.css');
 @import url('https://unpkg.com/css.gg@2.0.0/icons/css/log-out.css');
 @import url('https://unpkg.com/css.gg@2.0.0/icons/css/user-list.css');
+@import url('https://unpkg.com/css.gg@2.0.0/icons/css/user-list.css');
 
 body {
     font-family: Helvetica ;
@@ -118,6 +119,7 @@ body {
 .sidebar-button:hover {
     background-color: #2C1206;
     color: white;
+    text-decoration: none;
 }
 
 .sidebar p {
@@ -137,9 +139,16 @@ body {
     color: white;
 } 
 
+.sidebar-hover {
+    background-color: #461E0A;
+    color: white;
+}
+
 .sidebar-hover:hover {
     background-color: #2C1206;
     color: white;
+    text-decoration: none;
+    
 }
 
 .icon-align {
@@ -196,4 +205,4 @@ body {
 .page-container {
     position: relative;
     min-height: 100vh;
-}
\ No newline at end of file
+}

IPSystemTOPC/EmployeeProdDB/static/css/create_position.css

@@ -199,3 +199,99 @@
     height: 56px;
     /* margin-top: 15px; */
 }
+
+.search-and-add-cont {
+  width: 660px;
+  display: flex;
+  align-items: left;
+  justify-content:  space-between;
+}
+
+.search-and-add-cont button {
+  border-radius: 4px;
+  border: 1px solid black;
+  padding: 5px 10px;
+}
+
+.searchbar {
+  /* width: 78%; */
+  /* padding-left: 30px; */
+}
+
+.searchbar input {
+  border-radius: 4px;
+  border: 1px solid black;
+  padding: 5px 10px;
+  /* margin-right: 20px; */
+  width: 660px;
+  height: 100%;
+}
+
+.position-buttons-cont {
+  display: flex;
+  justify-content: start;
+}
+.add-profile-button {
+  width: 200px;
+  height: 50px;
+  background-color: #00802B;
+  color: white;
+  border: none;
+  border-radius: 4px;
+}
+.add-button:hover {
+  background-color: #004316;
+}
+
+.participant-table-cont table{
+  margin-top: 15px; 
+  /* margin top not working */
+  overflow:hidden;
+  overflow-y: scroll;
+  width: 660px;
+  height: 340px;
+  border-width: 5px;
+}
+
+.button-remove button {
+  border-radius: 4px;
+  border: 1px solid white;
+  padding: 5px 10px;
+  background-color: #8b0000 ;
+  color: white;
+  width: max-content;
+  width: 200px;
+  margin-right: 15px;
+}
+
+
+#participant {
+  width: 91.5%;
+  margin-top: 15px;
+  margin-left: 50px;
+  height: 100%;   
+  /* display: flex;
+  /* flex-direction: column; */
+  /* justify-content:  space-between; */
+}
+
+#participant th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #00802D;
+  color: white;
+}
+
+#participant td, #participant th {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+#participant tr:nth-child(even){
+  background-color: #f2f2f2;
+}
+
+#participant tr:hover {
+  background-color: #ddd;
+}
\ No newline at end of file

IPSystemTOPC/EmployeeProdDB/static/css/home.css

@@ -50,17 +50,19 @@ body {
 }
 
 .employee-table-cont {
-    margin-top: 15px;
+    margin-top: 15px; 
+    /* margin top not working */
     overflow:hidden;
     overflow-y: scroll;
     height: 340px;
+    border-width: 5px;
 }
 
 #employee {
     width: 91.5%;
     margin-top: 15px;
     margin-left: 50px;
-    height: 100%;
+    height: 100%;   
     /* display: flex;
     /* flex-direction: column; */
     /* justify-content:  space-between; */

IPSystemTOPC/EmployeeProdDB/static/css/upload_csv.css

@@ -35,8 +35,7 @@ body {
 }
     
 .upload-table-cont {
-    overflow:hidden;
-    overflow-y: scroll;
+    color: white;
     height: 200px;
 }
 

IPSystemTOPC/EmployeeProdDB/templates/EmployeeProdDB/base.html

@@ -65,7 +65,7 @@
           <div class="sidebar-hover">
             <a href="{% url 'positionlist' %}">
               <div class="icon-align sidebar-button">
-                <i class="gg-user-list"></i>
+                <i><img src="{% static 'images/position_list.png' %}" style="width: 30px;"></i>
               </div>
               <p>Position List</p>
             </a>

IPSystemTOPC/EmployeeProdDB/templates/EmployeeProdDB/create_position.html

@@ -63,39 +63,76 @@
               </div>
             </div>
             
-            <div>
+            <div class="position-buttons-cont">
                 <!-- left side for the table -->
-            </div>
-            
-            <div class="bottom-cont">
-                <!-- right side for the bottoms then just align it down or left -->
-                <div class="col-md-8"></div>
-                <div class="profile-options">
+                <div>
+                  <!-- search bar cont -->
+                  <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">
+                        Add Profile
+                      </button>
+                    </div>
+                  </div>
+                  <div class="participant-table-cont">
+                    <!-- table -->
+                    <table id="participant">
+                      <tr>
+                        <td>1</td>
+                        <td>
+                          <div class="button-remove">
+                            <div>Name</div>
+                            <div><button >Remove</button></div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>1</td>
+                        <td>
+                          <div class="button-remove">
+                            <div>Name</div>
+                            <div><button >Remove</button></div>
+                          </div>
+                        </td>
+                      </tr>
+                    </table>
+                  </div>
+                </div>
+                
+                <div class="bottom-cont">
+                  <!-- right side for the bottoms then just align it down or left -->
+                  <div class="col-md-8"></div>
+                  <div class="profile-options">
                     <div class="button-cancel">
                       <button
                         name="Save"
                         type="submit"
-                      >
+                        >
                         Cancel
                       </button>
                     </div>
-                  <div class="button-save">
-                    <button
+                    <div class="button-save">
+                      <button
                       name="Save"
                       type="submit"
-                    >
+                      >
                       Save Changes
                     </button>
                   </div>
+                  </div>
                 </div>
+              </div>
+              <div class="row g-0" style="margin-top: 5px">
+                <div class="col-md-10"></div>
+                <div class="col-md-2"></div>
+              </div>
             </div>
-            <div class="row g-0" style="margin-top: 5px">
-              <div class="col-md-10"></div>
-              <div class="col-md-2"></div>
-            </div>
-          </div>
-        </form>
-      </main>
+          </form>
+        </main>
     </div>
 
     <script

IPSystemTOPC/EmployeeProdDB/templates/EmployeeProdDB/emp_record.html

@@ -13,14 +13,8 @@
     rel="stylesheet"
   />
   <link rel="stylesheet" href="{% static 'css/emp_record.css' %}" />
-  <title>Employee Record</title>.vert-line {
-    border: 0.5px solid grey;
-    height: 80%;
-    width: 0.3px;
-    margin-top: 5px;
-    margin-bottom: 5px;
-    opacity: 50%;
-}
+  <title>Employee Record</title>
+
 </head>
 <body>
   <div class="employee-info-cont">
@@ -97,11 +91,6 @@
             </button>
         </div>
     </div>
-    <div class="print-out">
-        <button type="submit" class="">
-            Print Out
-        </button>
-    </div>
   </div>
 
     <div class="seperator">

IPSystemTOPC/EmployeeProdDB/templates/EmployeeProdDB/upload_csv.html

@@ -24,51 +24,7 @@
   </div>
 
   <div class="upload-table-cont top-cont">
-    <table id="input-file">
-      <!-- CHANGE TO FOR LOOP -->
-      <tr>
-        <td class="file-name">askjdfhasdf.csv</td>
-        <td><button type="submit" class="remove-button">Remove</button></td>
-      </tr>
-      <tr>
-        <td class="file-name">askjdfhasdf.csv</td>
-        <td><button type="submit" class="remove-button">Remove</button></td>
-      </tr>
-      <tr>
-        <td class="file-name" >askjdfhasdf.csv</td>
-        <td><button type="submit" class="remove-button">Remove</button></td>
-      </tr>      <tr>
-        <td class="file-name" >askjdfhasdf.csv</td>
-        <td><button type="submit" class="remove-button">Remove</button></td>
-      </tr>      <tr>
-        <td class="file-name" >askjdfhasdf.csv</td>
-        <td><button type="submit" class="remove-button">Remove</button></td>
-      </tr>      <tr>
-        <td class="file-name" >askjdfhasdf.csv</td>
-        <td><button type="submit" class="remove-button">Remove</button></td>
-      </tr>      <tr>
-        <td class="file-name" >askjdfhasdf.csv</td>
-        <td><button type="submit" class="remove-button">Remove</button></td>
-      </tr>      <tr>
-        <td class="file-name" >askjdfhasdf.csv</td>
-        <td><button type="submit" class="remove-button">Remove</button></td>
-      </tr>      <tr>
-        <td class="file-name" >askjdfhasdf.csv</td>
-        <td><button type="submit" class="remove-button">Remove</button></td>
-      </tr>      <tr>
-        <td class="file-name" >askjdfhasdf.csv</td>
-        <td><button type="submit" class="remove-button">Remove</button></td>
-      </tr>      <tr>
-        <td class="file-name" >askjdfhasdf.csv</td>
-        <td><button type="submit" class="remove-button">Remove</button></td>
-      </tr>      <tr>
-        <td class="file-name" >askjdfhasdf.csv</td>
-        <td><button type="submit" class="remove-button">Remove</button></td>
-      </tr>      <tr>
-        <td class="file-name" >askjdfhasdf.csv</td>
-        <td><button type="submit" class="remove-button">Remove</button></td>
-      </tr>
-    </table>
+
   </div>
 
   <div class="button-cont top-cont">