[IMP] animation and cover cleaned

bzr revid: fp@tinyerp.com-20140322201205-u9a37w35w6nb4pa9

diff --git a/addons/website_blog/static/src/css/website_blog.css b/addons/website_blog/static/src/css/website_blog.css
index ed0d40f..b001112 100644 (file)
--- a/addons/website_blog/static/src/css/website_blog.css
+++ b/addons/website_blog/static/src/css/website_blog.css
@@ -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 {

diff --git a/addons/website_blog/static/src/css/website_blog.sass b/addons/website_blog/static/src/css/website_blog.sass
index 60ead30..1e29315 100644 (file)
--- a/addons/website_blog/static/src/css/website_blog.sass
+++ b/addons/website_blog/static/src/css/website_blog.sass
@@ -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
 

diff --git a/addons/website_blog/static/src/img/post1.jpg b/addons/website_blog/static/src/img/post1.jpg
index eebccd0..f3e3aa8 100644 (file)
Binary files a/addons/website_blog/static/src/img/post1.jpg and b/addons/website_blog/static/src/img/post1.jpg differ

diff --git a/addons/website_blog/static/src/img/post2.jpg b/addons/website_blog/static/src/img/post2.jpg
index de06b29..8f6002a 100644 (file)
Binary files a/addons/website_blog/static/src/img/post2.jpg and b/addons/website_blog/static/src/img/post2.jpg differ

diff --git a/addons/website_blog/static/src/img/post3.jpg b/addons/website_blog/static/src/img/post3.jpg
index 58d02a8..0123f64 100644 (file)
Binary files a/addons/website_blog/static/src/img/post3.jpg and b/addons/website_blog/static/src/img/post3.jpg differ

diff --git a/addons/website_blog/static/src/js/website_blog.js b/addons/website_blog/static/src/js/website_blog.js
index ad4a675..8b48cde 100644 (file)
--- a/addons/website_blog/static/src/js/website_blog.js
+++ b/addons/website_blog/static/src/js/website_blog.js
@@ -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);

diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index 6991fe7..8c06623 100644 (file)
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -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>