Projet

Général

Profil

0001-widgets-add-dedicated-mobile-mode-to-meetings-select.patch

Frédéric Péters, 08 avril 2020 15:40

Télécharger (3,25 ko)

Voir les différences: 

Subject: [PATCH] widgets: add dedicated mobile mode to meetings selection
 (#22959)


 static/includes/_misc.scss                    | 28 +++++++++++++++++++
 .../forms/widgets/select--meetings.html       | 26 +++++++++++++++--
 2 files changed, 51 insertions(+), 3 deletions(-)
static/includes/_misc.scss
583 583 
	// style for templates/qommon/forms/widgets/select--meetings.html
584 584 
	margin-top: 0.7em;
585 585 
	display: flex;
586 
	align-items: flex-start;
586 587 
	width: 100%;
587 588 
	& > div {
588 589 
		flex: 0 1 auto;
......
594 595 
	div.head {
595 596 
		padding-bottom: 0.7em;
596 597 
	}
598 
	button {
599 
		margin: 0;
600 
		width: 3em;
601 
		height: 3em;
602 
		&.next {
603 
			margin-left: 1em;
604 
		}
605 
		&.prev {
606 
			margin-right: 1em;
607 
		}
608 
	}
597 609 

  		




  598
  610
  
    
	div span {

  		




  599
  611
  
    
		display: block;

  		




  ......




  615
  627
  
    
			color: $button-color;

  		




  616
  628
  
    
		}

  		




  617
  629
  
    
	}

  		




  
  630
  
    

  		




  
  631
  
    
	&.mobile {

  		




  
  632
  
    
		> div {

  		




  
  633
  
    
			width: 100%;

  		




  
  634
  
    
		}

  		




  
  635
  
    
		div span {

  		




  
  636
  
    
			display: inline-block;

  		




  
  637
  
    
			padding: 0.5em;

  		




  
  638
  
    
			margin: 0.5em;

  		




  
  639
  
    
		}

  		




  
  640
  
    
		button {

  		




  
  641
  
    
			&.prev, &.next {

  		




  
  642
  
    
				margin: 0;

  		




  
  643
  
    
			}

  		




  
  644
  
    
		}

  		




  
  645
  
    
	}

  		




  618
  646
  
    
}

  		




  619
  647
  
    

  		




  620
  648
  
    
div.location-icon {

  		












  

    
      templates/qommon/forms/widgets/select--meetings.html
    
  





  24
  24
  
    
                  "{% trans "Saturday" %}"];

  		




  25
  25
  
    
  var $select = $('#form_{{widget.name}}');

  		




  26
  26
  
    
  var $table = $('#form_{{widget.name}}_table');

  		




  
  27
  
    
  var column_count = 5;

  		




  27
  28
  
    

  		




  28
  29
  
    
  function fill_with_items(items) {

  		




  29
  30
  
    
    $select.empty();

  		




  ......




  81
  82
  
    
    return false;

  		




  82
  83
  
    
  });

  		




  83
  84
  
    
  go_next.on('click', function() {

  		




  84
  
  
    
    current_offset = Math.min(current_offset+1, Math.max(0, nb_days-5));

  		




  
  85
  
    
    current_offset = Math.min(current_offset+1, Math.max(0, nb_days-column_count));

  		




  85
  86
  
    
    display(current_offset);

  		




  86
  87
  
    
    return false;

  		




  87
  88
  
    
  });

  		




  88
  89
  
    

  		




  89
  90
  
    
  function display(offset) {

  		




  90
  91
  
    
    $('#form_{{widget.name}}_table > div').each(function(idx, elem) {

  		




  91
  
  
    
      if (idx >= offset && idx < offset+5) {

  		




  
  92
  
    
      if (idx >= offset && idx < offset+column_count) {

  		




  92
  93
  
    
        $(elem).show();

  		




  93
  94
  
    
      } else {

  		




  94
  95
  
    
        $(elem).hide();

  		




  ......




  106
  107
  
    
    }

  		




  107
  108
  
    
    current_offset = offset;

  		




  108
  109
  
    
  }

  		




  109
  
  
    
  display(current_offset);

  		




  
  110
  
    

  		




  
  111
  
    
  function set_layout() {

  		




  
  112
  
    
    if ($select.parents('form').width() > 600) {

  		




  
  113
  
    
      // desktop layout

  		




  
  114
  
    
      column_count = 5;

  		




  
  115
  
    
      $table.removeClass('mobile');

  		




  
  116
  
    
    } else {

  		




  
  117
  
    
      // mobile layout

  		




  
  118
  
    
      column_count = 1;

  		




  
  119
  
    
      $table.addClass('mobile');

  		




  
  120
  
    
    }

  		




  
  121
  
    
    display(current_offset);

  		




  
  122
  
    
  }

  		




  
  123
  
    
  set_layout();

  		




  
  124
  
    
  var layout_change_timeout_id = null;

  		




  
  125
  
    
  $(window).on('resize', function() {

  		




  
  126
  
    
    clearTimeout(layout_change_timeout_id);

  		




  
  127
  
    
    layout_change_timeout_id = setTimeout(set_layout, 50);

  		




  
  128
  
    
  });

  		




  
  129
  
    

  		




  110
  130
  
    
  $('#form_{{widget.name}}_table span.selectable').on('click', function() {

  		




  111
  131
  
    
   $('#form_{{widget.name}}_table span').removeClass('on');

  		




  112
  132
  
    
   $(this).addClass('on');

  		




  113
  
  
    
-