125 lines
3.4 KiB
Twig
125 lines
3.4 KiB
Twig
|
|
{% extends 'base.html.twig' %}
|
|
|
|
{% block localstyle %}
|
|
<style>
|
|
body {
|
|
background-color: var(--colorbgbodydark);
|
|
}
|
|
img {
|
|
margin:auto;
|
|
display: block;
|
|
}
|
|
#page {
|
|
padding: 0px !important;
|
|
|
|
}
|
|
h3, #filetitle {
|
|
margin:0px;
|
|
text-align:center;
|
|
padding-top:5px;
|
|
padding-bottom: 5px;
|
|
}
|
|
h3, a, a:hover {
|
|
color: var(--colorfttitledark);
|
|
}
|
|
#fileaction {
|
|
margin-top: -10px;
|
|
}
|
|
#bigright{
|
|
position:absolute;
|
|
top:0px;
|
|
right:0px;
|
|
width:45%;
|
|
height:100%;
|
|
line-height:100%;
|
|
text-align: right;
|
|
vertical-align: middle;
|
|
padding:5px;
|
|
}
|
|
#bigleft{
|
|
position:absolute;
|
|
top:0px;
|
|
left:0px;
|
|
width:45%;
|
|
height:100%;
|
|
vertical-align: middle;
|
|
padding:5px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div id="filecontent" style="display:none">
|
|
{% if child.childtype.id==12 %}
|
|
{% set url=path("app_minio_image",{file:"child/"~child.id~"/"~child.filename}) %}
|
|
{% else %}
|
|
{% set url=child.url %}
|
|
{% endif %}
|
|
|
|
<div id="filetitle">
|
|
<h3>{{child.name}}
|
|
{% if child.subname %}<small class="child-subname" style="margin-top:-10px">{{child.subname}}</small>{% endif %}
|
|
</h3>
|
|
|
|
<div id="fileaction">
|
|
{% if child.childtype.id==12 %}
|
|
<a href="{{ path("app_minio_download",{file:"child/"~child.id~"/"~child.filename})}}"><i class="fa-solid fa-download"></i></a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{% if not imagenext is empty %}
|
|
<a id="bigleft" href="{{ path("app_child_view",{catparent:catparent,idparent:parent.id,idchild:imagenext.id}) }}"><i class="fas fa-chevron-left fa-3x"></i></a>
|
|
{% endif %}
|
|
{% if not imageprev is empty %}
|
|
<a id="bigright" href="{{ path("app_child_view",{catparent:catparent,idparent:parent.id,idchild:imageprev.id}) }}"><i class="fas fa-chevron-right fa-3x"></i></a>
|
|
{% endif %}
|
|
|
|
<img id="fileimage" style="display:none" src="{{url}}">
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block localscript %}
|
|
<script>
|
|
function resize() {
|
|
height=$(window).height()-($("#filetitle").height() * 2);
|
|
$("#fileimage").css({height:height,width:'auto'});
|
|
width=$(window).width()-90;
|
|
if($("#fileimage").width()>width) {
|
|
$("#fileimage").css({width:width,height:'auto'});
|
|
$("#fileimage").css("margin-top",(height/2)-($("#fileimage").height()/2)+"px");
|
|
height=$(window).height();
|
|
}
|
|
height=$(window).height()-($("#filetitle").height() * 2);
|
|
$("#bigright").css({height:height,"line-height":height+"px",top:$("#filetitle").height()})
|
|
$("#bigleft").css({height:height,"line-height":height+"px",top:$("#filetitle").height()})
|
|
$("#fileimage").show();
|
|
}
|
|
$('#fileimage').imagesLoaded(function() {
|
|
$("#filecontent").show();
|
|
resize();
|
|
});
|
|
$("body").keydown(function(e) {
|
|
if(e.keyCode == 37) { // left
|
|
var href = $('#bigleft').attr('href');
|
|
if(href!=null) window.location.href = href;
|
|
}
|
|
else if(e.keyCode == 39) {
|
|
var href = $('#bigright').attr('href');
|
|
if(href!=null) window.location.href = href;
|
|
}
|
|
});
|
|
$(window).resize(function() {
|
|
resize();
|
|
});
|
|
$(document).ready(function(){
|
|
$(window).focus();
|
|
});
|
|
|
|
</script>
|
|
{% endblock %}
|
|
|
|
|
|
|