pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] banner

Browse Source 
bzr revid: fp@openerp.com-20130915152522-9r8uqca0q1cph04r
This commit is contained in:
Fabien Pinckaers
2013-09-15 17:25:22 +02:00
parent 4cb35ee740
commit e50f8cf342
6 changed files with 125 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/css/website.css
+48 -2
View File
@@ -161,8 +161,54 @@ footer {
margin-bottom: 0px;
}
.carousel .item {
color: white;
.carousel-inner .item {
height: 100%;
}
.carousel .carousel-caption h1, .carousel .carousel-caption h2, .carousel .carousel-caption h3 {
margin-top: 10px;
margin-bottom: 10px;
}
.carousel .carousel-image {
right: 10%;
left: 50%;
top: 5%;
bottom: 5%;
position: absolute;
text-align: center;
}
.carousel .carousel-image img {
height: 100%;
margin: 0 auto;
}
.carousel .item.text_image .carousel-caption {
left: auto;
right: auto;
bottom: 10%;
text-align: left;
padding: 20px;
background: rgba(0, 0, 0, 0.4);
}
.carousel .item.text_only .carousel-image {
display: none;
}
.carousel .item.text_only .carousel-caption {
left: 10%;
right: 10%;
top: 10%;
text-align: center;
}
.carousel .item.image_text .carousel-caption {
left: auto;
text-align: left;
right: 10%;
bottom: 10%;
padding: 20px;
background: rgba(0, 0, 0, 0.4);
}
.carousel .item.image_text .carousel-image {
right: 50%;
left: 10%;
}
/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
addons/website/static/src/css/website.sass
+45 -2
View File
@@ -127,8 +127,51 @@ footer
// .nav > li a
// display: block
.carousel .item
color: white
.carousel-inner .item
height: 100%
.carousel
.carousel-caption
h1, h2, h3
margin-top: 10px
margin-bottom: 10px
.carousel-image
right: 10%
left: 50%
top: 5%
bottom: 5%
position: absolute
text-align: center
img
height: 100%
margin: 0 auto
.item.text_image
.carousel-caption
left: auto
right: auto
bottom: 10%
text-align: left
padding: 20px
background: rgba(0, 0, 0, 0.4)
.item.text_only
.carousel-image
display: none
.carousel-caption
left: 10%
right: 10%
top: 10%
text-align: center
.item.image_text
.carousel-caption
left: auto
text-align: left
right: 10%
bottom: 10%
padding: 20px
background: rgba(0, 0, 0, 0.4)
.carousel-image
right: 50%
left: 10%
/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
addons/website/static/src/img/banner/banner_picture.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

addons/website/static/src/js/website.snippets.js
+13 -29
View File
@@ -787,13 +787,21 @@
//style
var style = false;
if (this.$target.find('.carousel-inner .item.active .container .content_image.col-lg-offset-1'))
style = 'image_right';
if (this.$target.find('.carousel-inner .item.active .container .content_image'))
style = 'image_left';
var el = this.$target.find('.carousel-inner');
if (el.hasClass('text_only'))
style = 'text_only';
if (el.hasClass('image_text'))
style = 'image_text';
if (el.hasClass('text_image'))
style = 'text_image';
this.$editor.find('select[name="carousel-style"] option[value="'+style+'"]').prop('selected', true);
this.$editor.find('select[name="carousel-style"]').on('change', this.on_bg_change);
this.$editor.find('select[name="carousel-style"]').on('change', function(e) {
var $container = self.$target.find('.carousel-inner .item.active');
$container.removeClass('image_text text_image text_only')
$container.addClass($(e.currentTarget).val())
});
},
on_add: function (e) {
e.preventDefault();
@@ -812,30 +820,6 @@
this.$target.carousel(0);
}
},
on_bg_change: function (e) {
var $container = this.$target.find('.carousel-inner .item.active .container');
var img_url = $('.content_image img', $container).attr("src");
if (!img_url) {
img_url = this.img_url || "/website/static/src/img/china.jpg";
} else {
this.img_url = img_url;
}
$('.content_image', $container).remove();
switch ($(e.currentTarget).val()) {
case 'no_image':
$('.content', $container).attr("class", "content");
break;
case 'image_left':
$('.content', $container).attr("class", "content col-md-6")
.before('<div class="content_image col-md-5"><img class="img-rounded img-responsive" src="'+img_url+'"></div>');
break;
case 'image_right':
$('.content', $container).attr("class", "content col-md-6")
.after('<div class="content_image col-md-5 col-lg-offset-1"><img class="img-rounded img-responsive" src="'+img_url+'"></div>');
break;
}
},
});
website.snippet.editorRegistry.darken = website.snippet.Editor.extend({
addons/website/static/src/xml/website.snippets.xml
+18 -24
View File
@@ -56,16 +56,16 @@
<input class="form-control input-sm" type="text" placeholder="http://...."/>
</a>
</li>
<!--li class='oe_snippet_options'>
<li class='oe_snippet_options'>
<a class="carousel-style">
Style
<select class="form-control" name="carousel-style">
<option value="no_image">No image</option>
<option value="image_left">Image left</option>
<option value="image_right">Image right</option>
<option value="text_only">Text Only</option>
<option value="image_text">Image - Text</option>
<option value="text_image">Text - Image</option>
</select>
</a>
</li-->
</li>
<!-- thumbnail to display inside the bottom widget list editor -->
<div class='oe_snippet_thumbnail oe_label'>Banner</div>
@@ -73,13 +73,18 @@
<!-- body to insert after drag and drop thumbnail -->
<div id="myCarousel" class="oe_snippet_body carousel slide" data-interval="10000">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" style="background-image: url(/website/static/src/img/banner/color_splash.jpg); background-size: cover;">
<div class="carousel-inner" style="height: 280px">
<div class="item text_only active" style="background-image: url(/website/static/src/img/banner/color_splash.jpg); background-size: cover;">
<div class="container">
<div class="content mt48 mb48" data-snippet-id='resize'>
<div class="carousel-caption content">
<h1>Create Awesome Websites</h1>
<h3>Super easy, fully flexible</h3>
<a href="/page/website.contactus" class="btn btn-success btn-large mt16">Contact us</a>
<p>
<a href="/page/website.contactus" class="btn btn-success btn-large">Contact us</a>
</p>
</div>
<div class="carousel-image">
<img src="/website/static/src/img/banner/banner_picture.png" alt="Banner OpenERP Image"/>
</div>
</div>
</div>
@@ -88,17 +93,6 @@
<a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
</div>
<!-- custom data for the widget -->
<div class="item" style="background-image: url(/website/static/src/img/china.jpg); background-size: cover; background-position: bottom;" >
<div class='container'>
<div class="content" style="padding-top: 90px; padding-bottom:45px;">
<h1>Your New Banner Slide</h1>
<h3>With another convincing subtitle</h3>
<a href="/page/website.contactus" class="btn btn-success btn-large mt16">Contact us</a>
</div>
</div>
</div>
</div>
<div t-name="website.snippets.darken" data-snippet-id='darken' data-category='style' data-action='mutate' data-selector='section'>
@@ -212,7 +206,7 @@
<div t-name="website.snippets.jumbotron" data-snippet-id='jumbotron' data-category='structure' data-action='insert' data-selector-childs='#wrap, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail oe_label'>Jumbotron</div>
<section class="oe_snippet_body jumbotron">
<section class="oe_snippet_body jumbotron mt16 mb16">
<div class="container">
<h1>Sell Online. Easily.</h1>
<p>
@@ -229,7 +223,7 @@
<div t-name="website.snippets.text-block" data-snippet-id='text-block' data-category='structure' data-action='insert' data-selector-childs='#wrap, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail oe_label'>Text Block</div>
<section class="oe_snippet_body">
<section class="oe_snippet_body mt16 mb16">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt16 mb32">
@@ -258,7 +252,7 @@
<div t-name="website.snippets.big-picture" data-snippet-id='big-picture' data-category='structure' data-action='insert' data-selector-childs='#wrap, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail oe_label'>Big Picture</div>
<section class="oe_snippet_body dark">
<section class="oe_snippet_body dark mt16 mb16">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt32 mb16">
@@ -289,7 +283,7 @@
<div t-name="website.snippets.three-columns" data-snippet-id='three-columns' data-category='structure' data-action='insert' data-selector-childs='#wrap, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail oe_label'>Three Columns</div>
<section class="oe_snippet_body">
<section class="oe_snippet_body mt16 mb16">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt16 mb16">
addons/website/views/views.xml
+1 -91
View File
@@ -160,97 +160,7 @@
</template>
<template id="homepage" page="True">
<t t-call="website.layout">
<div id="myCarousel" data-snippet-id="carousel" class="carousel slide" data-interval="1000000">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" style="background-image: url(/website/static/src/img/banner/greenfields.jpg); background-size: cover;">
<div class="container">
<div class="content mt48 mb48" data-snippet-id='resize'>
<h1>Create Awesome Websites</h1>
<h3>Super easy, fully flexible</h3>
<a href="/page/website.contactus" class="btn btn-success btn-large mt16">Contact us</a>
</div>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
</div>
<section class="container" data-snippet-id="resize">
<div class="row">
<div class="col-md-12 text-center">
<h1>Welcome To Your New Homepage,</h1>
<h2>where <b>everything</b> can be <em>customized</em></h2>
</div>
</div>
</section>
<div class="dark mt64">
<section class="dark container" data-snippet-id="resize">
<div class="row">
<div class="col-md-5">
<img class="img-rounded img-responsive" src="/website/static/src/img/island.jpg" />
</div>
<div class="col-md-6 col-lg-offset-1">
<p class="mt16">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
<div class="text-center"> <a href="http://www.openerp.com/start" class="btn mt16 btn-lg btn-primary">Call To <em>Action</em></a></div>
</div>
</div>
</section>
</div>
<section class="container" data-snippet-id="resize">
<div class="row">
<div class="col-md-12 text-center">
<h2 class="mt48">Ut enim ad minim veniam</h2>
</div>
</div>
<div class="row mt32">
<div class="col-md-4">
<img class="img-rounded img-responsive" src="/website/static/src/img/china_thumb.jpg" />
<h4 class="mt16">Cillum Dolore</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
<div class="col-md-4">
<img class="img-rounded img-responsive" src="/website/static/src/img/desert_thumb.jpg"/>
<h4 class="mt16">Mollit Anim</h4>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
<div class="col-md-4">
<img class="img-rounded img-responsive" src="/website/static/src/img/deers_thumb.jpg"/>
<h4 class="mt16">Nemo Enim Ipsam</h4>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas
</p>
</div>
</div>
</section>
</t>
<t t-call="website.layout"></t>
</template>
<template id="default_page">