[REF] website: move s_quotes_carousel snippet to dedicated files

This commit is contained in:
qsm-odoo
2019-12-18 03:23:07 +01:00
5 changed files with 102 additions and 93 deletions
+1
View File
@@ -55,6 +55,7 @@
'views/snippets/s_tabs.xml',
'views/snippets/s_chart.xml',
'views/snippets/s_parallax.xml',
'views/snippets/s_quotes_carousel.xml',
'views/website_views.xml',
'views/website_visitor_views.xml',
'views/res_config_settings_views.xml',
@@ -598,31 +598,6 @@ table.table_desc tr td {
}
}
// Quotes Slider
.s_quotes_carousel {
blockquote {
padding: $grid-gutter-width;
margin-bottom: 0;
.s_quotes_carousel_icon {
position: absolute;
top: 0;
left: -3rem;
}
img {
max-width: 40px;
margin-right: 5px;
border-radius: 50%;
}
footer {
background-color: transparent;
&:before {
content:"";
}
}
}
}
// Parallax
.parallax {
position: relative;
@@ -0,0 +1,23 @@
.s_quotes_carousel {
blockquote {
padding: $grid-gutter-width;
margin-bottom: 0;
.s_quotes_carousel_icon {
position: absolute;
top: 0;
left: -3rem;
}
img {
max-width: 40px;
margin-right: 5px;
border-radius: 50%;
}
footer {
background-color: transparent;
&:before {
content:"";
}
}
}
}
@@ -0,0 +1,78 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="s_quotes_carousel" name="Quotes">
<section class="s_quotes_carousel_wrapper">
<div id="myQuoteCarousel" class="s_quotes_carousel s_carousel_default carousel slide" 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 bg-200 pt80 pb80" data-name="Slide">
<div class="container">
<div class="row content">
<blockquote class="carousel-content col-lg-6 bg-white offset-lg-3">
<i class="fa fa-1x fa-quote-left rounded-0 bg-secondary s_quotes_carousel_icon"/>
<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>
<img class="img" src="/web/image/website.s_quotes_carousel_demo_image_3" alt=""/>
<span>— Jane DOE, CEO of <b>MyCompany</b></span>
</footer>
</blockquote>
</div>
</div>
</div>
<!-- #02 -->
<div class="carousel-item oe_img_bg 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">
<div class="row content">
<blockquote class="col-lg-6 bg-white">
<p>Odoo provides essential platform for our project management. Things are better organized and more visible with it.</p>
<footer>
<img class="img" src="/web/image/website.s_quotes_carousel_demo_image_4" alt=""/>
<span>— John DOE, CEO of <b>MyCompany</b></span>
</footer>
</blockquote>
</div>
</div>
</div>
<!-- #03 -->
<div class="carousel-item oe_img_bg 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">
<div class="row content">
<blockquote class="col-lg-6 offset-lg-6 bg-white">
<p>Odoo provides essential platform for our project management. Things are better organized and more visible with it.</p>
<footer class="blockquote-footer">
<img class="img" src="/web/image/website.s_quotes_carousel_demo_image_5" alt=""/>
<span>— Jane DOE, CEO of <b>MyCompany</b></span>
</footer>
</blockquote>
</div>
</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">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_quotes_carousel/000.scss"/>
</xpath>
</template>
</odoo>
@@ -1,74 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="s_quotes_carousel" name="Quotes">
<section class="s_quotes_carousel_wrapper">
<div id="myQuoteCarousel" class="s_quotes_carousel s_carousel_default carousel slide" 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 bg-200 pt80 pb80" data-name="Slide">
<div class="container">
<div class="row content">
<blockquote class="carousel-content col-lg-6 bg-white offset-lg-3">
<i class="fa fa-1x fa-quote-left rounded-0 bg-secondary s_quotes_carousel_icon"/>
<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>
<img class="img" src="/web/image/website.s_quotes_carousel_demo_image_3" alt=""/>
<span>— Jane DOE, CEO of <b>MyCompany</b></span>
</footer>
</blockquote>
</div>
</div>
</div>
<!-- #02 -->
<div class="carousel-item oe_img_bg 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">
<div class="row content">
<blockquote class="col-lg-6 bg-white">
<p>Odoo provides essential platform for our project management. Things are better organized and more visible with it.</p>
<footer>
<img class="img" src="/web/image/website.s_quotes_carousel_demo_image_4" alt=""/>
<span>— John DOE, CEO of <b>MyCompany</b></span>
</footer>
</blockquote>
</div>
</div>
</div>
<!-- #03 -->
<div class="carousel-item oe_img_bg 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">
<div class="row content">
<blockquote class="col-lg-6 offset-lg-6 bg-white">
<p>Odoo provides essential platform for our project management. Things are better organized and more visible with it.</p>
<footer class="blockquote-footer">
<img class="img" src="/web/image/website.s_quotes_carousel_demo_image_5" alt=""/>
<span>— Jane DOE, CEO of <b>MyCompany</b></span>
</footer>
</blockquote>
</div>
</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>
<!-- Mega menu snippets -->
<template id="s_mega_menu_multi_menus" name="Multi-Menus">