[REF] website_profile and dependencies: improve global layout and design

Purpose is to perform a cleaning pass on website_profile templates. It
cleans the DOM, templates and CSS and proposes various improvements on
general design and layouting. This includes notably

 * lessen custom CSS and use bootstrap 4 classes;
 * simplify layout when possible;
 * make is responsive and mobile friendly;

No functional changes should occur with this commit.

Sub modules are impacted as profile is extended in various other
applications: eLearning, forum and certification.

Commit linked to task ID 1941250 and PR #31453

7 files changed, 83 insertions, 236 deletions

diff --git a/addons/website_profile/static/src/img/badge_bronze.svg b/addons/website_profile/static/src/img/badge_bronze.svg
new file mode 100644
index 00000000000..a94491e8a55
--- /dev/null
+++ b/addons/website_profile/static/src/img/badge_bronze.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><g fill="none"><circle cx="150" cy="150" r="150" fill="#FFF"/><path fill="#C37933" d="M150 300C67.157 300 0 232.843 0 150S67.157 0 150 0s150 67.157 150 150-67.157 150-150 150zm0-9.375c77.665 0 140.625-62.96 140.625-140.625 0-77.665-62.96-140.625-140.625-140.625C72.335 9.375 9.375 72.335 9.375 150c0 77.665 62.96 140.625 140.625 140.625zm0-14.063C80.101 276.563 23.437 219.9 23.437 150S80.102 23.437 150 23.437 276.563 80.102 276.563 150 219.899 276.563 150 276.563zm56.757-126.57l12.882-12.602c1.867-1.743 2.49-3.922 1.867-6.536-.747-2.551-2.365-4.139-4.854-4.76l-17.55-4.482 4.947-17.365c.747-2.552.156-4.73-1.773-6.535-1.805-1.93-3.983-2.52-6.535-1.774l-17.363 4.948-4.48-17.551c-.623-2.552-2.21-4.14-4.761-4.761-2.552-.685-4.73-.094-6.535 1.773L150 93.324l-12.602-12.977c-1.805-1.93-3.983-2.52-6.535-1.773-2.551.622-4.138 2.209-4.76 4.76l-4.481 17.552-17.363-4.948c-2.552-.747-4.73-.155-6.535 1.774-1.929 1.805-2.52 3.983-1.773 6.535l4.947 17.365-17.55 4.481c-2.489.623-4.107 2.21-4.854 4.761-.622 2.614 0 4.793 1.867 6.536l12.882 12.603-12.882 12.603c-1.867 1.743-2.49 3.921-1.867 6.535.747 2.552 2.365 4.14 4.854 4.762l17.55 4.481-4.947 17.365c-.747 2.552-.156 4.73 1.773 6.535 1.805 1.93 3.983 2.52 6.535 1.774l17.363-4.948 4.48 17.551c.623 2.552 2.21 4.17 4.761 4.855 2.614.622 4.792 0 6.535-1.867L150 206.755l12.602 12.884c1.245 1.369 2.832 2.053 4.761 2.053.436 0 1.027-.062 1.774-.186 2.551-.747 4.138-2.365 4.76-4.855l4.481-17.551 17.363 4.948c2.552.747 4.73.155 6.535-1.774 1.929-1.805 2.52-3.983 1.773-6.535l-4.947-17.365 17.55-4.481c2.489-.623 4.107-2.21 4.854-4.762.622-2.614 0-4.792-1.867-6.535l-12.882-12.603z"/></g></svg>
\ No newline at end of file
diff --git a/addons/website_profile/static/src/img/badge_gold.svg b/addons/website_profile/static/src/img/badge_gold.svg
new file mode 100644
index 00000000000..423f63e6d8b
--- /dev/null
+++ b/addons/website_profile/static/src/img/badge_gold.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><g fill="none"><circle cx="150" cy="150" r="150" fill="#FFF"/><path fill="#E2BE00" d="M150 300C67.157 300 0 232.843 0 150S67.157 0 150 0s150 67.157 150 150-67.157 150-150 150zm0-9.375c77.665 0 140.625-62.96 140.625-140.625 0-77.665-62.96-140.625-140.625-140.625C72.335 9.375 9.375 72.335 9.375 150c0 77.665 62.96 140.625 140.625 140.625zm0-14.063C80.101 276.563 23.437 219.9 23.437 150S80.102 23.437 150 23.437 276.563 80.102 276.563 150 219.899 276.563 150 276.563zm56.757-126.57l12.882-12.602c1.867-1.743 2.49-3.922 1.867-6.536-.747-2.551-2.365-4.139-4.854-4.76l-17.55-4.482 4.947-17.365c.747-2.552.156-4.73-1.773-6.535-1.805-1.93-3.983-2.52-6.535-1.774l-17.363 4.948-4.48-17.551c-.623-2.552-2.21-4.14-4.761-4.761-2.552-.685-4.73-.094-6.535 1.773L150 93.324l-12.602-12.977c-1.805-1.93-3.983-2.52-6.535-1.773-2.551.622-4.138 2.209-4.76 4.76l-4.481 17.552-17.363-4.948c-2.552-.747-4.73-.155-6.535 1.774-1.929 1.805-2.52 3.983-1.773 6.535l4.947 17.365-17.55 4.481c-2.489.623-4.107 2.21-4.854 4.761-.622 2.614 0 4.793 1.867 6.536l12.882 12.603-12.882 12.603c-1.867 1.743-2.49 3.921-1.867 6.535.747 2.552 2.365 4.14 4.854 4.762l17.55 4.481-4.947 17.365c-.747 2.552-.156 4.73 1.773 6.535 1.805 1.93 3.983 2.52 6.535 1.774l17.363-4.948 4.48 17.551c.623 2.552 2.21 4.17 4.761 4.855 2.614.622 4.792 0 6.535-1.867L150 206.755l12.602 12.884c1.245 1.369 2.832 2.053 4.761 2.053.436 0 1.027-.062 1.774-.186 2.551-.747 4.138-2.365 4.76-4.855l4.481-17.551 17.363 4.948c2.552.747 4.73.155 6.535-1.774 1.929-1.805 2.52-3.983 1.773-6.535l-4.947-17.365 17.55-4.481c2.489-.623 4.107-2.21 4.854-4.762.622-2.614 0-4.792-1.867-6.535l-12.882-12.603z"/></g></svg>
\ No newline at end of file
diff --git a/addons/website_profile/static/src/img/badge_silver.svg b/addons/website_profile/static/src/img/badge_silver.svg
new file mode 100644
index 00000000000..dd16d4f2bae
--- /dev/null
+++ b/addons/website_profile/static/src/img/badge_silver.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><g fill="none"><circle cx="150" cy="150" r="150" fill="#FFF"/><path fill="#838997" d="M150 300C67.157 300 0 232.843 0 150S67.157 0 150 0s150 67.157 150 150-67.157 150-150 150zm0-9.375c77.665 0 140.625-62.96 140.625-140.625 0-77.665-62.96-140.625-140.625-140.625C72.335 9.375 9.375 72.335 9.375 150c0 77.665 62.96 140.625 140.625 140.625zm0-14.063C80.101 276.563 23.437 219.9 23.437 150S80.102 23.437 150 23.437 276.563 80.102 276.563 150 219.899 276.563 150 276.563zm56.757-126.57l12.882-12.602c1.867-1.743 2.49-3.922 1.867-6.536-.747-2.551-2.365-4.139-4.854-4.76l-17.55-4.482 4.947-17.365c.747-2.552.156-4.73-1.773-6.535-1.805-1.93-3.983-2.52-6.535-1.774l-17.363 4.948-4.48-17.551c-.623-2.552-2.21-4.14-4.761-4.761-2.552-.685-4.73-.094-6.535 1.773L150 93.324l-12.602-12.977c-1.805-1.93-3.983-2.52-6.535-1.773-2.551.622-4.138 2.209-4.76 4.76l-4.481 17.552-17.363-4.948c-2.552-.747-4.73-.155-6.535 1.774-1.929 1.805-2.52 3.983-1.773 6.535l4.947 17.365-17.55 4.481c-2.489.623-4.107 2.21-4.854 4.761-.622 2.614 0 4.793 1.867 6.536l12.882 12.603-12.882 12.603c-1.867 1.743-2.49 3.921-1.867 6.535.747 2.552 2.365 4.14 4.854 4.762l17.55 4.481-4.947 17.365c-.747 2.552-.156 4.73 1.773 6.535 1.805 1.93 3.983 2.52 6.535 1.774l17.363-4.948 4.48 17.551c.623 2.552 2.21 4.17 4.761 4.855 2.614.622 4.792 0 6.535-1.867L150 206.755l12.602 12.884c1.245 1.369 2.832 2.053 4.761 2.053.436 0 1.027-.062 1.774-.186 2.551-.747 4.138-2.365 4.76-4.855l4.481-17.551 17.363 4.948c2.552.747 4.73.155 6.535-1.774 1.929-1.805 2.52-3.983 1.773-6.535l-4.947-17.365 17.55-4.481c2.489-.623 4.107-2.21 4.854-4.762.622-2.614 0-4.792-1.867-6.535l-12.882-12.603z"/></g></svg>
\ No newline at end of file
diff --git a/addons/website_profile/static/src/img/rank_1.svg b/addons/website_profile/static/src/img/rank_1.svg
new file mode 100644
index 00000000000..6477a9068be
--- /dev/null
+++ b/addons/website_profile/static/src/img/rank_1.svg
@@ -0,0 +1 @@
+<svg height="37" viewBox="0 0 35 37" width="35" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0" stop-color="#ffe897"/><stop offset="1" stop-color="#f1c363"/></linearGradient><circle id="b" cx="17.5" cy="17.5" r="17.5"/><filter id="c" height="111.4%" width="105.7%" x="-2.9%" y="-2.9%"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.564705882   0 0 0 0 0.37254902   0 0 0 0 0.192156863  0 0 0 1 0"/></filter></defs><g fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><use fill="#000" filter="url(#c)" xlink:href="#b"/><use fill="url(#a)" xlink:href="#b"/></g><text fill="#905f31" font-family="Montserrat-Bold, Montserrat" font-size="11" font-weight="bold"><tspan x="10.031" y="22">1st</tspan></text></g></svg>
\ No newline at end of file
diff --git a/addons/website_profile/static/src/img/rank_2.svg b/addons/website_profile/static/src/img/rank_2.svg
new file mode 100644
index 00000000000..e9ae886a34a
--- /dev/null
+++ b/addons/website_profile/static/src/img/rank_2.svg
@@ -0,0 +1 @@
+<svg height="37" viewBox="0 0 35 37" width="35" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0" stop-color="#d7dde1"/><stop offset="1" stop-color="#b7c3c8"/></linearGradient><circle id="b" cx="17.5" cy="17.5" r="17.5"/><filter id="c" height="111.4%" width="105.7%" x="-2.9%" y="-2.9%"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.360784314   0 0 0 0 0.388235294   0 0 0 0 0.403921569  0 0 0 1 0"/></filter></defs><g fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><use fill="#000" filter="url(#c)" xlink:href="#b"/><use fill="url(#a)" xlink:href="#b"/></g><text fill="#5c6367" font-family="Montserrat-Bold, Montserrat" font-size="11" font-weight="bold"><tspan x="6.615" y="22">2nd</tspan></text></g></svg>
\ No newline at end of file
diff --git a/addons/website_profile/static/src/img/rank_3.svg b/addons/website_profile/static/src/img/rank_3.svg
new file mode 100644
index 00000000000..8c22af97f27
--- /dev/null
+++ b/addons/website_profile/static/src/img/rank_3.svg
@@ -0,0 +1 @@
+<svg height="37" viewBox="0 0 35 37" width="35" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0" stop-color="#ecc29f"/><stop offset="1" stop-color="#d09e7d"/></linearGradient><circle id="b" cx="17.5" cy="17.5" r="17.5"/><filter id="c" height="111.4%" width="105.7%" x="-2.9%" y="-2.9%"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.62745098   0 0 0 0 0.462745098   0 0 0 0 0.329411765  0 0 0 1 0"/></filter></defs><g fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><use fill="#000" filter="url(#c)" xlink:href="#b"/><use fill="url(#a)" xlink:href="#b"/></g><text fill="#5e4129" font-family="Montserrat-Bold, Montserrat" font-size="11" font-weight="bold"><tspan x="8.117" y="22">3rd</tspan></text></g></svg>
\ No newline at end of file
diff --git a/addons/website_profile/static/src/scss/website_profile.scss b/addons/website_profile/static/src/scss/website_profile.scss
index bafe42a03cd..3eb9f3b4003 100644
--- a/addons/website_profile/static/src/scss/website_profile.scss
+++ b/addons/website_profile/static/src/scss/website_profile.scss
@@ -1,125 +1,83 @@
-$gold: #ffcc00;
-$silver: #cccccc;
-$bronze: #eea91e;
+$owprofile-color-bg: desaturate(map-get($grays, "200"), 80%);
+$owprofile-tabs-height: 37px;
 
