maciejpi/nordabiz
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

improve(social-audit): compact table layout - 3x2 platform grid, merged columns
Some checks are pending
NordaBiz Tests / Unit & Integration Tests (push) Waiting to run
Details
NordaBiz Tests / E2E Tests (Playwright) (push) Blocked by required conditions
Details
NordaBiz Tests / Smoke Tests (Production) (push) Blocked by required conditions
Details
NordaBiz Tests / Send Failure Notification (push) Blocked by required conditions
Details

Browse Source 
Platform icons now display in 3x2 grid instead of 6 in a row. Removed
redundant "Liczba" column. Merged "Kompletność" and "Zdrowie SM" into
single "Ocena" column. Shortened recommendations to icon+count with
tooltip. Reduced cell padding and font size. Min-width 900px (was 1100px).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-03-12 07:59:26 +01:00
parent 4001b6402b
commit c5a7831792
1 changed files with 37 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
templates/admin/social_audit_dashboard.html
View File

@ -271,13 +271,14 @@
.social-table {
width: 100%;
min-width: 1100px;
min-width: 900px;
border-collapse: collapse;
font-size: var(--font-size-sm);
}
.social-table th,
.social-table td {
padding: var(--spacing-md);
padding: var(--spacing-sm) var(--spacing-md);
text-align: left;
border-bottom: 1px solid var(--border);
}
@ -335,18 +336,19 @@
/* Platform icons in table */
.platform-icons {
display: flex;
gap: 4px;
display: grid;
grid-template-columns: repeat(3, 20px);
gap: 2px;
}
.platform-icon-small {
width: 24px;
height: 24px;
border-radius: 4px;
width: 20px;
height: 20px;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-size: 10px;
}
.platform-icon-small.active {
@ -698,9 +700,8 @@
<th data-sort="category" class="hide-mobile">
Kategoria <span class="sort-icon"></span>
</th>
<th>Platformy</th>
<th data-sort="platforms" class="sorted sorted-desc">
Liczba <span class="sort-icon"></span>
Platformy <span class="sort-icon"></span>
</th>
<th data-sort="followers">
Obserwujący <span class="sort-icon"></span>
@ -708,11 +709,8 @@
<th data-sort="activity" class="hide-mobile">
Aktywność <span class="sort-icon"></span>
</th>
<th data-sort="completeness" class="hide-mobile">
Kompletność <span class="sort-icon"></span>
</th>
<th data-sort="health" class="hide-mobile">
Zdrowie SM <span class="sort-icon"></span>
Ocena <span class="sort-icon"></span>
</th>
<th class="hide-mobile">Zalecenia</th>
<th data-sort="date" class="hide-mobile">
@ -747,28 +745,25 @@
<td>
<div class="platform-icons">
<div class="platform-icon-small facebook {{ 'active' if company.has_facebook else 'inactive' }}" title="Facebook">
<svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
<svg width="10" height="10" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</div>
<div class="platform-icon-small instagram {{ 'active' if company.has_instagram else 'inactive' }}" title="Instagram">
<svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
<svg width="10" height="10" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
</div>
<div class="platform-icon-small linkedin {{ 'active' if company.has_linkedin else 'inactive' }}" title="LinkedIn">
<svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
<svg width="10" height="10" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</div>
<div class="platform-icon-small youtube {{ 'active' if company.has_youtube else 'inactive' }}" title="YouTube">
<svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
<svg width="10" height="10" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
</div>
<div class="platform-icon-small twitter {{ 'active' if company.has_twitter else 'inactive' }}" title="Twitter/X">
<svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
<svg width="10" height="10" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</div>
<div class="platform-icon-small tiktok {{ 'active' if company.has_tiktok else 'inactive' }}" title="TikTok">
<svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
<svg width="10" height="10" fill="currentColor" viewBox="0 0 24 24"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
</div>
</div>
</td>
<td>
<strong>{{ company.platform_count }}</strong>
</td>
<td>
{% if company.total_followers > 0 %}
{{ "{:,}".format(company.total_followers).replace(",", " ") }}
@ -798,41 +793,33 @@
{% endif %}
</td>
<td class="hide-mobile">
{% if company.avg_completeness > 0 %}
<div class="completeness-bar">
<div class="completeness-track">
<div class="completeness-fill {{ 'high' if company.avg_completeness >= 60 else ('medium' if company.avg_completeness >= 30 else 'low') }}"
style="width: {{ company.avg_completeness }}%"></div>
{% if company.health_score > 0 or company.avg_completeness > 0 %}
<div title="Zdrowie: {{ company.health_score }}/100, Profil: {{ company.avg_completeness }}%">
<div class="completeness-bar" style="margin-bottom: 3px;">
<div class="completeness-track">
<div class="completeness-fill {{ 'high' if company.health_score >= 60 else ('medium' if company.health_score >= 30 else 'low') }}"
style="width: {{ company.health_score }}%"></div>
</div>
<span class="completeness-value" style="font-weight: 600; color: {{ '#22c55e' if company.health_score >= 60 else ('#f59e0b' if company.health_score >= 30 else '#ef4444') }};">{{ company.health_score }}</span>
</div>
<span class="completeness-value">{{ company.avg_completeness }}%</span>
{% if company.avg_completeness > 0 %}
<div style="font-size: 10px; color: var(--text-secondary);">profil {{ company.avg_completeness }}%</div>
{% endif %}
</div>
{% else %}
<span class="text-muted">-</span>
{% endif %}
</td>
<td class="hide-mobile">
{% if company.health_score > 0 %}
<div class="completeness-bar" title="Social Health Score: {{ company.health_score }}/100">
<div class="completeness-track">
<div class="completeness-fill {{ 'high' if company.health_score >= 60 else ('medium' if company.health_score >= 30 else 'low') }}"
style="width: {{ company.health_score }}%"></div>
</div>
<span class="completeness-value" style="font-weight: 600; color: {{ '#22c55e' if company.health_score >= 60 else ('#f59e0b' if company.health_score >= 30 else '#ef4444') }};">{{ company.health_score }}</span>
</div>
{% else %}
<span class="text-muted">-</span>
{% endif %}
</td>
<td class="hide-mobile" style="font-size: 11px; max-width: 200px;">
<td class="hide-mobile" style="font-size: 11px; white-space: nowrap;">
{% if company.recommendations %}
{% for rec in company.recommendations %}
<div style="padding: 2px 0; color: {{ '#991b1b' if 'Brak profili' in rec else ('#b45309' if 'zmien' in rec or 'weryfikacji' in rec else '#6b7280') }};">
{% if 'weryfikacji' in rec %}&#9888;{% elif 'zmien' in rec %}&#9888;{% elif 'Brak profili' in rec %}&#10060;{% else %}&#8226;{% endif %}
{{ rec }}
</div>
{% endfor %}
{% set critical = company.recommendations|select('search', 'Brak profili')|list|length %}
{% set warnings = company.recommendations|length - critical %}
<span title="{{ company.recommendations|join(', ') }}" style="cursor: help;">
{% if critical %}<span style="color: #991b1b;">&#10060; {{ critical }}</span> {% endif %}
{% if warnings %}<span style="color: #b45309;">&#9888; {{ warnings }}</span>{% endif %}
</span>
{% else %}
<span style="color: #059669;">&#10003; OK</span>
<span style="color: #059669;">&#10003;</span>
{% endif %}
</td>
<td class="date-cell hide-mobile">