Cоздание, редактирование и удаление записей

Теперь добавим стили, создадим директорию static и подключим её в файле настроек settings.py:

STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR / 'static']

Затем создадим файл стилей static\base.css со следующим содержимым:

/* Задаёт отступ сверху и цвет страницы. */
body {
    padding-top: 50px;
    background-color: rgb(246, 246, 246);
}

/* Задаёт цвет заголовка таблицы. */
thead {
    background-color: rgb(240, 240, 240);
}

/* Задаёт цвет тела таблицы. */
tbody {
    background-color: rgb(252, 252, 252);
}

/* Задаёт размер шрифта таблицы. */
td {
    font-size: 14px;
}

/* Задаёт высоту строки таблицы. */
tr {
    line-height: 26px;
    min-height: 26px;
    height: 26px;
 }

/* Чтобы удалить ошибочное подчеркивание между символами сортировки. */
a {
    text-decoration: none;
}

/* Задаёт высоту текстовых полей формы редактирования книги. */
 .form-control-sm {
    line-height: 24px;
    min-height: 24px;
    height: 24px;
 }

/* Задаёт цвет шрифта для прочитанной книги. */
.grey-text {
    color: rgb(192, 192, 192);
}

/* Задаёт ширину кнопок Прочитана и Не прочитана. */
.status-button {
    width: 107px;
}

/* Задаёт ширину кнопок Изменить, Удалить, Сохранить и Отменить. */
.any-button {
    width: 80px;
}

/* Задаёт размер шрифта кнопок в таблице. */
.table-button {
    font-size: 13px;
}

Подключим файл стилей в шаблоне templates\base.html:

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{% block title %}Books{% endblock title %}</title>
    <link rel="stylesheet" href="{% static 'base.css' %}">
</head>

Добавим классы в шаблон templates\partial_book_detail.html:

<tr class="{% if book.read %}grey-text{% endif %}">
    <!-- Ячейка номера книги -->

Если книга прочитана, класс grey-text изменит цвет шрифта в строке на серый.

Добавим классы для кнопок:

                                <!-- Кнопка "Unread" -->
                                <button class="disbtn table-button status-button"
...
                                <!-- Кнопка "Read" -->
                                <button class="disbtn table-button status-button"
...
                                <!-- Кнопка "Edit" -->
                                <button class="disbtn table-button any-button"
...
                                <!-- Кнопка "Delete" -->
                                <button class="disbtn table-button any-button"

Добавим классы для кнопок в шаблон templates\partial_book_update_form.html:

                    <tr class="{% if book.read %}grey-text{% endif %}">
...
                                <!-- Кнопка "Unread" -->
                                <button class="table-button status-button" disabled>
...
                                <!-- Кнопка "Read" -->
                                <button class="table-button status-button" disabled>
...
                            <!-- Кнопка "Save" -->
                            <button type="submit"
                                    class="table-button any-button"
...
                            <!-- Кнопка "Cancel" -->
                            <button class="table-button any-button"

Добавим класс form-control-sm для текстовых полей, в файл books\forms.py:

class BookEditForm(BookCreateForm):
    title  = CharField(required=False, widget=TextInput(attrs={"class":"form-control-sm"}))
    author = CharField(required=False, widget=TextInput(attrs={"class":"form-control-sm"}))
    price  = CharField(required=False, widget=TextInput(attrs={"class":"form-control-sm"}))