Mass action tag layout updated

This commit is contained in:
Simounet 2023-05-22 21:12:29 +02:00
parent f9143c4255
commit 81f58df7b8
No known key found for this signature in database
GPG key ID: 77D3B7DC794EB770
5 changed files with 52 additions and 32 deletions

View file

@ -13,22 +13,23 @@
} }
} }
.mass-buttons { .mass-action {
margin: 10px 5px 10px 20px; margin: 10px 5px 10px 20px;
}
span { .mass-action-group {
padding: 3px; display: flex;
} padding: 3px;
gap: 10px;
}
button { .mass-action-button {
i { height: 24px;
font-size: 15px; line-height: 24px;
} padding: 0 0.5rem;
height: 24px; i {
line-height: 24px; font-size: 1rem;
padding: 0 0.5rem;
margin-right: 0.75rem;
} }
} }
@ -43,7 +44,7 @@
} }
.entries .entry-checkbox-input, .entries .entry-checkbox-input,
.mass-buttons .entry-checkbox-input { .mass-action .entry-checkbox-input {
position: relative; position: relative;
left: 0; left: 0;
width: 20px; width: 20px;
@ -53,12 +54,23 @@
opacity: initial; opacity: initial;
} }
.mass-action-inputs-displayed:not(:checked) ~ .mass-buttons, .toggle-checkbox:not(:checked) + .mass-action,
.mass-action-inputs-displayed:not(:checked) ~ .entries .entry-checkbox, .toggle-checkbox:not(:checked) + .mass-action-tags,
.mass-action-inputs-displayed:checked ~ .entries .card-preview { .toggle-checkbox:not(:checked) ~ .entries .entry-checkbox,
.toggle-checkbox:checked ~ .entries .card-preview {
display: none; display: none;
} }
.mass-action-tags {
display: flex;
align-items: center;
gap: 10px;
.mass-action-tags-input {
margin: 0;
}
}
.entries { .entries {
list-style: none; list-style: none;
} }
@ -158,3 +170,11 @@ footer {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
@media screen and (min-width: 993px) {
.mass-action {
display: flex;
align-items: center;
gap: 30px;
}
}

View file

@ -46,22 +46,21 @@
</div> </div>
{% if entries.count > 0 %} {% if entries.count > 0 %}
<input id="mass-action-inputs-displayed" class="mass-action-inputs-displayed" type="checkbox" /> <input id="mass-action-inputs-displayed" class="toggle-checkbox" type="checkbox" />
<div class="mass-buttons"> <div class="mass-action">
<span> <div class="mass-action-group">
<input type="checkbox" class="entry-checkbox-input" data-toggle="[data-js='entry-checkbox']" data-js="checkboxes-toggle" /> <input type="checkbox" class="entry-checkbox-input" data-toggle="[data-js='entry-checkbox']" data-js="checkboxes-toggle" />
</span> <button class="mass-action-button btn cyan darken-1" type="submit" name="toggle-read" title="{{ 'entry.list.toogle_as_read'|trans }}"><i class="material-icons">done</i></button>
<button class="mass-action-button btn cyan darken-1" type="submit" name="toggle-star" title="{{ 'entry.list.toogle_as_star'|trans }}" ><i class="material-icons">star</i></button>
<button class="mass-action-button btn cyan darken-1" type="submit" name="delete" onclick="return confirm('{{ 'entry.confirm.delete_entries'|trans|escape('js') }}')" title="{{ 'entry.list.delete'|trans }}"><i class="material-icons">delete</i></button>
<label for="mass-action-tags-displayed" class="mass-action-button btn cyan darken-1" type="button" title="{{ 'entry.list.add_tag'|trans }}"><i class="material-icons">label</i></label>
</div>
<span> <input id="mass-action-tags-displayed" class="toggle-checkbox" type="checkbox" />
<button class="btn cyan darken-1" type="submit" name="toggle-read" title="{{ 'entry.list.toogle_as_read'|trans }}"><i class="material-icons">done</i></button> <div class="mass-action-tags">
<button class="btn cyan darken-1" type="submit" name="toggle-star" title="{{ 'entry.list.toogle_as_star'|trans }}" ><i class="material-icons">star</i></button> <input type="text" class="mass-action-tags-input" name="tags" placeholder="{{ 'entry.list.mass_action_tags_input_placeholder'|trans }}" required />
<button class="btn cyan darken-1" type="submit" name="delete" onclick="return confirm('{{ 'entry.confirm.delete_entries'|trans|escape('js') }}')" title="{{ 'entry.list.delete'|trans }}"><i class="material-icons">delete</i></button> <button class="btn cyan darken-1" type="submit" name="tag">Ajouter</button>
<button class="btn cyan darken-1" type="submit" name="tag"><i class="material-icons">label</i></button> </div>
</span>
<span class="input-field inline">
<input type="text" name="tags" />
</span>
</div> </div>
<ol class="entries {% if list_mode == 1 %}collection{% else %}row entries-row data{% endif %}"> <ol class="entries {% if list_mode == 1 %}collection{% else %}row entries-row data{% endif %}">

View file

@ -241,6 +241,7 @@ entry:
show_same_domain: Show articles with the same domain show_same_domain: Show articles with the same domain
assign_search_tag: Assign this search as a tag to each result assign_search_tag: Assign this search as a tag to each result
toggle_mass_action: Toggle mass action toggle_mass_action: Toggle mass action
mass_action_tags_input_placeholder: tag1, tag2, tag3
filters: filters:
title: Filters title: Filters
status_label: Status status_label: Status

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long