mirror/Part-DB.Part-DB-server
1
0
Fork 1
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-07-01 22:14:32 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Show additional infos about the part picture, when hovering it.

Browse source
This commit is contained in:
Jan Böhmer 2020-05-27 22:51:43 +02:00
parent 5248c83982
commit e19594f500
3 changed files with 78 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

37
assets/css/app.css
View file

@ -838,3 +838,40 @@ div.dataTables_wrapper div.dataTables_info {
max-width: 500px;
max-height: 250px;
}
/*******************************************
* Hovering carousel gallery
*******************************************/
.carousel-caption-hover {
display: none;
}
.carousel .mask {
display: none;
}
.carousel:hover .mask {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transition: .5s ease;
background-color: #0a0909;
opacity: 0.7;
border: 1px solid #dee2e6;
border-radius: .25rem;
}
.carousel-control {
display: none;
}
.carousel:hover .carousel-caption-hover {
display: block;
}
.carousel:hover .carousel-control {
display: flex;
}

27
src/Twig/TypeLabelExtension.php Normal file
View file

@ -0,0 +1,27 @@
<?php
namespace App\Twig;
use App\Services\ElementTypeNameGenerator;
use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;
final class TypeLabelExtension extends AbstractExtension
{
private $nameGenerator;
public function __construct(ElementTypeNameGenerator $elementTypeNameGenerator)
{
$this->nameGenerator = $elementTypeNameGenerator;
}
public function getFunctions()
{
return [
new TwigFunction('elementType', [$this->nameGenerator, 'getLocalizedTypeLabel']),
new TwigFunction('elementTypeName', [$this->nameGenerator, 'getTypeNameCombination']),
];
}
}

15
templates/Parts/info/_picture.html.twig
View file

@ -4,17 +4,28 @@
<div id="pictureCarousel" class="carousel slide mb-2" data-interval="false">
<div class="carousel-inner">
{% for pic in pictures %}
{# @var pic App\Entity\Attachments\Attachment #}
<div class="carousel-item {% if loop.first %}active{% endif %}">
<a href="{{ pic | entityURL('file_view') }}" data-no-ajax target="_blank" rel="noopener">
<img class="d-block w-100 img-fluid img-thumbnail bg-light" src="{{ pic | entityURL('file_view') }}" alt="">
<div class="mask"></div>
<div class="carousel-caption-hover">
<div class="carousel-caption">
<div><b>{{ pic.name }}</b></div>
<div>{% if pic.filename %}({{ pic.filename }}) {% endif %}</div>
<div>{{ elementTypeName(pic.element) }}</div>
</div>
</div>
</a>
</div>
{% endfor %}
</div>
{% if pictures | length > 1 %}
<a class="carousel-control-prev" href="#pictureCarousel" role="button" data-slide="prev">
<a class="carousel-control-prev carousel-control" href="#pictureCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">{% trans %}part.info.prev_picture{% endtrans %}</span>
</a>
<a class="carousel-control-next" href="#pictureCarousel" role="button" data-slide="next">
<a class="carousel-control-next carousel-control" href="#pictureCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">{% trans %}part.info.next_picture{% endtrans %}</span>
</a>