Ejemplo tarjetas de noticias reducidas y normales

ejemplo para la aplicacion de diarios

by enagu

HTML

<div id="app">
  <div class="card" id="card-example">
    <div class="image-card" id="image"></div>
    <div class="title-card" id="title-card">
      <div class="text"></div>
    </div>
    <div class="body-card" id="excerpts">
      <div class="excerpt"></div>      
      <div class="excerpt"></div>      
      <div class="excerpt"></div>
      <div class="excerpt"></div>      
      <div class="excerpt"></div>      
      <div class="excerpt"></div>
    </div>
    <div class="meta-card" id="meta-card">
      <div class="date"></div>
      <div class="diario"></div>
    </div>
  </div>
</div>

SCSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  width: 400px;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align: center;
  
  .card{
    display: flex;
    flex-direction: column;
    
    .image-card{
      background: #aaa;
      width: 95%;
      height: 150px;
      position: relative;
      order: 1;
      transition: all 1s;
    }
    
    .image-card:after{
      content: "";
      display: block;
      position: absolute;
      margin: 25px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 4;
      background: center;
      background-repeat: no-repeat;
      opacity: 0.5;
      background-size: contain;
      background-image:   url("http://www.clker.com/cliparts/0/4/6/1/11949904011525963418file_broken.svg.med.png");
    }
    
    .title-card{
      background: #bbb;
      margin: 5px 0;
      width: 95%;
      height: 40px;
      display: flex;
      align-items: center;
      order: 2;
      
      .text{
        background: #dadada;
        width: 92%;
        height: 46%;
        margin: 0 auto;
      }
    }
    
    .body-card{
      background: #eaeaea;
      //margin: 5px 0;
      width: 95%;
      height: 82px;
      order: 3;
      
      .excerpt{
        background: #dadada;
        width: 99%;
        height: 8px;
        margin: 5px auto;        
      }
    }
    
    .meta-card{
      //background: #bbb;
      //margin: 5px 0;
      width: 95%;
      height: 25px;
      display: flex;
      justify-content: space-between;
      order: 4;
      margin-top: 5px;
       
       .date, .diario{
         background: #dadada;
         width: 41px;
         height: 13px;
       }
    }
  }
  
  .content-body{
    width: 100%;
    order: 3;
    transition: all 2s;
  }
  
  .flex-column{
    display: flex;
    flex-direction: column;
  }
}

JavaScript

let img = document.querySelectorAll("#image")[0];
let normal = true;
img.onclick = function(){
	final(normal);  
  normal = normal ? false : true;
}

let title = document.getElementById('title-card');  
let card = document.getElementById('card-example');  
let meta = document.getElementById('meta-card');  
var clmBdyCtnt = document.createElement('div');
let excerpts = document.getElementById('excerpts');  
  
function final(modoMiniatura){	
  /** Direction: Row -- */
  card.style.flexDirection = modoMiniatura ? "row-reverse" : "column";

  /** Image width perfect */
  img.style.height = modoMiniatura ? "90px" : "150px";

  /** Add meta elements to image element */
  meta.style.width = modoMiniatura ? "100%" : "95%";
  meta.style.alignItems = modoMiniatura ? "flex-end" : "unset";
  meta.style.height = "100%";
  meta.style.order = modoMiniatura ? "2" : "4";  
  meta.style.marginTop = modoMiniatura ? "0" : "5px";
  
  /** Excerpts */
  excerpts.style.height = modoMiniatura ? "45px" : "82px";
  excerpts.style.order = modoMiniatura ? "2" : "3";
  excerpts.style.overflow =  modoMiniatura ? "hidden" : "unset";
      
  /** Title */
  title.style.margin = modoMiniatura ? "0 0 5px 0" : "5px 0";
  title.style.order = modoMiniatura ? "1" : "2";
      
  
  if(modoMiniatura){ 
    img.appendChild(meta);

    /** Container for title and excerpts */
    clmBdyCtnt.classList.add("flex-column");
    clmBdyCtnt.classList.add("content-body");
    
    clmBdyCtnt.appendChild(title);
    clmBdyCtnt.appendChild(excerpts);
    card.appendChild(clmBdyCtnt); 
  }else{  
    card.appendChild(meta);
  }
}