generated from ricardo/MVCLogin
136 lines
4.8 KiB
Plaintext
136 lines
4.8 KiB
Plaintext
@model List<Postall.Models.VideoViewModel>
|
|
|
|
@if (Model == null || !Model.Any())
|
|
{
|
|
<div class="alert alert-info">
|
|
<i class="bi bi-info-circle"></i> Não há vídeos disponíveis para este canal.
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="form-group mb-3">
|
|
<div class="input-group">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text"><i class="bi bi-search"></i></span>
|
|
</div>
|
|
<input type="text" id="videoSearchInput" class="form-control" placeholder="Filtrar vídeos...">
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Estilos para os cards de vídeo */
|
|
.video-item .card {
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.video-item .video-image {
|
|
width: 120px;
|
|
height: 67px;
|
|
object-fit: cover;
|
|
}
|
|
/* Estilo para o título do vídeo */
|
|
.video-title {
|
|
display: block;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
/* Estilo para a descrição do vídeo */
|
|
.video-description {
|
|
height: 40px;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
/* Estilo para o botão ler mais */
|
|
.read-more-btn {
|
|
font-size: 0.8rem;
|
|
color: #007bff;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.read-more-btn:hover {
|
|
text-decoration: underline;
|
|
}
|
|
/* Estilo para o conteúdo expandido */
|
|
.description-expanded {
|
|
max-height: 150px;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
background-color: #f8f9fa;
|
|
border-radius: 0 0 4px 4px;
|
|
border-top: 1px solid #dee2e6;
|
|
margin: 10px -20px -20px -20px; /* Margem negativa para alinhar com os limites do card */
|
|
display: none;
|
|
position: relative;
|
|
z-index: 5;
|
|
}
|
|
|
|
/* Ajuste na posição do botão Fechar */
|
|
.card-body {
|
|
padding-bottom: 5px;
|
|
}
|
|
</style>
|
|
|
|
<div class="row" id="videosList">
|
|
@foreach (var video in Model)
|
|
{
|
|
<div class="col-md-6 mb-3 video-item">
|
|
<div class="card">
|
|
<div class="card-body p-3">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0 mr-3">
|
|
<img src="@video.ThumbnailUrl" alt="@video.Title" class="img-thumbnail video-image">
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<div class="form-check">
|
|
<input class="form-check-input video-checkbox" type="checkbox" value="@video.VideoId" id="video-@video.VideoId">
|
|
<label class="form-check-label w-100" for="video-@video.VideoId">
|
|
<h6 class="mb-1 video-title">@video.Title</h6>
|
|
</label>
|
|
</div>
|
|
<p class="text-muted small mb-1">Publicado em: @video.PublishedAt.ToString("dd/MM/yyyy")</p>
|
|
<div>
|
|
<p class="small video-description mb-0">@video.Description</p>
|
|
<span class="read-more-btn" data-target="desc-@video.VideoId">Ler mais</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="desc-@video.VideoId" class="description-expanded">
|
|
<p><b>@video.Title</b></p>
|
|
@video.Description
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
// Manipular clique no botão "Ler mais"
|
|
$('.read-more-btn').click(function() {
|
|
var targetId = $(this).data('target');
|
|
$('#' + targetId).slideToggle(200);
|
|
|
|
// Alternar texto do botão
|
|
var btnText = $(this).text() === 'Ler mais' ? 'Fechar' : 'Ler mais';
|
|
$(this).text(btnText);
|
|
});
|
|
|
|
// Filtro de vídeos
|
|
$('#videoSearchInput').on('keyup', function() {
|
|
var value = $(this).val().toLowerCase();
|
|
$('.video-item').filter(function() {
|
|
var title = $(this).find('.video-title').text().toLowerCase();
|
|
$(this).toggle(title.indexOf(value) > -1);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
} |