odoo
/
odoo
2
0
Fork 0
Code Pull Requests Releases Activity

[IMP] animation and cover cleaned 

bzr revid: fp@tinyerp.com-20140322201205-u9a37w35w6nb4pa9
This commit is contained in:
Fabien Pinckaers 2014-03-22 21:12:05 +01:00
parent 49fc8b3f06
commit eb3ff0a5b4
7 changed files with 37 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
addons/website_blog/static/src/css/website_blog.css
View File

@ -29,45 +29,25 @@ p.post-meta {
background-position: center;
background-repeat: no-repeat;
background-color: black;
opacity: 0.8;
}
.cover_header {
color: white;
position: relative;
}
.cover_header .blog_title {
padding-top: 10%;
.cover .blog_title {
position: absolute;
text-align: center;
top: 10%;
left: 0;
right: 0;
}
.cover_header h1 {
.cover .blog_title h1 {
font-weight: bold;
}
.cover_header h2.text-muted {
color: white;
}
.cover_footer {
color: white;
background-color: grey;
min-height: 200px;
height: 50vh;
padding-top: 5vh;
cursor: pointer;
}
.cover_footer h1 {
font-weight: bold;
}
.easing_upward {
-webkit-transform: translate3d(0, -20%, 0);
-moz-transform: translate3d(0, -20%, 0);
-ms-transform: translate3d(0, -20%, 0);
-o-transform: translate3d(0, -20%, 0);
transform: translate3d(0, -20%, 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);
}
/*Inline Discussion */
.discussion {

34
addons/website_blog/static/src/css/website_blog.sass
View File

@ -27,37 +27,21 @@ p.post-meta
background-position: center
background-repeat: no-repeat
background-color: #000
opacity : 0.8
.cover_header
color: white
color: #fff
position: relative
.blog_title
padding-top : 10%
h1
font-weight: bold
h2.text-muted
color: white
position: absolute
text-align: center
top: 10%
left: 0
right: 0
h1
font-weight: bold
.cover_footer
color: white
background-color: grey
min-height : 200px
height: 50vh
padding-top: 5vh
cursor: pointer
h1
font-weight: bold
.easing_upward
-webkit-transform: translate3d(0, -20%, 0)
-moz-transform: translate3d(0, -20%, 0)
-ms-transform: translate3d(0, -20%, 0)
-o-transform: translate3d(0, -20%, 0)
transform: translate3d(0, -20%, 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)
/*Inline Discussion

BIN
addons/website_blog/static/src/img/post1.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 76 KiB

BIN
addons/website_blog/static/src/img/post2.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 67 KiB

BIN
addons/website_blog/static/src/img/post3.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 187 KiB

After

Width:  |  Height:  |  Size: 138 KiB

12
addons/website_blog/static/src/js/website_blog.js
View File

@ -6,10 +6,10 @@ $(document).ready(function() {
var top = $('.cover_footer').offset().top;
$('.cover_footer').animate({
height: $(window).height()+'px'
}, 500);
}, 300);
$('html, body').animate({
scrollTop: top
}, 500, 'swing', function() {
}, 300, 'swing', function() {
window.location.href = newLocation;
});
}
@ -17,9 +17,9 @@ $(document).ready(function() {
function animate() {
var target = $(this.hash);
$('html, body').stop().animate({
'scrollTop': target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
'scrollTop': target.offset().top - 32
}, 500, 'swing', function () {
window.location.hash = 'blog_content';
});
return false;
}
@ -30,7 +30,7 @@ $(document).ready(function() {
new openerp.website.blog_discussion({'content' : content});
}
$('.cover_header').css('min-height', $(window).height());
$('.js_header').css('min-height', $(window).height());
$("js_tweet").find("h1, h2, h3, h4, li, p").share({'author_name':$('#blog_author').text()});
$('.cover_footer').on('click',page_transist);
$('a[href^="#blog_content"]').on('click', animate);

26
addons/website_blog/views/website_blog_templates.xml
View File

@ -155,7 +155,7 @@
<template id="blog_post_complete" name="Blog Post">
<t t-call="website_blog.index">
<div class="cover cover_header text-center mb32" id="title" t-attf-style="background-image : url(#{blog_post.content_image})" t-ignore="True">
<div class="cover js_header" id="title" t-attf-style="background-image: url(#{blog_post.content_image})" t-ignore="True">
<div class="container">
<div class="container text-right mt16">
<div class="btn-group css_non_editable_mode_hidden">
@ -179,14 +179,14 @@
</div>
</div>
<div class="blog_title">
<h1 t-field="blog_post.name" id="blog_post_name" class="mt32"/>
<h2 t-field="blog_post.sub_title" class="text-muted"/>
<h1 t-field="blog_post.name" id="blog_post_name"/>
<h2 t-field="blog_post.sub_title"/>
<div>
<img class="img-circle" t-att-src="'/website/image?model=blog.post&amp;field=author_image&amp;id='+str(blog_post.id)" style="width: 30px; margin-right: 10px;"/>
<small id="blog_author" t-field="blog_post.create_uid.name"/><br/>
</div>
<div t-if="blog_post.content_image" id="blog_angle_down">
<a href="#blog_content" class="fa fa-angle-down fa-2x fa-inverse mt64"/>
<a href="#blog_content" class="fa fa-angle-down fa-2x fa-inverse mt32"/>
</div>
</div>
</div>
@ -217,13 +217,15 @@
<t t-if="next_post">
<div class="cover cover_footer mb0 text-center" t-attf-style="background-image: url(#{next_post.content_image})" t-ignore="True">
<p>Read Next</p>
<a class="hidden js_next" t-attf-href="/blogpost/#{ slug(next_post) }/#wrap"/>
<h1 t-field="next_post.name"/>
<h2 t-field="next_post.sub_title"/>
<div>
<img class="img-circle" t-att-src="'/website/image?model=blog.post&amp;field=author_image&amp;id='+str(next_post.id)" style="width: 30px; margin-right: 10px;"/>
<small id="blog_author" t-field="next_post.create_uid.name"/>
<div class="blog_title">
<a class="hidden js_next" t-attf-href="/blogpost/#{ slug(next_post) }/#wrap"/>
<h1 t-field="next_post.name"/>
<h2 t-field="next_post.sub_title"/>
<div>
<img class="img-circle" t-att-src="'/website/image?model=blog.post&amp;field=author_image&amp;id='+str(next_post.id)" style="width: 30px; margin-right: 10px;"/>
<small id="blog_author" t-field="next_post.create_uid.name"/>
</div>
<p class="mt32">Read Next <span class="fa fa-long-arrow-right"/></p>
</div>
</div>
</t>
@ -276,7 +278,7 @@
<xpath expr="//div[@id='blog_content']" position="attributes">
<attribute name="class">js_tweet</attribute>
</xpath>
<xpath expr="//div[@class='blog_title']" position="attributes">
<xpath expr="//div[@id='blog_title']" position="attributes">
<attribute name="class">blog_title js_tweet</attribute>
</xpath>
</template>