[IMP] website_(profile, slides): add custom pager to show on all users / courses pages

If there are too much users to show on the page and to avoid performance
issues, a pager is now applied on the all users page.

A new pager based on website_pager is added in order to ease the navigation
through the potential high number of pages. 'Go to first page' and 'Go to last
page' buttons have been added and the design of the pager have been adapted
to be more integrated into the new eLearning platform.

Also add the pager on the slide page if search category is applied. The pager
was already computed in the controller but not displayed.

Task ID : 1946160
PR #31697

1 files changed, 37 insertions, 0 deletions

diff --git a/addons/website_profile/static/src/scss/website_profile.scss b/addons/website_profile/static/src/scss/website_profile.scss
index 3eb9f3b4003..224b46b1c84 100644
--- a/addons/website_profile/static/src/scss/website_profile.scss
+++ b/addons/website_profile/static/src/scss/website_profile.scss
@@ -137,6 +137,43 @@ $owprofile-tabs-height: 37px;
     }
 }
 
+.o_wprofile_pager {
+    li.page-item {
+        a.page-link {
+            background-color: transparent;
+            border: 0;
+            color: $gray-600;
+            transition-duration: .3s;
+
+            &:hover {
+                color: $primary;
+            }
+        }
+
+        &.active {
+            a.page-link {
+                color: $white;
+            }
+        }
+
+        &.o_wprofile_pager_arrow a {
+            color: $primary;
+
+            &:hover {
+                transform: scaleX(1.50) scaleY(1.50);
+            }
+        }
+
+        &.o_wprofile_pager_arrow.disabled a {
+            color: $gray-600;
+        }
+
+        .page-link:focus {
+            box-shadow: 0 0 0 0;
+        }
+    }
+}
+
 
 // Other stuffs
 .country_flag {