mvp ready
This commit is contained in:
parent
8024d38e09
commit
7d240651f6
74
main/templates/pages/work.html
Normal file
74
main/templates/pages/work.html
Normal file
@ -0,0 +1,74 @@
|
||||
{% extends 'base/base.html' %}
|
||||
|
||||
{% load static %}
|
||||
|
||||
{% block title %}{{ pagename }}{% endblock %}
|
||||
|
||||
{% block heading %}Управление{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<link rel="stylesheet" href="{% static 'main/css/work.css' %}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-md">
|
||||
|
||||
<div class="new-section">
|
||||
<p class="row page-description">Основаная информация о странице</p>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center new-section">
|
||||
<div class="col-10">
|
||||
<h6 class="table-title">Список сотрудников с правами инженера</h6>
|
||||
<table class="light-table">
|
||||
<thead>
|
||||
<th>ID</th>
|
||||
<th>email</th>
|
||||
<th>Expiration Date</th>
|
||||
<th>Name(link to profile)</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>big_boss123@example.ru</td>
|
||||
<td>19:30 18.02.21</td>
|
||||
<td><a href="#">Иван Иванов</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>gachi_cool456@example.ru</td>
|
||||
<td>21:00 18.02.21</td>
|
||||
<td><a href="#">Пётр Петров</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center new-section">
|
||||
<div class="col-5">
|
||||
<div class="info">
|
||||
<div class="info-row">
|
||||
<div class="info-target">инженеров: </div>
|
||||
<div class="info-quantity">
|
||||
<div class="status-circle-small light-green"></div>
|
||||
<span class="info-quantity-value">13</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-target">легких агентов:</div>
|
||||
<div class="info-quantity">
|
||||
<div class="status-circle-small light-yellow"></div>
|
||||
<span class="info-quantity-value">22</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<button class="request-acess-button default-button">Получить права инженера</button>
|
||||
<button class="hand-over-acess-button default-button">Сдать права инженера</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
121
static/main/css/work.css
Normal file
121
static/main/css/work.css
Normal file
@ -0,0 +1,121 @@
|
||||
/* .all {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
} */
|
||||
|
||||
/* .menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: inline-flex;
|
||||
width: 150px;
|
||||
height: 100vh;
|
||||
background: #45729C;
|
||||
} */
|
||||
|
||||
.page-title {
|
||||
margin: auto;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-description {
|
||||
display: block;
|
||||
margin: auto;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.new-section {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: calc(100% - 150px);
|
||||
/* margin-left: calc(150px);
|
||||
margin-right: calc((100vw - 150px) / 2); */
|
||||
}
|
||||
|
||||
.light-table {
|
||||
font-weight: bold;
|
||||
margin: auto;
|
||||
margin-top: 10px;
|
||||
font-size: 1.2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.light-table th {
|
||||
background: #515A63;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.light-table td {
|
||||
padding: 5px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.light-table tr:nth-child(odd) {
|
||||
background: #93A2AF;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
margin: 5px auto;
|
||||
height: 53px;
|
||||
}
|
||||
|
||||
.info-target {
|
||||
width: 200px;
|
||||
display: inline-block;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.info-quantity {
|
||||
max-width: 200px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
.light-green {
|
||||
background: #83DC87;
|
||||
}
|
||||
|
||||
.light-yellow {
|
||||
background: #F3EB3C;
|
||||
}
|
||||
|
||||
.info-quantity-value {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.status-circle-small {
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.request-acess-button,
|
||||
.hand-over-acess-button {
|
||||
font-size: 1.2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.default-button {
|
||||
border: none;
|
||||
display: block;
|
||||
margin: 5px auto;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
background: #3B91D4;
|
||||
color: white;
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user