-.o_wprofile_container {
-    margin: auto;
-    width: 100%;
-    max-width: 1140px;
-    padding: 32px 32px 0px 32px;
+.o_wprofile_wrap {
+    background-color: $owprofile-color-bg;
 }
 
-.o_wprofile_header {
-    margin: auto;
-    background-color: #875A7B !important;
-    border-bottom: 48px solid #66445e;
-    .o_wprofile_header_container {
-        top: 48px;
-        padding-top: 0px;
-        .o_wprofile_id {
-            font-size: 16px;
-            .o_wprofile_id_info {
-                margin-right: 36px;
-            }
-        }
-        .o_wprofile_pict {
-            .o_wprofile_photo {
-                width: 100%;
-                max-width: 256px;
-            }
-        }
-    }
+.o_wprofile_gradient {
+    background-image: linear-gradient(120deg, #875A7B, darken(#875A7B, 10%));
 }
 
-.o_wprofile_navtabs_container {
-    .o_wprofile_nav_tabs {
-        border-bottom: 0px;
+.o_wprofile_pict {
+    @include size(30%);
+    border-radius: 100%;
+    padding-top: 30%;
+    background-size: cover;
+    background-position: center;
+
+    @include media-breakpoint-up(md)  {
+        @include size(100%);
+        border-radius: 0;
+        padding-top: 100%;
     }
-    .o_wprofile_navlink {
-        color: white;
-        border-radius: 0px;
-        height: 48px;
-        font-weight: bold;
-        padding-top: 12px;
-        border-left: 2px solid #875A7B;
-        text-align: center;
-        width: 120px;
-        &:hover {
-            border: 0px;
-            border-radius: 0px;
-            background-color: #875A7B;
+}
+
+.o_wprofile_header {
+    @include media-breakpoint-up(md)  {
+        &:before {
+            content: "";
+            @include o-position-absolute(auto, 0, 0, 0);
+            height: $owprofile-tabs-height;
+            background: rgba(black, 0.2);
         }
     }
-    .o_wprofile_navlink.active {
-        color: #212529;
-        background-color: #f2f2f2;
-        border: 0px;
-    }
 }
 
-.o_wprofile_content {
-    margin: auto;
-    background-color: #f2f2f2 !important;
-    .o_wprofile_content_container{
-        position: relative;
-        top: -80px;
-        .o_wprofile_detail {
-            .o_wprofile_content_abstract {
-                top: 1px;
-                width: 256px;
-                max-width: 256px;
-                margin-left: 15px;
-                table {
-                    width: 100%;
-                    tr {
-                        line-height: 32px;
-                    }
-                    th {
-                        font-weight: normal;
-                    }
-                }
-                .o_wprofile_rank {
-                    background-color: white;
-                }
-                .o_wprofile_abstract_info {
-                    background-color: white;
-                }
+.o_wprofile_nav_tabs {
+    @include media-breakpoint-up(md)  {
+        margin-top: $owprofile-tabs-height * -1;
+        border-bottom: 0;
+
+        .nav-link {
+            border-radius: 0;
+            border-width: 0 1px;
+            @include o-hover-text-color(rgba(white, 0.8), white);
+
+            &, &:hover {
+                border-color: #875A7B;
+                background: transparent;
             }
-            .o_wprofile_content_detail {
-                h4 {
-                    border-bottom: 1px solid lightgrey;
-                    color: grey;
-                    margin-bottom: 16px;
-                }
-                .o_user_badges {
-                    padding: 8px;
-                    div {
-                        padding: 8px;
-                    }
-                    img {
-                        width: 48px;
-                        height: 48px;
-                    }
-                }
+
+            &.active {
+                color: $headings-color;
+                background: $owprofile-color-bg;
+                border-color: $owprofile-color-bg;
             }
         }
     }
-}
 
-// Rank
-.o_wprofile_ranks_presentation {
-    background-color: lightgray;
-    .o_wprofile_rank_tile {
-        width: 20%;
-        div {
-            text-align:center;
-            img {
-                height: 128px;
-            }
+    @include media-breakpoint-only(xs) {
+        overflow-x: auto;
+        overflow-y: hidden;
+
+        li {
+            white-space: nowrap;
         }
     }
 }
 
+.o_wprofile_tabs_content {
+    @include media-breakpoint-down(sm) {
+        background-color: $nav-tabs-link-active-bg;
+        padding:0 ($grid-gutter-width * 0.5);
+    }
+
+    @include media-breakpoint-only(xs) {
+        margin: 0 ($grid-gutter-width * -0.5);
+    }
+}
+
 /// Progress Circle
 .o_wprofile_progress_circle {
     position: relative;
@@ -159,141 +117,28 @@ $bronze: #eea91e;
     }
 }
 
-
-.o_wprofile_next_rank_card {
-    div {
-        text-align: center;
-        img {
-            width: 128px;
-            height: 128px;
-        }
-    }
-    .o_wprofile_next_rank_progress {
-        background-color: lightgray;
-        .o_wprofile_next_rank_progress_bar {
-            background-color: #00A09D !important;
-        }
-    }
-}
-
-// Edit Profile button
-.o_wprofile_edit {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    padding-left: 16px;
-    padding-right: 16px;
-}
-
 // All Users Page
 .o_wprofile_all_users_header {
-    margin: auto;
-    background-color: #875A7B !important;
-    > div:first-child {
-        margin: auto;
-        width: 100%;
-        max-width: 1140px;
-        padding: 32px 32px 0px 32px;
-        color: white;
-        top: 48px;
-        padding-top: 0px;
-        height: 250px;
-    }
-}
-
-.o_wprofile_all_user_content {
-    position: relative;
-    top: -140px;
-    .o_wprofile_all_user_card_top3 {
-        cursor: pointer;
-        height: 325px;
-        text-align: center;
-        border-radius: 0px;
-        border: 0px;
-        .card-body {
-            padding-left: 0px;
-            padding-right: 0px;
-            > div:first-child {
-                margin-bottom: -40px;
-                div {
-                    position: relative;
-                    margin: auto;
-                    right: -35px;
-                    bottom: 55px;
-                    width: 45px;
-                    padding: 12px 0px 12px 0px;
-                    border-radius: 50%;
-                }
-                .o_wprofile_top3_first {
-                    background-color: $gold;
-                }
-                .o_wprofile_top3_second {
-                    background-color: $silver;
-                }
-                .o_wprofile_top3_third {
-                    background-color: $bronze;
-                }
-            }
-            :nth-child(4) {
-                position: absolute;
-                bottom: 0px;
-                width: 100%;
-                margin: auto;
-                border-top: 1px solid lightgrey;
-                div {
-                    padding: 4% 0% 4% 0%;
-                    border-radius: 0px;
-                }
-            }
-        }
-    }
-    .o_wprofile_all_users_card {
-        cursor: pointer;
-        border-radius: 0px;
-        border: 0px;
-        padding: 8px 15px 8px 15px;
-        > div > div:first-child > div > div:nth-child(3) {
-            padding-top: 12px;
-            padding-bottom: 12px;
-        }
-        > div > div:first-child > div > div:nth-child(2) {
-            padding: 0px;
-            width: 80px;
-        }
-        > div > div:first-child > div > div:first-child {
-            padding: 5% 0px 5% 16px;
-            width: 60px;
-        }
+    @include media-breakpoint-up(sm)  {
+        min-height: 200px;
+        margin-bottom: -60px;
     }
 }
 
-// Badges
-.badge-gold {
-    color: $gold;
-}
-.bg-gold {
-    background-color: $gold;
-}
+.o_wprofile_top3_card_footer div {
+    border-color: $border-color;
+    border-style: solid;
+    border-width: 1px 0;
+    margin-top: -1px;
 
-.badge-silver {
-    color: $silver;
-}
-.bg-silver {
-    background-color: $silver;
+    + div {
+        border-left-width: 1px;
+        margin-left: -1px;
+    }
 }
 
-.badge-bronze {
-    color: $bronze;
-}
-.bg-bronze {
-    background-color: $bronze;
-}
 
 // Other stuffs
-.o_wprofile_bb_grey {
-    border-bottom: 2px solid lightgrey !important;
-}
-
 .country_flag {
     display: inline-block;
     margin-left: 2px;
@@ -301,11 +146,7 @@ $bronze: #eea91e;
     width: auto !important;
 }
 
-.o_wprofile_img_small {
-    width: 64px;
-    height: 64px;
-}
-.o_wprofile_img_medium {
-    width: 96px;
-    height: 96px;
-}
+// Tools
+.o_wprofile_pointer {
+    cursor: pointer;
+}
\ No newline at end of file