From a488cf67ed5ddb3f67e545176039cc12ac6ed7c2 Mon Sep 17 00:00:00 2001
From: Stefano Rigano <sri@odoo.com>
Date: Mon, 4 Mar 2019 10:57:47 +0000
Subject: [PATCH] [IMP] website_slides: slightly improve homepage

Purpose of this commit is to make a new design linting pass on homepage.
Containing

 * various bs4 and responsive improvements;
 * footer banner improvements;

Commit linked to task ID 1941250 and PR #31453
---
 .../static/src/img/banner_heroes_default.svg  |   1 +
 .../static/src/scss/website_slides.scss       |  24 +--
 .../website_slides_templates_homepage.xml     | 162 +++++++++---------
 3 files changed, 87 insertions(+), 100 deletions(-)
 create mode 100644 addons/website_slides/static/src/img/banner_heroes_default.svg

diff --git a/addons/website_slides/static/src/img/banner_heroes_default.svg b/addons/website_slides/static/src/img/banner_heroes_default.svg
new file mode 100644
index 00000000000..9f3536252c2
--- /dev/null
+++ b/addons/website_slides/static/src/img/banner_heroes_default.svg
@@ -0,0 +1 @@
+<svg height="749" viewBox="0 0 1920 749" width="1920" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="m0 0h1920v749h-1920z"/><mask id="b" fill="#fff"><use fill="#fff" fill-rule="evenodd" xlink:href="#a"/></mask></defs><g fill="none" fill-rule="evenodd"><use fill="#36576b" fill-rule="nonzero" xlink:href="#a"/><path d="m3341 938.466-1537.519 41.694 1516.347-263.036-27.493-142.331-1507.085 346.379 1442.362-564.899-54.347-134.029-1404.837 639.492 1302.345-835.712-78.722-120.744-1262.595 909.092 1120.945-1085.68-100.459-102.581-1058.316 1139.946 890.125-1281.175-117.982-80.781-825.865 1333.387 628.834-1441.164-131.231-55.518-550.657 1466.828 342.352-1531.557-139.269-28.519-263.413 1554.707 41.001-1577.265h-142.042l40.832 1570.374-257.534-1548.753-139.351 28.08 339.119 1539.321-553.052-1473.216-131.227 55.518 626.107 1434.912-818.215-1330.23-118.218 80.418 890.052 1289.592-1062.949-1144.916-100.44 102.588 1116.053 1080.944-1254.306-909.138-79.103 120.495 1305.438 843.526-1410.953-642.275-54.355 134.033 1436.113 562.432-1499.485-349.672-27.928 142.252 1522.219 269.069-1544.296-41.888v145.061l1537.537-41.694-1516.372 263.046 27.497 142.318 1507.106-346.373-1442.391 564.896 54.355 134.033 1404.855-639.493-1302.36 835.709 78.722 120.758 1262.602-909.096-1120.948 1085.674 100.433 102.584 1058.334-1139.935-890.128 1281.157 117.978 80.795 825.897-1333.43-628.866 1441.2 131.231 55.525 550.668-1466.845-342.356 1531.564 139.266 28.519 263.427-1554.697-41.008 1577.258h142.042l-40.825-1570.407 257.53 1548.783 139.348-28.081-339.116-1539.317 553.049 1473.223 131.231-55.525-626.097-1434.887 818.204 1330.202 118.233-80.415-890.031-1289.567 1062.906 1144.88 100.448-102.584-1116.064-1080.941 1254.323 909.139 79.093-120.499-1305.478-843.548 1411.001 642.297 54.336-134.033-1436.084-562.443 1499.471 349.683 27.91-142.26-1522.072-269.043 1544.163 41.87z" fill="#fff" mask="url(#b)" opacity=".043"/></g></svg>
\ No newline at end of file
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index cf6bed1830e..f1fdfd9b2c5 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -53,16 +53,6 @@ $MAX-Z-INDEX : 2147483647 !default;
         opacity: 0.5;
     }
 
