rename collection html classes

This commit is contained in:
Mathieu Jaumotte 2021-07-08 14:46:19 +02:00
parent 1c45770929
commit 4cfc43aaa6
3 changed files with 40 additions and 34 deletions

View File

@ -1,27 +1,25 @@
div.chill-collection {
ul.chill-collection__list {
list-style: none;
padding: 0;
margin-bottom: 1.5rem;
li.chill-collection__list__entry:nth-child(2n) {
background-color: var(--chill-light-gray);
padding: 0.5rem 0;
}
// all entries, except the last one
li.chill-collection__list__entry:nth-last-child(1n+2) {
margin-bottom: 1rem;
}
button.chill-collection__list__remove-entry {
margin-left: 0.5rem;
}
}
button.chill-collection__button--add {
}
}
padding: 1em;
ul.list-entry {
list-style: none;
padding: 0;
margin-bottom: 1.5rem;
li.entry {
padding: 1em;
border: 1px solid var(--chill-llight-gray);
&:nth-child(even) {
background-color: var(--chill-llight-gray);
}
}
button.remove-entry {
margin-left: 0.5rem;
}
}
button.add-entry {
}
}

View File

@ -54,7 +54,7 @@ var handleAdd = function(button) {
;
content = prototype.replace(new RegExp('__name__', 'g'), counter);
entry.innerHTML = content;
entry.classList.add('chill-collection__list__entry');
entry.classList.add('entry');
initializeRemove(collection, entry);
collection.appendChild(entry);
@ -75,7 +75,7 @@ var initializeRemove = function(collection, entry) {
return;
}
button.classList.add('sc-button', 'bt-delete', 'chill-collection__list__remove-entry');
button.classList.add('btn', 'btn-delete', 'remove-entry');
button.textContent = content;
button.addEventListener('click', function(e) {
@ -110,6 +110,3 @@ window.addEventListener('load', function() {
}
}
});

View File

@ -156,9 +156,14 @@
{% block chill_collection_widget %}
<div class="chill-collection">
<ul class="chill-collection__list" data-collection-name="{{ form.vars.name|escape('html_attr') }}" data-collection-identifier="{{ form.vars.identifier|escape('html_attr') }}" data-collection-button-remove-label="{{ form.vars.button_remove_label|trans|e }}" data-collection-allow-add="{{ form.vars.allow_add|escape('html_attr') }}" data-collection-allow-delete="{{ form.vars.allow_delete|escape('html_attr') }}" >
<ul class="list-entry"
data-collection-name="{{ form.vars.name|escape('html_attr') }}"
data-collection-identifier="{{ form.vars.identifier|escape('html_attr') }}"
data-collection-button-remove-label="{{ form.vars.button_remove_label|trans|e }}"
data-collection-allow-add="{{ form.vars.allow_add|escape('html_attr') }}"
data-collection-allow-delete="{{ form.vars.allow_delete|escape('html_attr') }}">
{% for entry in form %}
<li class="chill-collection__list__entry" data-collection-is-persisted="1">
<li class="entry" data-collection-is-persisted="1">
<div>
{{ form_widget(entry) }}
</div>
@ -167,9 +172,15 @@
</ul>
{% if form.vars.allow_add == 1 %}
<button class="chill-collection__button--add btn" data-collection-add-target="{{ form.vars.name|escape('html_attr') }}" data-form-prototype="{{ ('<div>' ~ form_widget(form.vars.prototype) ~ '</div>')|escape('html_attr') }}" >{{ form.vars.button_add_label|trans }}</button>
<button class="add-entry btn btn-misc"
data-collection-add-target="{{ form.vars.name|escape('html_attr') }}"
data-form-prototype="{{ ('<div>' ~ form_widget(form.vars.prototype) ~ '</div>')|escape('html_attr') }}" >
<i class="fa fa-plus fa-fw"></i>
{{ form.vars.button_add_label|trans }}
</button>
{% endif %}
</div>
{% endif %}
{% endblock %}
{% block address_widget %}