entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 8 Releases Wiki Activity

widgets: add dedicated mobile mode to meetings selection (#22959)

This commit is contained in:
Frédéric Péters 2020-04-06 21:42:33 +02:00
parent d87483fe6e
commit cfcb26b1bc
2 changed files with 52 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
static/includes/_misc.scss
View File

@ -576,6 +576,7 @@ div.meetings_table {
// style for templates/qommon/forms/widgets/select--meetings.html
margin-top: 0.7em;
display: flex;
align-items: flex-start;
width: 100%;
& > div {
flex: 0 1 auto;
@ -587,6 +588,17 @@ div.meetings_table {
div.head {
padding-bottom: 0.7em;
}
button {
margin: 0;
width: 3em;
height: 3em;
&.next {
margin-left: 1em;
}
&.prev {
margin-right: 1em;
}
}
div span {
display: block;
@ -608,6 +620,22 @@ div.meetings_table {
color: $button-color;
}
}
&.mobile {
> div {
width: 100%;
}
div span {
display: inline-block;
padding: 0.5em;
margin: 0.5em;
}
button {
&.prev, &.next {
margin: 0;
}
}
}
}
div.location-icon {

27
templates/qommon/forms/widgets/select--meetings.html
View File

@ -24,6 +24,7 @@ $(function() {
"{% trans "Saturday" %}"];
var $select = $('#form_{{widget.name}}');
var $table = $('#form_{{widget.name}}_table');
var column_count = 5;
function fill_with_items(items) {
$select.empty();
@ -81,14 +82,14 @@ $(function() {
return false;
});
go_next.on('click', function() {
current_offset = Math.min(current_offset+1, Math.max(0, nb_days-5));
current_offset = Math.min(current_offset+1, Math.max(0, nb_days-column_count));
display(current_offset);
return false;
});
function display(offset) {
$('#form_{{widget.name}}_table > div').each(function(idx, elem) {
if (idx >= offset && idx < offset+5) {
if (idx >= offset && idx < offset+column_count) {
$(elem).show();
} else {
$(elem).hide();
@ -106,7 +107,27 @@ $(function() {
}
current_offset = offset;
}
display(current_offset);
function set_layout() {
if ($select.parents('form').width() > 600) {
// desktop layout
column_count = 5;
$table.removeClass('mobile');
} else {
// mobile layout
column_count = 1;
$table.addClass('mobile');
}
display(current_offset);
t1 = new Date();
}
set_layout();
var layout_change_timeout_id = null;
$(window).on('resize', function() {
clearTimeout(layout_change_timeout_id);
layout_change_timeout_id = setTimeout(set_layout, 200);
});
$('#form_{{widget.name}}_table span.selectable').on('click', function() {
$('#form_{{widget.name}}_table span').removeClass('on');
$(this).addClass('on');