mvp ready

This commit is contained in:
= 2021-02-17 15:47:45 +03:00
parent 8024d38e09
commit 7d240651f6
2 changed files with 195 additions and 0 deletions

View 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
View 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;
}