improved recipe book design

cookbook/forms.py

@@ -237,7 +237,9 @@ class ImportRecipeForm(forms.ModelForm):
 class RecipeBookForm(forms.ModelForm):
     class Meta:
         model = RecipeBook
-        fields = ('name',)
+        fields = ('name', 'icon', 'description')
+
+        widgets = {'icon': EmojiPickerTextInput}
 
 
 class MealPlanForm(forms.ModelForm):

cookbook/migrations/0038_auto_20200502_1259.py

@@ -0,0 +1,23 @@
+# Generated by Django 3.0.5 on 2020-05-02 10:59
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('cookbook', '0037_userpreference_search_style'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='recipebook',
+            name='description',
+            field=models.TextField(blank=True),
+        ),
+        migrations.AddField(
+            model_name='recipebook',
+            name='icon',
+            field=models.CharField(blank=True, max_length=16, null=True),
+        ),
+    ]

cookbook/models.py

@@ -195,6 +195,8 @@ class RecipeImport(models.Model):
 
 class RecipeBook(models.Model):
     name = models.CharField(max_length=128)
+    description = models.TextField(blank=True)
+    icon = models.CharField(max_length=16, blank=True, null=True)
     created_by = models.ForeignKey(User, on_delete=models.CASCADE)
 
     def __str__(self):

cookbook/templates/books.html

@@ -16,46 +16,48 @@
     </div>
     <br/>
     <br/>
-
     {% for b in book_list %}
         <div class="row">
-            <div class="col col-md-10">
+            <div class="col-12">
+                <div class="card" style="margin-top: 2px">
+                    <div class="card-body">
+                        <h5 class="card-title">{% if b.book.icon %}{{ b.book.icon }} {% endif %}{{ b.book.name }}</h5>
+                        {% if b.book.description %}
+                            <p class="card-text">{{ b.book.description }}</p>
+                        {% endif %}
                         <a data-toggle="collapse" href="#collapse_{{ b.book.pk }}" role="button" aria-expanded="false"
-                   aria-controls="collapse_{{ b.book.pk }}"><h4>{{ b.book.name }}</h4></a>
+                           aria-controls="collapse_{{ b.book.pk }}" class="card-link">{% trans 'Toggle Recipes' %}</a>
+                        <a href="{% url 'edit_recipe_book' b.book.pk %}" class="card-link">{% trans 'Edit' %}</a>
+                        <a href="{% url 'delete_recipe_book' b.book.pk %}" class="card-link">{% trans 'Delete' %}</a>
                     </div>
-            <div class="col col-md-2" style="text-align: right">
-                <h4>
-
-                    <a href="{% url 'edit_recipe_book' b.book.pk %}"> <i class="fas fa-pencil-alt"></i></a>
-                    <a href="{% url 'delete_recipe_book' b.book.pk %}"><i class="fas fa-trash-alt"></i></a>
-                </h4>
-            </div>
-            <hr/>
-        </div>
-
-        <div class="row">
-            <div class="col col-md-12">
                     <div class="collapse" id="collapse_{{ b.book.pk }}">
                         {% if b.recipes %}
-                        <ul>
+                            <ul class="list-group list-group-flush">
                                 {% for r in b.recipes %}
+                                    <li class="list-group-item">
                                         <div class="row">
-                                    <div class="col col-md-10">
-                                        <li><a href="{% url 'view_recipe' r.recipe.pk %}">{{ r.recipe.name }}</a></li>
+                                            <div class="col-10">
+                                                <a href="{% url 'view_recipe' r.recipe.pk %}">{{ r.recipe.name }}</a>
                                             </div>
-                                    <div class="col col-md-2" style="text-align: right">
-                                        <a href="{% url 'delete_recipe_book_entry' r.pk %}"><i class="fas fa-trash-alt"></i></a>
+                                            <div class="col-2" style="text-align: right">
+                                                <a href="{% url 'delete_recipe_book_entry' r.pk %}"
+                                                   class="pull-right"><i class="fas fa-trash-alt"></i></a>
                                             </div>
                                         </div>
+                                    </li>
                                 {% endfor %}
                             </ul>
                         {% else %}
+                            <div class="card-body">
+                                <p>
                                     {% trans 'There are no recipes in this book yet.' %}
+                                </p>
+                            </div>
                         {% endif %}
                     </div>
                 </div>
             </div>
-        <br/>
+        </div>
     {% endfor %}
 
 {% endblock %}

cookbook/views/edit.py

@@ -14,7 +14,7 @@ from django.utils.translation import gettext as _
 from django.views.generic import UpdateView
 
 from cookbook.forms import ExternalRecipeForm, KeywordForm, StorageForm, SyncForm, InternalRecipeForm, CommentForm, \
-    MealPlanForm, UnitMergeForm, IngredientMergeForm, IngredientForm
+    MealPlanForm, UnitMergeForm, IngredientMergeForm, IngredientForm, RecipeBookForm
 from cookbook.helper.permission_helper import group_required, GroupRequiredMixin
 
 from cookbook.helper.permission_helper import OwnerRequiredMixin
@@ -255,7 +255,7 @@ class ImportUpdate(GroupRequiredMixin, UpdateView):
 class RecipeBookUpdate(OwnerRequiredMixin, UpdateView):
     template_name = "generic/edit_template.html"
     model = RecipeBook
-    fields = ['name']
+    form_class = RecipeBookForm
 
     def get_success_url(self):
         return reverse('view_books')