Merge branch 'hotfix/control_page_design' into 'develop'

Улучшение дизайна сайта.

See merge request 2020-2021/online/s101/group-02/access_controller!87

data.json

@@ -22,8 +22,9 @@
     "pk": 1,
     "fields": {
       "name": "ZendeskAdmin",
-      "user": 1,
-      "role": "admin"
+      "user": 3,
+      "role": "admin",
+      "user_id": 1
     }
   },
   {

main/templates/base/base.html

@@ -19,6 +19,8 @@
       user-select: none;
     }
 
+
+
     @media (min-width: 768px) {
       .bd-placeholder-img-lg {
         font-size: 3.5rem;

main/templates/pages/adm_ruleset.html

@@ -39,10 +39,10 @@
     <div class="row justify-content-center new-section">
 
       <div class="col-10">
-        <h6 class="table-title">Список сотрудников</h6>
+        <h3 class="py-4 text-center font-weight-bold">Список сотрудников</h3>
 
         {% block table %}
-        <table class="table table-dark light-table">
+        <table class="table table-dark">
 
             <thead>
             <th>
@@ -71,7 +71,7 @@
         <div class="info">
 
           <div class="info-row">
-            <div class="info-target">Инженеров:</div>
+            <div class="info-target px-4"><h6>Инженеров:</h6></div>
             <div class="info-quantity">
               <div class="status-circle-small light-green"></div>
               <span class="info-quantity-value">{{ engineers }}</span>
@@ -79,7 +79,7 @@
           </div>
 
           <div class="info-row">
-            <div class="info-target">Легких агентов:</div>
+            <div class="info-target px-4"><h6>Легких агентов:</h6></div>
             <div class="info-quantity">
               <div class="status-circle-small light-yellow"></div>
               <span class="info-quantity-value">{{ light_agents }}</span>
@@ -93,11 +93,11 @@
       {% block buttons %}
       <div class="col-5">
 
-        <button type="submit" name="engineer" class="request-acess-button default-button">
+        <button type="submit" name="engineer" class="btn default-button btn-warning btn-block btn-sm py-3">
           Назначить выбранных на роль инженера
         </button>
 
-        <button type="submit" name="light_agent" class="hand-over-acess-button default-button">
+        <button type="submit" name="light_agent" class="btn default-button btn-warning btn-block btn-sm py-3">
           Назначить выбранных на роль легкого агента
         </button>
       </div>

main/templates/pages/profile.html

@@ -23,7 +23,7 @@
 {% block content %}
 <br>
 <div class="row px-4 py-4">
-  <div class="col-auto">
+  <div class="col-auto px-4 py-4">
     <div class="container">
       <img
         src="{% if profile.image %}{{ profile.image }}{% else %}{% static 'no_avatar.png' %}{% endif %}"
@@ -31,7 +31,9 @@
         alt="Нет изображения"
       >
     </div>
-    <a href="{%url 'password_change' %}">Сменить пароль</a>
+    <div class="px-3 py-5">
+    <a href="{%url 'password_change' %}" class="btn btn-info">Сменить пароль</a>
+    </div>
   </div>
   <div class="col">
     <h4><span class="badge bg-secondary text-light">Имя пользователя</span></h4> <h5><strong>{{ profile.name }}</strong></h5>
@@ -44,7 +46,7 @@
       {% elif profile.custom_role_id == ZENDESK_ROLES.light_agent %}
         <h5><strong>light_agent</strong></h5>
       {% else %}
-        <h5><strong><small class="text-muted">None</small></strong></h5>
+        <h5><strong><small class="text-muted">Без роли</small></strong></h5>
       {% endif %}
 
   </div>
@@ -52,7 +54,7 @@
 <br>
 <div align="center" >
   <form action="">
-    <a href="{% url 'work' profile.user.id %}" class="btn btn-primary btn-lg">Запросить права доступа</a>
+    <a href="{% url 'work' profile.user.id %}" type="submit" class="btn default-button btn-success btn-lg px-4 py-3">Запросить права доступа</a>
   </form>
 </div>
 {% endblock %}

main/templates/pages/statistic.html

@@ -7,21 +7,21 @@
 {% block heading %} Страницы просмотра статистики{% endblock %}
 
 {% block content%}
-<div class="mt-5">
+<div class="mt-5 py-4">
   <div class="container-fluid" style="font-size:2rem">
     <form method="post">
       {% csrf_token %}
       <div class="row g-3">
-        <div class="col-auto">
-          {{ form.email.label }}
+        <div class="col-auto p-2">
+          <h4 class="py-1">{{ form.email.label }}</h4>
         </div>
         <div class="col-auto mt-4">
           {{ form.email }}
         </div>
       </div>
       <div class="row g-3 mt-4">
-        <div class="col-auto">
-          {{ form.interval.label }}
+        <div class="col-auto p-2">
+          <h4 class="py-1">{{ form.interval.label }}</h4>
         </div>
         <div class="col-auto">
           {% for radio in form.interval%}
@@ -33,8 +33,8 @@
         </div>
       </div>
       <div class="row g-3 mt-4">
-        <div class="col-auto">
-          {{ form.display_format.label }}
+        <div class="col-auto p-2">
+          <h4 class="py-1">{{ form.display_format.label }}</h4>
         </div>
         <div class="col-auto">
           {% for radio in form.display_format%}
@@ -46,8 +46,8 @@
         </div>
       </div>
       <div class="row g-3 mt-4">
-        <div class="col-auto">
-          {{ form.range_start.label}}
+        <div class="col-auto p-2">
+          <h4 class="py-1">{{ form.range_start.label}}</h4>
         </div>
         <div class="col-auto">
           <div class='col-sm-7'>
@@ -56,8 +56,8 @@
         </div>
       </div>
       <div class="row g-3 mt-4">
-        <div class="col-auto">
-          {{ form.range_end.label}}
+        <div class="col-auto p-2">
+          <h4 class="py-1">{{ form.range_end.label}}</h4>
         </div>
         <div class="col-auto">
           <div class='col-sm-7'>
@@ -65,9 +65,9 @@
           </div>
         </div>
       </div>
-      <div class="form-row text-center">
+      <div class="form-row text-center py-5">
         <div class="col-12">
-          <button type="submit" class="btn btn-outline-primary">Посмотреть статистику</button>
+          <button type="submit" class="btn default-button btn-info py-3 px-5">Посмотреть статистику</button>
         </div>
       </div>
     </form>

main/templates/pages/work.html

@@ -16,66 +16,73 @@
 {% endblock %}
 
 {% block content %}
-<div class="container-md">
 
-    <div class="new-section">
-        <p class="row page-description">Свободных Мест: {{ licences_remaining }}</p>
-    </div>
+<p class="row page-description">Свободных Мест: {{ licences_remaining }}</p>
 
-    <div class="row justify-content-center new-section">
-        <div class="col-10">
-            <h6 class="table-title">Список сотрудников с правами инженера</h6>
-            <table class="light-table">
-                <thead>
-                    <th>Email</th>
-                    <th>Name</th>
-                </thead>
-                <tbody>
-                    {% for engineer in engineers %}
-                        <tr>
-                            <td>{{ engineer.email }}</td>
-                            <td>{{ engineer.name }}</td>
-                        </tr>
-                    {% endfor %}
-               </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">{{ engineers|length }}</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">{{ agents|length }}</span>
-                    </div>
-
-                </div>
-            </div>
-        </div>
-        <div class="col-5">
-            <a href="/work/become_engineer" class="request-acess-button default-button">Получить права инженера</a>
-            <a href="/work/hand_over" class="hand-over-acess-button default-button">Сдать права инженера</a>
-        </div>
-        <div class="col-10">
-          <form method="post" action="{% url 'work_get_tickets' %}">
-            {% csrf_token %}
-            {{ get_tickets_form.count_tickets }}
-            <button type="submit" class="default-button">Взять тикеты в работу</button>
-          </form>
-        </div>
-      {% for message in messages %}
-  <script>create_notification('{{message}}','','{{message.tags}}',2000)</script>
-  {% endfor %}
-    </div>
+<div class="row justify-content-center new-section">
+  <div class="col-10 py-3">
+    <h3 class="py-4 text-center font-weight-bold">Список сотрудников с правами инженера</h3>
+    <table class="table table-dark">
+      <thead>
+      <th>Email</th>
+      <th>Name</th>
+      </thead>
+      <tbody>
+      {% for engineer in engineers %}
+      <tr>
+        <td>{{ engineer.email }}</td>
+        <td>{{ engineer.name }}</td>
+      </tr>
+      {% endfor %}
+      </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 px-4"><h6>инженеров:</h6></div>
+        <div class="info-quantity">
+          <div class="status-circle-small light-green"></div>
+          <span class="info-quantity-value">{{ engineers|length }}</span>
+        </div>
+      </div>
+      <div class="info-row">
+        <div class="info-target px-4"><h6>легких агентов:</h6></div>
+        <div class="info-quantity">
+          <div class="status-circle-small light-yellow"></div>
+          <span class="info-quantity-value">{{ agents|length }}</span>
+        </div>
+
+      </div>
+    </div>
+  </div>
+  <div class="col-5 mb-3 py-1">
+    <div class="row mb-2">
+      <div class="col">
+        <a href="/work/become_engineer" class="btn btn-success btn-block py-3">Получить права инженера</a>
+      </div>
+    </div>
+    <div class="row mb-2 py-1">
+      <div class="col">
+        <a href="/work/hand_over" class="btn  btn-danger btn-block py-3">Сдать права инженера</a>
+      </div>
+    </div>
+
+    <form class="row g-3 align-items-center" method="GET" action="/work/get_tickets">
+      <div class="col-2">
+        <input class="form-control" type="number" min="1" value="1" name="count_tickets">
+      </div>
+      <div class="col-10">
+        <button type="submit" class="btn default-button btn-warning btn-block btn-sm py-3">Взять тикеты в работу</button>
+      </div>
+    </form>
+  </div>
+</div>
+
+{% for message in messages %}
+<script>create_notification('{{message}}','','{{message.tags}}',5000)</script>
+{% endfor %}
 {% endblock %}
 

static/main/js/control.js

@@ -21,9 +21,7 @@ class ModelUserTableRow extends React.Component {
             name="users"
           />
         </td>
-        <td>
-          <a href="#">{this.props.user.name}</a>
-        </td>
+        <td>{this.props.user.name}</td>
         <td>{this.props.user.user.email}</td>
         <td>{this.props.user.zendesk_role}</td>
       </tr>