[IMP] website: add snippet for floating picture

This commit is contained in:
Christophe Matthieu 2014-10-02 12:39:49 +02:00 committed by Jeremy Kersten
parent 7ba9174bce
commit 5175cc34e3
4 changed files with 192 additions and 2 deletions

View File

@ -140,7 +140,7 @@ header a.navbar-brand img {
}
.css_non_editable_mode_hidden {
display: none;
display: none !important;
}
/* ----- BOOTSTRAP FIX ----- */
@ -360,6 +360,63 @@ ul.nav-stacked > li > a {
padding: 4px 0;
}
.o_image_floating {
width: 40%;
margin: 4px;
}
.o_image_floating div.o_container {
position: relative;
}
.o_image_floating div.o_container mark {
display: block;
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(86, 61, 124, 0.25);
}
.o_image_floating div.o_container mark a {
color: white;
}
.o_image_floating.o_hide_link div.o_container mark {
display: none;
}
.o_image_floating.o_margin_s {
margin-bottom: 4px;
}
.o_image_floating.o_margin_s.pull-right {
margin-left: 8px;
}
.o_image_floating.o_margin_s.pull-left {
margin-right: 8px;
}
.o_image_floating.o_margin_m {
margin-bottom: 8px;
}
.o_image_floating.o_margin_m.pull-right {
margin-left: 12px;
}
.o_image_floating.o_margin_m.pull-left {
margin-right: 12px;
}
.o_image_floating.o_margin_l {
margin-bottom: 12px;
}
.o_image_floating.o_margin_l.pull-right {
margin-left: 16px;
}
.o_image_floating.o_margin_l.pull-left {
margin-right: 16px;
}
.o_image_floating.o_margin_xl {
margin-bottom: 24px;
}
.o_image_floating.o_margin_xl.pull-right {
margin-left: 32px;
}
.o_image_floating.o_margin_xl.pull-left {
margin-right: 32px;
}
/* Parallax Theme */
div.carousel .carousel-indicators li {
border: 1px solid grey;

View File

@ -288,6 +288,48 @@ ul.nav-stacked > li > a
.hr
padding: 4px 0
.o_image_floating
width: 40%
margin: 4px
div.o_container
position: relative
mark
display: block
position: absolute
bottom: 0
width: 100%
background-color: rgba(86,61,124,.25)
a
color: white
&.o_hide_link div.o_container mark
display: none
&.o_margin_s
margin-bottom: 4px
&.pull-right
margin-left: 8px
&.pull-left
margin-right: 8px
&.o_margin_m
margin-bottom: 8px
&.pull-right
margin-left: 12px
&.pull-left
margin-right: 12px
&.o_margin_l
margin-bottom: 12px
&.pull-right
margin-left: 16px
&.pull-left
margin-right: 16px
&.o_margin_xl
margin-bottom: 24px
&.pull-right
margin-left: 32px
&.pull-left
margin-right: 32px
/* Parallax Theme */
div.carousel

Binary file not shown.

After

Width:  |  Height:  |  Size: 192 KiB

View File

@ -101,6 +101,52 @@
</section>
</div>
<div name="Image-Text" class="o_block_image_float">
<div class="oe_snippet_thumbnail">
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_image.png"/>
<span class="oe_snippet_thumbnail_title">Image-Floating</span>
</div>
<section class="oe_snippet_body para_large">
<div class="container">
<div class="row">
<div class="col-md-12 mb16 mt16">
<div class="o_image_floating o_margin_l pull-right">
<div class="o_container">
<img class="img img-rounded img-responsive" src="/website/static/src/img/odoo.jpg"/>
<mark class="text-center"><a href="#"><strong>Click Here</strong></a></mark>
</div>
<div class="o_footer">
<small class="text-muted">A great way to catch your reader's attention is to tell a story. Everything you consider writing can be told as a story.</small>
</div>
</div>
<h3>What a day it was yesterday - such a big day for us!</h3>
<p style="text-align: justify;">
In case you still feel a bit puzzled about all
of our yesterday's announcements, here is a little
summary for you. <br/>
We have decided to change the
name because <b>"OpenERP"</b> didn't reflect the offering
of the company anymore. With our newest apps, such
as Website Builder, PoS or eCommerce, we have
moved beyond the ERP territory. <br/>
But <u>don't worry</u>, <b>Odoo</b> is and always will be
fully open source. You can read more about the new name here.
We have also prepared a short FAQ to explain all these changes
to all of you. <br/>
</p>
<h3>Discover more about Odoo</h3>
<p style="text-align: justify;">
With Odoo's fully integrated software, you can easily manage your
meetings, schedule business calls, create recurring meetings,
synchronize your agenda and easily keep in touch with your colleagues,
partners and other people involved in projects or business discussions.
<br/><br/><a href="#">Check now and discover more today!</a>
</p>
</div>
</div>
</div>
</section>
</div>
<div>
<div class="oe_snippet_thumbnail">
@ -329,6 +375,21 @@
</div>
</div>
<div name="Image Floating" class="o_block_image_floating">
<div class="oe_snippet_thumbnail">
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_image.png"/>
<span class="oe_snippet_thumbnail_title">Image Floating</span>
</div>
<div class="oe_snippet_body o_image_floating o_margin_l pull-right">
<div class="o_container">
<img class="img img-rounded img-responsive" src="/website/static/src/img/library/ipad.png"/>
<mark class="text-center"><a href="#"><strong>Click Here</strong></a></mark>
</div>
<div class="o_footer">
<small class="text-muted">A great way to catch your reader's attention is to tell a story. Everything you consider writing can be told as a story.</small>
</div>
</div>
</div>
<div>
<div class="oe_snippet_thumbnail">
@ -928,7 +989,7 @@
</div>
<div data-snippet-option-id='content'
data-selector="blockquote, .well, .panel, .oe_share"
data-selector="blockquote, .well, .panel, .oe_share, .o_image_floating"
data-selector-siblings="p, h1, h2, h3, blockquote, .well, .panel, .oe_share"
data-selector-children=".content">
</div>
@ -938,6 +999,36 @@
data-selector-children=".oe_structure, [data-oe-type=html]">
</div>
<div data-snippet-option-id='image_floating_margin'
data-selector=".o_image_floating">
<li class="dropdown-submenu">
<a tabindex="-2" href="#">Margin</a>
<ul class="dropdown-menu">
<li data-value="o_margin_xl"> <a>Extra-Large</a> </li>
<li data-value="o_margin_l"> <a>Large</a> </li>
<li data-value="o_margin_m" > <a>Medium</a> </li>
<li data-value="o_margin_s" > <a>Small</a></li>
<li data-value="" > <a>None</a></li>
</ul>
</li>
</div>
<div data-snippet-option-id='image_floating_hidelink'
data-selector=".o_image_floating">
<li data-value="o_hide_link"><a>Hide link</a></li>
</div>
<div data-snippet-option-id='image_floating_side'
data-selector=".o_image_floating">
<li class="dropdown-submenu">
<a tabindex="-2" href="#">Float</a>
<ul class="dropdown-menu">
<li data-value="pull-left"><a>Left</a></li>
<li data-value="pull-right"><a>Right</a></li>
</ul>
</li>
</div>
<div data-snippet-option-id='parallax'
data-selector=".parallax">
<li class="dropdown-submenu">