Styled book form and added an ux dropzone component.

templates/book/edit.html.twig

@@ -7,7 +7,6 @@
 
     {{ include('book/_form.html.twig', {'button_label': 'Update'}) }}
 
-    <a href="{{ path('app_book_index') }}">back to list</a>
 
     {{ include('book/_delete_form.html.twig') }}
 {% endblock %}

templates/book/index.html.twig

@@ -3,29 +3,40 @@
 {% block title %}Book index{% endblock %}
 
 {% block body %}
-    <h1>Book index</h1>
+    <div class="d-flex flex-row justify-content-between align-items-center">
+        <div>
+            <h1>Book index</h1>
+        </div>
+        <div>
+            <a href="{{ path('app_book_new') }}" class="btn btn-primary">Create new</a>
+        </div>
+    </div>
+
 
     <table class="table">
         <thead>
-            <tr>
-                <th>Cover</th>
-                <th>Id</th>
-                <th>Title</th>
-                <th>Language</th>
-                <th>Description</th>
-                <th>Publisher</th>
-                <th>Publish_date</th>
-                <th>actions</th>
-            </tr>
+        <tr>
+            <th>Cover</th>
+            <th>Id</th>
+            <th>Title</th>
+            <th>Language</th>
+            <th>Description</th>
+            <th>Publisher</th>
+            <th>Publish_date</th>
+            <th>actions</th>
+        </tr>
         </thead>
         <tbody>
         {% for book in books %}
             <tr>
-                <td>{%  if file_exists(asset('book_covers/cover_' ~ book.id ~ '.jpg')) %}<img class="img-thumbnail" style="max-width: 80px" src="{{ asset('book_covers/cover_' ~ book.id ~ '.jpg' ) }}" /> {% endif %}</td>
+                <td>{% if file_exists(asset('book_covers/cover_' ~ book.id ~ '.jpg')) %}<img class="img-thumbnail"
+                                                                                             style="max-width: 80px"
+                                                                                             src="{{ asset('book_covers/cover_' ~ book.id ~ '.jpg' ) }}" /> {% endif %}
+                </td>
                 <td>{{ book.id }}</td>
                 <td>{{ book.Title }}</td>
                 <td>{{ book.language }}</td>
-                <td>{{ book.description }}</td>
+                <td>{{ book.description | slice(0, 200) }}</td>
                 <td>{{ book.publisher }}</td>
                 <td>{{ book.publishDate ? book.publishDate|date('Y-m-d') : '' }}</td>
                 <td>
@@ -40,6 +51,4 @@
         {% endfor %}
         </tbody>
     </table>
-
-    <a href="{{ path('app_book_new') }}">Create new</a>
 {% endblock %}

templates/book/new.html.twig

@@ -9,7 +9,6 @@
             {{ include('book/_form.html.twig') }}
         </book>
     </div>
-    <a href="{{ path('app_book_index') }}">back to list</a>
 {% endblock %}
 
 {% block javascripts %}

templates/book/show.html.twig

@@ -21,7 +21,7 @@
         </tr>
         <tr>
             <th>Description</th>
-            <td>{{ book.description }}</td>
+            <td>{{ book.description | nl2br  }}</td>
         </tr>
         <tr>
             <th>Publisher</th>
@@ -39,7 +39,7 @@
         <tr>
             <th>Id</th>
             <th>File name</th>
-            <th>File size</th>
+            <th class="text-end">File size</th>
             <th>Extension</th>
             <th>Download</th>
             <th>Remove</th>
@@ -50,7 +50,7 @@
             <tr>
                 <td>{{ file.id }}</td>
                 <td>{{ file.fileName }}</td>
-                <td>{{ file.fileSize | bytes_format }}</td>
+                <td class="text-end">{{ file.fileSize | bytes_format }}</td>
                 <td>{{ file.extension }}</td>
                 <td><a href="{{ path('app_file_download', {id: file.id }) }}" class="link-secondary">download</a></td>
                 <td><a href="{{ path('app_file_delete', {id: file.id}) }}" class="link-danger">remove</a></td>