Make LSview-actions respons

This commit is contained in:
Benjamin Renard 2020-06-02 21:10:59 +02:00
parent 506c0fb622
commit c29240d771
2 changed files with 62 additions and 3 deletions

View file

@ -295,6 +295,7 @@ ul.LSview-actions {
margin-right: 3rem;
margin-bottom: 0.8rem;
color: #0072b8;
padding-left: 0;
}
li.LSview-actions {
@ -484,17 +485,39 @@ input[type='submit'].LSview_search {
background: transparent;
}
ul.LSview-actionse:not(.LSview-actions-visible) {
ul.LSview-actions-dropdown {
background: url('../image/generate') center no-repeat;
width: 22px;
height: 22px;
margin-right: 1rem;
margin-right: 1em;
cursor: pointer;
}
ul.LSview-actionse:not(.LSview-actions-visible) li {
ul.LSview-actions-dropdown-opened) {
margin-top: 22px;
}
ul.LSview-actions-dropdown:not(.LSview-actions-dropdown-opened) li {
display: none;
}
ul.LSview-actions-dropdown-opened li.LSview-actions {
background: white;
position: relative;
width: 30vw;
right: 29vw;
text-align: left;
}
ul.LSview-actions-dropdown-opened li.LSview-actions a {
display: inline-block;
width: 100%;
}
ul.LSview-actions-dropdown-opened li.LSview-actions:first-of-type {
margin-top: 22px;
border-top: 1px solid;
}
}
@media (max-width: 400px) {

View file

@ -33,6 +33,36 @@ var LSview = new Class({
if($type(this.LSsearchPredefinedFilter) && $type('LSsearch_form')) {
this.LSsearchPredefinedFilter.addEvent('change',this.onLSsearchPredefinedFilterChange.bind(this));
}
$$('ul.LSview-actions').each(function(ul) {
ul.addEvent('click', this.toggleLSviewActions.bind(this, ul));
}, this);
this.onWindowResized();
window.addEvent('resize', this.onWindowResized.bind(this));
},
onWindowResized: function() {
var window_width = window.getWidth().toInt();
if ($('LSview_title')) {
window_width = $('LSview_title').getWidth().toInt();
}
if ($('LSview_search_predefinedFilter')) {
window_width -= $('LSview_search_predefinedFilter').getWidth().toInt();
}
$$('ul.LSview-actions').each(function(ul) {
// Calculte menu width
var actions_width = 0;
ul.getElements('li').each(function (li) {
actions_width += li.getWidth().toInt() + 10; // Add 10 for margin/space between li
});
if (window.getWidth() < actions_width) {
ul.addClass('LSview-actions-dropdown');
}
else {
ul.removeClass('LSview-actions-dropdown');
}
});
},
onLSsearchPredefinedFilterChange: function() {
@ -114,6 +144,12 @@ var LSview = new Class({
executeCustomActionFromA: function(a) {
document.location = a.href+'&valid';
},
toggleLSviewActions: function(ul) {
if (ul.hasClass('LSview-actions-dropdown')) {
ul.toggleClass('LSview-actions-dropdown-opened');
}
}
});