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

[IMP] : display a random next blog

Browse Source 
-> blog cover with full screen
-> animation on click next page

bzr revid: aja@tinyerp.com-20140206093823-gs4asrkpwr1e0uf6
This commit is contained in:
ajay javiya (OpenERP)
2014-02-06 15:08:23 +05:30
parent de2177bb26
commit 4fa2b4efc6
5 changed files with 112 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_blog/controllers/main.py
+6 -2
View File
@@ -25,6 +25,7 @@ from openerp.tools.translate import _
from openerp import SUPERUSER_ID
import werkzeug
import random
@@ -205,7 +206,9 @@ class WebsiteBlog(http.Controller):
MONTHS = [None, _('January'), _('February'), _('March'), _('April'),
_('May'), _('June'), _('July'), _('August'), _('September'),
_('October'), _('November'), _('December')]
post_ids = blog_post_obj.search(cr, uid, [], context=context)
random_post_list = list(set(post_ids)-set([blog_post.id]))
next_blog_id = random_post_list[random.randint(0, len(blog_ids))]
values = {
'blog': blog_post.blog_id,
'blogs': blogs,
@@ -217,7 +220,8 @@ class WebsiteBlog(http.Controller):
'nav_list': self.nav_list(),
'enable_editor': enable_editor,
'date': date,
'date_name': date and "%s %s" % (MONTHS[int(date.split("-")[1])], date.split("-")[0]) or None
'date_name': date and "%s %s" % (MONTHS[int(date.split("-")[1])], date.split("-")[0]) or None,
'next_post' : request.registry['blog.post'].browse(cr, uid, next_blog_id, context=context)
}
return request.website.render("website_blog.blog_post_complete", values)
addons/website_blog/static/src/css/website_blog.css
+37 -2
View File
@@ -1,5 +1,4 @@
@charset "utf-8";
@import url(compass/css3.css);
@charset "UTF-8";
.css_website_mail .has-error {
border-color: red;
}
@@ -28,8 +27,44 @@ p.post-meta {
-o-background-size: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: rgba(0, 0, 0, 0.3);
height: 100vh;
color: white;
padding-top: 20%;
margin-bottom: 8px;
}
.cover_footer {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: rgba(0, 0, 0, 0.3);
height: 50vh;
color: white;
padding-top: 10%;
margin-bottom: 8px;
}
.page_fadeup_out {
opacity: 0;
-webkit-transform: scale(0.8) translate3d(0, -10%, 0);
-moz-transform: scale(0.8) translate3d(0, -10%, 0);
-ms-transform: scale(0.8) translate3d(0, -10%, 0);
-o-transform: scale(0.8) translate3d(0, -10%, 0);
transform: scale(0.8) translate3d(0, -10%, 0);
-webkit-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
-moz-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.page_upward {
-webkit-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
-moz-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
addons/website_blog/static/src/css/website_blog.sass
+33
View File
@@ -26,7 +26,40 @@ p.post-meta
-o-background-size: cover
background-size: cover
background-position: center
background-repeat: no-repeat
background-color: rgba(0, 0, 0, 0.3)
height: 100vh
color: white
padding-top: 20%
margin-bottom: 8px
.cover_footer
-webkit-background-size: cover
-moz-background-size: cover
-o-background-size: cover
background-size: cover
background-position: center
background-repeat: no-repeat
background-color: rgba(0, 0, 0, 0.3)
height: 50vh
color: white
padding-top: 10%
margin-bottom: 8px
.page_fadeup_out
opacity: 0
-webkit-transform: scale(0.8) translate3d(0, -10%, 0)
-moz-transform: scale(0.8) translate3d(0, -10%, 0)
-ms-transform: scale(0.8) translate3d(0, -10%, 0)
-o-transform: scale(0.8) translate3d(0, -10%, 0)
transform: scale(0.8) translate3d(0, -10%, 0)
-webkit-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1)
-moz-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1)
-o-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1)
transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1)
.page_upward
-webkit-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1)
-moz-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1)
-o-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1)
transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1)
addons/website_blog/static/src/js/website_blog.js
+23
View File
@@ -0,0 +1,23 @@
$(document).ready(function() {
$('.js_next').click(function(event) {
event.preventDefault();
var translationValue = $('.cover_footer').get(0).getBoundingClientRect().top;
newLocation = this.href;
$('.blog_cover').addClass('page_fadeup_out');
$('.cover_footer')
.addClass('page_upward')
.css({ "transform": "translate3d(0, -"+ translationValue +"px, 0)" })
.fadeIn(10000, newpage);
});
function newpage() {
$.ajax({
url: newLocation,
}).done(function(data) {
document.getElementsByTagName('html')[0].innerHTML = data;
if (newLocation != window.location) {
history.pushState(null, null, newLocation);
}
});
}
});
addons/website_blog/views/website_blog_templates.xml
+13 -3
View File
@@ -7,6 +7,7 @@
<script type="text/javascript" src="/website_blog/static/src/js/website_blog.editor.js"></script>
<script type="text/javascript" src="/website_blog/static/src/js/website.tour.blog.js"></script>
<script type="text/javascript" src="/website_blog/static/lib/contentshare.js"></script>
<script type="text/javascript" src="/website_blog/static/src/js/website_blog.js"/>
</xpath>
</template>
@@ -231,18 +232,27 @@
inherit_option_id="website_blog.blog_post_complete">
<xpath expr="//div[@id='title']" position="attributes">
<attribute name="class">blog_cover</attribute>
<attribute t-if="blog_post.content_image" name="t-attf-style">background : url('data:image/png;base64,#{blog_post.content_image}') center center no-repeat;</attribute>
<attribute t-if="not blog_post.content_image" name="style">background : #34495E;</attribute>
<attribute name="t-attf-style">background-image : url(data:image/jpg;base64,#{blog_post.content_image})</attribute>
</xpath>
<xpath expr="//div[@id='title']" position="inside">
<div class="text-center blog_item">
<img class="img-circle" t-att-src="'/website/image?model=res.partner&amp;field=image_small&amp;id='+str(blog_post.create_uid.id)" style="width: 50px; margin-right: 10px;"/>
<img class="img-circle" t-att-src="'/website/image?model=res.partner&amp;field=image_small&amp;id='+str(blog_post.create_uid.partner_id.id)" style="width: 30px; margin-right: 10px;"/>
<small class="text-muted" id="blog_author" t-field="blog_post.create_uid.name"/>
</div>
<div class="text-center mt64">
<a href="#blog_content"><span class="fa fa-angle-down fa-2x fa-inverse"/></a>
</div>
</xpath>
<xpath expr="//section[@id='comments']" position="after">
<div class="cover_footer" t-attf-style="background-image: url(data:image/jpg;base64,#{next_post.content_image})">
<a class="js_next " t-attf-href="/blogpost/#{ slug(next_post) }"><p class="text-center">Read Next</p></a>
<h1 class="text-center" t-field="next_post.name"/>
<div class="text-center blog_item">
<img class="img-circle" t-att-src="'/website/image?model=res.partner&amp;field=image_small&amp;id='+str(next_post.create_uid.partner_id.id)" style="width: 30px; margin-right: 10px;"/>
<small class="text-muted" id="blog_author" t-field="next_post.create_uid.name"/>
</div>
</div>
</xpath>
</template>
<template id="blog_footer" name="Blog Footer"