[FIX] website_slides: prevent content title overflow

This commit resolves the issue of content title overflow in both fullscreen
and non-fullscreen views by cropping the title and adding '...' at the end.

Task-3384661

closes odoo/odoo#137112

X-original-commit: 2275279a74757d47b3138587793aef67f6b5e7ef
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
This commit is contained in:
Mayurrajsinh Rathod
2023-09-29 14:48:22 +00:00
parent 5098f4e2f4
commit 68ddd3c3a0
3 changed files with 7 additions and 7 deletions
@@ -8,7 +8,7 @@
<div class="row align-items-center justify-content-between">
<!-- Desktop Mode -->
<nav aria-label="breadcrumb" class="col-md-8 d-none d-md-flex">
<ol class="breadcrumb bg-transparent mb-0 ps-0 py-0">
<ol class="breadcrumb bg-transparent mb-0 ps-0 py-0 overflow-hidden">
<li class="breadcrumb-item">
<a href="/slides">Courses</a>
</li>
@@ -221,10 +221,10 @@
<div class="d-flex flex-wrap align-items-start my-3 w-100">
<t t-set="slide_completed" t-value="channel_progress[slide.id].get('completed')"/>
<div class="col-12 col-md order-2 order-md-1 d-flex">
<div class="d-flex align-items-start">
<h1 class="h4 my-0 d-flex flex_row">
<div class="d-flex align-items-start overflow-hidden">
<h1 class="h4 my-0 d-flex flex_row overflow-hidden">
<i t-attf-class="fa #{slide.slide_icon_class} me-2"/>
<span t-field="slide.name"/>
<span class="text-truncate" t-field="slide.name"/>
</h1>
</div>
</div>
@@ -136,19 +136,19 @@
t-att-data-session-answers="session_answers"
t-att-data-website-share-url="slide.website_share_url"
t-att-data-email-sharing="bool(slide.channel_id.share_slide_template_id)">
<div class="ms-2 o_wslides_sidebar_content">
<div class="ms-2 o_wslides_sidebar_content overflow-hidden">
<a t-if="can_access" class="d-block" href="#">
<div class="d-flex">
<t t-if="is_member" t-call="website_slides.slide_sidebar_done_button"/>
<i t-else="" t-attf-class="fa #{slide.slide_icon_class} me-2"/>
<div class="o_wslides_fs_slide_name" t-esc="slide.name"/>
<div class="o_wslides_fs_slide_name text-truncate" t-esc="slide.name"/>
</div>
</a>
<span t-else="" class="d-block" href="#">
<div class="d-flex">
<t t-if="is_member" t-call="website_slides.slide_sidebar_done_button"/>
<i t-else="" t-attf-class="fa #{slide.slide_icon_class} me-2 text-600"/>
<div class="o_wslides_fs_slide_name text-600" t-esc="slide.name"/>
<div class="o_wslides_fs_slide_name text-600 text-truncate" t-esc="slide.name"/>
</div>
</span>
<ul class="list-unstyled w-100 small fw-light" t-if="slide._has_additional_resources() or (slide.question_ids and not slide.slide_category =='quiz')" >