diff options
| -rw-r--r-- | app/assets/stylesheets/base/_config.sass | 1 | ||||
| -rw-r--r-- | app/assets/stylesheets/components/_referential_overview.sass | 86 | ||||
| -rw-r--r-- | app/javascript/referential_overview/index.coffee | 19 | ||||
| -rw-r--r-- | app/views/merges/show.html.slim | 3 | ||||
| -rw-r--r-- | app/views/referentials/_overview.html.slim | 11 | ||||
| -rw-r--r-- | config/locales/referentials.fr.yml | 4 |
6 files changed, 94 insertions, 30 deletions
diff --git a/app/assets/stylesheets/base/_config.sass b/app/assets/stylesheets/base/_config.sass index 2c226357f..0fff1dd9c 100644 --- a/app/assets/stylesheets/base/_config.sass +++ b/app/assets/stylesheets/base/_config.sass @@ -17,6 +17,7 @@ $blue: #007fbb $darkgrey: #4b4b4b $grey: #a4a4a4 $lightgrey: lighten($grey, 25) +$lightergrey: lighten($lightgrey,5) $green: #70b12b $red: #da2f36 diff --git a/app/assets/stylesheets/components/_referential_overview.sass b/app/assets/stylesheets/components/_referential_overview.sass index 77f60a8e7..af1baf4ec 100644 --- a/app/assets/stylesheets/components/_referential_overview.sass +++ b/app/assets/stylesheets/components/_referential_overview.sass @@ -1,12 +1,26 @@ .referential-overview $left-size: 100px + $line-height: 57px margin-top: 50px + overflow: hidden .time-travel, .filters - background-color: $lightgrey + background-color: $lightergrey padding: 10px float: right border-top-left-radius: 10px border-top-right-radius: 10px + border: 1px solid $lightgrey + border-bottom: none + position: relative + &:after + position: absolute + content: "" + left: 0 + top: 100% + right: 0 + height: 10px + box-shadow: 0 0 10px rgba(0,0,0,0.5) + z-index: 1 .time-travel a.btn:first-child border-right: 1px solid $grey @@ -18,9 +32,6 @@ float: left max-width: 66% padding: 0 - background: transparentize(#cbac3e, 0.8) - border: 1px solid $grey - border-bottom: none form background: transparent display: flex @@ -30,7 +41,7 @@ border-color: $grey width: auto flex: 1 1 - padding: 11px + padding: 12px 11px 11px .input-group-btn right: 10px &.togglable @@ -40,16 +51,19 @@ top: 7px .overview-table + position: relative + z-index: 2 border: 1px solid $grey clear: both display: flex + background: white .head height: $left-size .line - height: 80px + height: $line-height .left flex: 0 0 - background: $lightgrey + background: $lightergrey min-width: $left-size overflow: hidden border-right: 1px solid white @@ -79,7 +93,7 @@ width: 0 content: "" .line - padding: 15px 10px 10px + padding: 5px 10px border-bottom: 1px solid $grey font-size: 0.8em &:last-child @@ -112,13 +126,11 @@ .company, .mode font-size: 0.9em - margin-top: 5px white-space: nowrap text-overflow: ellipsis overflow: hidden - + margin-top: -2px .mode - margin-top: 0 text-transform: uppercase color: $grey font-weight: bold @@ -132,7 +144,7 @@ position: relative &:after, &:before opacity: 0 - transition: opacity 0.5s + // transition: opacity 0.5s content: "" position: absolute left: -1000px @@ -148,8 +160,8 @@ height: 100% transition: margin 0.5s .week-span - left: 5px - top: 10px + left: 15px + top: 15px right: 30px white-space: nowrap overflow: hidden @@ -157,8 +169,8 @@ position: absolute .week-number - background-color: lightgrey - color: white + background-color: $lightgrey + color: $grey position: absolute top: 0 right: 0 @@ -205,7 +217,7 @@ &:first-child border: none &.weekend - background: $lightgrey + background: $lightergrey &.today, &:hover color: $blue background-color: transparentize($blue, 0.7) @@ -227,14 +239,40 @@ border-bottom: 1px solid $grey position: relative overflow: hidden + &:last-child border-bottom: none .period height: 100% top: 0 - background: rgb(219, 249, 196) + background: #aedd8a position: absolute + box-shadow: 0 0 10px rgba(0,0,0,0.5) + z-index: 2 + .title + position: absolute + left: 12px + top: 50% + margin-top: -6px + transform: translateY(-50%) + background-color: transparentize(white, 0.5) + padding: 5px + font-size: 0.7em + border-radius: 5px + transition: margin-left 0.5s + max-width: calc(100% - 24px) + margin-right: 12px + &:after + content: "" + position: absolute + bottom: 1px + left: 0 + right: 0 + height: 10px + background: white + opacity: 0.25 + z-index: 3 &:before content: "" border-right: 1px dashed $grey @@ -242,13 +280,19 @@ bottom: -100% position: absolute right: -1px - z-index: 3 + z-index: 4 + &:hover + &:after + opacity: 0.5 + .title + background-color: transparentize(white, 0.2) &.empty + z-index: 1 background: rgb(244, 67, 67) - background: repeating-linear-gradient(-45deg, #f5e1cf,#f5e1cf 10px,#e49393 10px,#e49393 20px) + background: repeating-linear-gradient(-45deg, #f5e1cf,#f5e1cf 12px,#e49393 12px,#e49393 25px) &.accepted background: #f19039 - background: repeating-linear-gradient(-45deg, #f5e1cf,#f5e1cf 10px,#f19039 10px,#f19039 20px) + background: repeating-linear-gradient(-45deg, #f5e1cf,#f5e1cf 12px,#f19039 12px,#f19039 25px) &.sticky .time-travel diff --git a/app/javascript/referential_overview/index.coffee b/app/javascript/referential_overview/index.coffee index c9a266dea..31a689273 100644 --- a/app/javascript/referential_overview/index.coffee +++ b/app/javascript/referential_overview/index.coffee @@ -40,11 +40,12 @@ class window.ReferentialOverview @currentOffset = 0 $(document).scroll (e)=> @documentScroll(e) + @documentScroll pageY: $(document).scrollTop() showDay: (date)-> day = @container.find(".day.#{date}") offset = day.offset().left - parentOffset = @container.find(".right .inner").offset().left + parentOffset = @currentOffset @scrollTo parentOffset - offset currentOffset: -> @@ -72,7 +73,21 @@ class window.ReferentialOverview @container.find(".right .inner .lines").css "margin-left": "#{@currentOffset}px" @container.find(".head .week:first-child").css "margin-left", "#{@currentOffset}px" @timeTravel.scrolledTo 1 - (@minOffset() - @currentOffset) / @minOffset() - + setTimeout => + @movePeriodTitles() + , 600 + + movePeriodTitles: -> + @_right_offset ||= @container.find('.right').offset().left + @container.find(".shifted").removeClass("shifted").css "margin-left", 0 + @container.find(".right .line").each (i, l) => + $(l).find(".period").each (i, _p) => + p = $(_p) + offset = parseInt(p.css("left")) + @currentOffset + if offset < 0 && - offset < p.width() + offset = Math.min(-offset, p.width() - 100) + p.find(".title").addClass("shifted").css "margin-left", offset + "px" + return documentScroll: (e)-> if @sticky diff --git a/app/views/merges/show.html.slim b/app/views/merges/show.html.slim index 47e5aa029..a94552c0d 100644 --- a/app/views/merges/show.html.slim +++ b/app/views/merges/show.html.slim @@ -12,3 +12,6 @@ @merge.class.human_attribute_name(:created_at) => @merge.created_at ? l(@merge.created_at) : '-', @merge.class.human_attribute_name(:started_at) => @merge.started_at ? l(@merge.started_at) : '-', @merge.class.human_attribute_name(:ended_at) => @merge.ended_at ? l(@merge.ended_at) : '-' } + + - if resource.output.current + = referential_overview resource.output.current diff --git a/app/views/referentials/_overview.html.slim b/app/views/referentials/_overview.html.slim index e9a799764..20bfd6c15 100644 --- a/app/views/referentials/_overview.html.slim +++ b/app/views/referentials/_overview.html.slim @@ -9,18 +9,18 @@ span.fa.fa-search .form-group.togglable = f.label Chouette::Line.human_attribute_name(:company_id), required: false, class: 'control-label' - = f.input :company_id_eq_any, collection: overview.referential.companies.order(name: :asc), as: :check_boxes, label: false, label_method: lambda{|l| ("<span>" + l.name + "</span>").html_safe}, required: false, wrapper_html: { class: 'checkbox_list'} + = f.input :company_id_eq_any, collection: overview.referential_lines.map(&:company).uniq.sort_by(&:name), as: :check_boxes, label: false, label_method: lambda{|l| ("<span>" + l.name + "</span>").html_safe}, required: false, wrapper_html: { class: 'checkbox_list'} .form-group.togglable = f.label Chouette::Line.human_attribute_name(:transport_mode), required: false, class: 'control-label' - = f.input :transport_mode_eq_any, collection: StifTransportModeEnumerations.sorted_transport_modes, as: :check_boxes, label: false, label_method: lambda{|l| ("<span>" + t("enumerize.transport_mode.#{l}") + "</span>").html_safe}, required: false, wrapper_html: { class: 'checkbox_list'} + = f.input :transport_mode_eq_any, collection: overview.referential_lines.map(&:transport_mode).uniq.sort, as: :check_boxes, label: false, label_method: lambda{|l| ("<span>" + t("enumerize.transport_mode.#{l}") + "</span>").html_safe}, required: false, wrapper_html: { class: 'checkbox_list'} .actions = link_to 'Effacer', @workbench, class: 'btn btn-link' = f.submit 'Filtrer', class: 'btn btn-default' .time-travel.btn-group - = link_to I18n.t("referentials.overview.head.prev_page"), '#', class: "prev-page btn btn-default" + = link_to I18n.t("referentials.overview.head.prev_page"), '#', class: "prev-page btn btn-default disabled" = link_to I18n.t("referentials.overview.head.today"), '#', class: "today btn btn-default #{overview.includes_today? ? '' : 'disabled'}" = link_to I18n.t("referentials.overview.head.next_page"), '#', class: "next-page btn btn-default" .overview-table @@ -34,7 +34,7 @@ a.number style="background-color: #{line.color.present? ? "##{line.color}" : 'whitesmoke'}" title=line.name = line.number .company= line.company&.name - .mode= line.transport_mode + .mode= t("enumerize.transport_mode.#{line.transport_mode}") .right .inner .head @@ -52,7 +52,8 @@ - overview.lines.each do |line| .line style=line.html_style class=line.html_class - line.periods.each do |period| - .period style=period.html_style class=period.html_class title=period.title + .period style=period.html_style class=period.html_class + .title=period.title - else = replacement_msg t('referential_lines.search_no_results') diff --git a/config/locales/referentials.fr.yml b/config/locales/referentials.fr.yml index 3485413f1..53183a4c2 100644 --- a/config/locales/referentials.fr.yml +++ b/config/locales/referentials.fr.yml @@ -53,8 +53,8 @@ fr: dates: Dates lines: Lignes today: Aujourd'hui - prev_page: Page précédente - next_page: Page suivante + prev_page: ← + next_page: → activerecord: models: |