Skip to content

J
JARVIS
Commit 85fb1e57 authored by Jacob Dylan D. Vitug's avatar Jacob Dylan D. Vitug
Browse files
Options

edit position screen done

parent becef2df
Hide whitespace changes
Inline Side-by-side
Showing with 541 additions and 2 deletions
IPSystemTOPC/EmployeeProdDB/static/css/base.css
View file @ 85fb1e57
......@@ -15,12 +15,12 @@ body {
}
.footer {
position: absolute;
/* left: 0; */
bottom: 0px;
width: 100%;
height: 2.5rem;
text-align: center;
margin-top: 10px;
}
.base-logo {
......
IPSystemTOPC/EmployeeProdDB/static/css/edit_position.css
View file @ 85fb1e57
.top-cont {
margin: 30px 50px 0px;
}
body {
font-family: Helvetica;
}
.centercont {
margin: auto;
display: flex;
justify-content: center;
}
h2.bold {
margin-top: 30px;
font-weight: bold;
}
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1;
color: #212529;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
input[type="file"] {
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 0.8rem;
font-weight: 400;
line-height: 1;
border-radius: 0.25rem;
margin-left: 25px;
}
input[type="radio"] {
padding: 0.375rem 0.75rem;
font-size: 0.8rem;
border-radius: 0.25rem;
margin-left: 25px;
margin-right: 5px;
transform: scale(1.5);
}
.top-cont {
margin: 30px 50px 0px;
}
.profile-info-cont {
margin-top: 30px;
}
.profile-info-form {
border: none;
}
/* button{
border-radius: 4px;
} */
.input-dimension input,
select {
border: 1px solid black;
border-radius: 4px;
width: 60%;
}
.label-row {
width: 100%;
display: flex;
justify-content: space-between;
}
.label-row input,
select {
display: flex;
width: 260px;
}
.input-row {
width: 100%;
display: flex;
width: 100%;
justify-content: space-evenly;
}
.text-input-grouping {
display: flex;
flex-direction: column;
}
.text-input-grouping span {
color: grey;
font-size: 13px;
font-style: italic;
}
.text-input-grouping p {
font-size: 18px;
}
.box {
width: 260px;
background-color: white;
height: 60px;
}
.sex-input {
width: 260px;
display: flex;
}
.sex-input input {
display: flex;
}
.sex-input label {
display: block;
margin: 0 auto;
width: 150px;
}
.sex-input input[type="radio"] {
line-height: 30px;
vertical-align: bottom;
width: 15px;
margin-left: 15px;
}
.button-delete {
display: flex;
justify-content: end;
}
.button-delete button {
border: 1px solid white;
background-color: #8b0000;
color: white;
margin-top: 15px;
display: flex;
justify-content: center;
}
.button-dim button{
border-radius: 4px;
padding: 5px 10px;
width: 150px;
}
.button-cancel {
border: 1px solid black;
background-color: white;
/* margin-right: 15px; */
}
.button-save {
border: 1px solid white;
background-color: #00802b;
color: white;
margin-right: 15px;
}
.profile-options {
display: flex;
justify-content: end;
flex-direction: column;
}
.bottom-cont {
display: flex;
align-items: flex-end;
flex-grow: 1;
}
.long-textbox {
width: 660px;
}
.vert-line {
border: 0.5px solid grey;
height: 80%;
width: 0.3px;
margin-top: 5px;
margin-bottom: 5px;
opacity: 50%;
}
.hori-line {
border: 0.5px solid grey;
width: 100%;
height: 0.3px;
margin-top: 15px;
}
.invisible-box {
border: 0.5px solid white;
background-color: white;
width: 260px;
height: 56px;
/* margin-top: 15px; */
}
.search-add-cont {
width: 560px;
display: flex;
align-items: left;
justify-content: space-between;
margin-bottom: 10px;
}
.search-and-add-cont button {
border-radius: 4px;
border: 1px solid black;
padding: 5px 10px;
}
.searchbar {
width: 75%;
/* padding-left: 30px; */
}
.searchbar input {
border-radius: 4px;
border: 1px solid black;
padding: 5px 10px;
/* margin-right: 20px; */
width: 350px;
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 {
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 black;
padding: 5px 10px;
background-color: white;
color: black;
width: max-content;
margin-right: 15px;
}
.button-remove button:hover {
border: 1px solid white;
background-color: #8b0000;
color: white;
}
#participant {
width: 100%;
margin-top: 15px;
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 td:nth-child(1) {
width: 10%;
text-align: center;
}
#participant td:nth-child(3) {
border-left: unset;
width: 20%;
}
#participant td:nth-child(2) {
border-right: unset;
width: 70%;
}
#participant tr:nth-child(even) {
background-color: #f2f2f2;
}
#participant tr:hover {
background-color: #ddd;
}
#td-align td {
display: flex;
/* flex-direction: column; */
justify-content: space-between;
}
.left-cont {
width: 660px;
height: auto;
margin-right: 10px;
}
#cell-remove button {
width: 200px;
border-left: 0px white;
align-items: end;
}
.table-cont {
height: 200px;
overflow: hidden;
overflow-y: scroll;
}
.save-cancel-cont {
/* display: flex; */
/* flex-direction: column; */
}
\ No newline at end of file
IPSystemTOPC/EmployeeProdDB/templates/EmployeeProdDB/edit_position.html
View file @ 85fb1e57
{% extends 'EmployeeProdDB/base.html' %} {% load static %} {% block content %}
<html lang="en">
<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 rel="stylesheet" href="{% static 'css/edit_position.css' %}" />
</head>
{% endblock %}
\ No newline at end of file
<body>
<div class="top-cont">
<div class="header">
<h2 class="bold">Create Position</h2>
</div>
<main class="profile-info-cont">
<form method="POST" action="" class="profile-info-form input-dimension">
{% csrf_token %}
<div>
<div class="row g-0">
<div class="">
<div class="label-row">
<div class="text-input-grouping">
<label for="name" class="">Name:</label>
<div class="long-textbox">
<input type="text" style="width: 660px;" name="name" required />
</div>
</div>
<div class="text-input-grouping ">
<div class="invisible-box">
</div>
</div>
</div>
<div class="label-row">
<div class="text-input-grouping">
<label for="divhead" class="">Division Head Name:</label>
<div class="input-row">
<input type="text" style="width: 660px;" name="divhead" required />
</div>
</div>
<d<div class="text-input-grouping ">
<div class="invisible-box">
</div>
</div>
<div class="hori-line"></div>
<div class="text-input-grouping">
<p>Assign Participant/s <span>Only Employee Profiles with no position assigned will appear</span></p>
</div>
</div>
</div>
</div>
<div class="position-buttons-cont">
<!-- left side for the table -->
<div class="left-cont">
<!-- search bar cont -->
<div class="search-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="table-cont">
<!-- table -->
<table class="participant-table-cont" id="participant">
<tr>
<td>1</td>
<td>
Jacob
</td>
<td>
<div class="button-remove cell-remove"><button >Remove</button></div>
</td>
</tr><tr>
<td>1</td>
<td id="td-align">
Name
</td>
<td>
<div class="button-remove"><button >Remove</button></div>
</td>
</tr>
<tr>
<td>1</td>
<td>
Jacob
</td>
<td>
<div class="button-remove cell-remove"><button >Remove</button></div>
</td>
</tr>
<tr>
<td>1</td>
<td>
Jacob
</td>
<td>
<div class="button-remove cell-remove"><button >Remove</button></div>
</td>
</tr>
<tr>
<td>1</td>
<td>
Jacob
</td>
<td>
<div class="button-remove cell-remove"><button >Remove</button></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 button-dim">
<div class="save-cancel-cont">
<!-- <div > -->
<button class="button-save"
name="Save"
type="submit"
>
Save Changes
</button>
<!-- </div> -->
<!-- <div -->
<button class="button-cancel"
name="Save"
type="submit"
>
Cancel
</button>
<!-- </div> -->
</div>
<div>
<div class="button-delete">
<button
name="Delete"
type="submit"
>
Delete Position
</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>
</form>
</main>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
crossorigin="anonymous"
></script>
</body>
{% endblock %}
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment