# Szablon: zadania - zakończone
# W katalogu
|--src/ → Pliki źródłowe
| |--templates/ → Szablony: katalog główny
| | |--pages/ → Szablony: podstrony
| | | |--zadania-zakonczone.twig
# HTML
{% extends '../layouts/default.twig' %}
{% set head_title = 'Zadania - index' %}
{% set body_class = '' %}
{% block pagecss %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/min/dropzone.min.css" integrity="sha256-AgL8yEmNfLtCpH+gYp9xqJwiDITGqcwAbI8tCfnY2lw=" crossorigin="anonymous" />
{% endblock %}
{% block page %}
{% include '../../modules/top/top.twig' %}
<div class="container">
<div class="row">
<div class="col-12 col-lg-3 col-hd-2">
{% include '../../modules/sidebar/sidebar.twig' %}
</div>
<div class="col-12 col-lg-9 col-hd-10">
<div class="titleBar titleBar__button">
<div>
<div class="titleBar__title">Zadania</div>
</div>
<div>
<a href="" class="btn btn-icon"><img src="./img/icon__arrow-left.svg" alt=""><span>Wróć do listy zadań</span></a>
</div>
</div>
<div class="page-container">
<div class="contentBar">
<div class="contentBar__photo"></div>
<div class="contentBar__content">
<div>
<div class="contentBar__cat text-secondary">Quiz</div>
<div class="contentBar__title">Najlepsze naturalne WEGE ubrania z ludzkiej skóry.</div>
</div>
<div>
<div class="contentBar__points">
<span class="text-secondary">zdobądź</span>
<div class="points">600 <sup>pkt</sup></div>
</div>
</div>
<div>
<div class="contentBar__time">
<span class="text-secondary">zadanie aktywne przez</span>
<span class="text-primary">6d 16h 23m</span>
</div>
</div>
</div>
</div>
<div class="contentText">
<p>Płytki ceramiczne wielkiego formatu zyskują coraz większą popularność. Z jednej strony stanowią wyzwanie dla projektantów i wykonawców, z drugiej – pozwalają zaprezentować własne umiejętności oraz wspiąć się na wyższy poziom w branży wykończeniowej. Wielkoformatowe płytki ceramiczne mogą osiągać wymiary nawet 120 x 240 cm. To nieuchronny trend, który ciągle się rozwija. Duże płytki, to również duże wyzwanie. Szybkość i wydajność muszą ustąpić skupieniu i staranności. To również inna kalkulacja kosztów. Przy cenie płytki wynoszącej nawet 300 zł/m2 musimy rozważnie kalkulować liczbę obróbek, ryzyko związane z układaniem, dodatkowe koszty transportu i logistyki, zwiększone odpady, a także zapas płytek.
Płytki wielkoformatowe to produkt premium, skierowany do wąskiej, ale coraz większej, grupy odbiorców. Wymaga on specjalnych klejów o odpowiednich parametrach. Idealnym rozwiązaniem jest ATLAS Ultra Geoflex.</p>
</div>
</div>
<div class="page-container">
<form action="#" method="post" class="formValidation" id="my-awesome-dropzone" novalidate="novalidate">
<div class="m-titleBar">
<div>
<div class="titleBar__title">Teraz, dodaj zdjęcie</div>
</div>
</div>
<div class="bg bg-grey">
{% include '../../modules/addPhoto/addPhoto.twig' %}
</div>
<div class="button-sets button-sets__space-between button-sets__pr">
<div class="quarter order-1 order-md-0">
<a href="" class="btn btn-block">ANULUJ</a>
</div>
<div class="half order-0 order-md-1">
<button type="submit" class="btn btn-block btn-primary">ZAPISZ</button>
</div>
</div>
</form>
</div>
{% include '../components/footer.twig' with { 'container': false } %}
</div>
</div>
</div>
{% endblock %}
{% block pagejs %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js" integrity="sha256-sPB0F50YUDK0otDnsfNHawYmA5M0pjjUf4TvRJkGFrI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_pl.min.js" integrity="sha256-dBjdiP5KbMpHWhMtrAZIL8MU3Rxz09JA+z8VS650njc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/min/dropzone.min.js" integrity="sha256-OG/103wXh6XINV06JTPspzNgKNa/jnP1LjPP5Y3XQDY=" crossorigin="anonymous"></script>
<script>
$('.formValidation').validate({
ignore:":hidden",
highlight: function(element) {
if($(element).is('.dropzone-validation')) {
$(element).parent().addClass('is-error');
} else if($(element).is('.invisible') || $(element).is('select')) {
$(element).parent().addClass('is-error');
} else {
$(element).addClass('is-error');
}
},
unhighlight: function(element) {
if($(element).is('.dropzone-validation')) {
$(element).parent().removeClass('is-error');
} else if($(element).is('.invisible') || $(element).is('select')) {
$(element).parent().removeClass('is-error');
} else {
$(element).removeClass('is-error');
}
},
errorElement: 'div',
errorClass: 'help is-error',
errorPlacement: function(error, element) {
if(element.is('.invisible') || element.is('select')) {
error.insertAfter(element.parent().find('.select2-container'));
} else if (element.is('.dropzone-validation')) {
error.insertAfter(element);
} else if(element.is('input[type="checkbox"]')) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
Dropzone.autoDiscover = false;
const dropzones = []
$('.dropzone').each(function (i, el) {
var name = 'g_' + $(el).data('field')
var myDropzone = new Dropzone(el, {
maxFiles: 1,
url: window.location.pathname,
acceptedFiles: 'image/*',
uploadMultiple: false,
addRemoveLinks: false,
thumbnailWidth: 400,
thumbnailHeight: 300,
previewTemplate: document.getElementById('preview-template').innerHTML,
accept: function (file, done) {
done();
},
init: function () {
var _this = this;
this.on("addedfile", function () {
$('.dropzone-validation').val('1');
$('.dropzone-validation').valid();
// $('form').valid();
$(_this.element).find('.add-file').on("click", function () {
_this.hiddenFileInput.click();
});
if (this.files[1] != null) {
this.removeFile(this.files[0]);
}
});
}
})
dropzones.push(myDropzone)
})
</script>
{% endblock %}