Benjamin Vray
2ca115f650
Before this commit, background images were not centered by default. It was especially annoying on mobile device. We created a new class to center background image and we added it on all the snippets with a background image except those with a parallax effect because they already have a background-position in inline style. task-2318526 closes odoo/odoo#60430 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
86 lines
5.4 KiB
XML
86 lines
5.4 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
|
<odoo>
|
|
|
|
<template id="s_quotes_carousel" name="Quotes">
|
|
<section class="s_quotes_carousel_wrapper" data-vxml="001" data-vcss="001">
|
|
<div id="myQuoteCarousel" class="s_quotes_carousel s_carousel_default carousel slide bg-200" data-interval="10000">
|
|
<!-- Indicators -->
|
|
<ol class="carousel-indicators">
|
|
<li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
|
|
<li data-target="#myQuoteCarousel" data-slide-to="1"></li>
|
|
<li data-target="#myQuoteCarousel" data-slide-to="2"></li>
|
|
</ol>
|
|
<!-- Content -->
|
|
<div class="carousel-inner">
|
|
<!-- #01 -->
|
|
<div class="carousel-item active pt80 pb80" data-name="Slide">
|
|
<div class="container">
|
|
<blockquote class="s_blockquote s_blockquote_classic blockquote mx-auto w-50" data-name="Blockquote">
|
|
<i class="fa fa-1x fa-quote-left rounded float-left bg-o-color-2 s_blockquote_icon"/>
|
|
<div class="s_blockquote_content o_cc1">
|
|
<p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
|
|
<footer class="blockquote-footer">
|
|
<img src="/web/image/website.s_quotes_carousel_demo_image_3" class="s_blockquote_avatar img rounded-circle mr-2" alt=""/>
|
|
<span class="s_blockquote_author"><b>Jane DOE</b> • CEO of MyCompany</span>
|
|
</footer>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<!-- #02 -->
|
|
<div class="carousel-item oe_img_bg o_bg_img_center pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_1'); background-position: 50% 50%;" data-name="Slide">
|
|
<div class="container">
|
|
<blockquote class="s_blockquote s_blockquote_classic blockquote mr-auto w-50" data-name="Blockquote">
|
|
<i class="fa fa-1x fa-quote-left rounded float-left bg-o-color-2 s_blockquote_icon"/>
|
|
<div class="s_blockquote_content o_cc1">
|
|
<p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
|
|
<footer class="blockquote-footer">
|
|
<img src="/web/image/website.s_quotes_carousel_demo_image_4" class="s_blockquote_avatar img rounded-circle mr-2" alt=""/>
|
|
<span class="s_blockquote_author"><b>John DOE</b> • CEO of MyCompany</span>
|
|
</footer>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<!-- #03 -->
|
|
<div class="carousel-item oe_img_bg o_bg_img_center pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_2'); background-position: 50% 50%;" data-name="Slide">
|
|
<div class="container">
|
|
<blockquote class="s_blockquote s_blockquote_classic blockquote ml-auto w-50" data-name="Blockquote">
|
|
<i class="fa fa-1x fa-quote-left rounded float-left bg-o-color-2 s_blockquote_icon"/>
|
|
<div class="s_blockquote_content o_cc1">
|
|
<p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
|
|
<footer class="blockquote-footer">
|
|
<img src="/web/image/website.s_quotes_carousel_demo_image_5" class="s_blockquote_avatar img rounded-circle mr-2" alt=""/>
|
|
<span class="s_blockquote_author"><b>Iris DOE</b> • CEO of MyCompany</span>
|
|
</footer>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Controls -->
|
|
<div class="carousel-control-prev" data-target="#myQuoteCarousel" data-slide="prev" role="img" aria-label="Previous" title="Previous">
|
|
<span class="carousel-control-prev-icon"/>
|
|
<span class="sr-only">Previous</span>
|
|
</div>
|
|
<div class="carousel-control-next" data-target="#myQuoteCarousel" data-slide="next" role="img" aria-label="Next" title="Next">
|
|
<span class="carousel-control-next-icon"/>
|
|
<span class="sr-only">Next</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<template id="assets_snippet_s_quotes_carousel_css_000" inherit_id="website.assets_frontend" active="False">
|
|
<xpath expr="//link[last()]" position="after">
|
|
<link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_quotes_carousel/000.scss"/>
|
|
</xpath>
|
|
</template>
|
|
<template id="assets_snippet_s_quotes_carousel_css_001" inherit_id="website.assets_frontend">
|
|
<xpath expr="//link[last()]" position="after">
|
|
<link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_quotes_carousel/001.scss"/>
|
|
</xpath>
|
|
</template>
|
|
|
|
</odoo>
|