452 lines
21 KiB
Smarty
452 lines
21 KiB
Smarty
{*ВАРИАНТ ВЫВОДА КАРТОЧКИ 1*}
|
|
|
|
{if $moredoc}
|
|
<div class="moredoc-container my-5 px-3 px-md-0">
|
|
<div class="d-flex align-items-center mb-4 border-bottom pb-3">
|
|
<div class="bg-primary rounded-pill p-2 me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
|
|
<i class="bi bi-grid text-white fs-5"></i>
|
|
</div>
|
|
<h3 class="fw-bolder mb-0 text-dark" style="letter-spacing: -0.5px;">{#MOREDOC_NAME#}</h3>
|
|
</div>
|
|
|
|
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
|
|
{foreach from=$moredoc item=document}
|
|
<div class="col">
|
|
<article class="card h-100 shadow-sm border-0 position-relative transition-hover overflow-hidden rounded-4">
|
|
|
|
{if isset($document->document_image)}
|
|
<div class="card-img-wrapper position-relative overflow-hidden" style="height: 180px; background-color: #f8f9fa;">
|
|
|
|
{if $document->document_image != ""}
|
|
<img src="{$document->document_image}" class="card-img-top w-100 h-100 object-fit-cover transition-zoom" alt="{$document->document_title|escape}">
|
|
{else}
|
|
<div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center"
|
|
style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
|
|
<div class="text-center">
|
|
<div class="bg-white rounded-circle shadow-sm d-inline-flex align-items-center justify-content-center mb-2"
|
|
style="width: 50px; height: 50px;">
|
|
<i class="bi bi-image text-primary opacity-50 fs-3"></i>
|
|
</div>
|
|
<p class="small text-muted mb-0 fw-medium opacity-75" style="font-size: 0.7rem;">{#MOREDOC_NOIMAGE#}</p>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="position-absolute top-0 end-0 m-3">
|
|
<div class="badge bg-white bg-opacity-75 text-dark d-flex align-items-center px-2 py-1 rounded-pill shadow-sm small">
|
|
<i class="bi bi-eye-fill me-1 text-primary"></i>
|
|
<span class="fw-bold">{$document->document_count_view|default:0}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="card-body p-4 d-flex flex-column">
|
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
|
<div class="small text-primary fw-medium bg-sky-light px-3 py-1 rounded-pill w-fit-content">
|
|
<i class="bi bi-calendar3 me-2"></i>
|
|
<span>{$document->document_published|date_format:"%d.%m.%Y"}</span>
|
|
</div>
|
|
|
|
{if !isset($document->document_image)}
|
|
<div class="small text-muted fw-bold d-flex align-items-center">
|
|
<i class="bi bi-eye-fill me-1 text-primary"></i>
|
|
<span>{$document->document_count_view|default:0}</span>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<h5 class="card-title fw-bolder mb-3 text-dark fs-5 line-clamp-2" style="line-height: 1.3;">
|
|
<a href="{$document->document_link}" class="text-decoration-none text-dark stretched-link title-link">
|
|
{$document->document_title|escape}
|
|
</a>
|
|
</h5>
|
|
|
|
{if $document->document_meta_description != ''}
|
|
<p class="card-text text-secondary small line-clamp-3 mb-0" style="line-height: 1.6;">
|
|
{$document->document_meta_description|strip_tags|truncate:140:"..."|escape}
|
|
</p>
|
|
{/if}
|
|
|
|
<div class="mt-auto pt-4 border-top">
|
|
<div class="d-flex justify-content-between align-items-center pt-2">
|
|
<span class="text-primary small fw-bold text-uppercase" style="font-size: 0.75rem; letter-spacing: 1px;">{#MOREDOC_READMORE#}</span>
|
|
<div class="btn-arrow-circle">
|
|
<i class="bi bi-arrow-right-short text-primary"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
{/foreach}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
:root { --bs-primary: #0d6efd; --bg-sky-light: #eef4ff; }
|
|
.w-fit-content { width: fit-content; }
|
|
.bg-sky-light { background-color: var(--bg-sky-light); }
|
|
.object-fit-cover { object-fit: cover; }
|
|
.line-clamp-2, .line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
|
|
.line-clamp-2 { -webkit-line-clamp: 2; }
|
|
.line-clamp-3 { -webkit-line-clamp: 3; }
|
|
|
|
.transition-hover { transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); border: 1px solid rgba(0,0,0,0.05) !important; }
|
|
.transition-hover:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important; }
|
|
.transition-zoom { transition: transform 0.6s ease; }
|
|
.transition-hover:hover .transition-zoom { transform: scale(1.1); }
|
|
.transition-hover:hover .title-link { color: var(--bs-primary) !important; }
|
|
|
|
.btn-arrow-circle { width: 32px; height: 32px; background: #f1f3f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.3s; }
|
|
.transition-hover:hover .btn-arrow-circle { background: var(--bs-primary); }
|
|
.transition-hover:hover .btn-arrow-circle i { color: #fff !important; }
|
|
</style>
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{*ВАРИАНТ ВЫВОДА КАРТОЧКИ 2*}
|
|
|
|
|
|
{* ---- начало комментария
|
|
|
|
|
|
{if $moredoc}
|
|
<div class="moredoc-container my-5 px-3 px-md-0">
|
|
<div class="d-flex align-items-center mb-4 border-bottom pb-3">
|
|
<div class="bg-primary rounded-pill p-2 me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
|
|
<i class="bi bi-collection-play text-white fs-5"></i>
|
|
</div>
|
|
<h3 class="fw-bolder mb-0 text-dark" style="letter-spacing: -0.5px;">{#MOREDOC_NAME#}</h3>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
{foreach from=$moredoc item=document}
|
|
<div class="col-12 col-xl-6">
|
|
<article class="card h-100 shadow-sm border-0 overflow-hidden rounded-4 transition-hover">
|
|
<div class="row g-0 h-100">
|
|
|
|
{if isset($document->document_image)}
|
|
<div class="col-sm-4 bg-light position-relative" style="min-height: 180px;">
|
|
{if $document->document_image != ""}
|
|
<img src="{$document->document_image}" class="w-100 h-100 object-fit-cover" alt="{$document->document_title|escape}">
|
|
{else}
|
|
<div class="w-100 h-100 d-flex align-items-center justify-content-center bg-light border-end">
|
|
<i class="bi bi-image text-muted opacity-25 fs-1"></i>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="position-absolute top-0 start-0 m-2">
|
|
<span class="badge bg-dark bg-opacity-50 rounded-pill small">
|
|
<i class="bi bi-eye me-1"></i>{$document->document_count_view|default:0}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="{if isset($document->document_image)}col-sm-8{else}col-12{/if}">
|
|
<div class="card-body p-4 d-flex flex-column h-100">
|
|
<div class="d-flex align-items-center justify-content-between mb-2">
|
|
<div class="small text-primary fw-bold">
|
|
<i class="bi bi-calendar3 me-1"></i> {$document->document_published|date_format:"%d.%m.%Y"}
|
|
</div>
|
|
|
|
{if !isset($document->document_image)}
|
|
<div class="small text-muted fw-bold d-flex align-items-center">
|
|
<i class="bi bi-eye-fill me-1 text-primary"></i>
|
|
<span>{$document->document_count_view|default:0}</span>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<h5 class="fw-bold mb-2">
|
|
<a href="{$document->document_link}" class="text-decoration-none text-dark stretched-link">
|
|
{$document->document_title|escape}
|
|
</a>
|
|
</h5>
|
|
<p class="card-text text-secondary small line-clamp-2 mb-0">
|
|
{$document->document_meta_description|strip_tags|truncate:120:"..."|escape}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
{/foreach}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.object-fit-cover { object-fit: cover; }
|
|
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|
.transition-hover { transition: all 0.3s ease; border: 1px solid rgba(0,0,0,0.05) !important; }
|
|
.transition-hover:hover {
|
|
transform: translateX(5px);
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
|
|
}
|
|
.transition-hover:hover .fw-bold a { color: var(--bs-primary) !important; }
|
|
</style>
|
|
{/if}
|
|
|
|
|
|
------ конец комментария*}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{*ВАРИАНТ ВЫВОДА КАРТОЧКИ 3*}
|
|
|
|
|
|
{* ---- начало комментария
|
|
|
|
|
|
{if $moredoc}
|
|
<div class="moredoc-container my-5 px-3 px-md-0">
|
|
<div class="d-flex justify-content-between align-items-end mb-4 shadow-sm pb-3 border-bottom">
|
|
<h3 class="fw-black mb-0 text-uppercase text-primary" style="letter-spacing: 1px; font-weight: 900;">
|
|
{#MOREDOC_NAME#}
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
|
|
{foreach from=$moredoc item=document}
|
|
<div class="col">
|
|
<article class="card h-100 border-0 bg-light rounded-4 transition-card position-relative">
|
|
|
|
{if isset($document->document_image)}
|
|
<div class="position-relative p-2">
|
|
<div class="rounded-4 overflow-hidden shadow-sm" style="height: 190px;">
|
|
{if $document->document_image != ""}
|
|
<img src="{$document->document_image}" class="w-100 h-100 object-fit-cover transition-zoom" alt="{$document->document_title|escape}">
|
|
{else}
|
|
<div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center bg-white">
|
|
<i class="bi bi-image-alt fs-1 text-primary opacity-25"></i>
|
|
<span class="small text-muted opacity-50 mt-1" style="font-size: 0.7rem;">{#MOREDOC_NOIMAGE#}</span>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="position-absolute top-0 end-0 m-3">
|
|
<div class="badge bg-dark bg-opacity-50 backdrop-blur d-flex align-items-center px-2 py-1 rounded-pill small">
|
|
<i class="bi bi-eye me-1 text-white"></i>
|
|
<span class="text-white">{$document->document_count_view|default:0}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="card-body pt-2 px-4 pb-4 d-flex flex-column">
|
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
|
<span class="badge bg-white text-primary shadow-sm px-3 py-2 rounded-pill small fw-bold">
|
|
<i class="bi bi-calendar3 me-1"></i> {$document->document_published|date_format:"%d.%m.%Y"}
|
|
</span>
|
|
|
|
{if !isset($document->document_image)}
|
|
<div class="small text-muted fw-bold d-flex align-items-center bg-white px-3 py-1 rounded-pill shadow-sm" style="height: 33px;">
|
|
<i class="bi bi-eye-fill me-1 text-primary"></i>
|
|
<span>{$document->document_count_view|default:0}</span>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<h5 class="fw-bold mb-3 line-clamp-2">
|
|
<a href="{$document->document_link}" class="text-decoration-none text-dark stretched-link title-hover">
|
|
{$document->document_title|escape}
|
|
</a>
|
|
</h5>
|
|
|
|
{if $document->document_meta_description != ''}
|
|
<p class="card-text text-secondary small line-clamp-3 mb-4" style="line-height: 1.5;">
|
|
{$document->document_meta_description|strip_tags|truncate:140:"..."|escape}
|
|
</p>
|
|
{/if}
|
|
|
|
<div class="d-flex align-items-center justify-content-between mt-auto pt-3 border-top border-2 border-white">
|
|
<span class="small fw-bold text-uppercase text-muted" style="font-size: 0.75rem; letter-spacing: 0.5px;">{#MOREDOC_READMORE#}</span>
|
|
<div class="btn-arrow-circle-mini">
|
|
<i class="bi bi-arrow-right-short text-primary fs-4"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
{/foreach}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.object-fit-cover { object-fit: cover; }
|
|
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
|
|
.backdrop-blur { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
|
|
|
|
.transition-card {
|
|
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
|
border: 1px solid transparent !important;
|
|
}
|
|
.transition-card:hover {
|
|
background-color: #ffffff !important;
|
|
box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
|
|
transform: translateY(-5px);
|
|
border-color: #eee !important;
|
|
}
|
|
|
|
.title-hover { transition: color 0.2s ease; }
|
|
.transition-card:hover .title-hover { color: #0d6efd !important; }
|
|
.transition-zoom { transition: transform 0.6s ease; }
|
|
.transition-card:hover .transition-zoom { transform: scale(1.05); }
|
|
|
|
.btn-arrow-circle-mini {
|
|
width: 36px; height: 36px; background: #fff; border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
|
|
}
|
|
.transition-card:hover .btn-arrow-circle-mini {
|
|
background: #0d6efd; transform: rotate(-45deg);
|
|
}
|
|
.transition-card:hover .btn-arrow-circle-mini i { color: #fff !important; }
|
|
</style>
|
|
{/if}
|
|
|
|
|
|
|
|
------ конец комментария*}
|
|
|
|
|
|
|
|
|
|
|
|
{*ВАРИАНТ ВЫВОДА КАРТОЧКИ 4*}
|
|
|
|
|
|
{* ---- начало комментария
|
|
|
|
|
|
{if $moredoc}
|
|
<div class="moredoc-container my-5 px-3 px-md-0">
|
|
|
|
<div class="d-flex align-items-center mb-5 pb-3 border-bottom border-2">
|
|
<div class="vr bg-primary opacity-100 me-3" style="width: 4px; height: 30px; border-radius: 2px;"></div>
|
|
<h3 class="fw-bold mb-0 text-dark text-uppercase" style="letter-spacing: 1px;">{#MOREDOC_NAME#}</h3>
|
|
</div>
|
|
|
|
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
|
|
{foreach from=$moredoc item=document}
|
|
<div class="col">
|
|
<article class="card h-100 border-0 bg-light rounded-4 transition-card">
|
|
|
|
{if isset($document->document_image)}
|
|
<div class="position-relative p-2">
|
|
<div class="rounded-4 overflow-hidden shadow-sm" style="height: 200px; background-color: #dee2e6;">
|
|
{if $document->document_image != ""}
|
|
<img src="{$document->document_image}" class="card-img-top w-100 h-100 object-fit-cover transition-zoom" alt="{$document->document_title|escape}">
|
|
{else}
|
|
<div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center bg-white opacity-75">
|
|
<i class="bi bi-image text-primary opacity-25" style="font-size: 3rem;"></i>
|
|
<span class="small text-muted mt-2">{#MOREDOC_NOIMAGE#}</span>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="position-absolute top-0 end-0 m-3">
|
|
<div class="badge bg-dark bg-opacity-50 backdrop-blur d-flex align-items-center px-3 py-2 rounded-pill small border border-white border-opacity-25">
|
|
<i class="bi bi-eye-fill me-2 text-white"></i>
|
|
<span class="fw-medium text-white">{$document->document_count_view|default:0}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="card-body px-4 pb-4 pt-3 d-flex flex-column">
|
|
|
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
|
<div class="small text-muted fw-medium d-flex align-items-center">
|
|
<i class="bi bi-calendar-event me-2 text-primary"></i>
|
|
{$document->document_published|date_format:"%d.%m.%Y"}
|
|
</div>
|
|
|
|
{if !isset($document->document_image)}
|
|
<div class="small text-muted fw-bold d-flex align-items-center">
|
|
<i class="bi bi-eye-fill me-1 text-primary"></i>
|
|
<span>{$document->document_count_view|default:0}</span>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<h5 class="card-title fw-bold mb-3">
|
|
<a href="{$document->document_link}" class="text-decoration-none text-dark stretched-link title-link-effect" style="line-height: 1.4;">
|
|
{$document->document_title|escape}
|
|
</a>
|
|
</h5>
|
|
|
|
{if $document->document_meta_description != ''}
|
|
<p class="card-text text-secondary small mb-4 line-clamp-3" style="line-height: 1.6; opacity: 0.8;">
|
|
{$document->document_meta_description|strip_tags|truncate:140:"..."|escape}
|
|
</p>
|
|
{/if}
|
|
|
|
<div class="mt-auto pt-3 border-top border-white border-2 d-flex align-items-center justify-content-between">
|
|
<span class="text-uppercase fw-bold text-primary" style="font-size: 0.7rem; letter-spacing: 1px;">{#MOREDOC_READMORE#}</span>
|
|
<div class="btn-arrow-wrapper">
|
|
<div class="btn-circle-styled">
|
|
<i class="bi bi-arrow-right-short text-primary fs-4"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
{/foreach}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.object-fit-cover { object-fit: cover; }
|
|
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
|
|
.backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
|
|
|
|
.transition-card {
|
|
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
outline: 1px solid rgba(0,0,0,0.02);
|
|
}
|
|
|
|
.transition-card:hover {
|
|
background-color: #ffffff !important;
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
|
|
outline: 1px solid rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.transition-zoom { transition: transform 0.8s ease; }
|
|
.transition-card:hover .transition-zoom { transform: scale(1.08); }
|
|
|
|
.title-link-effect { transition: color 0.3s ease; }
|
|
.transition-card:hover .title-link-effect { color: #0d6efd !important; }
|
|
|
|
.btn-circle-styled {
|
|
width: 40px; height: 40px; background-color: #ffffff;
|
|
border-radius: 50%; display: flex; align-items: center; justify-content: center;
|
|
transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.transition-card:hover .btn-circle-styled {
|
|
background-color: #0d6efd;
|
|
box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
|
|
}
|
|
|
|
.transition-card:hover .btn-circle-styled i { color: #ffffff !important; }
|
|
|
|
.btn-arrow-wrapper { transition: transform 0.3s ease; }
|
|
.transition-card:hover .btn-arrow-wrapper { transform: rotate(-45deg); }
|
|
</style>
|
|
{/if}
|
|
|
|
|
|
------ конец комментария*} |