-    .o_wslides_home_circled {
-        border-radius: 50%;
-        width: 1.2em;
-        height: 1.2em;
-        padding: 0.25em 0.5em 0.25em 0.5em;
-        border: 0.2em solid #666;
-        text-align: center;
-        box-sizing: initial;
-    }
-
     .progress {
         overflow: visible;
         margin-bottom: 0em;
@@ -107,16 +97,16 @@ $MAX-Z-INDEX : 2147483647 !default;
 // **************************************************
 
 .o_wslides_home_main {
-    .o_wslides_home_aside {
-        .fa-check {
-            color: #00A09D;
-            font-size: 1.2em;
-        }
-    }
-
     .o_wprofile_next_rank_card {
         background-color: transparent !important;
     }
+
+    .o_wslides_home_aside_loggedin {
+        @include media-breakpoint-up(lg) {
+            background: none;
+            border: none;
+        }
+    }
 }
 
 // New course page
diff --git a/addons/website_slides/views/website_slides_templates_homepage.xml b/addons/website_slides/views/website_slides_templates_homepage.xml
index 145120c2b5d..932903d2e9f 100644
--- a/addons/website_slides/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides/views/website_slides_templates_homepage.xml
@@ -44,7 +44,46 @@
             </div>
             <div class="container o_wslides_home_main">
                 <div class="row">
-                    <div class="col-lg-9 pr-lg-5">
+                    <div t-if="is_public_user" class="col-lg-3 order-3 order-lg-2">
+                        <div class="row">
+                            <div class="col-12 col-md-7 col-lg-12">
+                                <t t-call="website_slides.slides_home_achievements_small"/>
+                            </div>
+                            <div class="col-12 col-md-5 col-lg-12 mt-5 mt-md-0">
+                                <div class="pl-md-5 pl-lg-0 mt-lg-4">
+                                    <t t-call="website_slides.slides_home_users_small"/>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div t-else="" class="col-lg-3 order-lg-2">
+                        <div class="o_wslides_home_aside_loggedin card p-3 p-lg-0 mb-4">
+                            <div class="o_wslides_home_aside_title">
+                                <div class="d-flex align-items-center">
+                                    <t t-call="website_slides.slides_misc_user_image">
+                                        <t t-set="img_class" t-value="'rounded-circle mr-1'"/>
+                                        <t t-set="img_style" t-value="'height: 22px'"/>
+                                    </t>
+                                    <h5 t-esc="user.name" class="d-flex flex-grow-1 mb-0"/>
+                                    <a class="d-none d-lg-block" t-att-href="'/profile/user/%s' % user.id">Edit</a>
+                                    <a class="d-lg-none btn btn-sm bg-white border" href="#" data-toggle="collapse" data-target="#o_wslides_home_aside_content">More info</a>
+                                </div>
+                                <hr class="d-none d-lg-block mt-2"/>
+                            </div>
+                            <div id="o_wslides_home_aside_content" class="collapse d-lg-block">
+                                <div class="row mb-5 mt-3 mt-lg-0">
+                                    <div class="col-12 col-sm-6 col-lg-12">
+                                        <t t-call="website_slides.slides_home_user_profile_small"/>
+                                        <hr class="d-sm-none d-lg-block" />
+                                    </div>
+                                    <div class="col-12 col-sm-6 col-lg-12 d-flex align-items-center">
+                                        <t t-call="website_slides.slides_home_user_achievements_small"/>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-9 pr-lg-5 order-lg-1">
                         <t t-if="channels_my">
                             <t t-set="void_count" t-value="3 - len(channels_my[:3])"/>
                             <div class="o_wslides_home_content_section mb-5">
@@ -91,31 +130,12 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-lg-3">
-                        <t t-if="is_public_user">
-                            <t t-call="website_slides.slides_home_achievements_small"/>
-                            <t t-call="website_slides.slides_home_users_small"/>
-                        </t>
-                        <t t-else="">
-                            <t t-call="website_slides.slides_home_user_profile_small"/>
-                            <hr />
-                            <t t-call="website_slides.slides_home_user_achievements_small"/>
-                        </t>
-                    </div>
                 </div>
             </div>
-            <section class="s_banner bg-900" style="background-image: url(&quot;/website/static/src/img/backgrounds/people.jpg&quot;); background-size: cover; background-position: 65% 55%">
+            <section class="s_banner" style="background-image: url(/website_slides/static/src/img/banner_heroes_default.svg); background-size: cover; background-position: right bottom">
                 <div class="container py-5">
-                    <h1 class="display-3 mb-0">Meet the people who transformed their company</h1>
-                    <h2 class="mb-4">Nobody gave me a real text so instead of a lorem ipsum I put that one.</h2>
-                    <div class="row mt-1 mb-3">
-                        <div class="col-lg-4">
-                            <p>Nobody gave me a real text so instead of a lorem ipsum I put that one.</p>
-                        </div>
-                        <div class="col-lg-3">
-                            <a href="/profile/users" class="btn btn-primary btn-lg">Go meet them</a>
-                        </div>
-                    </div>
+                    <h2 class="text-white mb-4">Meet the people who transformed their company</h2>
+                    <a href="/profile/users" class="btn btn-primary btn-lg">Go meet them</a>
                 </div>
             </section>
         </div>
@@ -128,8 +148,8 @@
         <div class="wrap o_wslides_wrap">
             <section class="s_banner bg-900" style="background-image: url(&quot;/website_slides/static/src/img/banner_default_all.svg&quot;); background-size: cover; background-position: 80% 20%">
                 <div class="container py-5">
-                    <h1 class="display-3 mb-0"><t t-if="search_my">My Courses</t><t t-else="">All Courses</t></h1>
-                    <h3 class="mb-4">Start your online course today !</h3>
+                    <h1 t-if="search_my" class="display-3 mb-0">My Courses</h1>
+                    <h1 t-else="" class="display-3 mb-0">All Courses</h1>
                 </div>
             </section>
             <div class="container mt16 o_wslides_home_nav position-relative">
@@ -163,18 +183,11 @@
                                     </div>
                                 </li>
                             </t>
-                            <!-- karma / profile -->
-                            <li class="nav-item ml-auto" t-if="not is_public_user">
-                                <a t-att-href="'/profile/user/%s' % user.id" class="nav-link mr-2"
-                                    role="button" title="My Profile">
-                                    <i class="fa fa-diamond"/> <t t-esc="user_id.karma"/>
-                                </a>
-                            </li>
                             <!-- clear filtering -->
-                            <li class="nav-item" t-if="search_slide_type or search_my or search_tags or search_channel_tag_id">
+                            <li class="nav-item ml-auto" t-if="search_slide_type or search_my or search_tags or search_channel_tag_id">
                                 <a t-att-href="'/slides/all?%s' % keep_query('debug')" class="nav-link mr-2"
                                     role="button" title="Clear filters">
-                                    <i class="fa fa-eraser"/>
+                                    <i class="fa fa-eraser"/> Clear filters
                                 </a>
                             </li>
                         </ul>
@@ -241,15 +254,17 @@
             </div>
         </div>
         <div class="card-footer border-top-0 text-600">
-            <div class="d-flex justify-content-between align-items-center small">
-                <span class="font-weight-bold" t-field="channel.total_time" t-options='{"widget": "float_time"}'/>
-                <t t-if="channel.is_member and channel.completed">
-                    <span class="badge badge-pill badge-success pull-right"><i class="fa fa-check"/> Completed</span>
-                </t>
-                <div t-elif="channel.is_member" class="progress w-50">
-                    <div class="progress-bar" role="progressbar" t-att-aria-valuenow="channel.completion" aria-valuemin="0" aria-valuemax="100" t-attf-style="width:#{channel.completion}%;"/>
+            <div class="d-flex justify-content-between align-items-center">
+                <small class="font-weight-bold" t-field="channel.total_time" t-options='{"widget": "float_time"}'/>
+                <div class="d-flex flex-grow-1 justify-content-end">
+                    <t t-if="channel.is_member and channel.completed">
+                        <span class="badge badge-pill badge-success pull-right py-1 px-2"><i class="fa fa-check"/> Completed</span>
+                    </t>
+                    <div t-elif="channel.is_member" class="progress w-50">
+                        <div class="progress-bar" role="progressbar" t-att-aria-valuenow="channel.completion" aria-valuemin="0" aria-valuemax="100" t-attf-style="width:#{channel.completion}%;"/>
+                    </div>
+                    <small t-else=""><b t-esc="channel.total_slides"/> steps</small>
                 </div>
-                <t t-else=""><span class="font-weight-bold" t-esc="channel.total_slides"/> steps</t>
             </div>
         </div>
     </div>
@@ -278,13 +293,11 @@
 </template>
 
 <template id='achievement_card' name="Achivement Card">
-    <div class="row no-gutters mt8 align-items-center">
-        <div class="col-2">
-            <t t-call="website_slides.slides_misc_user_image">
-                <t t-set="user" t-value="achievement.user_id"/>
-            </t>
-        </div>
-        <div class="col">
+    <div class="d-flex no-gutters mt8 align-items-center">
+        <t t-call="website_slides.slides_misc_user_image">
+            <t t-set="user" t-value="achievement.user_id"/>
+        </t>
+        <div style="line-height: 1.3">
             <span class="font-weight-bold" t-esc="achievement.user_id.name"/> achieved <a href="/slides"><span t-esc="achievement.badge_id.name"/></a>
         </div>
     </div>
@@ -315,14 +328,10 @@
 </template>
 
 <template id='user_quickkarma_card' name="User QuickKarma Card">
-    <div class="row no-gutters mt8 align-items-center">
-        <div class="col-2">
-            <span class="font-weight-bold text-muted o_wslides_home_circled" t-esc="counter"/>
-        </div>
-        <div class="col-2">
-            <t t-call="website_slides.slides_misc_user_image"/>
-        </div>
-        <div class="col">
+    <div class="d-flex mb-3 align-items-center">
+        <b class="mr-2 text-muted" t-esc="counter"/>
+        <t t-call="website_slides.slides_misc_user_image"/>
+        <div style="line-height:1.3">
             <span class="font-weight-bold" t-esc="user.name"/>
             <div class="d-flex align-items-center">
                 <span class="text-muted" t-esc="user.rank_id.name"/><span class="ml8 mr8">&#8226;</span><span t-esc="user.karma" class="badge badge-success"/>
@@ -333,38 +342,25 @@
 
 <template id='slides_home_user_profile_small' name="User Profile">
     <div class="o_wslides_home_aside">
-        <div class="o_wslides_home_aside_title">
-            <div class="d-flex align-items-center">
-                <t t-call="website_slides.slides_misc_user_image">
-                    <t t-set="img_class" t-value="'rounded-circle mr-1'"/>
-                    <t t-set="img_style" t-value="'height: 22px'"/>
-                </t>
-                <h5 t-esc="user.name" class="d-flex flex-grow-1 mb-0"/>
-                <a t-att-href="'/profile/user/%s' % user.id">Edit</a>
-            </div>
-        </div>
-        <hr class="mt-2"/>
-        <div class="mt8">
-            <div class="d-flex align-items-center">
-                <span class="font-weight-bold text-muted mr-2">Current rank:</span>
-                <img t-attf-src="/web/image/gamification.karma.rank/#{user.rank_id.id}/image_small" height="16" alt="" class="mr-1"/>
-                <a href="/profile/ranks" t-field="user.rank_id"/>
-            </div>
-            <div class="font-weight-bold text-muted mt-1">Next rank:</div>
-            <t t-call="website_profile.profile_next_rank_card">
-                <t t-set="bg_class">bg-200</t>
-                <t t-set="img_max_width">50%</t>
-            </t>
-            <div t-field="user.next_rank_id.description_motivational"/>
+        <div class="d-flex align-items-center">
+            <span class="font-weight-bold text-muted mr-2">Current rank:</span>
+            <img t-attf-src="/web/image/gamification.karma.rank/#{user.rank_id.id}/image_small" height="16" alt="" class="mr-1"/>
+            <a href="/profile/ranks" t-field="user.rank_id"/>
         </div>
+        <div class="font-weight-bold text-muted mt-1">Next rank:</div>
+        <t t-call="website_profile.profile_next_rank_card">
+            <t t-set="bg_class">bg-200</t>
+            <t t-set="img_max_width">50%</t>
+        </t>
+        <div t-field="user.next_rank_id.description_motivational"/>
     </div>
 </template>
 
 <template id='slides_home_user_achievements_small' name="User Achievements">
-    <div class="o_wslides_home_aside mb-2">
+    <div class="o_wslides_home_aside flex-grow-1 mb-2">
         <t t-foreach="challenges" t-as="challenge">
             <t t-set="challenge_done" t-value="challenge in challenges_done if challenges_done else False"/>
-            <div t-attf-class="d-flex mt-3 align-items-center #{'o_wslides_entry_muted' if not challenge_done else ''}">
+            <div t-attf-class="d-flex mb-3 align-items-center #{'o_wslides_entry_muted' if not challenge_done else ''}">
                 <img class="mr-2"
                     style="max-height: 36px;"
                     t-att-src="'/web/image/gamification.badge/%s/image_medium' % challenge.reward_id.id"
@@ -373,7 +369,7 @@
                     <b class="text_small_caps" t-esc="challenge.reward_id.name"/><br/>
                     <span class="text-muted" t-esc="challenge.reward_id.description"/>
                 </div>
-                <i t-if="challenge_done" class="fa fa-check" aria-label="Done" title="Done" role="img"></i>
+                <i t-if="challenge_done" class="fa fa-check h5 text-success" aria-label="Done" title="Done" role="img"></i>
             </div>
         </t>
     </div>