[ADD] theme 8.0
This commit is contained in:
Design
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
@@ -0,0 +1,18 @@
|
||||
|
||||
|
||||
<div class="container">
|
||||
|
||||
|
||||
<div class="row text-left" style="margin-top: 2em;">
|
||||
<div class="col-sm-5">
|
||||
<p>Present your blog posts in magazine-style layouts. <br/>
|
||||
This snippet is great for highlighting blog content on your homepage.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-sm-7">
|
||||
<img src="screen_1.jpg" class="img-responsive" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1,107 @@
|
||||
(function(){
|
||||
'use strict';
|
||||
var website = openerp.website;
|
||||
var session_editor = new openerp.Session();
|
||||
var _t = openerp._t;
|
||||
|
||||
|
||||
// js_get_posts
|
||||
website.snippet.options.js_get_posts = website.snippet.Option.extend({
|
||||
drop_and_build_snippet: function(){
|
||||
var self = this;
|
||||
if (!self.$target.data('snippet-view')) {
|
||||
this.$target.data("snippet-view", new website.snippet.animationRegistry.js_get_posts(this.$target));
|
||||
}
|
||||
},
|
||||
clean_for_save:function(){
|
||||
this.$target.empty();
|
||||
}
|
||||
}),
|
||||
|
||||
// js_get_posts limit
|
||||
website.snippet.options.js_get_posts_limit = website.snippet.Option.extend({
|
||||
start:function(){
|
||||
var self = this;
|
||||
setTimeout(function(){
|
||||
var ul = self.$overlay.find(".snippet-option-js_get_posts_limit > ul");
|
||||
if (self.$target.attr("data-posts_limit")) {
|
||||
var limit = self.$target.attr("data-posts_limit");
|
||||
ul.find('li[data-posts_limit="' + limit + '"]').addClass("active");
|
||||
} else {
|
||||
ul.find('li[data-posts_limit="3"]').addClass("active");
|
||||
}
|
||||
},100)
|
||||
},
|
||||
posts_limit:function(type, value, $li){
|
||||
var self = this;
|
||||
if(type != "click"){return}
|
||||
value = parseInt(value);
|
||||
this.$target.attr("data-posts_limit",value)
|
||||
.data("posts_limit",value)
|
||||
.data('snippet-view').redrow(true);
|
||||
setTimeout(function(){
|
||||
$li.parent().find("li").removeClass("active");
|
||||
$li.addClass("active");
|
||||
},100);
|
||||
}
|
||||
}),
|
||||
|
||||
// js_get_posts Select Blog
|
||||
website.snippet.options.js_get_posts_selectBlog = website.snippet.Option.extend({
|
||||
start: function() {
|
||||
this._super();
|
||||
var self = this;
|
||||
var model = session_editor.model('blog.blog');
|
||||
var blogsList = [];
|
||||
|
||||
model
|
||||
.call('search_read',
|
||||
[
|
||||
[],
|
||||
['name','id']// attributes to get
|
||||
],
|
||||
{} )
|
||||
.then(function(blogs){
|
||||
self.createBlogsList(blogs)// start printing posts...
|
||||
})
|
||||
.fail(function (e) {
|
||||
// No data
|
||||
var title = _t("Oops, Huston we have a problem"),
|
||||
msg = $("<div contenteditable='false' class='message error text-center'><h3>"+ title +"</h3><code>"+ e.data.message + "</code></div>" );
|
||||
self.$target.append(msg)
|
||||
return;
|
||||
});
|
||||
},
|
||||
|
||||
createBlogsList: function(blogs){
|
||||
var self = this;
|
||||
var ul = null;
|
||||
|
||||
setTimeout(function(){
|
||||
ul = self.$overlay.find(".snippet-option-js_get_posts_selectBlog > ul");
|
||||
$(blogs).each(function(){
|
||||
var blog = $(this);
|
||||
var li = $('<li data-filter_by_blog_id="' + blog[0].id + '"><a>' + blog[0].name + '</a></li>');
|
||||
ul.append(li);
|
||||
});
|
||||
if (self.$target.attr("data-filter_by_blog_id")) {
|
||||
var id = self.$target.attr("data-filter_by_blog_id");
|
||||
ul.find("li[data-filter_by_blog_id=" + id + "]").addClass("active");
|
||||
}
|
||||
},100)
|
||||
},
|
||||
|
||||
filter_by_blog_id:function(type, value, $li){
|
||||
var self = this;
|
||||
if(type == "click"){
|
||||
$li.parent().find("li").removeClass("active");
|
||||
$li.addClass("active");
|
||||
value = parseInt(value);
|
||||
self.$target.attr("data-filter_by_blog_id",value)
|
||||
.data("filter_by_blog_id",value)
|
||||
.data('snippet-view').redrow(true);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,131 @@
|
||||
(function(){
|
||||
'use strict';
|
||||
|
||||
var website = openerp.website;
|
||||
|
||||
website.snippet.animationRegistry.js_get_posts = website.snippet.Animation.extend({
|
||||
selector : ".js_get_posts",
|
||||
|
||||
start: function(){
|
||||
this.redrow();
|
||||
},
|
||||
stop: function(){
|
||||
this.clean();
|
||||
},
|
||||
|
||||
redrow: function(debug){
|
||||
this.clean(debug);
|
||||
this.build(debug);
|
||||
},
|
||||
|
||||
clean:function(debug){
|
||||
this.$target.empty();
|
||||
},
|
||||
|
||||
build: function(debug){
|
||||
var self = this,
|
||||
limit = self.$target.data("posts_limit"),
|
||||
blog_id = self.$target.data("filter_by_blog_id"),
|
||||
template = self.$target.data("template"),
|
||||
loading = self.$target.data("loading");
|
||||
|
||||
// prevent user's editing
|
||||
self.$target.attr("contenteditable","False");
|
||||
|
||||
// if no data, then use defaults values
|
||||
if(!limit)limit = 3;
|
||||
if(!template) template = 'snippet_latest_posts.media_list_template';
|
||||
|
||||
// create the domain
|
||||
var domain = [['website_published', '=', true]]
|
||||
if (blog_id) {domain.push(['blog_id', '=', parseInt(blog_id)]); }
|
||||
|
||||
// call posts
|
||||
openerp.jsonRpc('/snippet_latest_posts/render', 'call', {
|
||||
'template': template,
|
||||
'domain': domain,
|
||||
'limit': limit,
|
||||
}).then(function(posts) {
|
||||
if (loading && loading == true) {
|
||||
// perfrorm an intro animation
|
||||
self.loading(posts, debug);
|
||||
} else {
|
||||
// just print the posts
|
||||
$(posts).appendTo(self.$target);
|
||||
}
|
||||
})
|
||||
.fail(function(e) {
|
||||
// debug in js console
|
||||
return;
|
||||
});
|
||||
},
|
||||
|
||||
loading: function(posts, debug){
|
||||
var self = this,
|
||||
$posts = $(posts);
|
||||
|
||||
if(!$posts.first().find(".loading_container") && !$posts.first().is(".loading_container")){
|
||||
console.log("loading_container dont exist??")
|
||||
if(debug) {
|
||||
console.info("No '.loading_container' defined \n Please, add a 'loading_container' class to the element that must be filled by the loading bar");
|
||||
}
|
||||
} else if(!$posts.first().is(".thumb") && !$posts.first().find(".thumb")) {
|
||||
console.log("thumb dont exist??")
|
||||
if(debug) {
|
||||
console.info("No '.thumb' defined \n Please, add a 'thumb' class to your thumbnail div");
|
||||
}
|
||||
}
|
||||
else {
|
||||
$posts.each(function(){
|
||||
var $post = $(this),
|
||||
$load_c = $post.find(".loading_container"),
|
||||
$thumb = $post.find(".thumb"),
|
||||
$progress = $('<div class="progress js-loading"><div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0;" /></div>')
|
||||
|
||||
// prevent precessing empty post
|
||||
if ($post.html() == undefined) {return;}
|
||||
|
||||
// if can't find loading container or thumb inside the post, then they are the post itself
|
||||
if($load_c.length == 0) { $load_c = $post }
|
||||
if($thumb.length == 0) { $thumb = $post }
|
||||
|
||||
$post.addClass("js-loading");
|
||||
$progress.appendTo($load_c);
|
||||
$post.appendTo(self.$target);
|
||||
|
||||
var bg = $thumb.css('background-image').replace('url(','').replace(')',''),
|
||||
loaded = false;
|
||||
|
||||
$progress.find(".progress-bar").css("width","50%").attr("aria-valuenow","50");
|
||||
|
||||
var dummyImg = $('<img/>').attr('src', bg)
|
||||
.load(function() {
|
||||
// The post's background image is loaded, let's perform a gracefull intro animation
|
||||
$progress.find(".progress-bar").find(".progress-bar").css("width","100%").attr("aria-valuenow","100");
|
||||
setTimeout(function() {
|
||||
self.showPost($post, $progress);
|
||||
},500);
|
||||
$(this).remove();
|
||||
loaded = true;
|
||||
});
|
||||
|
||||
// Show the post after 5sec without wait for thumb loading
|
||||
setTimeout(function() {
|
||||
if(loaded == false) {
|
||||
dummyImg.remove();
|
||||
self.showPost($post, $progress)
|
||||
}
|
||||
},5000);
|
||||
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
showPost: function($post, $progress){
|
||||
$post.removeClass("js-loading");
|
||||
$progress.fadeOut(500);
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,24 @@
|
||||
.js_get_posts{
|
||||
min-height: 100px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.progress.js-loading{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
|
||||
.progress-bar{
|
||||
margin: 0;
|
||||
left: 10%;
|
||||
width: 80%;
|
||||
top: 45%;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
background: #DBDBDB;
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
|
||||
// Default Style ================================
|
||||
// ==============================================
|
||||
|
||||
|
||||
.s_latest_posts {
|
||||
.media.media_list_template{
|
||||
.pull-left {
|
||||
height : 200px;
|
||||
width : 100%;
|
||||
a, .media-object {
|
||||
height : 100%;
|
||||
width : 100%;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
@media (min-width: 768px){
|
||||
height : 100px;
|
||||
width : 100px;
|
||||
}
|
||||
}
|
||||
.media, .media-body {
|
||||
overflow: visible;
|
||||
@media (min-width: 768px){
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
|
||||
// =============================
|
||||
// s_latest_posts_big_picture
|
||||
// =============================
|
||||
|
||||
@s_latest_posts_big_picture-figure_bg: @brand-primary;
|
||||
|
||||
|
||||
// ====== hooks(hook) =====================================
|
||||
// ===========================================================
|
||||
// Use them to inject NEW rules or overwrite the old ones.
|
||||
// This method is more maintenable than classic css overwrite
|
||||
// 'couse it works also if the snippet's structure will change.
|
||||
|
||||
// How to:
|
||||
// in your theme, just call the backdoor like a normal
|
||||
// CSS class adding parethesis at the end ".backdoor-name()"
|
||||
// (this will prevent the creation of a standard CSS class).
|
||||
// Add your rules inside. Your style will take the priority.
|
||||
// Done.
|
||||
|
||||
// .s_latest_posts-figure(){
|
||||
// background: red;
|
||||
// min-height: 200px;
|
||||
// }
|
||||
|
||||
.s_latest_posts-js_get_posts-hook(){};
|
||||
.s_latest_posts-figure-hook(){};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.s_latest_posts_big_picture {
|
||||
|
||||
> div {
|
||||
clear: both;
|
||||
|
||||
.content {
|
||||
opacity:1;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
figure {
|
||||
position: relative;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 10px 1%;
|
||||
width: 98%;
|
||||
height: 250px;
|
||||
background: @s_latest_posts_big_picture-figure_bg;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
.transition(all 300ms);
|
||||
@media (min-width:768px) {
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
&.js-loading{
|
||||
background: #E7E7E7!important;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover!important;
|
||||
background-position: 50%;
|
||||
opacity: 0.8;
|
||||
}
|
||||
figcaption, figcaption > a {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 2em;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.25em;
|
||||
.backface-visibility(hidden);
|
||||
&:after, &:before{ pointer-events: none;}
|
||||
|
||||
> a{
|
||||
z-index: 1000;
|
||||
text-indent: 200%;
|
||||
white-space: nowrap;
|
||||
font-size: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5em;
|
||||
font-weight: 300;
|
||||
span {font-weight: 800}
|
||||
}
|
||||
p{
|
||||
margin: 0;
|
||||
margin-top: 1em;
|
||||
letter-spacing: 1px;
|
||||
font-size: 68.5%;
|
||||
}
|
||||
}
|
||||
.s_latest_posts-figure-hook;
|
||||
} // global figure
|
||||
.s_latest_posts-js_get_posts-hook;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user