[REF] *: BS4, review panel and well structure

Panels and wells were dropped and replaced by the "Card" component.

6 files changed, 83 insertions, 105 deletions

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index c71afc1085f..14f1b6f0a4f 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -758,7 +758,7 @@ options.registry.collapse = options.Class.extend({
      */
     onClone: function () {
         this.$target.find('[data-toggle="collapse"]').removeAttr('data-target').removeData('target');
-        this.$target.find('.panel-collapse').removeAttr('id');
+        this.$target.find('.collapse').removeAttr('id');
         this._createIDs();
     },
     /**
@@ -766,9 +766,9 @@ options.registry.collapse = options.Class.extend({
      */
     onMove: function () {
         this._createIDs();
-        var $panel = this.$target.find('.panel-collapse').removeData('bs.collapse');
+        var $panel = this.$target.find('.collapse').removeData('bs.collapse');
         if ($panel.attr('aria-expanded') === 'true') {
-            $panel.closest('.panel-group').find('.panel-collapse[aria-expanded="true"]')
+            $panel.closest('.accordion').find('.collapse[aria-expanded="true"]')
                 .filter(function () {return this !== $panel[0];})
                 .collapse('hide')
                 .one('hidden.bs.collapse', function () {
@@ -791,7 +791,7 @@ options.registry.collapse = options.Class.extend({
         var $tab = this.$target.find('[data-toggle="collapse"]');
 
         // link to the parent group
-        var $tablist = this.$target.closest('.panel-group');
+        var $tablist = this.$target.closest('.accordion');
         var tablist_id = $tablist.attr('id');
         if (!tablist_id) {
             tablist_id = 'myCollapse' + time;
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 9076e9565ca..406b25e2e24 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -112,11 +112,11 @@ table.table_desc tr td {
     overflow: auto;
 }
 
-.s_comparisons .panel .list-group-item:not(.active) {
+.s_comparisons .card .list-group-item:not(.active) {
     color: #666;
 }
 .s_comparisons {
-    .panel small {
+    .card small {
         color: inherit;
     }
     .text-muted {
@@ -124,13 +124,13 @@ table.table_desc tr td {
     }
 }
 
-.s_faq_collapse .container .panel {
+.s_faq_collapse .container .card {
     background-color: inherit;
     border : 1px solid rgba(0, 0, 0, 0.15);
-    .panel-body {
+    .card-body {
         border-top: none;
-        border-bottom-left-radius: ($panel-border-radius - 1);
-        border-bottom-right-radius: ($panel-border-radius - 1);
+        border-bottom-left-radius: ($card-border-radius - 1);
+        border-bottom-right-radius: ($card-border-radius - 1);
     }
 }
 
diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml
index 266dbe380ff..dd6decda977 100644
--- a/addons/website/static/src/xml/website.seo.xml
+++ b/addons/website/static/src/xml/website.seo.xml
@@ -26,9 +26,9 @@
             </div>
             <div class="col-lg-6">
                 <h5 class="mt16">Preview <small>how your page will be listed on Google</small></h5>
-                <div class="well">
-                    <div class="panel mb0">
-                        <div class="panel-body">
+                <div>
+                    <div class="card mb0">
+                        <div class="card-body">
                             <div class="js_seo_preview"/>
                         </div>
                     </div>
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index ca97d0a6eb1..72036f9217b 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -62,15 +62,17 @@
     </div>
 
     <div t-name="website.rename_page">
-        <div class="well">
-            <form class="form-horizontal">
-                <div class="form-group mb0">
-                    <label for="new_name" class="control-label col-md-4">Rename Page To:</label>
-                    <div class="col-md-8">
-                        <input type="text" class="form-control" id="new_name" placeholder="e.g. About Us"/>
+        <div class="card">
+            <div class="card-body">
+                <form class="form-horizontal">
+                    <div class="form-group mb0">
+                        <label for="new_name" class="control-label col-md-4">Rename Page To:</label>
+                        <div class="col-md-8">
+                            <input type="text" class="form-control" id="new_name" placeholder="e.g. About Us"/>
+                        </div>
                     </div>
-                </div>
-            </form>
+                </form>
+            </div>
         </div>
         <t t-call="website.dependencies"/>
     </div>
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index bc63db88c9b..b11375f7f3f 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -237,20 +237,20 @@
 </template>
 
 <template id="s_well" name="Well">
-    <div class="well s_well clearfix">
-        <p>
-            Explain the benefits you offer. Don't write about products or
-            services here, write about solutions.
-        </p>
+    <div class="card s_well clearfix">
+        <div class="card-body">
+            <p>
+                Explain the benefits you offer. Don't write about products or
+                services here, write about solutions.
+            </p>
+        </div>
     </div>
 </template>
 
 <template id="s_panel" name="Panel">
-    <div class="panel panel-default o_panel s_panel">
-        <div class="panel-heading ">
-            <h3 class="panel-title">Feature Title</h3>
-        </div>
-        <div class="panel-body">
+    <div class="card o_panel s_panel">
+        <h3 class="card-header">Feature Title</h3>
+        <div class="card-body">
             <p>
                 Panels are a great tool to compare offers or to emphasize on
                 key features. To compare products, use the inside columns.
@@ -307,14 +307,14 @@
             <h2 class="text-center">Our Offers</h2>
             <div class="row">
                 <div class="col-lg-4 col-12">
-                    <div class="panel bg-gray-light">
-                        <div class="panel-heading text-center" style="background-color: rgba(255, 255, 255, 0.1)">
+                    <div class="card bg-gray-light">
+                        <div class="card-header text-center" style="background-color: rgba(255, 255, 255, 0.1)">
                             <h3 style="margin: 0">Beginner</h3>
                             <p style="margin: 0">
                                 Starter package
                             </p>
                         </div>
-                        <div class="panel-body text-center">
+                        <div class="card-body text-center">
                             <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">35</b><small>.00</small></h3>
                             <div>user / month (billed annually)</div>
                         </div>
@@ -324,7 +324,7 @@
                             <li class="list-group-item">No customization</li>
                             <li class="list-group-item">No support</li>
                         </ul>
-                        <div class="panel-footer text-center">
+                        <div class="card-footer text-center">
                             <p class="text-muted">
                                 <i>Instant setup, satisfied or reimbursed.</i>
                             </p>
@@ -333,12 +333,12 @@
                     </div>
                 </div>
                 <div class="col-lg-4 col-12">
-                    <div class="panel bg-beta">
-                        <div class="panel-heading text-center" style="background-color: rgba(255, 255, 255, 0.1)">
+                    <div class="card bg-beta">
+                        <div class="card-header text-center" style="background-color: rgba(255, 255, 255, 0.1)">
                             <h3 style="margin: 0">Professional</h3>
                             <p style="margin: 0">Enterprise package</p>
                         </div>
-                        <div class="panel-body text-center">
+                        <div class="card-body text-center">
                             <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">65</b><small>.00</small></h3>
                             <div>user / month (billed annually)</div>
                         </div>
@@ -348,19 +348,19 @@
                             <li class="list-group-item">Limited customization</li>
                             <li class="list-group-item">Email support</li>
                         </ul>
-                        <div class="panel-footer text-center">
+                        <div class="card-footer text-center">
                             <p class="text-muted"><i>Instant setup, satisfied or reimbursed.</i></p>
                             <a role="button" href="/contactus" class="btn btn-primary btn-lg">Order now</a>
                         </div>
                     </div>
                 </div>
                 <div class="col-lg-4 col-12">
-                    <div class="panel bg-gray-light">
-                        <div class="panel-heading text-center" style="background-color: rgba(255, 255, 255, 0.1)">
+                    <div class="card bg-gray-light">
+                        <div class="card-header text-center" style="background-color: rgba(255, 255, 255, 0.1)">
                             <h3 style="margin: 0">Expert</h3>
                             <p style="margin: 0">Ultimate package</p>
                         </div>
-                        <div class="panel-body text-center">
+                        <div class="card-body text-center">
                             <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">125</b><small>.00</small></h3>
                             <div>user / month (billed annually)</div>
                         </div>
@@ -370,7 +370,7 @@
                             <li class="list-group-item">Unlimited customization</li>
                             <li class="list-group-item">24x7 toll-free support</li>
                         </ul>
-                        <div class="panel-footer text-center">
+                        <div class="card-footer text-center">
                             <p class="text-muted"><i>Instant setup, satisfied or reimbursed.</i></p>
                             <a role="button" href="/contactus" class="btn btn-primary btn-lg">Contact us</a>
                         </div>
@@ -479,15 +479,11 @@
     <section class="s_faq_collapse">
         <div class="container">
             <h2 class="page-header"> General Terms and Conditions / Service Policies </h2>
-            <div class="panel-group" role="tablist">
-                <div class="panel">
-                    <div class="panel-heading bg-gray-lighter" role="tab" data-toggle="collapse">
-                        <h4 class="panel-title">
-                            Terms of service
-                        </h4>
-                    </div>
-                    <div class="panel-collapse collapse" role="tabpanel">
-                        <div class="panel-body bg-white-50">
+            <div class="accordion" role="tablist">
+                <div class="card">
+                    <h4 class="card-header bg-gray-lighter" role="tab" data-toggle="collapse">Terms of service</h4>
+                    <div class="collapse" role="tabpanel">
+                        <div class="card-body bg-white-50">
                             <p>
                                 These terms of service ("Terms", "Agreement") are an agreement between the website
                                 ("Website operator", "us", "we" or "our") and you ("User", "you" or "your").
@@ -499,14 +495,10 @@
                         </div>
                     </div>
                 </div>
-                <div class="panel">
-                    <div class="panel-heading bg-gray-lighter" role="tab" data-toggle="collapse">
-                        <h4 class="panel-title">
-                            Links to other websites
-                        </h4>
-                    </div>
-                    <div class="panel-collapse collapse" role="tabpanel">
-                        <div class="panel-body bg-white-50">
+                <div class="card">
+                    <h4 class="card-header bg-gray-lighter" role="tab" data-toggle="collapse">Links to other websites</h4>
+                    <div class="collapse" role="tabpanel">
+                        <div class="card-body bg-white-50">
                             <p>
                                 Although this Website may be linked to other websites, we are not, directly or
                                 indirectly, implying any approval, association, sponsorship, endorsement, or
@@ -520,14 +512,10 @@
                         </div>
                     </div>
                 </div>
-                <div class="panel">
-                    <div class="panel-heading bg-gray-lighter" role="tab" data-toggle="collapse">
-                        <h4 class="panel-title">
-                            Use Of Cookies
-                        </h4>
-                    </div>
-                    <div class="panel-collapse collapse" role="tabpanel">
-                        <div class="panel-body bg-white-50">
+                <div class="card">
+                    <h4 class="card-header bg-gray-lighter" role="tab" data-toggle="collapse">Use Of Cookies</h4>
+                    <div class="collapse" role="tabpanel">
+                        <div class="card-body bg-white-50">
                             <p>Website may use cookies to personalize and facilitate maximum navigation of the
                                 User by this site. The User may configure his / her browser to notify and
                                 reject the installation of the cookies sent by us.</p>
@@ -909,8 +897,8 @@
     </div>
 
     <div data-js='content'
-        data-selector="blockquote, .well, .s_panel, .o_facebook_page, .oe_share, .o_image_floating"
-        data-drop-near="p, h1, h2, h3, blockquote, .well, .o_facebook_page, .s_panel, .oe_share"
+        data-selector="blockquote, .card, .s_panel, .o_facebook_page, .oe_share, .o_image_floating"
+        data-drop-near="p, h1, h2, h3, blockquote, .card, .o_facebook_page, .s_panel, .oe_share"
         data-drop-in=".content">
     </div>
 
@@ -968,8 +956,8 @@
     </div>
 
     <div data-js='collapse'
-         data-selector='.panel-group > .panel:has(> .panel-collapse)'
-         data-drop-in='.panel-group:has(> .panel > .panel-collapse)'>
+         data-selector='.accordion > .card:has(> .collapse)'
+         data-drop-in='.accordion:has(> .card > .collapse)'>
     </div>
 
     <div data-js="menu_data"
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index ac3e17f09f3..a46cbca04ca 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -571,7 +571,7 @@
 <template id="page_404">
     <t t-call="website.404">
         <div class="container">
-            <div class="well mt32">
+            <div class="alert alert-info mt32">
                 <p>This page does not exist, but you can create it as you are administrator of this site.</p>
                 <a role="button" class="btn btn-primary js_disable_on_click" t-attf-href="/website/add/#{ path }#{ from_template and '?template=%s' % from_template }">Create Page</a>
             </div>
@@ -595,17 +595,13 @@
 </template>
 
 <template id="http_error_debug">
-    <div class="container panel-group mb32 mt32" id="debug_infos">
-        <div class="panel panel-default" t-if="exception">
-            <div class="panel-heading">
-                <h4 class="panel-title">
-                    <a data-toggle="collapse" data-parent="#debug_infos" href="#error_main">
-                        Error
-                    </a>
-                </h4>
-            </div>
-            <div id="error_main" class="panel-collapse collapse in">
-                <div class="panel-body">
+    <div class="container accordion mb32 mt32" id="debug_infos">
+        <div class="card" t-if="exception">
+            <h4 class="card-header">
+                <a data-toggle="collapse" data-parent="#debug_infos" href="#error_main">Error</a>
+            </h4>
+            <div id="error_main" class="collapse in">
+                <div class="card-body">
                     <p t-if="website_controller">The following error was raised in the website controller <code t-esc="website_controller"/></p>
                     <p>
                         <strong>Error message:</strong>
@@ -614,16 +610,12 @@
                 </div>
             </div>
         </div>
-        <div class="panel panel-default" t-if="qweb_exception">
-            <div class="panel-heading">
-                <h4 class="panel-title">
-                    <a data-toggle="collapse" data-parent="#adebug_infos" href="#error_qweb">
-                        QWeb
-                    </a>
-                </h4>
-            </div>
-            <div id="error_qweb" class="panel-collapse collapse">
-                <div class="panel-body">
+        <div class="card" t-if="qweb_exception">
+            <h4 class="card-header">
+                <a data-toggle="collapse" data-parent="#adebug_infos" href="#error_qweb">QWeb</a>
+            </h4>
+            <div id="error_qweb" class="collapse">
+                <div class="card-body">
                     <p t-if="exception.qweb.get('message')">
                         <strong>Error message:</strong>
                         <pre t-esc="exception.qweb.get('message')"/>
@@ -638,16 +630,12 @@
                 </div>
             </div>
         </div>
-        <div class="panel panel-default" t-if="traceback">
-            <div class="panel-heading">
-                <h4 class="panel-title">
-                    <a data-toggle="collapse" data-parent="#adebug_infos" href="#error_traceback">
-                        Traceback
-                    </a>
-                </h4>
-            </div>
-            <div id="error_traceback" class="panel-collapse collapse">
-                <div class="panel-body">
+        <div class="card" t-if="traceback">
+            <h4 class="card-header">
+                <a data-toggle="collapse" data-parent="#adebug_infos" href="#error_traceback">Traceback</a>
+            </h4>
+            <div id="error_traceback" class="collapse">
+                <div class="card-body">
                     <pre id="exception_traceback" t-esc="traceback"/>
                 </div>
             </div>
@@ -849,7 +837,7 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
     </address>
     <t t-if="res_company.google_map_img()">
         <a t-att-href="res_company.google_map_link()" target="_BLANK">
-           <img class="thumbnail img-fluid" t-att-src="res_company.google_map_img()" alt="Google Maps"/>
+           <img class="img-fluid" t-att-src="res_company.google_map_img()" alt="Google Maps"/>
         </a>
     </t>
 </template>