60 lines
2.4 KiB
HTML
60 lines
2.4 KiB
HTML
{% extends "base.html" %}
|
|
{% block main_content %}
|
|
<div class="container-fluid">
|
|
<h3 class="offset-lg-2">{{page_title}}</h3>
|
|
<div class="form-row input-group">
|
|
<div class="input-group-prepend">
|
|
<button style="width:98%" class="btn btn-outline-info disabled" disabled>Size:</button>
|
|
</div>
|
|
<div class="input-group-append">
|
|
<button class="sz-but btn btn-outline-info" onClick="ChangeSize(this,64)">XS</button>
|
|
</div>
|
|
<div class="input-group-append">
|
|
<button class="sz-but btn btn-outline-info" onClick="ChangeSize(this,96)">S</button>
|
|
</div>
|
|
<div class="input-group-append">
|
|
<button class="sz-but btn btn-info" onClick="ChangeSize(this,128)">M</button>
|
|
</div>
|
|
<div class="input-group-append">
|
|
<button class="sz-but btn btn-outline-info" onClick="ChangeSize(this,192)">L</button>
|
|
</div>
|
|
<div class="input-group-append">
|
|
<button class="sz-but btn btn-outline-info" onClick="ChangeSize(this,256)">XL</button>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div class="row">
|
|
{% for obj in entry_data %}
|
|
{% if obj.type.name != "Directory" %}
|
|
<center>
|
|
<figure class="figure px-2" font-size: 24px;>
|
|
{% if obj.type.name=="Image" %}
|
|
<a href="{{obj.in_dir[0].path_prefix}}/{{obj.name}}"><img class="thumb" height="128" src="data:image/jpeg;base64,{{obj.file_details[0].thumbnail}}"></img></a>
|
|
{% elif obj.type.name == "Video" %}
|
|
<div style="position:relative; width:100%">
|
|
<a href="{{obj.in_dir[0].path_prefix}}/{{obj.name}}"><img class="thumb" style="display:block" height="128" src="data:image/jpeg;base64,{{obj.file_details[0].thumbnail}}"></img></a>
|
|
<div style="position:absolute; top: 2; left: 2;">
|
|
<i style="font-size:32;background-color:black;color:white" class="fas fa-film"></i>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<figcaption class="figure-caption text-center">{{obj.name}}</figcaption>
|
|
</figure>
|
|
</center>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div class="row">
|
|
</div class="container">
|
|
{% endblock main_content %}
|
|
{% block script_content %}
|
|
<script>
|
|
function ChangeSize(clicked_button,sz)
|
|
{
|
|
console.log(clicked_button)
|
|
old_but=$('.sz-but.btn-info').removeClass('btn-info').addClass('btn-outline-info')
|
|
$(clicked_button).addClass('btn-info').removeClass('btn-outline-info')
|
|
$('.thumb').attr( {height: sz, style: 'font-size:'+sz } )
|
|
}
|
|
</script>
|
|
{% endblock script_content %}
|