Ejemplo de template para grid responsive

Para obtener un grid como éste:

Debe configurar un template de la siguiente forma.

HEAD

Aquí definimos las cabeceras de las columnas. Aplicamos las clases de estilo correspondientes para colorear.

<div class="col-12 col-l-12 hidden-m hidden-s nopadding mod-expand">  
  <div class="row nopadding">
    <div class="col-15 col-l-2 hidden-m hidden-s nopadding text-center bg-primary opacity-70"><br/></div>  
    <div class="col-4 col-l-4 nopadding text-center bg-outstanding">{{translate|Name}}<br/></div>  
    <div class="col-15 hidden-l hidden-m hidden-s nopadding text-center bg-outstanding opacity-70">{{translate|Type}}<br/></div>
    <div class="col-15 col-l-3  nopadding text-center bg-outstanding ">{{translate|E-mail}}<br/></div>
    <div class="col-15 col-l-3 nopadding text-center bg-outstanding opacity-70">{{translate|Phone}}<br/></div>
    <div class="col-2 hidden-l hidden-m hidden-s nopadding text-center bg-outstanding ">{{translate|Assigned to}}<br></div>
  </div>
</div>

BODY

Definimos cada una de las celdas correspondientes a las columnas que definimos en el encabezado

Aplicamos formats switch, isnull, etc. Para decidir qué color e icono pintar para cada tipo de cuenta.

Aplicamos nav-button para acceder con un click a la ficha del objeto cuenta.

<div class="col-12 col-l-12 col-m-12 col-s-12 nopadding mod-expand">  
  <div class="row row-line clickable"> 
    <div class="col-15 col-l-2 hidden-m hidden-s text-left size-s">
      <small>
      <span title="{{translate|Select}}">{{bagbutton}}</span>        
      {{objectmenu}}              
      </small>
    </div>  
    <flx-navbutton type="openpage" pagetypeid="view" objectname="Account" objectwhere="(ACCOUNT.account_id='{{account_id}}')" defaults="" targetid="current" excludehist="false">
      <div class="col-4 col-l-4 col-m-12 col-s-12 size-s {{type_id|switch:[0:txt-warning,1:txt-outstanding,2:txt-tools,else:txt-primary]}}">
        <div class="ellipsis"><i class="flx-icon {{type_id|switch:[0:icon-focus-6,1:icon-user4,2:icon-providers,else:icon-clients1]}} icon-margin-right"></i><strong>{{name}}</strong> <small class="{{state_id|switch:[1:txt-danger,2:txt-outstanding]}}"> {{state_id|switch:[0:,else:{{descrip_state}}]}}</small></div>    
        <div class="ellipsis txt-primary">{{businessname}}</div>
      </div>    
    </flx-navbutton>
  <div class="col-15 hidden-l hidden-m hidden-s "  >
      <i class="flx-icon {{type_id|switch:[0:icon-focus-6,1:icon-user4,2:icon-providers,else:icon-clients1]}} icon-margin-right "></i>{{descrip_type}}
    </div>
  <div class="col-15 col-l-3 col-m-4 col-s-6 ">
      <div class="ellipsis" title="{{email|isnull:{{translate|no mail}}}}"><i class="flx-icon icon-email icon-margin-right "></i><a  href="mailto:{{email|isnull:#}}">{{email|isnull:{{translate|no mail}}}}</a></div>
    </div>
  <div class="col-15 col-l-3 col-m-4 col-s-6 "  >
      <div class="ellipsis" title="{{phone|isnull:{{translate|no phone}}}}"> <i class="flx-icon icon-phone icon-margin-right " ></i><a  href="tel:{{phone|isnull:#}}">{{phone|isnull:{{translate|no phone}}}}</a></div>
    </div>
    <div class="col-2 hidden-l hidden-m hidden-s ">
      <div class="ellipsis" title="{{employeefirstname}} {{employeelastname}}"><i class="flx-icon icon-man-4 icon-margin-right "></i>{{employeefirstname}} {{employeelastname}}</div>
    </div>
  </div>
</div>

0 Votos