pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website_slides: improve homepage navbar design

Browse Source 
Force white background + add the default bootstrap shadow. Do not use <h4>
tags to keep the right font-size on mobile. Simplify layout, add a second
navabar to handle content supposed to be moved to the right.

Commit linked to task ID 1941250 and PR #31279.
This commit is contained in:
sri-odoo
2019-02-21 06:57:04 +00:00
committed by Aurélien Warnon
parent cb483d2aa6
commit 03a085dff0
3 changed files with 42 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_slides/static/src/scss/website_slides.scss
+15 -5
View File
@@ -27,10 +27,11 @@ $MAX-Z-INDEX : 2147483647 !default;
}
.o_wslides_wrap {
.cta-title {
font-size: 1.2em;
}
background-color: desaturate(map-get($grays, "200"), 80%);
.cta-title {
font-size: 1.2em;
}
.o_wslides_course_card {
.card-body {
padding: 0.75em 1em;
@@ -123,8 +124,17 @@ $MAX-Z-INDEX : 2147483647 !default;
// **************************************************
div .o_wslides_home_nav {
position: relative;
top: -50px;
top: -40px;
@include media-breakpoint-up(md) {
font-size: 1rem;
.o_wslides_nav_navbar_right {
margin-left: auto;
padding-left: $spacer;
border-left: 1px solid $border-color;
}
}
}
div .o_wslides_home_main {
addons/website_slides/views/website_slides_templates_homepage.xml
+25 -24
View File
@@ -19,23 +19,20 @@
</div>
</div>
</section>
<div class="container mt16 o_wslides_home_nav">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container mt16 o_wslides_home_nav position-relative">
<nav class="navbar navbar-expand-md navbar-light shadow-sm" style="background: white!important">
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarSlidesHomepage"
aria-controls="navbarSlidesHomepage" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"/>
</button>
<div class="collapse navbar-collapse" id="navbarSlidesHomepage">
<a class="navbar-brand" href="#"></a>
<ul class="navbar-nav mr-auto">
<li class="nav-item o_wslides_home_all_slides">
<h4><a class="nav-link" href="/slides/all"><i class="fa fa-rocket"/> All courses</a></h4>
</li>
<li class="nav-item ml16">
<h4><a class="nav-link" href="/slides/all"><i class="fa fa-file"/> My courses</a></h4>
</li>
</ul>
<div class="navbar-nav">
<a class="nav-link nav-link mr-md-2 o_wslides_home_all_slides" href="/slides/all"><i class="fa fa-graduation-cap mr-1"/>All courses</a>
</div>
<div class="navbar-nav o_wslides_nav_navbar_right">
<a class="nav-link nav-link" href="/slides/all"><i class="fa fa-file mr-1"/>My courses</a>
</div>
</div>
</nav>
</div>
@@ -129,10 +126,12 @@
<h3 class="mb-4">Start your online course today !</h3>
</div>
</section>
<div class="container mt16 o_wslides_home_nav">
<div class="container mt16 o_wslides_home_nav position-relative">
<!-- Navbar dynamically composed using displayed channel tag groups. -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" t-att-href="'/slides?%s' % keep_query('debug')"><i class="fa fa-chevron-left"/></a>
<nav class="navbar navbar-expand-md navbar-light shadow-sm" style="background: white!important">
<div class="navbar-nav border-right pr-3">
<a class="nav-link nav-item" t-att-href="'/slides?%s' % keep_query('debug')"><i class="fa fa-chevron-left"/></a>
</div>
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarTagGroups"
aria-controls="navbarTagGroups" aria-expanded="false" aria-label="Toggle navigation">
@@ -140,15 +139,15 @@
</button>
<div class="collapse navbar-collapse" id="navbarTagGroups">
<t t-set="search_tag_groups" t-value="search_tags.mapped('group_id')"/>
<ul class="navbar-nav mr-auto">
<ul class="navbar-nav flex-grow-1">
<t t-foreach="tag_groups" t-as="tag_group">
<li t-att-class="'nav-item dropdown ml16 %s' % ('active' if tag_group in search_tag_groups else '')">
<h4><a class="nav-link dropdown-toggle"
<a class="nav-link dropdown-toggle"
href="/slides/all"
t-att-data-target="'#navToogleTagGroup%s' % tag_group.id"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"
t-esc="tag_group.name"/></h4>
t-esc="tag_group.name"/>
<div class="dropdown-menu" t-att-id="'navToogleTagGroup%s' % tag_group.id">
<t t-foreach="tag_group.tag_ids" t-as="tag">
<a t-att-class="'dropdown-item %s' % ('active' if tag in search_tags else '')"
@@ -158,19 +157,21 @@
</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">
<i class="fa fa-diamond"/> <t t-esc="user_id.karma"/>
</a>
</li>
</ul>
<!-- karma / profile -->
<a t-if="not is_public_user" t-att-href="'/profile/user/%s' % user.id" class="font-weight-bold mr-3">
<i class="fa fa-diamond"/> <t t-esc="user_id.karma"/>
</a>
<!-- search box -->
<form method="GET" class="form-inline justify-content-center">
<form method="GET" class="form-inline o_wslides_nav_navbar_right">
<div class="input-group">
<input type="search" name="search" class="form-control"
placeholder="Search something" aria-label="Search"
t-att-value="search_term"/>
<div class="input-group-append">
<button class="btn btn-outline-success oe_search_button" type="submit" aria-label="Search" title="Search">
<button class="btn border oe_search_button" type="submit" aria-label="Search" title="Search">
<i class="fa fa-search"/>
</button>
</div>
addons/website_slides_survey/views/website_slides_templates_homepage.xml
+2 -4
View File
@@ -2,10 +2,8 @@
<odoo>
<data>
<template id="courses_home_inherit_survey" inherit_id="website_slides.courses_home">
<xpath expr="//li[hasclass('o_wslides_home_all_slides')]" position="after">
<li class="nav-item ml16">
<h4><a class="nav-link" href="/slides/all?slide_type=certification"><i class="fa fa-trophy"/> Certifications</a></h4>
</li>
<xpath expr="//a[hasclass('o_wslides_home_all_slides')]" position="after">
<a class="nav-link nav-link" href="/slides/all?slide_type=certification"><i class="fa fa-trophy mr-1"/>Certifications</a>
</xpath>
</template>
</data>