project2463/templates/components/partner_card.html

<div class="col-12">
    <div class="supplier-card">
        <!-- Верхняя часть с типом и названием -->
        <div class="supplier-header">
            <div class="supplier-type-badge">
                {% if partner.contractor_type_name %}
                    {{ partner.contractor_type_name }}
                {% else %}
                    Тип не указан
                {% endif %}
            </div>
            <div class="supplier-name">{{ partner.name }}</div>
            <!-- Удален блок supplier-orders -->
        </div>

        <!-- Основная информация в две колонки -->
        <div class="supplier-info-grid">
            <div class="info-column">
                <div class="info-item">
                    <span class="info-label">Директор:</span>
                    <span class="info-value">{{ partner.director or 'Не указан' }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Телефон:</span>
                    <span class="info-value">{{ partner.phone or 'Не указан' }}</span>
                </div>
            </div>
            <div class="info-column">
                <div class="info-item">
                    <span class="info-label">Рейтинг:</span>
                    <span class="info-value">
                        <span class="rating-badge" style="background-color: {% if partner.rating >= 4 %}#A0522D{% elif partner.rating >= 3 %}#DEB887{% else %}#8B4513{% endif %}; color: white;">
                            {{ partner.rating }}
                        </span>
                    </span>
                </div>
                <div class="info-item">
                    <span class="info-label">Сумма заказов:</span>
                    <span class="info-value">{{ "%.2f"|format(partner.total_sales) }} руб.</span>
                </div>
            </div>
        </div>

        <!-- Кнопки действий в ряд -->
        <div class="supplier-actions">
            <a href="{{ url_for('edit_client', client_id=partner.id) }}" class="action-btn edit-btn">
                Редактировать
            </a>
            <a href="{{ url_for('add_order', client_id=partner.id) }}" class="action-btn add-btn">
                Добавить заказ
            </a>
            <a href="{{ url_for('order_history', client_id=partner.id) }}" class="action-btn history-btn">
                История
            </a>
        </div>
    </div>
</div>

<style>
    /* Убираем стандартные outline у всех элементов */
    * {
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .supplier-card {
        background: linear-gradient(135deg, #FAEBD7 0%, #F5DEB3 100%);
        border: 1px solid #DEB887;
        border-radius: 16px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 4px 12px rgba(160, 82, 45, 0.1);
        transition: box-shadow 0.2s ease;
    }
    
    .supplier-card:hover {
        box-shadow: 0 8px 20px rgba(160, 82, 45, 0.15);
        border-color: #A0522D;
    }
    
    /* Заголовок карточки */
    .supplier-header {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid #DEB887;
        flex-wrap: wrap;
    }
    
    .supplier-type-badge {
        background: white;
        border: 2px solid #A0522D;
        color: #A0522D;
        padding: 6px 15px;
        border-radius: 30px;
        font-size: 0.9rem;
        font-weight: 600;
        font-family: 'Verdana', sans-serif;
        white-space: nowrap;
    }
    
    .supplier-name {
        color: #A0522D;
        font-size: 1.3rem;
        font-weight: 600;
        font-family: 'Verdana', sans-serif;
        flex: 1;
    }
    
    /* Сетка информации */
    .supplier-info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }
    
    .info-column {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .info-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: 'Verdana', sans-serif;
        padding: 5px 0;
    }
    
    .info-label {
        color: #8B7355;
        font-weight: 500;
        min-width: 70px;
    }
    
    .info-value {
        color: #5D3A1A;
        font-weight: 500;
        flex: 1;
    }
    
    .rating-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
    }
    
    /* Кнопки действий */
    .supplier-actions {
        display: flex;
        gap: 10px;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 2px solid #DEB887;
    }
    
    .action-btn {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 15px;
        border-radius: 10px;
        font-size: 0.95rem;
        font-weight: 500;
        font-family: 'Verdana', sans-serif;
        text-decoration: none;
        transition: background 0.2s ease, transform 0.2s ease;
        border: none;
        cursor: pointer;
    }
    
    /* Убираем outline при фокусе */
    .action-btn:focus {
        outline: none;
        box-shadow: none;
    }
    
    .edit-btn {
        background: linear-gradient(135deg, #DEB887 0%, #C17B4A 100%);
        color: #2c3e50;
    }
    
    .edit-btn:hover {
        background: linear-gradient(135deg, #C17B4A 0%, #DEB887 100%);
        transform: translateY(-2px);
    }
    
    .add-btn {
        background: linear-gradient(135deg, #A0522D 0%, #8B4513 100%);
        color: white;
    }
    
    .add-btn:hover {
        background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);
        transform: translateY(-2px);
    }
    
    .history-btn {
        background: linear-gradient(135deg, #8B7355 0%, #5D3A1A 100%);
        color: white;
    }
    
    .history-btn:hover {
        background: linear-gradient(135deg, #5D3A1A 0%, #8B7355 100%);
        transform: translateY(-2px);
    }
    
    /* Адаптивность */
    @media (max-width: 992px) {
        .supplier-header {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .supplier-name {
            width: 100%;
        }
        
        .supplier-info-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }
        
        .supplier-actions {
            flex-direction: column;
        }
        
        .action-btn {
            width: 100%;
        }
    }
    
    @media (max-width: 768px) {
        .info-item {
            flex-wrap: wrap;
        }
        
        .info-label {
            min-width: auto;
        }
    }
</style>