[IMP] website: review timeline snippet
Removes option to move card to the right/left from the left panel and add this option on the element overlay. Makes the snippet responsive and other improvements. Part of https://github.com/odoo/odoo/pull/46503 task-2194309
This commit is contained in:
Benjamin Vray
@@ -5,11 +5,10 @@
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
background-color: gray('800');
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.s_timeline_row {
|
||||
@@ -27,9 +26,32 @@
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
&.flex-row-reverse {
|
||||
.s_timeline_content {
|
||||
flex-direction: row-reverse;
|
||||
&:not(:last-child) {
|
||||
margin-left: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.flex-row-reverse) {
|
||||
.s_timeline_content:last-child {
|
||||
margin-left: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.s_timeline_date {
|
||||
z-index: 2;
|
||||
@include media-breakpoint-up(md) {
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
right: 0%;
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
position: relative;
|
||||
margin: 20px 0px;
|
||||
}
|
||||
span:not(.fa) {
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
@@ -37,9 +59,11 @@
|
||||
.fa {
|
||||
margin: 0 $grid-gutter-width/2;
|
||||
}
|
||||
text-align: center;
|
||||
}
|
||||
.s_timeline_icon {
|
||||
flex: 0 0 auto;
|
||||
margin: $grid-gutter-width/2;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
odoo.define('website.s_timeline_options', function (require) {
|
||||
'use strict';
|
||||
|
||||
const options = require('web_editor.snippets.options');
|
||||
|
||||
options.registry.Timeline = options.Class.extend({
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
start: function () {
|
||||
var $buttons = this.$el.find('we-button');
|
||||
var $overlayArea = this.$overlay.find('.o_overlay_options_wrap');
|
||||
$overlayArea.append($('<div/>').append($buttons));
|
||||
|
||||
return this._super(...arguments);
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Options
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Moves the card to the right/left.
|
||||
*
|
||||
* @see this.selectClass for parameters
|
||||
*/
|
||||
timelineCard: function (previewMode, widgetValue, params) {
|
||||
const $timelineRow = this.$target.closest('.s_timeline_row');
|
||||
$timelineRow.toggleClass('flex-row-reverse flex-row');
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -131,6 +131,7 @@
|
||||
<script type="text/javascript" src="/website/static/src/snippets/s_blockquote/options.js"/>
|
||||
<script type="text/javascript" src="/website/static/src/snippets/s_showcase/options.js"/>
|
||||
<script type="text/javascript" src="/website/static/src/snippets/s_table_of_content/options.js"/>
|
||||
<script type="text/javascript" src="/website/static/src/snippets/s_timeline/options.js"/>
|
||||
|
||||
<script type="text/javascript" src="/website/static/src/js/editor/wysiwyg_multizone.js"/>
|
||||
<script type="text/javascript" src="/website/static/src/js/editor/wysiwyg_multizone_translate.js"/>
|
||||
|
||||
@@ -4,9 +4,10 @@
|
||||
<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" data-name="Row">
|
||||
<div class="s_timeline_row d-block d-md-flex flex-row" data-name="Row">
|
||||
<div class="s_timeline_date"><span class="bg-white"><b>2019</b></span></div>
|
||||
<div class="s_timeline_content d-flex">
|
||||
<div class="s_card card bg-white w-100" data-name="Card">
|
||||
<div class="s_timeline_card s_card card bg-white w-100" data-name="Card">
|
||||
<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>
|
||||
@@ -14,68 +15,48 @@
|
||||
</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" data-name="Row">
|
||||
<div class="s_timeline_row d-block d-md-flex flex-row" data-name="Row">
|
||||
<div class="s_timeline_date"><span class="bg-white"><b>2018</b></span></div>
|
||||
<div class="s_timeline_content d-flex">
|
||||
<div class="s_card card bg-white w-100" data-name="Card">
|
||||
<div class="s_timeline_card s_card card bg-white w-100" data-name="Card">
|
||||
<div class="card-body">
|
||||
<p class="card-text">You can edit, duplicate...</p>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fa fa-1x fa-graduation-cap bg-gamma rounded-circle s_timeline_icon"/>
|
||||
<i class="fa fa-1x fa-graduation-cap bg-beta 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-delta rounded-circle s_timeline_icon"/>
|
||||
<div class="s_card card bg-white w-100" data-name="Card">
|
||||
<i class="fa fa-1x fa-asterisk bg-beta rounded-circle s_timeline_icon"/>
|
||||
<div class="s_timeline_card s_card card bg-white w-100" data-name="Card">
|
||||
<div class="card-body">
|
||||
<p class="card-text">...and switch the timeline contents to fit your needs.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="s_timeline_row d-flex flex-row-reverse" data-name="Row">
|
||||
<div class="s_timeline_row d-block d-md-flex flex-row-reverse" data-name="Row">
|
||||
<div class="s_timeline_date"><span class="bg-white"><b>2015</b></span></div>
|
||||
<div class="s_timeline_content d-flex">
|
||||
<div class="s_card card bg-white w-100" data-name="Card">
|
||||
<div class="s_timeline_card s_card card bg-white w-100" data-name="Card">
|
||||
<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-circle s_timeline_icon"/>
|
||||
<i class="fa fa-1x fa-bolt bg-beta rounded-circle 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" data-name="Row">
|
||||
<div class="s_timeline_content d-flex">
|
||||
<div class="s_card card bg-white w-100" data-name="Card">
|
||||
<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 bg-200 rounded-circle text-beta"/></div>
|
||||
<div class="s_timeline_content d-flex">
|
||||
<div class="s_card card bg-white w-100" data-name="Card">
|
||||
<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">
|
||||
<template id="s_timeline_options" inherit_id="website.snippet_options">
|
||||
<xpath expr="." position="inside">
|
||||
<div data-selector=".s_timeline_row" data-drop-near=".s_timeline_row">
|
||||
<we-select string="Position">
|
||||
<we-button data-select-class="flex-row">Left</we-button>
|
||||
<we-button data-select-class="flex-row-reverse">Right</we-button>
|
||||
</we-select>
|
||||
<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"><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">
|
||||
|
||||
@@ -356,7 +356,7 @@
|
||||
t-att-data-selector="so_snippet_addition_selector"
|
||||
data-drop-in=":not(p).oe_structure:not(.oe_structure_solo), :not(p)[data-oe-type=html], :not(p).oe_structure.oe_structure_solo:not(:has(> section, > div))"/>
|
||||
|
||||
<t t-set="so_content_addition_selector" t-translation="off">blockquote, .s_card, .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr, .s_countdown, .s_chart, .s_text_highlight, .s_progress_bar, .s_badge</t>
|
||||
<t t-set="so_content_addition_selector" t-translation="off">blockquote, .s_card:not(.s_timeline_card), .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr, .s_countdown, .s_chart, .s_text_highlight, .s_progress_bar, .s_badge</t>
|
||||
<div id="so_content_addition"
|
||||
t-att-data-selector="so_content_addition_selector"
|
||||
t-attf-data-drop-near="p, h1, h2, h3, .row > div > img, #{so_content_addition_selector}"
|
||||
|
||||
Reference in New Issue
Block a user