[FIX] website_slides: correctly set sequence of newly added content

Purpose of this commit is to add new content at last position in frontend.
Indeed backend uses last position in embedded list view, frontend should
do the same. Moreover when having a lot of content, having everything at
the bottom of the screen at the same position of Add content / section
buttons makes sens.

Specifications

  * when adding a new category: add it as last category;
  * when adding a new slide in a category: add it as last slide of the
    category;

Specific case of slide without category

  * when adding a new slide without category: add it as last slide of the
    channel (display it as last) but keep it on top in backend view
    (display as first);

Improve content list display in frontend of eLearning

  * contents without section are now at the bottom;
  * fixed alignment of buttons icon (Add Content and Add Section)
  * fixed broken design because of title too long

Task 2049640 (website slides back2basics and fiximp)
Task 2061672 (new content bug report)

Co-Authored-By: Michaël Mattiello <mcm@odoo.com>
Co-Authored-By: Alexis Lacroix <laa@odoo.com>

4 files changed, 30 insertions, 25 deletions

diff --git a/addons/website_slides/controllers/main.py b/addons/website_slides/controllers/main.py
index f74728ba065..028be99a530 100644
--- a/addons/website_slides/controllers/main.py
+++ b/addons/website_slides/controllers/main.py
@@ -831,7 +831,10 @@ class WebsiteSlides(WebsiteProfile):
             else:
                 values.update({
                     'category_id': post['category_id'][0],
+                    'sequence': request.env['slide.slide'].browse(post['category_id'][0]).sequence + 1
                 })
+        else:
+            values['sequence'] = -1
 
         # create slide itself
         try:
diff --git a/addons/website_slides/models/slide_channel.py b/addons/website_slides/models/slide_channel.py
index 20e62300ff4..ee846b3d0d1 100644
--- a/addons/website_slides/models/slide_channel.py
+++ b/addons/website_slides/models/slide_channel.py
@@ -523,16 +523,7 @@ class Channel(models.Model):
         all_slides = self.env['slide.slide'].sudo().search(base_domain, order=order)
         category_data = []
 
-        # First add uncategorized slides
-        uncategorized_slides = all_slides.filtered(lambda slide: not slide.category_id)
-        if uncategorized_slides or force_void:
-            category_data.append({
-                'category': False, 'id': False,
-                'name': _('Uncategorized'), 'slug_name': _('Uncategorized'),
-                'total_slides': len(uncategorized_slides),
-                'slides': uncategorized_slides[(offset or 0):(offset + limit or len(uncategorized_slides))],
-            })
-        # Then all categories by natural order
+        # First add all categories by natural order
         for category in all_categories:
             category_slides = all_slides.filtered(lambda slide: slide.category_id == category)
             if not category_slides and not force_void:
@@ -543,6 +534,15 @@ class Channel(models.Model):
                 'total_slides': len(category_slides),
                 'slides': category_slides[(offset or 0):(limit + offset or len(category_slides))],
             })
+        # Then add uncategorized slides
+        uncategorized_slides = all_slides.filtered(lambda slide: not slide.category_id)
+        if uncategorized_slides or force_void:
+            category_data.append({
+                'category': False, 'id': False,
+                'name': _('Uncategorized'), 'slug_name': _('Uncategorized'),
+                'total_slides': len(uncategorized_slides),
+                'slides': uncategorized_slides[(offset or 0):(offset + limit or len(uncategorized_slides))],
+            })
         return category_data
 
     def _resequence_slides(self, slide):
