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

[FIX] website_slides: improve documentation course layout and not fullscreen lesson page 

Purpose of this commit is to perform a cleaning of

 * documentation course: add a new specific navigation for documentation
   course with a sort option and filters on slide types; clean overall layout
   of documentation course to have a better-looking result as this page was
   still not really updated;
 * lesson not fullscreen page: global layout and cleaning of not-fullscreen
   page to have a better-looking result. Notably related slides for
   documentation slide is set on right, and some UX bits are tweakes;

Commit linked to task ID 1941250 and PR #31977
parent f0ec67f1
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
addons/website_slides/static/src/scss/website_slides.scss
+ 80
− 51
View file @ af41430b
......@@ -81,6 +81,25 @@ $o-wslides-fs-side-width: 300px;
.o_wslides_entry_muted {
opacity: 0.5;
}
// Truncate text descriptions to a specific number of lines.
// If '-webkit-line-clamp' is not supported, a less effective
// 'line-height' fallback will be used instead.
$truncate-limits: 2, 3, 5, 10;
@each $limit in $truncate-limits {
.o_wslides_desc_truncate_#{$limit} {
$line-height: 1.3;
max-height: $limit * $line-height * 1em;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
line-height: $line-height;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $limit;
}
}
}
......@@ -99,6 +118,37 @@ $o-wslides-fs-side-width: 300px;
// New course page
// **************************************************
@mixin o-wslides-tabs($tab-active-color: $o-wslides-color-bg) {
margin-top: $o-wslides-tabs-height * -1;
border-bottom: 0;
.nav-link {
border-radius: 0;
border-width: 0 1px;
@include o-hover-text-color(rgba(white, 0.8), white);
&, &:hover {
border-color: #875A7B;
background: transparent;
}
&.active {
color: $headings-color;
background: $tab-active-color;
border-color: $tab-active-color;
}
}
}
@mixin o-wslides-header-bar() {
&:before {
content: "";
@include o-position-absolute(auto, 0, 0, 0);
height: $o-wslides-tabs-height;
background: rgba(black, 0.2);
}
}
.o_wslides_course_nav {
@include o-position-absolute(0,0,auto,0);
border-width: 1px 0;
......@@ -122,42 +172,27 @@ $o-wslides-fs-side-width: 300px;
}
}
.o_wslides_course_header:before {
.o_wslides_course_header {
@include media-breakpoint-up(md) {
content: "";
@include o-position-absolute(auto, 0, 0, 0);
height: $o-wslides-tabs-height;
background: rgba(black, 0.2);
@include o-wslides-header-bar();
}
}
.o_wslides_course_doc_header {
@include o-wslides-header-bar();
}
.o_wslides_course_main {
.o_wslides_nav_tabs {
@include media-breakpoint-up(md) {
margin-top: $o-wslides-tabs-height * -1;
border-bottom: 0;
.nav-link {
border-radius: 0;
border-width: 0 1px;
@include o-hover-text-color(rgba(white, 0.8), white);
&, &:hover {
border-color: #875A7B;
background: transparent;
}
&.active {
color: $headings-color;
background: $o-wslides-color-bg;
border-color: $o-wslides-color-bg;
}
}
@include o-wslides-tabs();
}
@include media-breakpoint-only(xs) {
overflow-x: auto;
overflow-y: hidden;
line-height: 1.51;
li {
white-space: nowrap;
......@@ -165,6 +200,10 @@ $o-wslides-fs-side-width: 300px;
}
}
.o_wslides_doc_nav_tabs {
@include o-wslides-tabs($gray-100);
}
.o_wslides_tabs_content {
@include media-breakpoint-down(sm) {
background-color: $nav-tabs-link-active-bg;
......@@ -236,42 +275,32 @@ $o-wslides-fs-side-width: 300px;
// New lesson page
// **************************************************
.o_wslides_lesson_header {
margin: auto;
.o_wslides_lesson_header_container {
a:hover {
text-decoration: none;
}
.fa-trophy {
font-size: 2em;
}
}
}
.o_wslides_lesson_main {
.o_wslides_lesson_aside {
.o_wslides_lesson_aside_list,
.o_wslides_lesson_aside_doc {
border: 0;
border-bottom: 3px solid $border-color;
position: relative;
top: -50px;
.nav-tabs .nav-link {
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
.o_wslides_lesson_aside_collapse.collapsed {
transform: rotate(90deg);
}
.o_wslides_lesson_aside_list {
@include media-breakpoint-up (lg) {
top: -58px;
}
}
.o_wslides_lesson_aside_list {
.o_wslides_lesson_aside_list_link {
text-decoration: none;
@include o-hover-text-color($gray-600, $headings-color );
.o_wslides_lesson_link_name {
line-height: 1.2;
}
&.active {
background-color: $gray-200;
box-shadow:inset 2px 0 theme-color('primary');
}
&:hover .o_wslides_lesson_link_name {
color: $headings-color;
}
}
}
......
addons/website_slides/views/website_slides_templates_utils.xml
+ 17
− 11
View file @ af41430b
......@@ -3,22 +3,28 @@
<!-- Share on social networks -->
<template id='slides_share' name="Slides Media Share">
<div>
<a t-attf-href="https://www.facebook.com/sharer/sharer.php?u=#{record.website_url}" class="o_slides_social_share" social-key="facebook" aria-label="Share on Facebook" title="Share on Facebook"><i class="fa fa-facebook-square fa-2x"/></a>
<a t-attf-href="https://twitter.com/intent/tweet?text=#{record.name}&amp;url=#{record.website_url}" class="o_slides_social_share" social-key="twitter" aria-label="Share on Twitter" title="Share on Twitter"><i class="fa fa-twitter fa-2x"/></a>
<a t-attf-href="http://www.linkedin.com/shareArticle?mini=true&amp;url=#{record.website_url}&amp;title=#{record.name}&amp;" social-key="linkedin" class="o_slides_social_share" aria-label="Share on LinkedIn" title="Share on LinkedIn"><i class="fa fa-linkedin fa-2x"/></a>
<div class="btn-group" role="group">
<a t-attf-href="https://www.facebook.com/sharer/sharer.php?u=#{record.website_url}" class="btn border bg-white o_slides_social_share" social-key="facebook" aria-label="Share on Facebook" title="Share on Facebook"><i class="fa fa-facebook-square fa-fw"/></a>
<a t-attf-href="https://twitter.com/intent/tweet?text=#{record.name}&amp;url=#{record.website_url}" class="btn border bg-white o_slides_social_share" social-key="twitter" aria-label="Share on Twitter" title="Share on Twitter"><i class="fa fa-twitter fa-fw"/></a>
<a t-attf-href="http://www.linkedin.com/shareArticle?mini=true&amp;url=#{record.website_url}&amp;title=#{record.name}&amp;" social-key="linkedin" class="btn border bg-white o_slides_social_share" aria-label="Share on LinkedIn" title="Share on LinkedIn"><i class="fa fa-linkedin fa-fw"/></a>
</div>
</template>
<!-- Share: social media -->
<template id='slide_social_media' name="Share on Social Networks">
<h4 class="mt0">Share on Social Networks</h4>
<t t-call="website_slides.slides_share">
<t t-set="record" t-value="slide"/>
</t>
<h4 class="mt-3">Share Link</h4>
<input type="text" class="form-control" t-att-value="slide.website_url" readonly="readonly" onClick="this.select();"/>
<span class="form-text">Use permanent link to share in social media</span>
<div class="row">
<div class="col-12 col-lg-6 mb-4">
<h5 class="mt-0 mb-2">Share on Social Networks</h5>
<t t-call="website_slides.slides_share">
<t t-set="record" t-value="slide"/>
</t>
</div>
<div class="col-12 col-lg-6">
<h5 class="mt-0 mb-2">Share Link</h5>
<input type="text" class="form-control" t-att-value="slide.website_url" readonly="readonly" onClick="this.select();"/>
<span class="form-text text-muted">Use permanent link to share in social media</span>
</div>
</div>
</template>
<!-- Website edit page -->
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment