diff options
3 files changed, 41 insertions, 18 deletions
diff --git a/app/assets/stylesheets/modules/_vj_collection.sass b/app/assets/stylesheets/modules/_vj_collection.sass index e22507dcf..9bb19f75f 100644 --- a/app/assets/stylesheets/modules/_vj_collection.sass +++ b/app/assets/stylesheets/modules/_vj_collection.sass @@ -219,9 +219,17 @@ .form-control border-color: #ccc - .consolidated-view $highlighted: #d4ba32 + .togglable + &.ready + transition: all 0.5s + &:not(.open) + min-height: 0 !important + padding: 0 !important + margin: 0 !important + border: none + .line & > .head font-size: 2em @@ -257,7 +265,6 @@ .vehicle-journeys display: block overflow: hidden - transition: height 0.5s, margin-bottom 0.5s margin-bottom: 0px & > * display: inline-block diff --git a/app/views/referential_vehicle_journeys/_consolidated.html.slim b/app/views/referential_vehicle_journeys/_consolidated.html.slim index e2de526bc..4a1866e8a 100644 --- a/app/views/referential_vehicle_journeys/_consolidated.html.slim +++ b/app/views/referential_vehicle_journeys/_consolidated.html.slim @@ -8,26 +8,42 @@ coffee: $('a.toggle-timetables').click (e)-> e.preventDefault() $(e.target).toggleClass 'active' - $(e.target).parents('.table').find('.detailed-timetables').toggleClass 'hidden' + $(e.target).parents('.table').find('.detailed-timetables').customToggle() $('a.toggle-purchase-windows').click (e)-> e.preventDefault() $(e.target).toggleClass 'active' - $(e.target).parents('.table').find('.detailed-purchase-windows').toggleClass 'hidden' + $(e.target).parents('.table').find('.detailed-purchase-windows').customToggle() - $('.route').find('.vehicle-journeys').each (i, e)-> + $('.route').find('.togglable.hidden').each (i, e)-> $e = $(e) $e.removeClass 'hidden' - e.setAttribute 'data-original-height', $e.height() - $e.height 0 + e.setAttribute 'data-original-height', $e.innerHeight() + e.setAttribute 'data-original-full-height', $e.outerHeight(true) + $e.css height: 0 + $e.addClass 'ready' $('a.toggle-route').click (e)-> e.preventDefault() $(e.currentTarget).toggleClass 'active' tab = $(e.currentTarget).parents('.route').find('.vehicle-journeys') - if tab.hasClass 'open' - tab.removeClass 'open' - tab.height 0 - else - tab.addClass 'open' - tab.height tab.attr('data-original-height') + tab.customToggle() + + $.fn.extend + customToggle: (propagate=true)-> + height = parseFloat this.attr('data-original-height') + fullHeight = parseFloat this.attr('data-original-full-height') + if this.hasClass 'open' + this.css height: 0 + this.removeClass 'open' + this.find('.togglable.open').customToggle(false) + this.find('a.active').removeClass 'active' + if propagate + for parent in this.parents(".togglable.open") + $(parent).height $(parent).height() - fullHeight + else + this.addClass 'open' + this.height height + if propagate + for parent in this.parents(".togglable.open") + $(parent).height $(parent).height() + fullHeight diff --git a/app/views/referential_vehicle_journeys/_consolidated_line.html.slim b/app/views/referential_vehicle_journeys/_consolidated_line.html.slim index d4c756d38..c73c65961 100644 --- a/app/views/referential_vehicle_journeys/_consolidated_line.html.slim +++ b/app/views/referential_vehicle_journeys/_consolidated_line.html.slim @@ -20,7 +20,7 @@ = Chouette::VehicleJourney.t | span.fa.fa-angle-up - .table.table-2entries.vehicle-journeys.hidden + .table.table-2entries.vehicle-journeys.hidden.togglable .t2e-head.w20 .th div @@ -31,7 +31,7 @@ = link_to '#', class: 'toggle-purchase-windows detailed-timetables-bt' do span.fa.fa-angle-up = Chouette::PurchaseWindow.t - .detailed-purchase-windows.hidden + .detailed-purchase-windows.hidden.togglable - route.purchase_windows.uniq.each do |tt| div p @@ -46,7 +46,7 @@ span.fa.fa-angle-up = Chouette::TimeTable.t - .detailed-timetables.hidden + .detailed-timetables.hidden.togglable - route.time_tables.uniq.each do |tt| div p @@ -86,7 +86,7 @@ span.fa.fa-calendar style="color: #{tt.color ? tt.color : '#4B4B4B'}" - if journey.purchase_windows.size > 3 span.vj_tt = "+ #{journey.purchase_windows.size - 3}" - .detailed-purchase-windows.hidden + .detailed-purchase-windows.hidden.togglable - route.purchase_windows.uniq.each do |tt| div class=(journey.has_purchase_window?(tt) ? 'active' : 'inactive') div @@ -96,7 +96,7 @@ span.fa.fa-calendar style="color: #{tt.color ? tt.color : '#4B4B4B'}" - if journey.time_tables.size > 3 span.vj_tt = "+ #{journey.time_tables.size - 3}" - .detailed-timetables.hidden + .detailed-timetables.hidden.togglable - route.time_tables.uniq.each do |tt| div class=(journey.has_time_table?(tt) ? 'active' : 'inactive') |