diff --git a/addons/website_slides/tests/tours/slides_tour_tools.js b/addons/website_slides/tests/tours/slides_tour_tools.js
index 228ea3f9194..3485377fdfb 100644
--- a/addons/website_slides/tests/tours/slides_tour_tools.js
+++ b/addons/website_slides/tests/tours/slides_tour_tools.js
@@ -23,7 +23,7 @@ var addVideoToSection = function (sectionName, saveAsDraft) {
 	var base_steps = [
 {
 	content: 'eLearning: add content to section',
-	trigger: 'div.o_wslides_slide_list_category_header:contains("' + sectionName + '") a:contains("Add content")',
+	trigger: 'div.o_wslides_slide_list_category_header:contains("' + sectionName + '") a:contains("Add Content")',
 }, {
 	content: 'eLearning: click on video',
 	trigger: 'a[data-slide-type=video]',
@@ -57,7 +57,7 @@ var addWebPageToSection = function (sectionName, pageName) {
 	return [
 {
 	content: 'eLearning: add content to section',
-	trigger: 'div.o_wslides_slide_list_category_header:contains("' + sectionName + '") a:contains("Add content")',
+	trigger: 'div.o_wslides_slide_list_category_header:contains("' + sectionName + '") a:contains("Add Content")',
 }, {
 	content: 'eLearning: click on webpage',
 	trigger: 'a[data-slide-type=webpage]',
diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml
index bbaefa81aa5..e4b1bb8b7f2 100644
--- a/addons/website_slides/views/website_slides_templates_course.xml
+++ b/addons/website_slides/views/website_slides_templates_course.xml
@@ -353,7 +353,7 @@
             <t t-foreach="category_data" t-as="category">
                 <t t-set="category_id" t-value="category['id'] if category['id'] else None"/>
 
-                <li t-if="category['total_slides'] or channel.can_publish" t-att-class="'o_wslides_slide_list_category o_wslides_js_list_item mb-2' if category_id else 'mb-3'" t-att-data-slide-id="category_id" t-att-data-category-id="category_id">
+                <li t-if="category['total_slides'] or channel.can_publish" t-att-class="'o_wslides_slide_list_category o_wslides_js_list_item mb-2' if category_id else 'mt-4'" t-att-data-slide-id="category_id" t-att-data-category-id="category_id">
                     <div t-att-data-category-id="category_id"
                          t-att-class="'o_wslides_slide_list_category_header position-relative d-flex justify-content-between align-items-center %s' % ('o_wslides_js_category bg-white shadow-sm border-bottom-0' if category_id and channel.can_upload  else 'border-0 py-1')">
                         <div t-att-class="'d-flex align-items-center pl-3 %s' % ('o_wslides_slides_list_drag' if channel.can_publish else '')">
@@ -374,7 +374,7 @@
                                 t-att-data-category-id="category_id"
                                 t-att-data-can-upload="channel.can_upload"
                                 t-att-data-can-publish="channel.can_publish">
-                                <i class="fa fa-plus mr-1"/> <span class="d-none d-md-inline-block">Add content</span>
+                                <i class="fa fa-plus mr-1"/> <span class="d-none d-md-inline-block">Add Content</span>
                             </a>
                         </div>
                     </div>
@@ -399,10 +399,10 @@
                 t-att-data-modules-to-install="modules_to_install"
                 t-att-data-channel-id="channel.id"
                 t-att-data-can-upload="channel.can_upload"
-                t-att-data-can-publish="channel.can_publish"><i class="fa fa-plus mr-1 align-middle"/><span>Add Content</span></a>
+                t-att-data-can-publish="channel.can_publish"><i class="fa fa-plus mr-1"/><span>Add Content</span></a>
             <a class="o_wslides_js_slide_section_add border btn btn-light bg-white" t-attf-channel_id="#{channel.id}"
                 href="#" role="button"
-                groups="website.group_website_publisher"><i class="fa fa-folder-o mr-1 align-middle"/><span>Add Section</span></a>
+                groups="website.group_website_publisher"><i class="fa fa-folder-o mr-1"/><span>Add Section</span></a>
         </div>
     </div>
     <div t-field="channel.description_html"/>
@@ -416,14 +416,16 @@
         <t t-call="website_slides.slide_icon">
             <t t-set="icon_class" t-value="'py-2 mx-2'"/>
         </t>
-        <a t-if="slide.is_preview or channel.is_member or channel.can_publish" class="o_wslides_js_slides_list_slide_link mr-auto" t-attf-href="/slides/slide/#{slug(slide)}">
-            <span t-field="slide.name"/>
-        </a>
-        <span t-else="" class="mr-auto">
-            <span t-esc="slide.name"/>
-        </span>
+        <div class="text-truncate mr-auto">
+            <a t-if="slide.is_preview or channel.is_member or channel.can_publish" class="o_wslides_js_slides_list_slide_link" t-attf-href="/slides/slide/#{slug(slide)}">
+                <span t-field="slide.name"/>
+            </a>
+            <span t-else="">
+                <span t-esc="slide.name"/>
+            </span>
+        </div>
 
-        <div class="d-flex flex-wrap">
+        <div class="d-flex flex-row">
             <span t-if="slide.question_ids" t-att-class="'badge font-weight-bold px-2 py-1 m-1 %s' % ('badge-success' if channel_progress[slide.id].get('completed') else 'badge-warning')">
                 <i t-attf-class="fa fa-fw #{'fa-check' if channel_progress[slide.id].get('completed') else 'fa-flag'}"/>
                 <t t-esc="channel_progress[slide.id].get('quiz_karma_won', 0) if channel_progress[slide.id].get('completed') else channel_progress[slide.id].get('quiz_karma_gain', 0)"/> xp
@@ -435,12 +437,12 @@
             <span t-elif="slide.is_preview and not channel.is_member" class="badge badge-success font-weight-normal px-2 py-1 m-1">Free preview</span>
         </div>
 
-        <div t-if="channel.is_member or channel.can_publish" class="pt-2 pb-2 border-left ml-2 mr-2 pl-2 d-flex align-items-center o_wslides_slides_list_slide_controls">
+        <div t-if="channel.is_member or channel.can_publish" class="pt-2 pb-2 border-left ml-2 mr-2 pl-2 d-flex flex-row align-items-center o_wslides_slides_list_slide_controls">
             <t t-if="channel.is_member">
                 <i t-if="not channel_progress[slide.id].get('completed')" class="check-done fa fa-circle-o text-500 px-2"></i>
                 <i t-else="" class="check-done text-success fa fa-check-circle px-2"></i>
             </t>
-            <span t-if="channel.can_publish" class="d-none d-md-inline-block">
+            <span t-if="channel.can_publish" class="d-none d-md-flex">
                 <a t-if="slide.slide_type == 'webpage'" class="px-2 o_text_link text-primary" target="_blank" t-attf-href="/slides/slide/#{slug(slide)}?enable_editor=1"><span class="fa fa-pencil"/></a>
                 <a t-else="" class="px-2 o_text_link text-primary" target="_blank" t-attf-href="/web#id=#{slide.id}&amp;action=#{slide_action}&amp;model=slide.slide&amp;view_type=form"><span class="fa fa-pencil"/></a>
                 <a href="#" t-att-data-slide-id="slide.id" class="o_text_link text-danger px-2 o_wslides_js_slide_archive"><span class="fa fa-trash"/></a>