issue #194

app/templates/book/collection_view.html

@@ -21,7 +21,7 @@
 <div class="md:hidden flex dark:text-white p-3 justify-between">
   <!-- prettier-ignore -->
   <svg data-drawer-target="tab-content-slide" data-drawer-toggle="tab-content-slide" aria-controls="Slider" class="w-6 h-6 -rotate-90 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
-  <p class="truncate">{{book.label}}</p>
+  <p class="break-words">{{book.label}}</p>
   <!-- prettier-ignore -->
   <a href="{{ url_for('book.settings', book_id=book.id) }}" type="button" class="ml-2"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> </svg> </a>
 </div>
@@ -128,39 +128,37 @@
     {% include 'book/components/tab_content_slider.html' %}
   </div>
   <!-- Here start book-preview on right side-->
-  <div class="md:hidden w-full p-3 px-4 md:w-4/6 dark:text-white dark:bg-gray-500 bg-gray-400 {% if book.active_version.active_children %} hidden {% endif %}">
-    <div class="text-center text-xs ">
-      Editing a book is not available on mobile (yet). Please browse from your desktop to access all the features.
+  <div
+    class="md:hidden w-full p-3 px-4 md:w-4/6 dark:text-white dark:bg-gray-500 bg-gray-400 {% if book.active_version.active_children %} hidden {% endif %}">
+    <div class="text-center text-xs">
+      Editing a book is not available on mobile (yet). Please browse from your
+      desktop to access all the features.
     </div>
   </div>
 
-  <div class="w-full p-3 px-6 md:w-4/6 dark:text-white {% if not book.active_version.active_children %} hidden {% endif %} md:inline">
+  <div
+    class="w-full p-3 px-6 md:w-4/6 dark:text-white {% if not book.active_version.active_children %} hidden {% endif %} md:inline">
     <p class="text-xs mb-3">
-      {% if book.original_book %}
-        Forked by
-        <a
-          href="{{url_for('user.profile',user_id=book.owner.id)}}"
-          class="text-blue-500 {% if book.owner.is_deleted %}line-through{% endif %}">
-          {{book.owner.username}}
-        </a>
-        from
-        <a
-          href="{{ url_for('book.collection_view', book_id=book.original_book.id ) }}"
-          target="_blank"
-          class="text-blue-500 {% if book.owner.is_deleted %}line-through{% endif %}">
-          {{book.original_book.owner.username}}/{{book.original_book.label}}
-        </a>
-      {% else %}
-      Created by
+      {% if book.original_book %} Forked by
       <a
         href="{{url_for('user.profile',user_id=book.owner.id)}}"
         class="text-blue-500 {% if book.owner.is_deleted %}line-through{% endif %}">
         {{book.owner.username}}
       </a>
-      {% endif %}
-      on
-      {{book.created_at.strftime('%B %d, %Y')}}
-      . Last updated on
+      from
+      <a
+        href="{{ url_for('book.collection_view', book_id=book.original_book.id ) }}"
+        target="_blank"
+        class="text-blue-500 {% if book.owner.is_deleted %}line-through{% endif %}">
+        {{book.original_book.owner.username}}/{{book.original_book.label}}
+      </a>
+      {% else %} Created by
+      <a
+        href="{{url_for('user.profile',user_id=book.owner.id)}}"
+        class="text-blue-500 {% if book.owner.is_deleted %}line-through{% endif %}">
+        {{book.owner.username}}
+      </a>
+      {% endif %} on {{book.created_at.strftime('%B %d, %Y')}} . Last updated on
       {{book.created_at.strftime('%B %d, %Y')}}
     </p>
 
@@ -181,8 +179,9 @@
     </div>
     {% endif %}
 
-    <div class="flex flex-row justify-between item-center mb-5">
-      <h1 class="text-[2rem] hidden md:inline font-extrabold dark:text-white">
+    <div class="flex flex-row justify-between items-baseline mb-5">
+      <h1
+        class="text-[2rem] hidden md:inline font-extrabold dark:text-white w-10/12 break-words">
         {{book.label}}
       </h1>
       <div class="ml-auto flex">
@@ -213,7 +212,6 @@
       </div>
     </div>
 
-
     <div class="gap-1 flex flex-wrap mb-5">
       {% for tag in book.tags %}
       <a
@@ -247,7 +245,6 @@
     {% endfor %}
   </div>
 
-
   <!-- prettier-ignore -->
   {% endblock %}
 

app/templates/book/stat.html

@@ -9,7 +9,7 @@
 
 <div class="border-b border-gray-200 dark:border-gray-700 pt-3">
   <!-- prettier-ignore -->
-  <h1 class="hidden md:inline font-extrabold text-lg dark:text-white ml-4 my-2">{{book.label}}</h1>
+  <h1 class="hidden md:inline text-[2rem] font-extrabold dark:text-white ml-4">{{book.label}}</h1>
   <!-- prettier-ignore -->
   <p class="hidden md:block text-sm ml-4 w-1/2 text-gray-500 text-center md:text-left dark:text-gray-400"> {{book.about}} </p>
   <!-- prettier-ignore -->