56 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			Twig
		
	
	
	
	
	
			
		
		
	
	
			56 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			Twig
		
	
	
	
	
	
{#
 | 
						|
/**
 | 
						|
 * @file
 | 
						|
 * Default theme implementation for views to display rows in a responsive grid.
 | 
						|
 *
 | 
						|
 * Available variables:
 | 
						|
 * - attributes: HTML attributes for the wrapping element.
 | 
						|
 * - title: The title of this group of rows.
 | 
						|
 * - view: The view object.
 | 
						|
 * - rows: The rows contained in this view.
 | 
						|
 * - options: The view plugin style options.
 | 
						|
 *   - alignment: a string set to either 'horizontal' or 'vertical'.
 | 
						|
 *   - columns: A number representing the max number of columns.
 | 
						|
 *   - cell_min_width: A number representing the minimum width of the grid cell.
 | 
						|
 *   - grid_gutter: A number representing the space between the grid cells.
 | 
						|
 * - items: A list of grid items.
 | 
						|
 *   - attributes: HTML attributes for each row or column.
 | 
						|
 *   - content: A list of columns or rows. Each row or column contains:
 | 
						|
 *     - attributes: HTML attributes for each row or column.
 | 
						|
 *     - content: The row or column contents.
 | 
						|
 *
 | 
						|
 * @see template_preprocess_views_view_grid_responsive()
 | 
						|
 *
 | 
						|
 * @ingroup themeable
 | 
						|
 */
 | 
						|
#}
 | 
						|
 | 
						|
{{ attach_library('views/views.responsive-grid') }}
 | 
						|
 | 
						|
{%
 | 
						|
  set classes = [
 | 
						|
    'views-view-responsive-grid',
 | 
						|
    'views-view-responsive-grid--' ~ options.alignment,
 | 
						|
  ]
 | 
						|
%}
 | 
						|
 | 
						|
{% set responsive_grid_styles = [
 | 
						|
    '--views-responsive-grid--column-count:' ~ options.columns ~ ';',
 | 
						|
    '--views-responsive-grid--cell-min-width:' ~ options.cell_min_width ~ 'px;',
 | 
						|
    '--views-responsive-grid--layout-gap:' ~ options.grid_gutter ~ 'px;',
 | 
						|
  ]
 | 
						|
%}
 | 
						|
 | 
						|
{% if title %}
 | 
						|
  <h3>{{ title }}</h3>
 | 
						|
{% endif %}
 | 
						|
<div{{ attributes.addClass(classes).setAttribute('style', responsive_grid_styles|join()) }}>
 | 
						|
  {% for item in items %}
 | 
						|
    <div class="views-view-responsive-grid__item">
 | 
						|
      <div class="views-view-responsive-grid__item-inner">
 | 
						|
        {{- item.content -}}
 | 
						|
      </div>
 | 
						|
    </div>
 | 
						|
  {% endfor %}
 | 
						|
</div>
 |