Add Agent CPT with single-agent profile template
- Created Agent custom post type with ACF fields (phone, email, website, title, license, bio, gallery, social links repeater) - Added single-agent.php template with modern profile layout: header with photo/contact buttons/social links, biography section, photo gallery, current listings, sidebar contact card - Created single-agent.scss with responsive styling matching HomeProz dark theme - Updated single-property.php sidebar: moved property header widget, added document downloads with primary button styling - Imported 4 agents from homeprozrealestate.com with profile images - Added agent scrape scripts for reference 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Hanson.xyz Dev
+1
-1
File diff suppressed because one or more lines are too long
@@ -50,6 +50,13 @@ function homeproz_register_acf_fields() {
|
||||
'type' => 'text',
|
||||
'instructions' => 'Enter the MLS listing number',
|
||||
),
|
||||
array(
|
||||
'key' => 'field_property_external_url',
|
||||
'label' => 'External Listing URL',
|
||||
'name' => 'external_listing_url',
|
||||
'type' => 'url',
|
||||
'instructions' => 'Link to external listing page (Zillow, Homefinder, etc.)',
|
||||
),
|
||||
|
||||
// Address Tab
|
||||
array(
|
||||
@@ -381,6 +388,158 @@ function homeproz_register_acf_fields() {
|
||||
'instruction_placement' => 'label',
|
||||
'active' => true,
|
||||
));
|
||||
// Agent Details Field Group
|
||||
acf_add_local_field_group(array(
|
||||
'key' => 'group_agent_details',
|
||||
'title' => 'Agent Details',
|
||||
'fields' => array(
|
||||
// Contact Tab
|
||||
array(
|
||||
'key' => 'field_agent_tab_contact',
|
||||
'label' => 'Contact Info',
|
||||
'name' => '',
|
||||
'type' => 'tab',
|
||||
'placement' => 'top',
|
||||
),
|
||||
array(
|
||||
'key' => 'field_agent_phone',
|
||||
'label' => 'Phone Number',
|
||||
'name' => 'agent_phone',
|
||||
'type' => 'text',
|
||||
'instructions' => 'Primary phone number',
|
||||
),
|
||||
array(
|
||||
'key' => 'field_agent_email',
|
||||
'label' => 'Email Address',
|
||||
'name' => 'agent_email',
|
||||
'type' => 'email',
|
||||
),
|
||||
array(
|
||||
'key' => 'field_agent_website',
|
||||
'label' => 'Website',
|
||||
'name' => 'agent_website',
|
||||
'type' => 'url',
|
||||
'instructions' => 'Personal or external website URL',
|
||||
),
|
||||
array(
|
||||
'key' => 'field_agent_title',
|
||||
'label' => 'Job Title',
|
||||
'name' => 'agent_title',
|
||||
'type' => 'text',
|
||||
'instructions' => 'e.g., "Broker/Owner", "Real Estate Agent"',
|
||||
'default_value' => 'Real Estate Agent',
|
||||
),
|
||||
array(
|
||||
'key' => 'field_agent_license',
|
||||
'label' => 'License Number',
|
||||
'name' => 'agent_license',
|
||||
'type' => 'text',
|
||||
'instructions' => 'Real estate license number',
|
||||
),
|
||||
|
||||
// Bio Tab
|
||||
array(
|
||||
'key' => 'field_agent_tab_bio',
|
||||
'label' => 'Biography',
|
||||
'name' => '',
|
||||
'type' => 'tab',
|
||||
'placement' => 'top',
|
||||
),
|
||||
array(
|
||||
'key' => 'field_agent_short_bio',
|
||||
'label' => 'Short Bio',
|
||||
'name' => 'agent_short_bio',
|
||||
'type' => 'textarea',
|
||||
'instructions' => 'Brief description for agent cards (1-2 sentences)',
|
||||
'rows' => 3,
|
||||
'maxlength' => 300,
|
||||
),
|
||||
|
||||
// Gallery Tab
|
||||
array(
|
||||
'key' => 'field_agent_tab_gallery',
|
||||
'label' => 'Photo Gallery',
|
||||
'name' => '',
|
||||
'type' => 'tab',
|
||||
'placement' => 'top',
|
||||
),
|
||||
array(
|
||||
'key' => 'field_agent_gallery',
|
||||
'label' => 'Agent Gallery',
|
||||
'name' => 'agent_gallery',
|
||||
'type' => 'gallery',
|
||||
'instructions' => 'Additional photos of the agent. The featured image is the primary headshot.',
|
||||
'min' => 0,
|
||||
'max' => 20,
|
||||
'return_format' => 'id',
|
||||
'preview_size' => 'medium',
|
||||
'library' => 'all',
|
||||
'mime_types' => 'jpg, jpeg, png, webp',
|
||||
),
|
||||
|
||||
// Social Media Tab
|
||||
array(
|
||||
'key' => 'field_agent_tab_social',
|
||||
'label' => 'Social Media',
|
||||
'name' => '',
|
||||
'type' => 'tab',
|
||||
'placement' => 'top',
|
||||
),
|
||||
array(
|
||||
'key' => 'field_agent_social_links',
|
||||
'label' => 'Social Links',
|
||||
'name' => 'agent_social_links',
|
||||
'type' => 'repeater',
|
||||
'instructions' => 'Add social media profiles',
|
||||
'min' => 0,
|
||||
'max' => 10,
|
||||
'layout' => 'table',
|
||||
'button_label' => 'Add Social Link',
|
||||
'sub_fields' => array(
|
||||
array(
|
||||
'key' => 'field_social_platform',
|
||||
'label' => 'Platform',
|
||||
'name' => 'platform',
|
||||
'type' => 'select',
|
||||
'required' => 1,
|
||||
'choices' => array(
|
||||
'facebook' => 'Facebook',
|
||||
'instagram' => 'Instagram',
|
||||
'twitter' => 'Twitter/X',
|
||||
'linkedin' => 'LinkedIn',
|
||||
'tiktok' => 'TikTok',
|
||||
'youtube' => 'YouTube',
|
||||
'zillow' => 'Zillow',
|
||||
'realtor' => 'Realtor.com',
|
||||
'other' => 'Other',
|
||||
),
|
||||
),
|
||||
array(
|
||||
'key' => 'field_social_url',
|
||||
'label' => 'URL',
|
||||
'name' => 'url',
|
||||
'type' => 'url',
|
||||
'required' => 1,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
'location' => array(
|
||||
array(
|
||||
array(
|
||||
'param' => 'post_type',
|
||||
'operator' => '==',
|
||||
'value' => 'agent',
|
||||
),
|
||||
),
|
||||
),
|
||||
'menu_order' => 0,
|
||||
'position' => 'normal',
|
||||
'style' => 'default',
|
||||
'label_placement' => 'top',
|
||||
'instruction_placement' => 'label',
|
||||
'active' => true,
|
||||
));
|
||||
}
|
||||
add_action('acf/init', 'homeproz_register_acf_fields');
|
||||
|
||||
|
||||
@@ -188,12 +188,65 @@ function homeproz_add_default_terms() {
|
||||
}
|
||||
add_action('after_switch_theme', 'homeproz_add_default_terms');
|
||||
|
||||
/**
|
||||
* Register Agent Custom Post Type
|
||||
*/
|
||||
function homeproz_register_agent_cpt() {
|
||||
$labels = array(
|
||||
'name' => _x('Agents', 'Post type general name', 'homeproz'),
|
||||
'singular_name' => _x('Agent', 'Post type singular name', 'homeproz'),
|
||||
'menu_name' => _x('Agents', 'Admin Menu text', 'homeproz'),
|
||||
'name_admin_bar' => _x('Agent', 'Add New on Toolbar', 'homeproz'),
|
||||
'add_new' => __('Add New', 'homeproz'),
|
||||
'add_new_item' => __('Add New Agent', 'homeproz'),
|
||||
'new_item' => __('New Agent', 'homeproz'),
|
||||
'edit_item' => __('Edit Agent', 'homeproz'),
|
||||
'view_item' => __('View Agent', 'homeproz'),
|
||||
'all_items' => __('All Agents', 'homeproz'),
|
||||
'search_items' => __('Search Agents', 'homeproz'),
|
||||
'parent_item_colon' => __('Parent Agents:', 'homeproz'),
|
||||
'not_found' => __('No agents found.', 'homeproz'),
|
||||
'not_found_in_trash' => __('No agents found in Trash.', 'homeproz'),
|
||||
'featured_image' => _x('Agent Photo', 'Overrides the "Featured Image" phrase', 'homeproz'),
|
||||
'set_featured_image' => _x('Set agent photo', 'Overrides the "Set featured image" phrase', 'homeproz'),
|
||||
'remove_featured_image' => _x('Remove agent photo', 'Overrides the "Remove featured image" phrase', 'homeproz'),
|
||||
'use_featured_image' => _x('Use as agent photo', 'Overrides the "Use as featured image" phrase', 'homeproz'),
|
||||
'archives' => _x('Agent archives', 'The post type archive label used in nav menus', 'homeproz'),
|
||||
'insert_into_item' => _x('Insert into agent', 'Overrides the "Insert into post" phrase', 'homeproz'),
|
||||
'uploaded_to_this_item' => _x('Uploaded to this agent', 'Overrides the "Uploaded to this post" phrase', 'homeproz'),
|
||||
'filter_items_list' => _x('Filter agents list', 'Screen reader text', 'homeproz'),
|
||||
'items_list_navigation' => _x('Agents list navigation', 'Screen reader text', 'homeproz'),
|
||||
'items_list' => _x('Agents list', 'Screen reader text', 'homeproz'),
|
||||
);
|
||||
|
||||
$args = array(
|
||||
'labels' => $labels,
|
||||
'public' => true,
|
||||
'publicly_queryable' => true,
|
||||
'show_ui' => true,
|
||||
'show_in_menu' => true,
|
||||
'query_var' => true,
|
||||
'rewrite' => array('slug' => 'agents', 'with_front' => false),
|
||||
'capability_type' => 'post',
|
||||
'has_archive' => true,
|
||||
'hierarchical' => false,
|
||||
'menu_position' => 6,
|
||||
'menu_icon' => 'dashicons-businessperson',
|
||||
'supports' => array('title', 'editor', 'thumbnail'),
|
||||
'show_in_rest' => true,
|
||||
);
|
||||
|
||||
register_post_type('agent', $args);
|
||||
}
|
||||
add_action('init', 'homeproz_register_agent_cpt');
|
||||
|
||||
/**
|
||||
* Flush rewrite rules on theme activation
|
||||
*/
|
||||
function homeproz_rewrite_flush() {
|
||||
homeproz_register_property_cpt();
|
||||
homeproz_register_property_taxonomies();
|
||||
homeproz_register_agent_cpt();
|
||||
flush_rewrite_rules();
|
||||
}
|
||||
add_action('after_switch_theme', 'homeproz_rewrite_flush');
|
||||
|
||||
@@ -0,0 +1,261 @@
|
||||
<?php
|
||||
/**
|
||||
* Single Agent Template
|
||||
*
|
||||
* @package HomeProz
|
||||
*/
|
||||
|
||||
// Prevent direct access
|
||||
if (!defined('ABSPATH')) {
|
||||
exit;
|
||||
}
|
||||
|
||||
get_header();
|
||||
|
||||
while (have_posts()) :
|
||||
the_post();
|
||||
$agent_id = get_the_ID();
|
||||
|
||||
// Get agent data
|
||||
$agent_phone = get_field('agent_phone', $agent_id);
|
||||
$agent_email = get_field('agent_email', $agent_id);
|
||||
$agent_website = get_field('agent_website', $agent_id);
|
||||
$agent_title = get_field('agent_title', $agent_id);
|
||||
$agent_license = get_field('agent_license', $agent_id);
|
||||
$agent_short_bio = get_field('agent_short_bio', $agent_id);
|
||||
$agent_gallery = get_field('agent_gallery', $agent_id);
|
||||
$agent_social_links = get_field('agent_social_links', $agent_id);
|
||||
|
||||
// Get featured image
|
||||
$featured_image_id = get_post_thumbnail_id($agent_id);
|
||||
$featured_image_url = $featured_image_id ? wp_get_attachment_image_url($featured_image_id, 'large') : '';
|
||||
?>
|
||||
|
||||
<main id="primary" class="site-main Single_Agent">
|
||||
<!-- Agent Header -->
|
||||
<section class="agent-header">
|
||||
<div class="container">
|
||||
<div class="agent-header-layout">
|
||||
<!-- Agent Photo -->
|
||||
<div class="agent-photo-wrapper">
|
||||
<?php if ($featured_image_url) : ?>
|
||||
<img src="<?php echo esc_url($featured_image_url); ?>" alt="<?php echo esc_attr(get_the_title()); ?>" class="agent-photo">
|
||||
<?php else : ?>
|
||||
<div class="agent-photo-placeholder">
|
||||
<svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" aria-hidden="true">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Agent Info -->
|
||||
<div class="agent-info-wrapper">
|
||||
<div class="agent-info-content">
|
||||
<?php if ($agent_title) : ?>
|
||||
<p class="agent-title-label"><?php echo esc_html($agent_title); ?></p>
|
||||
<?php endif; ?>
|
||||
|
||||
<h1 class="agent-name"><?php the_title(); ?></h1>
|
||||
|
||||
<?php if ($agent_license) : ?>
|
||||
<p class="agent-license">License #<?php echo esc_html($agent_license); ?></p>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Contact Actions -->
|
||||
<div class="agent-contact-actions">
|
||||
<?php if ($agent_phone) : ?>
|
||||
<a href="tel:<?php echo esc_attr(preg_replace('/[^0-9]/', '', $agent_phone)); ?>" class="btn btn-primary">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
|
||||
</svg>
|
||||
<?php echo esc_html($agent_phone); ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($agent_email) : ?>
|
||||
<a href="mailto:<?php echo esc_attr($agent_email); ?>" class="btn btn-secondary">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||||
<polyline points="22,6 12,13 2,6"/>
|
||||
</svg>
|
||||
Email Agent
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Social Links -->
|
||||
<?php if ($agent_social_links && is_array($agent_social_links)) : ?>
|
||||
<div class="agent-social-links">
|
||||
<?php foreach ($agent_social_links as $social) :
|
||||
$platform = $social['platform'];
|
||||
$url = $social['url'];
|
||||
$icon = '';
|
||||
|
||||
switch ($platform) {
|
||||
case 'facebook':
|
||||
$icon = '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>';
|
||||
break;
|
||||
case 'instagram':
|
||||
$icon = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>';
|
||||
break;
|
||||
case 'linkedin':
|
||||
$icon = '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>';
|
||||
break;
|
||||
case 'twitter':
|
||||
$icon = '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><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>';
|
||||
break;
|
||||
case 'tiktok':
|
||||
$icon = '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/></svg>';
|
||||
break;
|
||||
case 'youtube':
|
||||
$icon = '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.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>';
|
||||
break;
|
||||
default:
|
||||
$icon = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>';
|
||||
}
|
||||
?>
|
||||
<a href="<?php echo esc_url($url); ?>" target="_blank" rel="noopener noreferrer" class="social-link" title="<?php echo esc_attr(ucfirst($platform)); ?>">
|
||||
<?php echo $icon; ?>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Agent Details -->
|
||||
<div class="container">
|
||||
<div class="agent-content-layout">
|
||||
<!-- Main Content -->
|
||||
<div class="agent-main-content">
|
||||
<!-- Biography -->
|
||||
<?php if (get_the_content() || $agent_short_bio) : ?>
|
||||
<section class="agent-section agent-bio">
|
||||
<h2 class="section-title">About <?php the_title(); ?></h2>
|
||||
<?php if ($agent_short_bio) : ?>
|
||||
<p class="agent-short-bio"><?php echo esc_html($agent_short_bio); ?></p>
|
||||
<?php endif; ?>
|
||||
<div class="agent-full-bio">
|
||||
<?php the_content(); ?>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Photo Gallery -->
|
||||
<?php if ($agent_gallery && is_array($agent_gallery) && count($agent_gallery) > 0) : ?>
|
||||
<section class="agent-section agent-gallery-section">
|
||||
<h2 class="section-title">Photo Gallery</h2>
|
||||
<div class="agent-gallery-grid">
|
||||
<?php foreach ($agent_gallery as $image_id) :
|
||||
$image_url = wp_get_attachment_image_url($image_id, 'medium_large');
|
||||
$image_full = wp_get_attachment_image_url($image_id, 'full');
|
||||
$image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);
|
||||
?>
|
||||
<a href="<?php echo esc_url($image_full); ?>" class="gallery-item" target="_blank">
|
||||
<img src="<?php echo esc_url($image_url); ?>" alt="<?php echo esc_attr($image_alt ?: get_the_title()); ?>">
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Agent's Listings -->
|
||||
<?php
|
||||
// Query properties assigned to this agent
|
||||
$agent_properties = new WP_Query([
|
||||
'post_type' => 'property',
|
||||
'posts_per_page' => 6,
|
||||
'meta_query' => [
|
||||
[
|
||||
'key' => 'listing_agent',
|
||||
'value' => $agent_id,
|
||||
'compare' => '=',
|
||||
],
|
||||
],
|
||||
]);
|
||||
|
||||
if ($agent_properties->have_posts()) :
|
||||
?>
|
||||
<section class="agent-section agent-listings">
|
||||
<h2 class="section-title">Current Listings</h2>
|
||||
<div class="agent-listings-grid">
|
||||
<?php while ($agent_properties->have_posts()) : $agent_properties->the_post();
|
||||
get_template_part('template-parts/property/property-card');
|
||||
endwhile; ?>
|
||||
</div>
|
||||
<div class="agent-listings-cta">
|
||||
<a href="<?php echo esc_url(get_post_type_archive_link('property')); ?>" class="btn btn-secondary">View All Properties</a>
|
||||
</div>
|
||||
</section>
|
||||
<?php
|
||||
wp_reset_postdata();
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="agent-sidebar">
|
||||
<!-- Contact Card -->
|
||||
<div class="sidebar-widget agent-contact-card">
|
||||
<h3 class="widget-title">Contact Information</h3>
|
||||
<ul class="contact-list">
|
||||
<?php if ($agent_phone) : ?>
|
||||
<li class="contact-item">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<span class="contact-label">Phone</span>
|
||||
<a href="tel:<?php echo esc_attr(preg_replace('/[^0-9]/', '', $agent_phone)); ?>"><?php echo esc_html($agent_phone); ?></a>
|
||||
</div>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($agent_email) : ?>
|
||||
<li class="contact-item">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||||
<polyline points="22,6 12,13 2,6"/>
|
||||
</svg>
|
||||
<div>
|
||||
<span class="contact-label">Email</span>
|
||||
<a href="mailto:<?php echo esc_attr($agent_email); ?>"><?php echo esc_html($agent_email); ?></a>
|
||||
</div>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($agent_website) : ?>
|
||||
<li class="contact-item">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<line x1="2" y1="12" x2="22" y2="12"/>
|
||||
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<span class="contact-label">Website</span>
|
||||
<a href="<?php echo esc_url($agent_website); ?>" target="_blank" rel="noopener noreferrer">Visit Website</a>
|
||||
</div>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Quick Contact Form Placeholder -->
|
||||
<div class="sidebar-widget agent-quick-contact">
|
||||
<h3 class="widget-title">Send a Message</h3>
|
||||
<p class="widget-note">Interested in working with <?php the_title(); ?>? Get in touch today.</p>
|
||||
<a href="<?php echo esc_url(home_url('/contact/')); ?>?agent=<?php echo esc_attr(get_the_title()); ?>" class="btn btn-primary btn-block">Contact Agent</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<?php
|
||||
endwhile;
|
||||
get_footer();
|
||||
@@ -70,32 +70,6 @@ while (have_posts()) :
|
||||
<!-- Gallery -->
|
||||
<?php get_template_part('template-parts/property/property-gallery', null, array('gallery' => $gallery, 'property_id' => $property_id)); ?>
|
||||
|
||||
<!-- Property Header -->
|
||||
<header class="property-header">
|
||||
<div class="property-header-top">
|
||||
<?php if ($status) : ?>
|
||||
<span class="badge <?php echo esc_attr($status_class); ?>"><?php echo esc_html($status); ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ($type) : ?>
|
||||
<span class="property-type"><?php echo esc_html($type); ?></span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<h1 class="property-title"><?php echo esc_html(homeproz_format_price($price)); ?></h1>
|
||||
|
||||
<p class="property-address">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
</svg>
|
||||
<?php echo esc_html($full_address); ?>
|
||||
</p>
|
||||
|
||||
<?php if ($mls_number) : ?>
|
||||
<p class="property-mls">MLS# <?php echo esc_html($mls_number); ?></p>
|
||||
<?php endif; ?>
|
||||
</header>
|
||||
|
||||
<!-- Property Specs -->
|
||||
<?php if ($bedrooms || $bathrooms || $square_feet || $lot_size || $year_built || $garage) : ?>
|
||||
<section class="property-specs-section">
|
||||
@@ -222,6 +196,77 @@ while (have_posts()) :
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="single-property-sidebar">
|
||||
<!-- Property Header -->
|
||||
<div class="sidebar-widget property-header-widget">
|
||||
<div class="property-header-top">
|
||||
<?php if ($status) : ?>
|
||||
<span class="badge <?php echo esc_attr($status_class); ?>"><?php echo esc_html($status); ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ($type) : ?>
|
||||
<span class="property-type"><?php echo esc_html($type); ?></span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<h1 class="property-title"><?php echo esc_html(homeproz_format_price($price)); ?></h1>
|
||||
|
||||
<p class="property-address">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
</svg>
|
||||
<?php echo esc_html($full_address); ?>
|
||||
</p>
|
||||
|
||||
<?php if ($mls_number) : ?>
|
||||
<p class="property-mls">MLS# <?php echo esc_html($mls_number); ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Property Documents -->
|
||||
<div class="sidebar-widget property-documents-widget">
|
||||
<h3 class="widget-title">Property Documents</h3>
|
||||
<?php if ($property_documents && is_array($property_documents) && !empty($property_documents)) : ?>
|
||||
<div class="sidebar-documents-list">
|
||||
<?php foreach ($property_documents as $doc) :
|
||||
if (!$doc['file']) continue;
|
||||
$file = $doc['file'];
|
||||
$label = $doc['label'] ?: $file['filename'];
|
||||
$ext = strtoupper(pathinfo($file['filename'], PATHINFO_EXTENSION));
|
||||
?>
|
||||
<a href="<?php echo esc_url($file['url']); ?>" class="document-btn" target="_blank">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
</svg>
|
||||
<span class="document-btn-label"><?php echo esc_html($label); ?></span>
|
||||
<span class="document-btn-ext"><?php echo esc_html($ext); ?></span>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php else : ?>
|
||||
<!-- Mock documents for display -->
|
||||
<div class="sidebar-documents-list">
|
||||
<a href="#" class="document-btn" onclick="return false;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
</svg>
|
||||
<span class="document-btn-label">Property Disclosure</span>
|
||||
<span class="document-btn-ext">PDF</span>
|
||||
</a>
|
||||
<a href="#" class="document-btn" onclick="return false;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
</svg>
|
||||
<span class="document-btn-label">Floor Plan</span>
|
||||
<span class="document-btn-ext">PDF</span>
|
||||
</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Contact Agent -->
|
||||
<?php get_template_part('template-parts/property/property-agent', null, array('agent' => $listing_agent, 'property_id' => $property_id)); ?>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
@import '../template-parts/property/property-filters.scss';
|
||||
@import '../template-parts/property/property-gallery.scss';
|
||||
@import '../template-parts/property/single-property.scss';
|
||||
@import '../template-parts/agent/single-agent.scss';
|
||||
|
||||
// Import reusable components
|
||||
@import '../template-parts/components/hero-section.scss';
|
||||
|
||||
@@ -0,0 +1,362 @@
|
||||
/**
|
||||
* Single Agent Styles
|
||||
*
|
||||
* @package HomeProz
|
||||
*/
|
||||
|
||||
.Single_Agent {
|
||||
padding-bottom: 4rem;
|
||||
|
||||
// Agent Header Section
|
||||
.agent-header {
|
||||
background-color: var(--color-bg-card);
|
||||
padding: 3rem 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.agent-header-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
text-align: left;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
// Agent Photo
|
||||
.agent-photo-wrapper {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.agent-photo {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 0.5rem;
|
||||
object-fit: cover;
|
||||
border: 3px solid var(--color-border);
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.agent-photo-placeholder {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--color-bg-dark);
|
||||
border-radius: 0.5rem;
|
||||
border: 3px solid var(--color-border);
|
||||
color: var(--color-text-muted);
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
// Agent Info
|
||||
.agent-info-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.agent-info-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.agent-title-label {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--color-accent);
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.agent-name {
|
||||
font-size: 2.5rem;
|
||||
font-family: var(--font-heading);
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.1;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.agent-license {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
// Contact Actions
|
||||
.agent-contact-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
justify-content: center;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Social Links
|
||||
.agent-social-links {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: var(--color-bg-dark);
|
||||
border-radius: 0.25rem;
|
||||
color: var(--color-text-muted);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Content Layout
|
||||
.agent-content-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
padding-top: 2rem;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
grid-template-columns: 1fr 350px;
|
||||
gap: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Main Content
|
||||
.agent-main-content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
// Sections
|
||||
.agent-section {
|
||||
margin-bottom: 2.5rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
// Biography
|
||||
.agent-bio {
|
||||
.agent-short-bio {
|
||||
font-size: 1.125rem;
|
||||
color: var(--color-text);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.agent-full-bio {
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.7;
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Gallery Section
|
||||
.agent-gallery-section {
|
||||
.agent-gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
|
||||
@media (min-width: 640px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
display: block;
|
||||
aspect-ratio: 4 / 3;
|
||||
overflow: hidden;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid var(--color-border);
|
||||
|
||||
&:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Listings Section
|
||||
.agent-listings {
|
||||
.agent-listings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
@media (min-width: 640px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.agent-listings-cta {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar
|
||||
.agent-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
align-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar Widgets
|
||||
.sidebar-widget {
|
||||
background-color: var(--color-bg-card);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.widget-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
// Contact Card
|
||||
.agent-contact-card {
|
||||
.contact-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.125rem;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
> div {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
word-break: break-word;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-accent-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Quick Contact Widget
|
||||
.agent-quick-contact {
|
||||
.widget-note {
|
||||
font-size: 0.9375rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -63,55 +63,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Property Header
|
||||
.property-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.property-header-top {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.property-type {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.property-title {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.property-address {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
font-size: 1.125rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.125rem;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
}
|
||||
|
||||
.property-mls {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-sold);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Section Title
|
||||
.section-title {
|
||||
@@ -245,11 +196,131 @@
|
||||
|
||||
// Sidebar (no sticky - stays in document flow)
|
||||
.single-property-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
align-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar Widgets
|
||||
.sidebar-widget {
|
||||
background-color: var(--color-bg-card);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.widget-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
// Property Header Widget (in sidebar)
|
||||
.property-header-widget {
|
||||
.property-header-top {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.property-type {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.property-title {
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.property-address {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.9375rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.4;
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.125rem;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
}
|
||||
|
||||
.property-mls {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-sold);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Property Documents Widget
|
||||
.property-documents-widget {
|
||||
.sidebar-documents-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.document-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
background-color: var(--color-accent);
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-accent-hover);
|
||||
color: white;
|
||||
}
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
stroke: white;
|
||||
}
|
||||
}
|
||||
|
||||
.document-btn-label {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.document-btn-ext {
|
||||
flex-shrink: 0;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
color: white;
|
||||
padding: 0.1875rem 0.375rem;
|
||||
border-radius: 0.1875rem;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
}
|
||||
|
||||
// Agent Card
|
||||
.agent-card {
|
||||
padding: 1.5rem;
|
||||
|
||||
Reference in New Issue
Block a user