[FIX] website_slides: fix course navigation design
Commit linked to task ID 1941250 and PR #31977
This commit is contained in:
sri-odoo
committed by
Thibault Delavallée
Thibault Delavallée
parent
b2e555eb0b
commit
d5c6c908f4
@@ -142,40 +142,25 @@ $o-wslides-fs-side-width: 300px;
|
||||
// **************************************************
|
||||
|
||||
.o_wslides_course_nav {
|
||||
margin: auto;
|
||||
background: linear-gradient(150deg, #875A7B 20%, #62495B 80%) !important;
|
||||
opacity: 0.95;
|
||||
@include o-position-absolute(0,0,auto,0);
|
||||
border-width: 1px 0;
|
||||
|
||||
a {
|
||||
color: #FFFFFF;
|
||||
&, .o_wslides_course_nav_search {
|
||||
background-color: rgba(white, 0.05);
|
||||
border-color: rgba(white, 0.1);
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
small a {
|
||||
color: #000000;
|
||||
.o_wslides_course_nav_search {
|
||||
border-width: 0 1px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
.breadcrumb-item.active a, .breadcrumb-item a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.breadcrumb-item a, .breadcrumb-item + .breadcrumb-item::before {
|
||||
color: rgba(white, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -6,9 +6,9 @@
|
||||
<div class="o_wslides_course_nav">
|
||||
<div class="container">
|
||||
<div class="row align-items-center justify-content-between">
|
||||
<!-- nav -->
|
||||
<nav aria-label="breadcrumb" class="col-md-6 col-xs-12">
|
||||
<ol class="breadcrumb">
|
||||
<!-- 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 href="/slides">Home</a>
|
||||
</li>
|
||||
@@ -29,33 +29,84 @@
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div class="col-md-6 col-xs-12 d-flex flex-row align-items-center justify-content-end">
|
||||
|
||||
<div class="col d-none d-md-flex flex-row align-items-center justify-content-end">
|
||||
<!-- karma / profile -->
|
||||
<a t-if="not is_public_user" t-att-href="'/profile/user/%s?channel_id=%s' % (user.id, channel.id)" class="font-weight-bold mr-3">
|
||||
<a t-if="not is_public_user" t-att-href="'/profile/user/%s?channel_id=%s' % (user.id, channel.id)" class="btn btn-link text-white text-nowrap">
|
||||
<i class="fa fa-diamond" /> <t t-esc="user_id.karma"/>
|
||||
</a>
|
||||
<!-- sort / filter -->
|
||||
<div class="dropdown ml-1">
|
||||
<button class="btn btn-link text-white dropdown-toggle" type="button" id="slidesChannelDropdownSort"
|
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<t t-if="sorting == 'most_voted'">Most Voted</t>
|
||||
<t t-elif="sorting == 'most_viewed'">Most Viewed</t>
|
||||
<t t-else="">Newest</t>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="slidesChannelDropdownSort" role="menu">
|
||||
<h6 class="dropdown-header">Sort by</h6>
|
||||
<a role="menuitem" t-att-href="'/slides/%s?%s' % (slug(channel), keep_query('debug', 'slide_type', sorting='latest'))"
|
||||
t-att-class="'dropdown-item %s' % ('active' if sorting and sorting == 'latest' else '')">Newest</a>
|
||||
<a role="menuitem" t-att-href="'/slides/%s?%s' % (slug(channel), keep_query('debug', 'slide_type', sorting='most_voted'))"
|
||||
t-att-class="'dropdown-item %s' % ('active' if sorting and sorting == 'most_voted' else '')">Most Voted</a>
|
||||
<a role="menuitem" t-att-href="'/slides/%s?%s' % (slug(channel), keep_query('debug', 'slide_type', sorting='most_viewed'))"
|
||||
t-att-class="'dropdown-item %s' % ('active' if sorting and sorting == 'most_viewed' else '')">Most Viewed</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- search -->
|
||||
<form t-attf-action="/slides/#{slug(channel)}" role="search" method="get">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" name="search" t-attf-placeholder="Search in #{channel.name}" t-att-value="search"/>
|
||||
<span class="input-group-append">
|
||||
<button class="btn btn-primary" type="submit" aria-label="Search" title="Search">
|
||||
<div class="input-group o_wslides_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" t-attf-placeholder="Search in #{channel.name}" t-att-value="search"/>
|
||||
</div>
|
||||
</form>
|
||||
<!-- sort / filter -->
|
||||
<small class="dropdown float-right ml-3">
|
||||
<h6 class="m-0">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button" id="slidesChannelDropdownSort"
|
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<t t-if="sorting == 'most_voted'">Most Voted</t>
|
||||
<t t-elif="sorting == 'most_viewed'">Most Viewed</t>
|
||||
<t t-else="">Newest</t>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="slidesChannelDropdownSort" role="menu">
|
||||
<div role="separator" class="dropdown-header">Sort by</div>
|
||||
</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">
|
||||
<a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nav</a>
|
||||
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="/slides">Home</a>
|
||||
<a t-att-class="'dropdown-item %s' % ('active' if not search_category and not search_tag and not search_slide_type else '')" t-att-href="'/slides/%s' % slug(channel)">
|
||||
└<span class="ml-1" t-esc="channel.name"/>
|
||||
</a>
|
||||
<a class="dropdown-item active" t-att-aria-current="'page' and search_category" t-if="search_category" t-att-href="'/slides/%s/category/%s' % (slug(channel), slug(search_category))">
|
||||
└<span class="ml-1" t-esc="search_category.name"/>
|
||||
</a>
|
||||
<a class="dropdown-item active" t-att-aria-current="'page' and search_tag" t-if="search_tag" t-att-href="'/slides/%s/tag/%s' % (slug(channel), slug(search_tag))">
|
||||
└<span class="ml-1" t-esc="search_tag.name"/>
|
||||
</a>
|
||||
<a class="dropdown-item active" t-att-aria-current="'page' and search_uncategorized" t-if="search_uncategorized" t-att-href="'/slides/%s?search_uncategorized=1' % (slug(channel))">
|
||||
└<span class="ml-1">Uncategorized</span>
|
||||
</a>
|
||||
<a class="dropdown-item active" t-att-aria-current="'page' and search_slide_type" t-if="search_slide_type" t-att-href="'/slides/%s?slide_type=%s' % (slug(channel), search_slide_type)">
|
||||
└<span class="ml-1" t-esc="slide_types[search_slide_type]"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group ml-1 position-static">
|
||||
<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>Search and sort</a>
|
||||
<div class="dropdown-menu dropdown-menu-right w-100" style="right: 10px;">
|
||||
<form class="px-4 py-3" t-attf-action="/slides/#{slug(channel)}" role="search" method="get">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" name="search" t-attf-placeholder="Search in #{channel.name}" 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"/>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
<div class="dropdown-divider"/>
|
||||
<h6 class="dropdown-header">Sort by:</h6>
|
||||
<a role="menuitem" t-att-href="'/slides/%s?%s' % (slug(channel), keep_query('debug', 'slide_type', sorting='latest'))"
|
||||
t-att-class="'dropdown-item %s' % ('active' if sorting and sorting == 'latest' else '')">Newest</a>
|
||||
<a role="menuitem" t-att-href="'/slides/%s?%s' % (slug(channel), keep_query('debug', 'slide_type', sorting='most_voted'))"
|
||||
@@ -63,8 +114,8 @@
|
||||
<a role="menuitem" t-att-href="'/slides/%s?%s' % (slug(channel), keep_query('debug', 'slide_type', sorting='most_viewed'))"
|
||||
t-att-class="'dropdown-item %s' % ('active' if sorting and sorting == 'most_viewed' else '')">Most Viewed</a>
|
||||
</div>
|
||||
</h6>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -81,9 +132,9 @@
|
||||
<t t-call="website.layout">
|
||||
<div class="wrap o_wslides_wrap">
|
||||
<t t-set="main_object" t-value="channel"/>
|
||||
<t t-call="website_slides.course_nav"/>
|
||||
|
||||
<div class="o_wslides_course_header">
|
||||
<div class="o_wslides_course_header position-relative pt-5">
|
||||
<t t-call="website_slides.course_nav"/>
|
||||
<div class="container o_wslides_course_header_container">
|
||||
<div class="row align-items-end d-flex">
|
||||
<div class="col-md-4 d-none d-sm-block o_wslides_course_header_aside">
|
||||
|
||||
Reference in New Issue
Block a user