modificacion estructura blog

static/src/js/s_latest_posts_frontend.js

@@ -1,131 +1,142 @@
-(function(){
+(function() {
   'use strict';
 
   var website = openerp.website;
 
   website.snippet.animationRegistry.js_get_posts = website.snippet.Animation.extend({
-    selector : ".js_get_posts",
+    selector: ".js_get_posts",
 
-    start: function(){
+    start: function() {
       this.redrow();
     },
-    stop: function(){
+    stop: function() {
       this.clean();
     },
 
-    redrow: function(debug){
+    redrow: function(debug) {
       this.clean(debug);
       this.build(debug);
     },
 
-    clean:function(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");
+    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");
+      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';
-      
+      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)]); }
+      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;
-      });
+          '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){
+    loading: function(posts, debug) {
       var self = this,
-          $posts = $(posts);
+        $posts = $(posts);
 
-      if(!$posts.first().find(".loading_container") && !$posts.first().is(".loading_container")){
+      if (!$posts.first().find(".loading_container") && !$posts.first().is(".loading_container")) {
         console.log("loading_container dont exist??")
-        if(debug) {
+        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")) {
+      } else if (!$posts.first().is(".thumb") && !$posts.first().find(".thumb")) {
         console.log("thumb dont exist??")
-        if(debug) {
+        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>')
+      } 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 ($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 }
+          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;
+          var bg = $thumb.css('background-image').replace('url(', '').replace(')', ''),
+            loaded = false;
 
-          $progress.find(".progress-bar").css("width","50%").attr("aria-valuenow","50"); 
+          $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");
+              $progress.find(".progress-bar").find(".progress-bar").css("width", "100%").attr("aria-valuenow", "100");
               setTimeout(function() {
                 self.showPost($post, $progress);
-              },500); 
+              }, 500);
               $(this).remove();
               loaded = true;
             });
 
           // Show the post after 5sec without wait for thumb loading
           setTimeout(function() {
-            if(loaded == false) {
+            if (loaded == false) {
               dummyImg.remove();
               self.showPost($post, $progress)
             }
-          },5000); 
+          }, 5000);
 
         })
       }
     },
 
-    showPost: function($post, $progress){
+    showPost: function($post, $progress) {
       $post.removeClass("js-loading");
       $progress.fadeOut(500);
     }
 
   })
 
-})();
+})();
+
+

static/src/less/s_latest_posts.less

@@ -6,8 +6,8 @@
 .s_latest_posts {
   .media.media_list_template{
     .pull-left {
-      height : 200px;
-      width  : 100%;
+      height : 200px !important;
+      width  : 30% !important;
       a, .media-object {
         height : 100%;
         width  : 100%;

static/src/less/s_latest_posts_big_picture.less

@@ -27,9 +27,15 @@
 .s_latest_posts-js_get_posts-hook(){};
   .s_latest_posts-figure-hook(){};
 
+ .blog_big_pname {
+        left: 0px !important;
+        line-height: 1 !important;
+        }
 
-
-
+.letrablog{
+  height: 300px;
+  max-height: 350px;
+}
 
 .s_latest_posts_big_picture {
 
@@ -62,9 +68,12 @@
       &.js-loading{
         background: transparent !important;
       }
-
+      .textoautor {
+        line-height: 0px;
+      }
+     
       .thumb {
-        position: relative;
+        position: absolute;
         display: block;
         height: auto;
         width: 100%;
@@ -72,19 +81,21 @@
         background-size: cover!important;
         background-position: 50%;
         opacity: 1;
+        bottom: 0px;
+        left: 0;
         
       }
       figcaption, figcaption > a {
         position: absolute;
-        top: 0;
+        bottom: 0;
         left: 0;
-        width: 100%;
-        height: 100%;
-        padding: 2em;
+      width: 98%;
+      max-height: 400px !important;
+      
         color: #fff;
         text-transform: uppercase;
         font-size: 1.25em;
-        .backface-visibility(hidden);
+        .backface-visibility(visible);
         &:after, &:before{ pointer-events: none;}
 
         > a{

views/s_latest_posts.xml

@@ -18,17 +18,18 @@
         <t t-call="snippet_latest_posts.no_blog_posts"/>
       </t>
       <t t-as="p" t-foreach="posts">
-        <div class="post media media_list_template">
-          <div class="pull-left">
+        <div class="post media media_list_template col-md-12">
+          <div class="media-body col-md-6">
+            <h4 class="media-heading" t-field="p.name"/>
+            <p t-field="p.subtitle"/>
+            <div class="letrablog" id="blogletra" t-field="p.content"/>
+            <a class="btn btn-default" t-att-href="'/blog/%s/post/%s' % (p.blog_id.id, p.id)">Ver todosMás </a>
+          </div>
+          <div class="pull-left col-md-6">
             <a t-att-href="'/blog/%s/post/%s' % (p.blog_id.id, p.id)">
               <div class="media-object loading_container thumb" t-att-style="'background-image: url(%s)' % p.background_image"/>
             </a>
           </div>
-          <div class="media-body">
-            <h4 class="media-heading" t-field="p.name"/>
-            <p t-field="p.subtitle"/>
-            <a class="btn btn-default" t-att-href="'/blog/%s/post/%s' % (p.blog_id.id, p.id)">Ver Más</a>
-          </div>
         </div>
       </t>
     </template>
@@ -59,20 +60,58 @@
       <t t-as="p" t-foreach="posts">
         <figure class="loading_container col-sm-6 ">
           <div class="content">
-            <div class="thumb imagen_blog" t-att-style="'background-image: url(%s)' % p.background_image"/>
-            <figcaption>
-            
-              <a  t-att-href="'/blog/%s/post/%s' % (p.blog_id.id, p.id)"><p class="hidden">Ver Más</p></a>
-            </figcaption>
-            <a t-att-href="'/blog/%s/post/%s' % (p.blog_id.id, p.id)">
-              <h2 class="blog_big_pname" t-field="p.name"/>
-            </a>
-            <p class="text-center textoautor">
-              <strong>
+            <h2 class="blog_big_pname pull-left" t-field="p.name"/>
+            <p class="pull-left textoautor">
+              <strong>Por 
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
                 <span t-field="p.author_id"/>
-                <span t-field="p.create_date" t-field-options="{&quot;format&quot;: &quot;dd MMMM yyyy&quot;}"/>
-              </strong>
+                el 
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                <span t-field="p.create_date" t-field-options="{&quot;format&quot;: &quot;dd 'de' MMMM 'de' yyyy&quot;}"/></strong>
+              <br/>
+              <span>En 
+                
+                
+                
+                <span class="fa fa-folder-open"/>
+                <a t-att-href="'/blog/%s' % (p.blog_id.id)">
+                  <span t-field="p.blog_id"/></a>
+              </span>
+              <a class="btn-info btn-sm vermasblog " t-att-href="'/blog/%s/post/%s' % (p.blog_id.id, p.id)">
+                <i aria-hidden="true" class="fa fa-eye"/>Ver Más</a>
             </p>
+            <br/>
+            <p class="textoautor pull-left"/>
+            <a class="imagen_grande_blog" t-att-href="'/blog/%s/post/%s' % (p.blog_id.id, p.id)">
+              <div class="thumb imagen_blog shadow" t-att-style="'background-image: url(%s)' % p.background_image"/>
+            </a>
+            <figcaption>
+              <a t-att-href="'/blog/%s/post/%s' % (p.blog_id.id, p.id)">
+                <p class="hidden">Ver Más</p>
+              </a>
+            </figcaption>
           </div>
         </figure>
       </t>