Skip to content
Permalink
Browse files

[REF] website_slides: subnav design

  • Loading branch information...
stefanorigano authored and tde-banana-odoo committed Mar 4, 2019
1 parent 353a161 commit 340beb3473c898b0e740c1eb9500574f7766e242
@@ -146,40 +146,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);
}
}

@@ -7,8 +7,8 @@
<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">
<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,42 +29,92 @@
</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>

<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">
<a class="btn btn-secondary 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)">
&#9492;<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))">
&#9492;<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))">
&#9492;<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))">
&#9492;<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)">
&#9492;<span class="ml-1" t-esc="slide_types[search_slide_type]"/>
</a>
</div>
</div>

<div class="btn-group ml-1 position-static w-100">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Search and sort</a>
<div class="dropdown-menu dropdown-menu-right w-100">
<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"></i>
</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'))"
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>
</h6>
</small>
</div>
</div>
</div>
</div>
</div>
@@ -81,9 +131,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">

0 comments on commit 340beb3

Please sign in to comment.
You can’t perform that action at this time.