mirror of
https://github.com/odoo/design-themes.git
synced 2025-10-07 01:18:52 +07:00
Design
94 lines
5.1 KiB
XML
94 lines
5.1 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
|
<odoo>
|
|
<template name="Timeline" id="s_timeline">
|
|
<section class="s_timeline pt24 pb48">
|
|
<div class="container s_timeline_line">
|
|
<div class="s_timeline_row d-flex flex-row">
|
|
<div class="s_timeline_content d-flex">
|
|
<div class="s_card card bg-white w-100">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Your title</h5>
|
|
<p class="card-text">A timeline is a graphical representation on which important events are marked.</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<i class="fa fa-info-circle mr-1"/> <small>An additional information</small>
|
|
</div>
|
|
</div>
|
|
<i class="fa fa-1x fa-child bg-beta rounded-circle s_timeline_icon"/>
|
|
</div>
|
|
<div class="s_timeline_date"><span class="bg-white"><b>2019</b></span></div>
|
|
<div class="s_timeline_content"/>
|
|
</div>
|
|
<div class="s_timeline_row d-flex flex-row">
|
|
<div class="s_timeline_content d-flex">
|
|
<div class="s_card card bg-white w-100">
|
|
<div class="card-body">
|
|
<p class="card-text">You can edit, duplicate...</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<i class="fa fa-info-circle mr-1"/> <small>An additional information</small>
|
|
</div>
|
|
</div>
|
|
<i class="fa fa-1x fa-graduation-cap bg-gamma rounded-circle s_timeline_icon"/>
|
|
</div>
|
|
<div class="s_timeline_date"><span class="bg-white"><b>2018</b></span></div>
|
|
<div class="s_timeline_content d-flex">
|
|
<i class="fa fa-1x fa-asterisk bg-alpha rounded-circle s_timeline_icon"/>
|
|
<div class="s_card card bg-white w-100">
|
|
<div class="card-body">
|
|
<p class="card-text">...and switch the timeline contents to fit your needs.</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<i class="fa fa-info-circle mr-1"/> <small>An additional information</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="s_timeline_row d-flex flex-row-reverse">
|
|
<div class="s_timeline_content d-flex">
|
|
<div class="s_card card bg-white w-100">
|
|
<div class="card-body">
|
|
<p class="card-text">Use this timeline as a part of your resume, to show your visitors what you've done in the past.</p>
|
|
</div>
|
|
</div>
|
|
<i class="fa fa-1x fa-bolt bg-gamma rounded s_timeline_icon"/>
|
|
</div>
|
|
<div class="s_timeline_date"><span class="bg-white"><b>2015</b></span></div>
|
|
<div class="s_timeline_content"/>
|
|
</div>
|
|
<div class="s_timeline_row d-flex flex-row">
|
|
<div class="s_timeline_content d-flex">
|
|
<div class="s_card card bg-white w-100">
|
|
<div class="card-body">
|
|
<p class="card-text">Edit this text and change it with your content.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="s_timeline_date"><i class="fa fa-1x fa-edit img-thumbnail text-primary"/></div>
|
|
<div class="s_timeline_content d-flex">
|
|
<div class="s_card card bg-white w-100">
|
|
<div class="card-body">
|
|
<p class="card-text" style="text-align: right;">Double-click an icon to change it.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<template id="options_s_timeline" inherit_id="website.snippet_options">
|
|
<xpath expr="." position="inside">
|
|
<div data-selector=".s_timeline_row" data-drop-near=".s_timeline_row">
|
|
<div class="dropdown-submenu">
|
|
<a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-align-left"/>Position</a>
|
|
<div class="dropdown-menu" role="menu">
|
|
<a href="#" class="dropdown-item" data-select-class="flex-row">Left</a>
|
|
<a href="#" class="dropdown-item" data-select-class="flex-row-reverse">Right</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</xpath>
|
|
</template>
|
|
</odoo>
|