From 0027544779f156ec7183a13b24caf7de42ebe012 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Theys?= <seb@odoo.com>
Date: Tue, 25 Sep 2018 12:20:55 +0200
Subject: [PATCH] [FIX] website_slides: fix bs4 bugs

PR: #27131
---
 .../lib/pdfslidesviewer/PDFSlidesViewer.js    |  13 +-
 .../static/src/scss/website_slides.scss       |  24 ---
 .../website_slides/views/website_slides.xml   | 120 ++++++------
 .../views/website_slides_embed.xml            | 175 +++++++++---------
 4 files changed, 145 insertions(+), 187 deletions(-)

diff --git a/addons/website_slides/static/lib/pdfslidesviewer/PDFSlidesViewer.js b/addons/website_slides/static/lib/pdfslidesviewer/PDFSlidesViewer.js
index f313a37dfa3..73fac349a1a 100644
--- a/addons/website_slides/static/lib/pdfslidesviewer/PDFSlidesViewer.js
+++ b/addons/website_slides/static/lib/pdfslidesviewer/PDFSlidesViewer.js
@@ -74,7 +74,7 @@ var PDFSlidesViewer = (function(){
                 self.pageRendering = false;
                 if (self.pageNumPending !== null) {
                     // New page rendering is pending
-                    renderPage(self.pageNumPending);
+                    self.renderPage(self.pageNumPending);
                     self.pageNumPending = null;
                 }
                 self.pdf_page_current = page_number;
@@ -147,16 +147,9 @@ var PDFSlidesViewer = (function(){
 
     PDFSlidesViewer.prototype.toggleFullScreenFooter = function(){
         if(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
-            var $navBarFooter = $('div#PDFViewer > div.navbar-fixed-bottom');
+            var $navBarFooter = $('div#PDFViewer div.oe_slides_panel_footer').parent();
             $navBarFooter.toggleClass('oe_show_footer');
-
-            if ($navBarFooter.css('display') === 'none') {
-                $navBarFooter.css('display', 'block');
-                $('div#PDFViewer').css('padding-bottom', '50px');
-            } else {
-                $navBarFooter.css('display', 'none');
-                $('div#PDFViewer').css('padding-bottom', '0');
-            }
+            $navBarFooter.toggle();
         }
     }
 
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index 22e4d30b446..f67344fdbb6 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -15,10 +15,6 @@ $MAX-Z-INDEX : 2147483647 !default;
     object-position: top;
 }
 
-.oe_slides_panel_footer {
-    background-color: $light;
-}
-
 .oe_slides_panel_footer .fa, .oe_slide_js_embed_option_link{
     color : theme-color('primary');
     cursor: pointer;
@@ -98,10 +94,6 @@ textarea.o_slides_comment {
 }
 
 // Thumbnails
-.oe_slides_thumbnail_container{
-    height: 300px
-}
-
 .oe_slides_grid_thumbnail {
     @include top-covered-image;
     height: 200px;
@@ -161,12 +153,6 @@ textarea.o_slides_comment {
     padding: 10px;
 }
 
-.oe_slides_panel{
-    padding-bottom: 50px;
-    height:100%;
-    margin-bottom:0px;
-}
-
 // PDF Viewer Share bar
 .oe_slides_share_bar{
     padding: 10px 0;
@@ -179,13 +165,3 @@ textarea.o_slides_comment {
 .oe_show_footer {
     z-index: $MAX-Z-INDEX; // Looks terrible but seems necessary due to fullscreen & canvas in PDFSlidesViewer
 }
-// Display Slide Navigation Footer bit clear on mobile preview
-@media screen and (max-width: 300px) {
-    .o_slide_navigation_buttons {
-        margin-left: 15px;
-        margin-right: -15px;
-        .col-4 {
-            display: none;
-        }
-    }
-}
diff --git a/addons/website_slides/views/website_slides.xml b/addons/website_slides/views/website_slides.xml
index e00e8e431ca..d353a696606 100644
--- a/addons/website_slides/views/website_slides.xml
+++ b/addons/website_slides/views/website_slides.xml
@@ -14,7 +14,7 @@
 
 <!-- Tools template: share on social networkds -->
 <template id='slides_share' name="Slides Media Share">
-    <div class="form-group">
+    <div>
         <a t-attf-href="https://www.facebook.com/sharer/sharer.php?u=#{slide.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=#{slide.name}&amp;url=#{slide.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=#{slide.website_url}&amp;title=#{slide.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>
@@ -99,7 +99,7 @@
                         </t>
                         <!-- Public user has not right to create/write on slide -->
                         <t t-if="channel.can_upload and not is_public_user">
-                            <a role="button" class="btn btn-primary oe_slide_js_upload" title="Upload Presentation" t-attf-channel_id="#{channel.id}" aria-label="Upload Presentation">
+                            <a role="button" class="btn btn-primary oe_slide_js_upload" title="Upload Presentation" t-attf-channel_id="#{channel.id}" aria-label="Upload Presentation" href="#">
                                 <i class="fa fa-cloud-upload"></i> Upload
                             </a>
                         </t>
@@ -249,7 +249,7 @@
                                 </p>
                                 <p>
                                     <!-- Public user has not right to create/write on slide-->
-                                    <a role="button" t-if="can_upload and not is_public_user" class="btn btn-primary oe_slide_js_upload" t-attf-channel_id="#{channel.id}" aria-label="Upload Presentation" title="Upload Presentation">
+                                    <a role="button" t-if="can_upload and not is_public_user" class="btn btn-primary oe_slide_js_upload" t-attf-channel_id="#{channel.id}" aria-label="Upload Presentation" title="Upload Presentation" href="#">
                                         <i class="fa fa-cloud-upload"></i> Upload
                                     </a>
                                 </p>
@@ -323,37 +323,39 @@
 
 <!-- Embedded template: display a list of slides in a grid view -->
 <template id='slides_grid_view' name="Slides (Grid View)">
-    <div class="col-xl-3 col-lg-4 col-md-6 col-12 mt16 mb16" t-foreach="slides" t-as="slide">
-        <div class="card card-body oe_slides_thumbnail_container">
-            <a t-attf-href="/slides/slide/#{slug(slide)}">
-                <img t-attf-src="/web/image/slide.slide/#{slide.id}/image_thumb" class="img-fluid img-thumbnail oe_slides_grid_thumbnail" alt="slide.name"/>
-            </a>
-            <span t-if="not slide.website_published" class="badge badge-danger" style="position: absolute;right: 20px;top: 7px;">Unpublished</span>
-            <a t-if="not is_public_user and slide.website_published and slide.channel_id.promote_strategy == 'custom' and slide.channel_id.promoted_slide_id.id != slide.id"
-                groups="base.group_user"
-                t-attf-href="/slides/slide/#{slide.id}/promote"
-                style="position: absolute;right: 20px;top: 7px;"
-                t-attf-title="Promote this #{slide.slide_type}"
-                t-attf-aria-label="Promote this #{slide.slide_type}">
-                <span class="fa-stack fa-lg">
-                  <i class="fa fa-square fa-stack-2x oe_slides_opacity"></i>
-                  <i class="fa fa-bullhorn fa-stack-1x fa-inverse"></i>
-                </span>
-            </a>
+    <div class="row">
+        <div class="col-xl-3 col-lg-4 col-md-6 col-12 mt16 mb16" t-foreach="slides" t-as="slide">
+            <div class="card card-body">
+                <a t-attf-href="/slides/slide/#{slug(slide)}">
+                    <img t-attf-src="/web/image/slide.slide/#{slide.id}/image_thumb" class="img-fluid img-thumbnail oe_slides_grid_thumbnail" alt="slide.name"/>
+                </a>
+                <span t-if="not slide.website_published" class="badge badge-danger" style="position: absolute;right: 20px;top: 7px;">Unpublished</span>
+                <a t-if="not is_public_user and slide.website_published and slide.channel_id.promote_strategy == 'custom' and slide.channel_id.promoted_slide_id.id != slide.id"
+                    groups="base.group_user"
+                    t-attf-href="/slides/slide/#{slide.id}/promote"
+                    style="position: absolute;right: 20px;top: 7px;"
+                    t-attf-title="Promote this #{slide.slide_type}"
+                    t-attf-aria-label="Promote this #{slide.slide_type}">
+                    <span class="fa-stack fa-lg">
+                      <i class="fa fa-square fa-stack-2x oe_slides_opacity"></i>
+                      <i class="fa fa-bullhorn fa-stack-1x fa-inverse"></i>
+                    </span>
+                </a>
 
-            <div style="padding: 5px;">
-                <h4 class="mt4 mb8 oe_slides_ellipsis">
-                    <a t-att-title="slide.name" t-attf-href="/slides/slide/#{slug(slide)}" t-esc="slide.name"/>
-                </h4>
-                <div class="text-muted clearfix">
-                    <small class="float-left"><t t-esc="slide.total_views"/> Views</small>
-                    <small class="float-right"><timeago class="timeago" t-att-datetime="slide.create_date"></timeago></small>
+                <div style="padding: 5px;">
+                    <h4 class="mt4 mb8 oe_slides_ellipsis">
+                        <a t-att-title="slide.name" t-attf-href="/slides/slide/#{slug(slide)}" t-esc="slide.name"/>
+                    </h4>
+                    <div class="text-muted clearfix">
+                        <small class="float-left"><t t-esc="slide.total_views"/> Views</small>
+                        <small class="float-right"><timeago class="timeago" t-att-datetime="slide.create_date"></timeago></small>
+                    </div>
+                    <p t-if="slide.tag_ids" style="padding-top: 5px;">
+                        <t t-foreach="slide.tag_ids" t-as="att_tag">
+                            <a t-attf-href="/slides/#{slug(channel)}/tag/#{slug(att_tag)}" t-attf-class="badge badge-secondary #{tag and tag.name == att_tag.name and 'badge-primary' ''}" t-field="att_tag.name"/>
+                        </t>
+                    </p>
                 </div>
-                <p t-if="slide.tag_ids" style="padding-top: 5px;">
-                    <t t-foreach="slide.tag_ids" t-as="att_tag">
-                        <a t-attf-href="/slides/#{slug(channel)}/tag/#{slug(att_tag)}" t-attf-class="badge badge-secondary #{tag and tag.name == att_tag.name and 'badge-primary' ''} text-muted" t-field="att_tag.name"/>
-                    </t>
-                </p>
             </div>
         </div>
     </div>
@@ -624,33 +626,29 @@
                     </ul>
                     <div class="tab-content">
                         <div role="tabpanel" id="related" class="tab-pane active mt4">
-                            <div class="col-xl-12 col-lg-12 col-md-12 col-12">
-                                <div class="card">
-                                    <ul class="list-unstyled card-body">
-                                        <t t-set="related_slides_list" t-value="list(related_slides)"/>
-                                        <t t-if="not related_slides_list">
-                                            No presentation available.
-                                        </t>
-                                        <t t-foreach="related_slides_list" t-as="slide">
-                                            <t t-call="website_slides.related_slides"/>
-                                        </t>
-                                    </ul>
-                                </div>
+                            <div class="card">
+                                <ul class="list-unstyled card-body">
+                                    <t t-set="related_slides_list" t-value="list(related_slides)"/>
+                                    <t t-if="not related_slides_list">
+                                        No presentation available.
+                                    </t>
+                                    <t t-foreach="related_slides_list" t-as="slide">
+                                        <t t-call="website_slides.related_slides"/>
+                                    </t>
+                                </ul>
                             </div>
                         </div>
                         <div role="tabpanel" id="most_viewed" class="tab-pane  mt4">
-                            <div class="col-xl-12 col-lg-12 col-md-12 col-12">
-                                <div class="card">
-                                    <ul class="list-unstyled card-body">
-                                        <t t-set="most_viewed_slides_list" t-value="list(most_viewed_slides)"/>
-                                        <t t-if="not list(most_viewed_slides_list)">
-                                            No presentation available.
-                                        </t>
-                                        <t t-foreach="most_viewed_slides_list" t-as="slide">
-                                            <t t-call="website_slides.related_slides"/>
-                                        </t>
-                                    </ul>
-                                </div>
+                            <div class="card">
+                                <ul class="list-unstyled card-body">
+                                    <t t-set="most_viewed_slides_list" t-value="list(most_viewed_slides)"/>
+                                    <t t-if="not list(most_viewed_slides_list)">
+                                        No presentation available.
+                                    </t>
+                                    <t t-foreach="most_viewed_slides_list" t-as="slide">
+                                        <t t-call="website_slides.related_slides"/>
+                                    </t>
+                                </ul>
                             </div>
                         </div>
                     </div>
@@ -662,12 +660,12 @@
 
 <!-- Slide sub-template: display an item in a list of related slides (Related, Most Viewed, ...) -->
 <template id="related_slides" name="Related Slide">
-    <li class="media">
-        <a t-attf-href="/slides/slide/#{slug(slide)}">
+    <li class="media mt-3">
+        <a t-attf-href="/slides/slide/#{slug(slide)}" class="mr-3">
             <img class="oe_slides_apart_small" t-attf-src="/web/image/slide.slide/#{slide.id}/image_thumb" alt="slide.name"/>
         </a>
         <div class="media-body">
-            <a t-attf-href="/slides/slide/#{slug(slide)}"><h5 t-esc="slide.name"/></a>
+            <a t-attf-href="/slides/slide/#{slug(slide)}"><h6 t-esc="slide.name" class="mb-1"/></a>
             <small class="text-muted">
                 <t t-esc="slide.total_views"/> Views . <timeago class="timeago" t-att-datetime="slide.create_date"></timeago>
             </small>
@@ -680,7 +678,7 @@
 <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"/>
-    <h4 class="mt0">Share Link</h4>
+    <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>
 </template>
@@ -688,7 +686,7 @@
 
 <!-- Slide sub-template: share: send by email -->
 <template id='slide_social_email' name="Share by Email">
-    <h4 class="mt0">Share with a friend</h4>
+    <h4 class="mt-3">Share with a friend</h4>
     <t t-if="not is_public_user">
         <form class="form-group oe_slide_js_share_email" role="form">
             <div class="input-group col-lg-6">
diff --git a/addons/website_slides/views/website_slides_embed.xml b/addons/website_slides/views/website_slides_embed.xml
index fb03fd8154e..35731f1f4cc 100644
--- a/addons/website_slides/views/website_slides_embed.xml
+++ b/addons/website_slides/views/website_slides_embed.xml
@@ -3,6 +3,7 @@
     <data>
         <!-- Bundle (minimal) for embedded slide iframe -->
         <template id="website_slides.slide_embed_assets" name="Website slides embed assets">
+            <t t-call="web._assets_helpers"><t t-set="no_bs_vars" t-value="True"/></t>
             <t t-call="web._assets_bootstrap"/>
             <link rel="stylesheet" type="text/scss" href="/website_slides/static/src/scss/website_slides.scss" t-ignore="true"/>
 
@@ -31,119 +32,109 @@
                         <div t-field="slide.channel_id.access_error_msg" />
                     </div>
                 </body>
-                <body>
-                <div id="PDFViewer" t-if="not private" class="card oe_slides_panel">
-                    <!-- PDF Viewer Header : contains the name, and the share links -->
-                    <div t-if="is_embedded" class="navbar-default oe_slides_share_bar">
-                        <div class="container-fluid">
-                            <div class="row">
-                                <div class="col-xl-8 col-lg-8 col-md-4 col-4 text-left">
-                                    <div class="oe_slides_ellipsis">
-                                        <a target="_new" t-att-href="slide.website_url">
-                                            <span  t-esc="slide.name" t-att-title="slide.name"/>
-                                        </a>
+                <body t-else="">
+                    <div id="PDFViewer" class="d-flex flex-column h-100 border">
+                        <!-- PDF Viewer Header : contains the name, and the share links -->
+                        <div t-if="is_embedded" class="navbar-default oe_slides_share_bar">
+                            <div class="container-fluid">
+                                <div class="row">
+                                    <div class="col-lg-8 col-4 text-left">
+                                        <div class="oe_slides_ellipsis">
+                                            <a target="_new" t-att-href="slide.website_url">
+                                                <span  t-esc="slide.name" t-att-title="slide.name"/>
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-1 col-2 text-right">
+                                        <b class="oe_slide_js_embed_option_link" data-slide-option-id="#slide_share"><i class="fa fa-share-alt"></i> Share</b>
+                                    </div>
+                                    <div class="col-lg-1 col-2 text-right">
+                                        <b class="oe_slide_js_embed_option_link" data-slide-option-id="#slide_email"><i class="fa fa-envelope"></i> Email</b>
+                                    </div>
+                                    <div class="col-lg-1 col-2 text-right">
+                                        <b class="oe_slide_js_embed_option_link" data-slide-option-id="#slide_embed"><i class="fa fa-code"></i> Embed</b>
                                     </div>
-                                </div>
-                                <div class="col-xl-1 col-lg-1 col-md-2 col-2 text-right">
-                                    <b class="oe_slide_js_embed_option_link" data-slide-option-id="#slide_share"><i class="fa fa-share-alt"></i> Share</b>
-                                </div>
-                                <div class="col-xl-1 col-lg-1 col-md-2 col-2 text-right">
-                                    <b class="oe_slide_js_embed_option_link" data-slide-option-id="#slide_email"><i class="fa fa-envelope"></i> Email</b>
-                                </div>
-                                <div class="col-xl-1 col-lg-1 col-md-2 col-2 text-right">
-                                    <b class="oe_slide_js_embed_option_link" data-slide-option-id="#slide_embed"><i class="fa fa-code"></i> Embed</b>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    <!--  PDF Viewer Body : contains the canvas, the loader, or the image-->
-                    <div id="PDFSlideViewer" style="position:relative;"
-                            t-attf-data-slideid="#{slide.id}"
-                            t-attf-data-slideurl="/slides/slide/#{slug(slide)}/pdf_content"
-                            t-attf-data-downloadable="#{slide.download_security}"
-                            t-att-data-defaultpage="page">
-                        <t t-if="is_embedded">
-                            <div id="slide_share" class="oe_slide_embed_option">
-                                <t t-call="website_slides.slide_social_media"/>
-                            </div>
-                            <div id="slide_email" class="oe_slide_embed_option">
-                                <t t-call="website_slides.slide_social_email"/>
-                            </div>
-                            <div id="slide_embed" class="oe_slide_embed_option">
-                                <t t-call="website_slides.slide_social_embed"/>
-                            </div>
-                        </t>
-                        <div id="slide_suggest" class="oe_slide_embed_option">
-                            <t t-foreach="related_slides" t-as="suggest_slide">
-                                <div class="col-lg-4 col-md-4 col-4 oe_slides_suggestion_media">
-                                    <a t-att-href="suggest_slide.website_url" target="_new">
-                                        <div class="oe_slides_suggestion_caption">
-                                            <h4><t t-esc="suggest_slide.name"/></h4>
-                                        </div>
-                                        <span class="oe-image-thumbnail">
-                                            <img class="img-fluid" t-attf-src="/web/image/slide.slide/#{suggest_slide.id}/image_thumb" alt="suggest_slide.name"/>
-                                        </span>
-                                    </a>
-
+                        <!--  PDF Viewer Body : contains the canvas, the loader, or the image-->
+                        <div id="PDFSlideViewer" class="text-center position-relative flex-grow-1" style="height: 0;"
+                                t-attf-data-slideid="#{slide.id}"
+                                t-attf-data-slideurl="/slides/slide/#{slug(slide)}/pdf_content"
+                                t-attf-data-downloadable="#{slide.download_security}"
+                                t-att-data-defaultpage="page">
+                            <t t-if="is_embedded">
+                                <div id="slide_share" class="oe_slide_embed_option">
+                                    <t t-call="website_slides.slide_social_media"/>
+                                </div>
+                                <div id="slide_email" class="oe_slide_embed_option">
+                                    <t t-call="website_slides.slide_social_email"/>
+                                </div>
+                                <div id="slide_embed" class="oe_slide_embed_option">
+                                    <t t-call="website_slides.slide_social_embed"/>
                                 </div>
                             </t>
-                        </div>
-                        <t t-if="slide.slide_type in ('presentation', 'document')">
-                            <div id="PDFViewerLoader" class="oe_slides_loader">
-                                <img class="img-fluid" t-attf-src="/web/image/slide.slide/#{slide.id}/image_medium" style="margin:auto;height:100%" alt="suggest_slide.name"/>
-                                <h4 class="text-center">
-                                    <i class="fa fa-spinner fa-spin"></i> Loading ...
-                                </h4>
+                            <div id="slide_suggest" class="oe_slide_embed_option">
+                                <t t-foreach="related_slides" t-as="suggest_slide">
+                                    <div class="col-4 oe_slides_suggestion_media">
+                                        <a t-att-href="suggest_slide.website_url" target="_new">
+                                            <div class="oe_slides_suggestion_caption">
+                                                <h4><t t-esc="suggest_slide.name"/></h4>
+                                            </div>
+                                            <span class="oe-image-thumbnail">
+                                                <img class="img-fluid" t-attf-src="/web/image/slide.slide/#{suggest_slide.id}/image_thumb" alt="suggest_slide.name"/>
+                                            </span>
+                                        </a>
+
+                                    </div>
+                                </t>
                             </div>
-                            <canvas id="PDFViewerCanvas" class="img-fluid" style="margin:auto;height:100%;display:none;"></canvas>
-                        </t>
-                        <t t-if="slide.slide_type in ('infographic')">
-                            <img t-attf-src="/web/image/slide.slide/#{slide.id}/datas" class="img-fluid" style="width:100%" alt="Slide image"/>
-                        </t>
-                    </div>
-                    <!-- Fixed bottom navbar -->
-                    <div class="navbar navbar-light bg-light navbar-fixed-bottom" role="navigation" t-if="slide.slide_type in ('presentation', 'document')">
-                        <div class="container-fluid oe_slides_panel_footer">
-                            <div class="row" style="padding-top:15px;">
-                                <div class="col-xl-2 col-lg-2 col-md-2 col-2 text-left">
-                                    <input type="number" class="text-center" id="page_number"></input> / <span id="page_count"></span>
+                            <t t-if="slide.slide_type in ('presentation', 'document')">
+                                <div id="PDFViewerLoader" class="oe_slides_loader">
+                                    <img class="img-fluid" t-attf-src="/web/image/slide.slide/#{slide.id}/image_medium" style="margin:auto;height:100%" alt="suggest_slide.name"/>
+                                    <h4 class="text-center">
+                                        <i class="fa fa-spinner fa-spin"></i> Loading ...
+                                    </h4>
                                 </div>
-                                <div class="col-xl-8 col-lg-8 col-md-8 col-8 d-none o_slide_navigation_buttons">
-                                    <div class="col-xl-4 col-lg-4 col-md-4 col-4 text-center"></div>
-                                    <div class="col-xl-1 col-lg-1 col-md-1 col-1 text-center">
-                                        <span id="first" title="First slide" role="img" aria-label="First slide">
+                                <canvas id="PDFViewerCanvas" class="img-fluid" style="margin: auto; height: 100%; display: none;"></canvas>
+                            </t>
+                            <t t-if="slide.slide_type in ('infographic')">
+                                <img t-attf-src="/web/image/slide.slide/#{slide.id}/datas" class="img-fluid" style="width: 100%" alt="Slide image"/>
+                            </t>
+                        </div>
+                        <!-- Fixed bottom navbar -->
+                        <div class="pt-2 pb-2 bg-light" role="navigation" t-if="slide.slide_type in ('presentation', 'document')">
+                            <div class="container-fluid oe_slides_panel_footer">
+                                <div class="row">
+                                    <div class="col-auto mr-auto text-left mt-2 mb-2">
+                                        <input type="number" class="text-center" id="page_number"></input> / <span id="page_count"></span>
+                                    </div>
+                                    <div class="col-auto o_slide_navigation_buttons mt-2 mb-2">
+                                        <span id="first" class="ml-2 mr-2" title="First slide" role="img" aria-label="First slide">
                                             <i class="fa fa-step-backward fa-2x"></i>
                                         </span>
-                                    </div>
-                                    <div class="col-xl-1 col-lg-1 col-md-1 col-1 text-center">
-                                        <a id="previous" title="Previous slide" aria-label="Previous slide"  role="button">
+                                        <a id="previous" class="ml-2 mr-2" title="Previous slide" aria-label="Previous slide" role="button">
                                             <i class="fa fa-arrow-circle-left fa-2x"></i>
                                         </a>
-                                    </div>
-                                    <div class="col-xl-1 col-lg-1 col-md-1 col-1 text-center">
-                                        <a id="next" title="Next slide" aria-label="Next slide" role="button">
+                                        <a id="next" class="ml-2 mr-2" title="Next slide" aria-label="Next slide" role="button">
                                             <i class="fa fa-arrow-circle-right fa-2x"></i>
                                         </a>
-                                    </div>
-                                    <div class="col-xl-1 col-lg-1 col-md-1 col-1 text-center">
-                                        <a id="last" title="Last slide" aria-label="Last slide" role="button">
+                                        <a id="last" class="ml-2 mr-2" title="Last slide" aria-label="Last slide" role="button">
                                             <i class="fa fa-step-forward fa-2x"></i>
                                         </a>
                                     </div>
-                                    <div class="col-xl-4 col-lg-4 col-md-4 col-4 text-center"></div>
-                                </div>
-                                <div class="col-xl-2 col-lg-2 col-md-2 col-2 text-right">
-                                    <a t-if="slide.download_security and not is_embedded" target="_top" t-attf-href="/slides/slide/#{slug(slide)}/download" title="Download" id="download">
-                                        <i class="fa fa-download fa-2x" role="img" aria-label="Download"></i>
-                                    </a>
-                                    <span id="fullscreen" title="View fullscreen" role="img" aria-label="Fullscreen">
-                                        <i class="fa fa-arrows-alt fa-2x"></i>
-                                    </span>
+                                    <div class="col-auto text-right ml-auto mt-2 mb-2">
+                                        <a t-if="slide.download_security and not is_embedded" target="_top" t-attf-href="/slides/slide/#{slug(slide)}/download" title="Download" id="download">
+                                            <i class="fa fa-download fa-2x" role="img" aria-label="Download"></i>
+                                        </a>
+                                        <span id="fullscreen" title="View fullscreen" role="img" aria-label="Fullscreen">
+                                            <i class="fa fa-arrows-alt fa-2x"></i>
+                                        </span>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                 </div>
                 </body>
             </html>
         </template>