[REF] website: move s_carousel snippet to dedicated file

This commit is contained in:
qsm-odoo
2019-12-18 00:37:25 +01:00
4 changed files with 81 additions and 76 deletions
+1
View File
@@ -36,6 +36,7 @@
'views/snippets/s_features.xml',
'views/snippets/s_three_columns.xml',
'views/snippets/s_picture.xml',
'views/snippets/s_carousel.xml',
'views/website_views.xml',
'views/website_visitor_views.xml',
'views/res_config_settings_views.xml',
+1 -1
View File
@@ -514,7 +514,7 @@ table.table_desc tr td {
border: none;
}
// Carousel
// Carousel -> TODO: should be versioned in 000.scss file but how ?
.s_carousel,
.s_quotes_carousel {
@@ -0,0 +1,79 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="s_carousel" name="Carousel">
<section class="s_carousel_wrapper">
<div id="myCarousel" class="s_carousel s_carousel_default carousel slide" data-interval="10000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"/>
<li data-target="#myCarousel" data-slide-to="1"/>
<li data-target="#myCarousel" data-slide-to="2"/>
</ol>
<!-- Content -->
<div class="carousel-inner">
<!-- #01 -->
<div class="carousel-item active oe_custom_bg oe_img_bg pt152 pb152" style="background-image: url('/web/image/website.s_carousel_default_image_1');" data-name="Slide">
<div class="container">
<div class="row content">
<div class="carousel-content col-lg-7">
<div class="s_title pb8" data-name="Title">
<h2 class="s_title_default"><font style="font-size: 62px;">Slide Title</font></h2>
</div>
<p class="lead">Use this snippet to presents your content in a slideshow-like format.<br/> Don't write about products or services here, write about solutions.</p>
<div class="s_btn text-left pt16 pb16" data-name="Buttons">
<a href="/aboutus" class="btn btn-secondary flat">About us</a>
<a href="/contactus" class="btn btn-primary flat">Contact us</a>
</div>
</div>
</div>
</div>
</div>
<!-- #02 -->
<div class="carousel-item oe_custom_bg oe_img_bg pt96 pb96" style="background-image: url('/web/image/website.s_carousel_default_image_2');" data-name="Slide">
<div class="container">
<div class="row content">
<div class="carousel-content col-lg-8 offset-lg-2 bg-black-50 text-center pt48 pb40">
<h2 style="font-size: 62px;">Clever Slogan</h2>
<div class="s_hr pt8 pb32">
<hr class="s_hr_5px s_hr_dotted border-600 w-25 border-epsilon mx-auto text-center"/>
</div>
<p class="lead">Storytelling is powerful.<br/> It draws readers in and engages them.</p>
<div class="s_btn text-center pt16 pb16" data-name="Buttons">
<a href="/" class="btn btn-epsilon rounded-circle">Start your journey</a>
</div>
</div>
</div>
</div>
</div>
<!-- #03 -->
<div class="carousel-item oe_custom_bg oe_img_bg pt128 pb128" style="background-image: url('/web/image/website.s_carousel_default_image_3');" data-name="Slide">
<div class="container">
<div class="row content">
<div class="carousel-content col-lg-6 offset-lg-6">
<h2><font style="font-size: 62px; background-color: rgb(255, 255, 255);">Edit this title</font></h2>
<h4><font style="background-color: rgb(255, 255, 255);">Good writing is simple, but not simplistic.</font></h4>
<p class="mt24">Good copy starts with understanding how your product or service helps your customers. Simple words communicate better than big words and pompous language.</p>
<t t-call="website.s_share">
<t t-set="_classes" t-value="'text-left pt16 pb16'"/>
<t t-set="_no_title" t-value="True"/>
</t>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev" role="img" aria-label="Previous" title="Previous">
<span class="carousel-control-prev-icon"/>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next" role="img" aria-label="Next" title="Next">
<span class="carousel-control-next-icon"/>
<span class="sr-only">Next</span>
</a>
</div>
</section>
</template>
</odoo>
@@ -1,81 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="s_carousel" name="Carousel">
<section class="s_carousel_wrapper">
<div id="myCarousel" class="s_carousel s_carousel_default carousel slide" data-interval="10000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"/>
<li data-target="#myCarousel" data-slide-to="1"/>
<li data-target="#myCarousel" data-slide-to="2"/>
</ol>
<!-- Content -->
<div class="carousel-inner">
<!-- #01 -->
<div class="carousel-item active oe_custom_bg oe_img_bg pt152 pb152" style="background-image: url('/web/image/website.s_carousel_default_image_1');" data-name="Slide">
<div class="container">
<div class="row content">
<div class="carousel-content col-lg-7">
<div class="s_title pb8" data-name="Title">
<h2 class="s_title_default"><font style="font-size: 62px;">Slide Title</font></h2>
</div>
<p class="lead">Use this snippet to presents your content in a slideshow-like format.<br/> Don't write about products or services here, write about solutions.</p>
<div class="s_btn text-left pt16 pb16" data-name="Buttons">
<a href="/aboutus" class="btn btn-secondary flat">About us</a>
<a href="/contactus" class="btn btn-primary flat">Contact us</a>
</div>
</div>
</div>
</div>
</div>
<!-- #02 -->
<div class="carousel-item oe_custom_bg oe_img_bg pt96 pb96" style="background-image: url('/web/image/website.s_carousel_default_image_2');" data-name="Slide">
<div class="container">
<div class="row content">
<div class="carousel-content col-lg-8 offset-lg-2 bg-black-50 text-center pt48 pb40">
<h2 style="font-size: 62px;">Clever Slogan</h2>
<div class="s_hr pt8 pb32">
<hr class="s_hr_5px s_hr_dotted border-600 w-25 border-epsilon mx-auto text-center"/>
</div>
<p class="lead">Storytelling is powerful.<br/> It draws readers in and engages them.</p>
<div class="s_btn text-center pt16 pb16" data-name="Buttons">
<a href="/" class="btn btn-epsilon rounded-circle">Start your journey</a>
</div>
</div>
</div>
</div>
</div>
<!-- #03 -->
<div class="carousel-item oe_custom_bg oe_img_bg pt128 pb128" style="background-image: url('/web/image/website.s_carousel_default_image_3');" data-name="Slide">
<div class="container">
<div class="row content">
<div class="carousel-content col-lg-6 offset-lg-6">
<h2><font style="font-size: 62px; background-color: rgb(255, 255, 255);">Edit this title</font></h2>
<h4><font style="background-color: rgb(255, 255, 255);">Good writing is simple, but not simplistic.</font></h4>
<p class="mt24">Good copy starts with understanding how your product or service helps your customers. Simple words communicate better than big words and pompous language.</p>
<t t-call="website.s_share">
<t t-set="_classes" t-value="'text-left pt16 pb16'"/>
<t t-set="_no_title" t-value="True"/>
</t>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev" role="img" aria-label="Previous" title="Previous">
<span class="carousel-control-prev-icon"/>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next" role="img" aria-label="Next" title="Next">
<span class="carousel-control-next-icon"/>
<span class="sr-only">Next</span>
</a>
</div>
</section>
</template>
<template id="s_alert" name="Alert">
<div class="s_alert s_alert_md alert-delta w-100 clearfix">
<i class="fa fa-2x fa-info-circle s_alert_icon"/>