45 lines
1.7 KiB
HTML
45 lines
1.7 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
{% load qr_code %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<div class="col-md-3">
|
|
<div class="row justify-content-center">
|
|
{% if component.get_resolved_image %}
|
|
<img src="{{component.get_resolved_image}}" alt="{{component.name}}" class="component-img-big btn" data-bs-toggle="modal" data-bs-target="#comp-img-modal">
|
|
{% else %}
|
|
<img src="{% static 'css/icons/card-image.svg' %}" alt="{{component.name}}" class="component-img-def-big">
|
|
{% endif %}
|
|
</div>
|
|
<div class="row">
|
|
{% qr_from_text component.get_qr_code size="m" image_format="svg" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if component.get_resolved_image %}
|
|
<div class="modal fade" id="comp-img-modal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg modal-fullscreen-lg-down">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5>{{component.name}}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="text-center">
|
|
<img class="component-img-huge" src="{{component.get_resolved_image}}">
|
|
</div>
|
|
{% if not component.image %}
|
|
<hr>
|
|
<div class="alert alert-warning">
|
|
Component doesn't have an image. The image is inherited from its package.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% endblock content %} |