[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
This commit is contained in:
Stefano Rigano
committed by
Thibault Delavallée
Thibault Delavallée
parent
af41382fa1
commit
a488cf67ed
@@ -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>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -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
|
||||
|
||||
@@ -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("/website/static/src/img/backgrounds/people.jpg"); 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("/website_slides/static/src/img/banner_default_all.svg"); 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">•</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>
|
||||
|
||||
Reference in New Issue
Block a user