Odoo18-Base/addons/website/views/snippets/s_timeline.xml

111 lines
6.6 KiB
XML
Raw Permalink Normal View History

2025-01-06 10:57:38 +07:00
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template name="Timeline" id="s_timeline">
<section class="s_timeline pt48 pb48" data-vcss="002">
<div class="o_container_small">
<div class="row">
<div class="col-lg-12 pb24 text-center" data-name="Heading">
<h2 class="h3-fs">Latest news</h2>
<p class="lead">Highlight your history, showcase growth and key milestones.</p>
</div>
</div>
<div class="position-relative pt-3">
<div class="s_timeline_row position-relative d-flex gap-md-5 flex-column flex-md-row pb-4" data-name="Milestone">
<div class="o_dot_line position-absolute top-0 bottom-0 w-0 mb-1 border-start pe-none"/>
<span class="o_dot o_not_editable position-absolute translate-middle-x rounded-circle pe-none text-o-color-1" contenteditable="false"/>
<div class="s_timeline_content w-100 ps-4 ps-md-0">
<div class="s_timeline_card s_card card my-0 ms-auto text-md-end" style="border-width: 0px !important;" data-vxml="001" data-snippet="s_card" data-name="Milestone Event">
<div class="card-body">
<small class="text-muted">13/06/2019</small>
<h3 class="h4-fs card-title">First Feature</h3>
<p class="card-text">A timeline is a graphical representation on which important events are marked.</p>
</div>
</div>
</div>
<div class="s_timeline_content w-0 w-md-100 h-0"/>
</div>
<div class="s_timeline_row position-relative d-flex gap-md-5 flex-column flex-md-row pb-4" data-name="Milestone">
<div class="o_dot_line position-absolute top-0 bottom-0 w-0 mb-1 border-start pe-none"/>
<span class="o_dot o_not_editable position-absolute translate-middle-x rounded-circle pe-none text-o-color-1" contenteditable="false"/>
<div class="s_timeline_content w-100 ps-4 ps-md-0">
<div class="s_timeline_card s_card card my-0 me-auto text-md-end" style="border-width: 0px !important;" data-vxml="001" data-snippet="s_card" data-name="Milestone Event">
<div class="card-body">
<small class="text-muted">21/03/2021</small>
<h3 class="h4-fs card-title">Second Feature</h3>
<p class="card-text">A timeline is a graphical representation on which important events are marked.</p>
</div>
</div>
</div>
<div class="s_timeline_content w-100 ps-4 ps-md-0">
<div class="s_timeline_card s_card card my-0 me-auto" style="border-width: 0px !important;" data-vxml="001" data-snippet="s_card" data-name="Milestone Event">
<div class="card-body">
<small class="text-muted">21/03/2021</small>
<h3 class="h4-fs card-title">Third Feature</h3>
<p class="card-text">A timeline is a visual display that highlights significant events in chronological order.</p>
</div>
</div>
</div>
</div>
<div class="s_timeline_row position-relative d-flex flex-column flex-md-row gap-md-5 pb-4" data-name="Milestone">
<div class="o_dot_line position-absolute top-0 bottom-0 w-0 mb-1 border-start pe-none"/>
<span class="o_dot o_not_editable position-absolute translate-middle-x rounded-circle pe-none text-o-color-1" contenteditable="false"/>
<div class="s_timeline_content w-0 w-md-100 h-0"/>
<div class="s_timeline_content w-100 ps-4 ps-md-0">
<div class="s_timeline_card s_card card my-0 ms-auto" style="border-width: 0px !important;" data-vxml="001" data-snippet="s_card" data-name="Milestone Event">
<div class="card-body">
<small class="text-muted">25/12/2024</small>
<h3 class="h4-fs card-title">Latest Feature</h3>
<p class="card-text">A timeline is a graphical representation on which important events are marked.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<template id="s_timeline_options" inherit_id="website.snippet_options">
<xpath expr="//t[@t-call='website.snippet_options_background_options']" position="before">
<div data-js="MultipleItems" data-selector=".s_timeline">
<we-row string="Date">
<we-button data-add-item="" data-item=".s_timeline_row:first" data-select-item="" data-add-before="true" data-no-preview="true" class="o_we_bg_brand_primary">
Add Date
</we-button>
</we-row>
</div>
</xpath>
<xpath expr="." position="inside">
<div data-selector=".s_timeline_row" data-drop-near=".s_timeline_row"/>
<div data-js="Timeline" data-selector=".s_timeline_card">
<we-button data-timeline-card="" data-no-preview="true" class="o_we_overlay_opt"><i class="fa fa-fw fa-angle-left"/><i class="fa fa-fw fa-angle-right"/></we-button>
</div>
</xpath>
<xpath expr="//div[@data-js='SnippetMove'][contains(@data-selector,'section')]" position="attributes">
<attribute name="data-selector" add=".s_timeline_row" separator=","/>
</xpath>
</template>
<record id="website.s_timeline_000_scss" model="ir.asset">
<field name="name">Timeline 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_timeline/000.scss</field>
<field name="active" eval="False"/>
</record>
<record id="website.s_timeline_001_scss" model="ir.asset">
<field name="name">Timeline 001 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_timeline/001.scss</field>
<field name="active" eval="False"/>
</record>
<record id="website.s_timeline_002_scss" model="ir.asset">
<field name="name">Timeline 002 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_timeline/002.scss</field>
</record>
</odoo>