add css styles

SergeiNaum · Mar 14, 2024 · 1c7456b · 1c7456b
1 parent 4f7f093
commit 1c7456b
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 18 deletions.
diff --git a/Readme.md b/Readme.md
@@ -1,4 +1,4 @@
-
+[![Lint Code](https://github.com/SergeiNaum/electroservice/actions/workflows/linter_check.yml/badge.svg)](https://github.com/SergeiNaum/electroservice/actions/workflows/linter_check.yml)
 # Test task for the position of middle python backend developer from Elektrostroyservice company
 
 ## Quick start

diff --git a/app/static/css/style.css b/app/static/css/style.css
@@ -0,0 +1,17 @@
+/* Стили для body */
+body.bg-main {
+    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
+    font-family: 'Montserrat', sans-serif;
+}
+
+header.bg_main {
+    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
+}
+
+footer.bg_main {
+    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
+}
+
+thead.bg_main th {
+   background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
+}
diff --git a/app/templates/base.html b/app/templates/base.html
@@ -11,7 +11,7 @@
       <title>{{data.title}}</title>
   </head>
 
-<body>
+<body class="bg-main">
 
     <header class="flex-shrink-0">
       {% include 'components/navbar.html' %}

diff --git a/app/templates/components/footer.html b/app/templates/components/footer.html
@@ -1,4 +1,4 @@
-  <footer class="bg-light py-3 mt-5">
+  <footer class="bg_main  py-3 mt-5">
     <div class="container">
       <div class="row">
         <div class="col-md-8 text-center text-md-start">

diff --git a/app/templates/components/navbar.html b/app/templates/components/navbar.html
@@ -1,5 +1,5 @@
 
-  <header>
+  <header class="bg_main">
     <nav class="navbar navbar-expand-lg navbar-light ">
       <div class="container">
 

diff --git a/app/templates/index.html b/app/templates/index.html
@@ -4,12 +4,12 @@
 
 <div class="container mt-4">
     {% if current_user.is_authenticated %}
-        <a class="btn btn-primary mb-3" href="{{ url_for('main.create') }}">Добавить расход</a>
+    <a class="btn btn-primary mb-3" href="{{ url_for('main.create') }}">Добавить расход</a>
     {% endif %}
 
     <h3>Сводная таблица</h3>
     <table class="table table-striped table-hover">
-        <thead>
+        <thead class="bg_main">
         <tr>
             <th>П/п</th>
             <th>Дата</th>
@@ -19,18 +19,33 @@ <h3>Сводная таблица</h3>
         </thead>
         <tbody class="lign-items-center">
 
-            {% if data.expense_all %}
-            {% for expense in data.expense_all %}
-            <tr>
-                <td class="align-middle">{{ expense.id }}</td>
-                <td class="align-middle">{{ expense.title }}</td>
-                <td class="align-middle">{{ expense.content }}</td>
-                <td class="align-middle">{{ expense.price }} р.</td>
-                <td><a href="{{ url_for('main.expense_detail', expense_id=expense.id) }}" class="btn btn-primary align-middle">Редактировать</a></td>
-                <td><a href="{{ url_for('main.delete', expense_id=expense.id) }}" class="btn btn-danger align-middle">Удалить</a></td>
-            </tr>
-            {% endfor %}
-            {% endif %}
+        {% if data.expense_all %}
+        {% for expense in data.expense_all %}
+        <tr>
+            <td class="align-middle">{{ expense.id }}</td>
+            <td class="align-middle">{{ expense.title }}</td>
+            <td class="align-middle">{{ expense.content }}</td>
+            <td class="align-middle">{{ expense.price }} р.</td>
+            <td><a href="{{ url_for('main.expense_detail', expense_id=expense.id) }}"
+                   class="btn btn-primary align-middle">Редактировать</a></td>
+            <td><a href="{{ url_for('main.delete', expense_id=expense.id) }}" class="btn btn-danger align-middle">Удалить</a>
+            </td>
+        </tr>
+        {% endfor %}
+
+        {% else %}
+        {% for i in range(16) %}
+        <tr>
+            <td class="align-middle">-</td>
+            <td class="align-middle">-</td>
+            <td class="align-middle">-</td>
+            <td class="align-middle">-</td>
+            <td></td>
+            <td></td>
+        </tr>
+        {% endfor %}
+
+        {% endif %}
 
         </tbody>
     </table>