Gin-Admin theme template

Created on 23 August 2023, about 1 year ago

Updated 8 September 2023, about 1 year ago

Problem/Motivation

I use Gin Admin Theme → and wanted to use Views Kanban

Proposed resolution

Replace views-views-kanban.html.twig

with

{#
/**
 * Default theme implementation for Views Kanban.
 *
 * Available variables:
 * - options: View plugin style options:
 *   - classes: CSS classes.
 *   - columns: Whether months should be nested inside years.
 *
 * @see template_preprocess_views_view_kanban()
 *
 * @ingroup themeable
 */
#}
{% set classes = [
  'views-view-kaban',
  'container-fluid',
  'mt-lg-3',
  options.classes
] %}

<div {{ attributes.addClass(classes) }} data-view_id="{{ view_id }}" data-display_id="{{ display_id }}">
  <div class="row flex-row flex-sm-nowrap py-3">
    {% for index, column in columns %}
      {% set row_classes = [
        default_row_class ? 'views-row',
      ] %}
      <div class="layout-column layout-column--quarter kanban-col status-{{ index|replace({' ':''}) }}" style="padding: .5rem;" data-col-status="{{ index|replace({' ':''}) }}">
        <div class="gin-layer-wrapper border-{{ column.color }}" style="padding-left: 1rem;padding-right: 1rem;padding-top: 0;">
          <span class="badge bg-{{ column.color }} total-status" style="padding-top: .5rem;background-color: rgb(var(--gin-color-primary-rgb));border-radius: 50%;color: white;font-weight: bold;display: block;width: 2.5rem;height: 2rem;text-align: center;position: relative;bottom: -1rem;left: -.4rem;">{{ column.rows|length }}</span>
          <div class="card-header bg-{{ column.color }}">
            <h2 class="panel__title" data-bs-toggle="collapse"
                data-bs-target="#collapse{{ index|replace({' ':''}) }}">
              {{ column.header|capitalize }}
            </h2>
            {% if column.total %}
              <div class="total text-white">
                {{ column.total.label }} <span class="badge bg-secondary">{{ column.total.value }}</span>
              </div>
            {% endif %}
          </div>
		  
		  
		  
          <div class="panel-body" id="collaps{{ index|replace({' ':''}) }}" class="collapse show">
            <div class="card-body" droppable="true" data-value="{{ index }}">
              {% for row in column.rows %}
				<details class="claro-details cursor-grab" data-once="details" open="" id="item{{ row.entity_id }}" data-id="{{ row.entity_id }}"
                  draggable="true" data-value="{{ index }}" data-type="{{ row.entity_type }}" data-point="{{ row.total }}">
					<summary id="{{ row.entity_id }}" class="claro-details__summary claro-details__summary--system-status-report" aria-expanded="true" aria-pressed="true">{{ row.title }}<span class="claro-details__summary-summary"></span></summary>
						<div class="claro-details__wrapper claro-details__wrapper--system-status-report">
							<div class="system-status-report__row">
			  
                <article>
                  <div {{ row.attributes.addClass('body') }}>
                    <div>{{ row.content }}</div>
                    {% if row.progress %}
					<div style="display: block;margin-left: auto;margin-right: auto;width: 5.5rem;">
					<span style="position: relative;top: 3.7rem;left: 2.2rem;">{{ row.progress }}%</span>
					  <div class="progress-bar bg-{{ column.color }}" style="background: radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(var(--gin-color-primary-active) {{ row.progress }}%, lightgray 0);" >
					  <progress value="{{ row.progress }}" style="visibility:hidden;height:0;width:0;" min="0" max="100">{{ row.progress }}%</progress>
					  </div>
					  </div>
                    {% endif %}
                    <div style="display: flex;justify-content: space-evenly;">
                      {% if(row.view) %}
                        <div>
                          {{ row.view }}
                        </div>
                      {% endif %}
                      {% if(row.edit) %}
                        <div>
                          {{ row.edit }}
                        </div>
                      {% endif %}
					  </div>
					  <div>
                      <div class="col">
                        {{ row.date }}
                      </div>
                      {% for assign in row.assign %}
                        <div class="col">
                          {% if assign.avatar %}
                            <img src="{{ assign.avatar }}" title="{{ assign.name }}" class="img-avatar rounded-circle"
                                 data-bs-toggle="tooltip">
                          {% else %}
                            <div class="text-avatar bg-secondary text-white img-circle text-center"
                                 title="{{ assign.name }}" data-uid="{{ assign.uid }}" data-bs-toggle="tooltip">
                              {{ assign.acronym }}
                            </div>
                          {% endif %}
                        </div>
                      {% endfor %}
                    </div>
                  </div>
                </article>
						</div> 
					</div>
				</details>
              {% endfor %}
            </div>
          </div>
          <div class="card-footer bg-light">
            {{ column.add }}
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</div>

And add the following css to
public://gin-custom.css

.progress-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%; 
}

Putting it out there if someone is interested in using this module with Gin

💬 Support request

Status

Closed: works as designed

Version

1.0

Component

User interface

Created by

🇿🇦South Africa vlooi vlerke

Live updates comments and jobs are added and updated live.

Comments & Activities

Issue created by @vlooi vlerke
Status changed to Closed: works as designed about 1 year ago2:47pm 23 August 2023
Comment about 1 year ago →
🇫🇷France lazzyvn paris
LOL, I think nobody needs your tpl because it's a theme that everyone can create their design. it only supports bootstrap 5 theme by default . but you can create your custom theme base on GIN theme and add views-views-kanban.html.twig to folder templates, you can do whatever you want with your custom theme.
Comment about 1 year ago →
🇵🇹Portugal rfmarcelino
Thank you @vlooi-vlerke for sharing.
I found your template useful.

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024