From b69ff691fa1e3ebfcdb3431ed01db5d5a1876172 Mon Sep 17 00:00:00 2001 From: Harrys Ravalomanana Date: Tue, 19 Nov 2019 11:38:02 +0400 Subject: [PATCH] PHRAS-2829 #comment Pord41 of Lightbox mobile: user choice and validation report #time 5h --- .../www/lightbox/styles/main-mobile.scss | 558 +++++++++++++++++- templates/mobile/lightbox/sc_note.html.twig | 5 +- templates/mobile/lightbox/validate.html.twig | 60 +- .../lightbox/basket_content_report.html.twig | 71 ++- 4 files changed, 637 insertions(+), 57 deletions(-) diff --git a/resources/www/lightbox/styles/main-mobile.scss b/resources/www/lightbox/styles/main-mobile.scss index a3476342d9..44f21f6b64 100644 --- a/resources/www/lightbox/styles/main-mobile.scss +++ b/resources/www/lightbox/styles/main-mobile.scss @@ -24,4 +24,560 @@ #right-btn { float: right; -} \ No newline at end of file +} + +.report-modal, .ui-dialog .ui-dialog-content { + background: linear-gradient(#3c3c3c,#111); +} + +.ui-bar-c, .ui-body-c, .ui-btn-down-c, .ui-btn-hover-c, .ui-btn-up-c, .ui-overlay-c { + text-shadow: none; +} +@import '../../_shared/styles/variables'; +$lightboxPath: '../images/'; +$imagesPath: '/assets/vendors/jquery-ui/images/dark-hive/'; + +$mainMenuBackgroundColor: #c7c7c7; //BFBFBF; +$mainMenuBottomBorder: 1px solid #c7c7c7; +$mainMenuLinkColor: #212121; +$mainMenuLinkHoverColor: #000000; +$mainMenuLinkActiveColor: #BFBFBF; +$mainMenuLinkBackgroundHoverColor: transparent; + +body { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; +} + +ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +img { + border: none; + vertical-align: middle; +} + +.title15 { + font-size: 15px; + font-weight: bold; +} + +.record_display_box { + width: 100%; + height: 100%; + display: block; + table { + vertical-align: middle; + table-layout: fixed; + } + .title { + margin: 0 10px; + } + .record { + position: relative; + max-width: none; + max-height: none; + } + .header { + color: #BFBFBF; + height: 30px; + bottom: auto; + overflow: hidden; + .title { + overflow: hidden; + line-height: 20px; + height: 20px; + } + } + .lightbox_container { + top: 30px; + overflow: hidden; + } + .display_id { + top: 5px; + margin: 0 0 0 5px; + background: #bebebe; + } +} + +#sc_wrapper { + left: 20px; + right: 20px; + overflow-x: scroll; + overflow-y: hidden; +} + +#sc_container { + position: relative; + height: 100%; +} + +.basket_element_wrapper { + position: relative; + float: left; + padding: 0 5px; +} + +.basket_element { + position: relative; + float: left; + width: 114px; + height: 130px; + border: 1px solid #212121; + text-align: left; + padding: 5px 8px; + &.selected { + background-color: #212121; + } + .display_id { + top: 4px; + left: 8px; + } + .agreement { + position: absolute; + top: 4px; + right: 8px; + z-index: 99; + } + .image { + position: relative; + z-index: 90; + } + .previewTips { + background-image: url('#{$iconsPath}zoom.gif'); + background-position: center center; + background-repeat: no-repeat; + cursor: help; + position: absolute; + bottom: 4px; + right: 8px; + height: 18px; + width: 18px; + z-index: 99; + } +} + +#report .display_id { + top: 0; + left: 0; + border-radius: 0; +} + +#report .CHIM.diapo { + position: relative; + text-align: center; +} + +.display_id { + background-color: #FFFFFF; + padding: 3px 6px; + font-weight: bold; + z-index: 99; + color: #212121; + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + position: absolute; +} + +.not_decided { + opacity: 0.30; + filter: alpha(opacity=30); +} + +#sc_wrapper .not_decided { + display: none; +} + +#right_scroller { + width: 30px; + right: -10px; + left: auto; + background-image: url('#{$lightboxPath}right_arrow.png'); + background-position: center center; + background-repeat: no-repeat; +} + +#left_scroller { + width: 30px; + left: -10px; + right: auto; + background-image: url('#{$lightboxPath}left_arrow.png'); + background-position: center center; + background-repeat: no-repeat; +} + +#basket_infos { + overflow: hidden; + background-color: #1F1E1B; + color: #BFBFBF; +} + +#basket_options { + height: 35px; + top: auto; + background-color: #1F1E1B; + text-align: center; +} + +#basket_options .confirm_report { + margin: 5px auto; +} + +#basket_infos .user_infos { + height: 120px; + top: auto; +} + +#basket_infos { + table { + width: 100%; + margin: 5px 0; + .title { + width: 100%; + } + .report_wrapper { + text-align: right; + } + } +} + +#right_column { + left: auto; + right: 0; + width: 240px; +} + +#right_column_validation_toggle { + bottom: 45px; + background-color: #1F1E1B; + height: 30px; + top: auto; + text-align: center; + display: none; + line-height: 25px; + color: #BFBFBF; +} + +#right_column .right_column_title { + height: 30px; + bottom: auto; +} + +#right_column .right_column_title img.expanded { + display: none; +} + +#right_column .right_column_title img.collapsed { + display: inline; +} + +#right_column .right_column_title.expanded img.expanded { + display: inline; +} + +#right_column .right_column_title.expanded img.collapsed { + display: none; +} + +#right_column .right_column_wrapper { + top: 30px; + bottom: 45px; +} + +#right_column .right_column_wrapper.caption { + bottom: 85px; +} + +#record_infos { + overflow-x: hidden; + overflow-y: auto; +} + +#record_compare { + visibility: hidden; + top: auto; + left: auto; +} + +#record_compare .header, #record_compare .lightbox_container { + left: 5px; +} + +#record_wrapper.comparison #record_main .header, #record_wrapper.comparison #record_main .lightbox_container { + right: 5px; +} + +.agreement_selector { + position: absolute; + bottom: 10px; + right: 10px; +} + +.clickable { + cursor: pointer; +} + +.big_box.agree { + border: 2px solid #35AC00; + background-color: #35AC00; +} + +.big_box.disagree { + border: 2px solid #DE1200; + background-color: #DE1200; +} + +.big_box, .big_box.not_decided { + width: 95px; + margin: 0 auto; + padding: 6px 10px; + height: 30px; + color: #1F1E1B; + background-color: #353430; + border: 2px solid #353430; + text-align: center; + opacity: 1; + filter: alpha(opacity=100); +} + +.big_box span { + margin: 0 10px; +} + +li.userchoice { + margin: 5px 0 0px 20px; +} + +.userchoice.disagree { + color: #DE1200; +} + +.userchoice.agree { + color: #35AC00; +} + +.basket_report_user { + padding: 7px 10px; +} + +.basket_report_user_wrapper { + background-color: #bebebe; + margin: 0 0 5px; +} + +.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { + padding: 0.2em 1em 0.2em 2.1em; +} + +/******* +* +* Index +* +* ******/ +#main_index { + position: relative; + width: 600px; + margin: 0 auto; +} + +#main_wrapper { + width: 100%; +} + +#main_wrapper h1 { + font-weight: bold; + font-size: 25px; +} + +table th { + text-align: right; + vertical-align: bottom; + height: 60px; + border-bottom: 1px solid #8F8F8F; +} + +table th.title { + text-align: left; +} + +table th h1 { + margin-left: 20px; +} + +table th i { + margin-right: 20px; +} + +.ui-state-default.note_closer, .ui-state-default.note_saver { + background-color: #353430; + padding: 5px; + margin: 0 10px; +} + +.ui-state-default.note_saver { + background-color: #1F1E1B; +} + +.record_display_box form .buttons { + margin: 5px; + text-align: right; +} + +.record_display_box form { + margin: 15px 0; + width: 90%; +} + +.record_display_box form textarea { + width: 100%; + height: 75px; +} + +#navigation { + width: 200px; +} + +.basket_downloader { + background-color: #1F1E1B; + margin: 0 10px; + padding: 2px; + border: 0; +} + +hr { + width: 100%; + height: 1px; + background-color: #212121; + border: none; +} + +.report { + margin: 0 10px; + vertical-align: bottom; +} + +/* +* +* Overrides JqueryUI +* +*/ +.ui-button { + background: transparent; + border: none; + margin: 0; + padding: 0; +} + +.ui-button-text-only .ui-button-text { + padding: 0.15em; +} + +.ui-dialog { + .ui-dialog-titlebar { + padding: 1em 1em; + } +} +.videoTips { + width: 100%; + height: 100%; +} + + +#basket_infos { + margin-bottom: 20px; + .mobile_aggreement_box { + padding: 20px; + } +} + +.ui-button-icon.ui-icon.ui-icon-closethick { + background-position: -73px 0px; + background-color: rgba(0,0,0,.9); + padding: 0; +} + +button.confirm_report.ui-button.ui-corner-all.ui-widget { + color: #fff; + font-size: 12.5px; + font-weight: bold; + padding: 11px; + display: inline-block; + width: auto!important; + background: #333; + background-image: linear-gradient(#444,#2d2d2d); + border: 1px solid rgba(255,255,255,.3); + text-shadow: 0 1px 0 #111; + border-radius: 16px; +} +.report_wrapper { + position: relative; +} +.report_btn { + position: absolute; + top: -41px; + right: 0; + z-index: 1; + background: #8bc34a; + border: 1px solid #8bc34a; + box-sizing: border-box; + padding: 8px 13px; + min-width: 110px; + border-radius: 4px; + color: #fff!important; + text-decoration: none; + text-align: center; + transition: all 0.3s; + &:hover, &:focus { + background: darken(#8bc34a, 0.2); + border-color: darken(#8bc34a, 0.3); + } + &.report_list { + background: #f44336; + border-color: #f44336; + &:hover, &:focus { + background: darken(#f44336, 0.2); + border-color: darken(#f44336, 0.3); + } + } +} +.report_list { + display: none; +} +.report_summary_backup , .report_list_backup { + display: none; +} + + +.chim-wrapper-block { + .chim-block { + margin: 0; + } + .chim-inner { + width: 100%; + display: inline-block; + min-width: 296px; + } + .chim-left { + float: left; + margin-right: 10px; + width:30%; + .diapo { + div { + max-width: 100%; + } + } + } + + .chim-right { + float: left; + width: calc(70% - 10px); + } +} + +.thumb_wrapper img.record_image { + max-width: 100%; +} diff --git a/templates/mobile/lightbox/sc_note.html.twig b/templates/mobile/lightbox/sc_note.html.twig index c987560a99..eb6f48d1d7 100644 --- a/templates/mobile/lightbox/sc_note.html.twig +++ b/templates/mobile/lightbox/sc_note.html.twig @@ -1,9 +1,7 @@ {% for validationDatas in basket_element.getValidationDatas() %} - {% set is_mine = validationDatas.getParticipant().getUser().getId() == app.getAuthenticatedUser().getId() %} - {% if validationDatas.getNote() != '' or (validationDatas.getAgreement() is not null and is_mine) %}

  • - {% if is_mine == false and validationDatas.getAgreement() is not null %} + {% if validationDatas.getAgreement() is not null %} {% endif %} @@ -13,5 +11,4 @@

    {{ 'validation:: note' | trans }} : {{ validationDatas.getNote()|nl2br }}

    {% endif %}

    • - {% endif %} {% endfor %} diff --git a/templates/mobile/lightbox/validate.html.twig b/templates/mobile/lightbox/validate.html.twig index b06c6e7728..77030e8f17 100644 --- a/templates/mobile/lightbox/validate.html.twig +++ b/templates/mobile/lightbox/validate.html.twig @@ -38,21 +38,53 @@ {% set basket_length = basket.getElements().count() %} {% trans with {'%basket_length%' : basket_length} %}%basket_length% documents{% endtrans %}

    - - + +
     
    +
     
    {% if basket.getValidation() and basket.getValidation().getParticipant(app.getAuthenticatedUser()).getCanAgree() %}
    -
    + +
    {% endfor %}