Skip to content
Snippets Groups Projects
Commit 7d0d49b4 authored by sri-odoo's avatar sri-odoo Committed by Thibault Delavallée
Browse files

[FIX] website_profile: improve top banner and navigation and apply various tweaks 

Improve the email validation banner and allow adding custom classes when
calling its templates. Also improve top banner design as well as navigation
and tabs.

Finally perform some minor tweaks on design.

Commit linked to task ID 1941250 and PR #31977
parent da177406
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
addons/website_profile/static/src/scss/website_profile.scss
+ 15
− 43
View file @ 7d0d49b4
$owprofile-color-bg: desaturate(map-get($grays, "200"), 80%);
$owprofile-tabs-height: 37px;
$owprofile-tabs-height: 36px;
.o_wprofile_wrap {
background-color: $owprofile-color-bg;
......@@ -119,52 +119,24 @@ $owprofile-tabs-height: 37px;
// All Users Page
.o_wprofile_all_users_nav {
margin: auto;
background: linear-gradient(90deg, #875A7B 20%, #62495B 80%) !important;
a {
color: #FFFFFF;
}
nav {
.breadcrumb-item::before {
font-weight: bold;
color: #FFFFFF;
opacity: 0.8;
}
.breadcrumb-item {
a {
font-weight: bold;
color: #FFFFFF;
opacity: 0.8;
transition: opacity linear .3s;
}
&.active {
a {
opacity: 1.0;
}
}
}
ol {
background-color: transparent;
}
border-width: 1px 0;
&, .o_wprofile_course_nav_search {
background-color: rgba(white, 0.05);
border-color: rgba(white, 0.1);
border-style: solid;
}
}
.o_wprofile_all_users_header {
@include media-breakpoint-up(sm) {
min-height: 200px;
margin-bottom: -60px;
.o_wprofile_course_nav_search {
border-width: 0 1px;
}
margin: auto;
background: linear-gradient(90deg, #875A7B 20%, #62495B 80%) !important;
> div:first-child {
margin: auto;
width: 100%;
max-width: 1140px;
padding: 32px 32px 0px 32px;
.breadcrumb-item.active a, .breadcrumb-item a:hover {
color: white;
top: 48px;
padding-top: 0px;
height: 250px;
}
.breadcrumb-item a, .breadcrumb-item + .breadcrumb-item::before, .o_wprofile_course_nav_search input::placeholder {
color: rgba(white, 0.8);
}
}
......
addons/website_profile/views/website_profile.xml
+ 88
− 53
View file @ 7d0d49b4
......@@ -9,6 +9,74 @@
</xpath>
</template>
<!-- Sub nav -->
<template id="user_profile_sub_nav" name="User profile subnav">
<div class="o_wprofile_all_users_nav">
<div class="container">
<div class="row align-items-center justify-content-between">
<!-- Desktop Mode -->
<nav aria-label="breadcrumb" class="col d-none d-md-flex">
<ol class="breadcrumb bg-transparent mb-0 pl-0 py-0">
<li class="breadcrumb-item">
<a t-att-href="home_url or '/'">Home</a>
</li>
<li t-attf-class="breadcrumb-item #{'active' if not view_user else ''}">
<a href="/profile/users">Users</a>
</li>
<li t-if="view_user" class="breadcrumb-item active">
<a><t t-esc="view_user"/></a>
</li>
</ol>
</nav>
<div class="col d-none d-md-flex flex-row align-items-center justify-content-end">
<!-- search -->
<form t-attf-action="/profile/users" role="search" method="get">
<div class="input-group o_wprofile_course_nav_search ml-1 position-relative">
<span class="input-group-prepend">
<button class="btn btn-link text-white rounded-0 pr-1" type="submit" aria-label="Search" title="Search">
<i class="fa fa-search"></i>
</button>
</span>
<input type="text" class="form-control border-0 rounded-0 bg-transparent text-white" name="search" placeholder="Search users"/>
</div>
</form>
</div>
<!-- Mobile Mode -->
<div class="col d-md-none py-1">
<div class="btn-group w-100 position-relative" role="group" aria-label="Mobile sub-nav">
<div class="btn-group w-100 ml-2">
<a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nav</a>
<ul class="dropdown-menu">
<a class="dropdown-item" t-att-href="home_url or '/'">Home</a>
<a class="dropdown-item" href="/profile/users">&#9492; Users</a>
<a t-if="view_user" class="dropdown-item">&#9492; <t t-esc="view_user"/></a>
</ul>
</div>
<div class="btn-group ml-1 position-static mr-2">
<a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-search"></i></a>
<div class="dropdown-menu dropdown-menu-right w-100" style="right: 10px;">
<form class="px-3" t-attf-action="/profile/users" role="search" method="get">
<div class="input-group">
<input type="text" class="form-control" name="search" placeholder="Search courses"/>
<span class="input-group-append">
<button class="btn btn-primary" type="submit" aria-label="Search" title="Search">
<i class="fa fa-search"/>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<!--
Single User Profile Page
......@@ -126,8 +194,12 @@
</template>
<template id="user_profile_header" name="Profile Page Header">
<div class="o_wprofile_header o_wprofile_gradient position-relative text-white pb-3 pb-md-0 pt-2 pt-md-5">
<div class="container">
<div class="o_wprofile_header o_wprofile_gradient position-relative text-white">
<t t-call="website_profile.user_profile_sub_nav">
<t t-set="view_user"><t t-esc="user.name"/></t>
</t>
<div class="container pb-3 pb-md-0 pt-2 pt-md-5">
<div class="row">
<!-- ==== Header Left ==== -->
<div class="col-12 col-md-4 col-lg-3">
......@@ -383,43 +455,10 @@
</template>
<template id="users_page_header" name="Users Page Header">
<div class="o_wprofile_all_users_nav">
<div class="container">
<div class="row align-items-center justify-content-between">
<!-- nav -->
<nav aria-label="breadcrumb" class="col-md-8 col-xs-12">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a t-att-href="home_url or '/'">Home</a>
</li>
<li t-att-class="'breadcrumb-item active'">
<a href="#">Users</a>
</li>
</ol>
</nav>
<div class="col-md-4 col-xs-12 d-flex flex-row align-items-center">
<!-- karma / profile -->
<a t-if="not is_public_user" t-att-href="'/profile/user/%s' % user_id.id" class="font-weight-bold mr-3">
<i class="fa fa-diamond" /> <t t-esc="user_id.karma"/>
</a>
<!-- search -->
<form t-attf-action="/profile/users" role="search" method="get">
<div class="input-group">
<input type="text" class="form-control" name="search" placeholder="Search in Users" t-att-value="search"/>
<span class="input-group-append">
<button class="btn btn-primary" type="submit" aria-label="Search" title="Search">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="o_wprofile_all_users_header o_wprofile_gradient text-white">
<div class="o_wprofile_all_users_header o_wprofile_gradient mb-n5 pb-5">
<t t-call="website_profile.user_profile_sub_nav"/>
<div class="container">
<h1 class="py-5">All Users</h1>
<h1 class="py-4 text-white">All Users</h1>
</div>
</div>
</template>
......@@ -500,24 +539,20 @@
</template>
<template id="email_validation_banner">
<div t-if="not validation_email_sent and not is_public_user and user.karma == 0" class="alert alert-danger alert-dismissable" role="alert">
<t t-set="send_alert_classes" t-value="send_alert_classes if send_alert_classes else 'alert alert-danger alert-dismissable'"/>
<t t-set="done_alert_classes" t-value="done_alert_classes if done_alert_classes else 'alert alert-success alert-dismissable'"/>
<div t-if="not validation_email_sent and not is_public_user and user.karma == 0" t-att-class="send_alert_classes" role="alert">
<button type="button" class="close validation_email_close" data-dismiss="alert" aria-label="Close">&amp;times;</button>
<div>
<p>
It appears your email has not been verified.
<a class="send_validation_email" href="#" t-att-data-redirect_url="redirect_url">
<span t-esc="send_validation_email_message"/></a>
</p>
</div>
It appears your email has not been verified.<br/>
<a class="send_validation_email alert-link" href="#" t-att-data-redirect_url="redirect_url">
<span t-esc="send_validation_email_message"/>
</a>
</div>
<div t-if="validation_email_done" class="alert alert-success alert-dismissable" role="status">
<div t-if="validation_email_done" t-att-class="done_alert_classes" role="status">
<button type="button" class="close validated_email_close" data-dismiss="alert" aria-label="Close">&amp;times;</button>
<div>
<p>
<span id="email_validated_message">Congratulations! Your email has just been validated.</span>
<span t-esc="additional_validated_email_message"/>
</p>
</div>
<span id="email_validated_message">Congratulations! Your email has just been validated.</span>
<span t-esc="additional_validated_email_message"/>
</div>
</template>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment