From 0893c7d74d68bc4e815132754aede345f0e98eb7 Mon Sep 17 00:00:00 2001 From: Nicolas Domenech Date: Wed, 22 May 2024 08:54:25 +0200 Subject: [PATCH] #1775 [PublicAnswer] add: rework IHM --- core/tpl/digiquali_answers.tpl.php | 27 ++++++------ css/digiquali.min.css | 2 +- css/scss/page/_control.scss | 4 +- css/scss/page/_page.scss | 1 + css/scss/page/_question-answer.scss | 67 +++++++++++++++++++++++++++++ public/public_answer.php | 6 ++- 6 files changed, 88 insertions(+), 19 deletions(-) create mode 100644 css/scss/page/_question-answer.scss diff --git a/core/tpl/digiquali_answers.tpl.php b/core/tpl/digiquali_answers.tpl.php index e75758a9..30ebcad6 100644 --- a/core/tpl/digiquali_answers.tpl.php +++ b/core/tpl/digiquali_answers.tpl.php @@ -45,13 +45,17 @@
-
getNomUrl(1, isset($publicInterface) ? 'nolink' : '', 1, '', -1, 1); ?>
description; ?>
+ +
getNomUrl(1, '', 1, '', -1, 1); ?>
+ +
label; ?>
+
ref) ) { - print '' . $objectLine->ref . ' :'; + if (!empty($objectLine->ref && !isset($publicInterface)) ) { + print '' . $objectLine->ref . ' :'; } ?>
type == 'Text') : ?> @@ -74,14 +78,12 @@
- - show_photo > 0) : ?> + show_photo > 0 && getDolGlobalInt('DIGIQUALI_' . dol_strtoupper($object->element) . '_DISPLAY_MEDIAS')) : ?> +
element) . '_DISPLAY_MEDIAS')) : print saturne_show_medias_linked('digiquali', $conf->digiquali->multidir_output[$conf->entity] . '/question/'. $question->ref . '/photo_ok', 'small', '', 0, 0, 0, 200, 200, 0, 0, 0, 'question/' . $question->ref . '/photo_ok', $question, 'photo_ok', 0, 0, 0,1, 'photo-ok', 0); print saturne_show_medias_linked('digiquali', $conf->digiquali->multidir_output[$conf->entity] . '/question/'. $question->ref . '/photo_ko', 'small', '', 0, 0, 0, 200, 200, 0, 0, 0, 'question/' . $question->ref . '/photo_ko', $question, 'photo_ko', 0, 0, 0,1, 'photo-ko', 0); - endif; ?>
@@ -152,14 +154,11 @@ } ?>
type == 'Percentage') : ?> -
" data-questionId="id; ?>"> +
" data-questionId="id; ?>"> '; - print $langs->transnoentities('Answer') . ' : '; - print ''; - print ''; - print 'status > $object::STATUS_DRAFT ? ' disabled' : '') . ' name="answer' . $question->id . '" id="answer' . $question->id . '" type="number" min="0" max="100" class="input-answer ' . ($object->status > 0 ? 'disable' : '') . ' ' . ($questionAnswer == $answerLinked->position ? 'active' : '') . '" value="' . $questionAnswer . '"> %'; - print ''; + print img_picto('', 'fontawesome_fa-frown-open_fas_#D53C3D_2em', 'class="range-image"'); + print 'status > $object::STATUS_DRAFT ? ' disabled' : '') . '>'; + print img_picto('', 'fontawesome_fa-grin_fas_#57AD39_2em', 'class="range-image"'); ?>
type == 'Range') : ?> diff --git a/css/digiquali.min.css b/css/digiquali.min.css index 33acca0a..62bc82c5 100644 --- a/css/digiquali.min.css +++ b/css/digiquali.min.css @@ -1 +1 @@ -.question-answer-container *{box-sizing:border-box}.question-answer-container.multiselect{margin-top:-60px}.question-answer-container.multiselect>.wpeo-table{background:none !important}.question-answer-container.multiselect .table-cell{padding-top:0}.question-answer-container .wpeo-table.table-flex .table-row:not(.table-header):nth-of-type(odd){background:none}.question-answer-container .table-cell{margin-top:0 !important}.question-answer-container>.wpeo-table{border-bottom:1px solid rgba(0,0,0,.2)}.question-answer-container>.wpeo-table:nth-of-type(odd){background:rgba(38,60,92,.15)}.question-answer-container>.wpeo-table .cell-photo-check{text-align:right}@media(max-width: 600px){.question-answer-container>.wpeo-table .cell-photo-check{text-align:center}}.question-answer-container>.wpeo-table .question-photo-check{margin:0 4px;display:inline-block;position:relative}.question-answer-container>.wpeo-table .question-photo-check img{display:block;margin:0;width:200px;height:200px;background-size:cover}.question-answer-container>.wpeo-table .question-photo-check i{position:absolute;bottom:10px;right:10px;font-size:35px}.question-answer-container>.wpeo-table .question-photo-check.ko i{color:#e05353}.question-answer-container>.wpeo-table .question-photo-check.ok i{color:#47e58e}.question-answer-container>.wpeo-table .photo{margin:0 4px}.question-answer-container>.wpeo-table .photo.photo-ok{border:5px solid #47e58e}.question-answer-container>.wpeo-table .photo.photo-ko{border:5px solid #e05353}.question-answer-container>.wpeo-table .linked-medias{display:flex;gap:0 10px;flex-wrap:wrap}.question-answer-container>.wpeo-table .answer{display:inline-block;width:50px;height:50px;line-height:50px;font-size:18px;margin:0 4px;text-align:center;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.4);transition:all .2s ease-out}@media(max-width: 600px){.question-answer-container>.wpeo-table .answer{width:60px;height:60px;line-height:60px;font-size:25px}}.question-answer-container>.wpeo-table .answer.square{border-radius:10%}.question-answer-container>.wpeo-table .answer:hover{cursor:pointer}.question-answer-container>.wpeo-table .answer.active{color:#fff !important}.question-answer-container>.wpeo-table .question-comment-container{margin-top:10px}.question-answer-container>.wpeo-table .question-comment-container .question-ref{font-size:13px;font-weight:700}.question-answer-container>.wpeo-table .question-comment-container .question-textarea{width:100%;background:#fff;border:1px solid rgba(0,0,0,.2);padding:1em 1.4em}.confirmquestions .answer{display:inline-block;width:30px;height:30px;line-height:30px;margin:0 4px;text-align:center;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.4);-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.confirmquestions .answer:hover{cursor:pointer}.confirmquestions .answer[value="1"]{color:#47e58e}.confirmquestions .answer[value="2"]{color:#e05353}.confirmquestions .answer[value="3"]{color:#e9ad4f}.confirmquestions .answer[value="4"]{color:rgba(0,0,0,.7);font-weight:700}.confirmquestions input[readonly]{border:0;width:100%;pointer-events:none}.confirmquestions input[readonly]:hover{cursor:default}.element-list-medias .question-section{display:block;margin-bottom:20px}.element-list-medias .question-section::after{display:block;content:"";clear:both}.element-list-medias .question-ref{font-weight:800;display:block;clear:both}.element-list-medias .media-container{display:block;float:left;margin-right:10px;margin-bottom:10px}.element-list-medias .media-container a{transition:all .2s ease-out}.element-list-medias .media-container a:hover{opacity:.8}.element-list-medias .media-container .photo{width:100%;height:100%;object-fit:cover}.question-table .linked-medias-list{display:flex;gap:10px;height:auto !important}@media(max-width: 500px){.question-table .linked-medias-list{flex-wrap:wrap}}@media(max-width: 500px){div.tabBar table.border.question-table tr.linked-medias,div.tabBar table.border.question-table tr.linked-medias .linked-medias-list{height:auto !important}}div.mainmenu.digiquali{background-image:none}div.mainmenu.digiquali::before{content:""}@media(max-width: 600px){div.tabsAction>span.butAction,div.tabsAction>span.butActionRefused,div.tabsAction>a.butAction,div.tabsAction>a.butActionDelete{padding:14px}}.dashboard-control{width:40px;height:40px;border-radius:6px;text-align:center;color:#fff;font-weight:900;font-size:14px;line-height:.9;padding:7px 2px;pointer-events:none}.progress-info{display:flex;align-items:center}.progress-info .progress-bar{width:100%;height:20px;background-color:#ddd;border-radius:5px}.progress-info .progress{width:50%;height:100%;border-radius:5px;transition:width .3s}.sheet-images-container .sheet-grid-images{display:flex;flex-wrap:wrap;gap:.8em}.sheet-images-container .sheet-grid-images img{object-fit:cover;border:3px solid #fff;transition:all .2s ease-out}.sheet-images-container .sheet-grid-images img:hover{cursor:pointer;opacity:.6}.preview-photo{z-index:2100 !important}.dropdown-toggle::after{display:none}.favorite-photo{border:5px solid #0d8aff} \ No newline at end of file +.question-answer-container *{box-sizing:border-box}.question-answer-container.multiselect{margin-top:-60px}.question-answer-container.multiselect>.wpeo-table{background:none !important}.question-answer-container.multiselect .table-cell{padding-top:0}.question-answer-container .wpeo-table.table-flex .table-row:not(.table-header):nth-of-type(odd){background:none}.question-answer-container .table-cell{margin-top:0 !important}.question-answer-container>.wpeo-table .cell-photo-check{text-align:right}@media(max-width: 600px){.question-answer-container>.wpeo-table .cell-photo-check{text-align:center}}.question-answer-container>.wpeo-table .question-photo-check{margin:0 4px;display:inline-block;position:relative}.question-answer-container>.wpeo-table .question-photo-check img{display:block;margin:0;width:200px;height:200px;background-size:cover}.question-answer-container>.wpeo-table .question-photo-check i{position:absolute;bottom:10px;right:10px;font-size:35px}.question-answer-container>.wpeo-table .question-photo-check.ko i{color:#e05353}.question-answer-container>.wpeo-table .question-photo-check.ok i{color:#47e58e}.question-answer-container>.wpeo-table .photo{margin:0 4px}.question-answer-container>.wpeo-table .photo.photo-ok{border:5px solid #47e58e}.question-answer-container>.wpeo-table .photo.photo-ko{border:5px solid #e05353}.question-answer-container>.wpeo-table .linked-medias{display:flex;gap:0 10px;flex-wrap:wrap}.question-answer-container>.wpeo-table .answer{display:inline-block;width:50px;height:50px;line-height:50px;font-size:18px;margin:0 4px;text-align:center;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.4);transition:all .2s ease-out}@media(max-width: 600px){.question-answer-container>.wpeo-table .answer{width:60px;height:60px;line-height:60px;font-size:25px}}.question-answer-container>.wpeo-table .answer.square{border-radius:10%}.question-answer-container>.wpeo-table .answer:hover{cursor:pointer}.question-answer-container>.wpeo-table .answer.active{color:#fff !important}.question-answer-container>.wpeo-table .question-comment-container{margin-top:10px}.question-answer-container>.wpeo-table .question-comment-container .question-ref{font-size:13px;font-weight:700}.question-answer-container>.wpeo-table .question-comment-container .question-textarea{width:100%;background:#fff;border:1px solid rgba(0,0,0,.2);padding:1em 1.4em}.confirmquestions .answer{display:inline-block;width:30px;height:30px;line-height:30px;margin:0 4px;text-align:center;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.4);-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.confirmquestions .answer:hover{cursor:pointer}.confirmquestions .answer[value="1"]{color:#47e58e}.confirmquestions .answer[value="2"]{color:#e05353}.confirmquestions .answer[value="3"]{color:#e9ad4f}.confirmquestions .answer[value="4"]{color:rgba(0,0,0,.7);font-weight:700}.confirmquestions input[readonly]{border:0;width:100%;pointer-events:none}.confirmquestions input[readonly]:hover{cursor:default}.element-list-medias .question-section{display:block;margin-bottom:20px}.element-list-medias .question-section::after{display:block;content:"";clear:both}.element-list-medias .question-ref{font-weight:800;display:block;clear:both}.element-list-medias .media-container{display:block;float:left;margin-right:10px;margin-bottom:10px}.element-list-medias .media-container a{transition:all .2s ease-out}.element-list-medias .media-container a:hover{opacity:.8}.element-list-medias .media-container .photo{width:100%;height:100%;object-fit:cover}.question-table .linked-medias-list{display:flex;gap:10px;height:auto !important}@media(max-width: 500px){.question-table .linked-medias-list{flex-wrap:wrap}}@media(max-width: 500px){div.tabBar table.border.question-table tr.linked-medias,div.tabBar table.border.question-table tr.linked-medias .linked-medias-list{height:auto !important}}.question-answer-container .description{text-align:center;color:#4b4f5a;font-size:24px;margin-top:20px}.question-answer-container .label{text-align:center;color:#002475;font-size:32px;margin:20px 0 20px 0}.question-answer-container .table-cell.percentage-cell{margin-bottom:3em}.question-answer-container .percentage-cell{display:flex;justify-content:space-around;align-items:center}.question-answer-container input[type=range]{-webkit-appearance:none;appearance:none;padding:0;width:50%;cursor:pointer;background-color:rgba(0,0,0,0);border:0}.question-answer-container input[type=range]::-webkit-slider-thumb{appearance:none;width:4em;height:4em;border:solid #f5f5f5;border-radius:50%;background:#fff;position:relative;bottom:15px}.question-answer-container input[type=range]::-webkit-slider-runnable-track{border-radius:50px;height:30px;background:linear-gradient(90deg, #D53C3D 0%, #ED911D 25%, #F2C32E 50%, #92D444 75%, #57AD39 100%)}.question-answer-container input[type=range]::-moz-range-thumb{appearance:none;width:4em;height:4em;border:solid #f5f5f5;border-radius:50%;background:#fff;position:relative;bottom:15px}.question-answer-container input[type=range]::-moz-range-track{border-radius:50px;height:30px;background:linear-gradient(90deg, #D53C3D 0%, #ED911D 25%, #F2C32E 50%, #92D444 75%, #57AD39 100%)}div.mainmenu.digiquali{background-image:none}div.mainmenu.digiquali::before{content:""}@media(max-width: 600px){div.tabsAction>span.butAction,div.tabsAction>span.butActionRefused,div.tabsAction>a.butAction,div.tabsAction>a.butActionDelete{padding:14px}}.dashboard-control{width:40px;height:40px;border-radius:6px;text-align:center;color:#fff;font-weight:900;font-size:14px;line-height:.9;padding:7px 2px;pointer-events:none}.progress-info{display:flex;align-items:center}.progress-info .progress-bar{width:100%;height:20px;background-color:#ddd;border-radius:5px}.progress-info .progress{width:50%;height:100%;border-radius:5px;transition:width .3s}.sheet-images-container .sheet-grid-images{display:flex;flex-wrap:wrap;gap:.8em}.sheet-images-container .sheet-grid-images img{object-fit:cover;border:3px solid #fff;transition:all .2s ease-out}.sheet-images-container .sheet-grid-images img:hover{cursor:pointer;opacity:.6}.preview-photo{z-index:2100 !important}.dropdown-toggle::after{display:none}.favorite-photo{border:5px solid #0d8aff} \ No newline at end of file diff --git a/css/scss/page/_control.scss b/css/scss/page/_control.scss index 60143cfa..ba0d0fe8 100644 --- a/css/scss/page/_control.scss +++ b/css/scss/page/_control.scss @@ -21,12 +21,12 @@ margin-top: 0 !important; } > .wpeo-table { - border-bottom: 1px solid rgba(0,0,0,0.2); + //border-bottom: 1px solid rgba(0,0,0,0.2); &:nth-of-type(odd) { //background: rgba(0,0,0,0.1); //background: rgba(155,117,166,0.3); - background: rgba(38,60,92,0.15); + //background: rgba(38,60,92,0.15); } .cell-photo-check { diff --git a/css/scss/page/_page.scss b/css/scss/page/_page.scss index d3c89ef6..524b1521 100644 --- a/css/scss/page/_page.scss +++ b/css/scss/page/_page.scss @@ -1,3 +1,4 @@ @import "control"; @import "element-medias"; @import "question-add"; +@import "question-answer"; diff --git a/css/scss/page/_question-answer.scss b/css/scss/page/_question-answer.scss new file mode 100644 index 00000000..61fcc203 --- /dev/null +++ b/css/scss/page/_question-answer.scss @@ -0,0 +1,67 @@ +.question-answer-container { + .description { + text-align: center; + color: #4B4F5A; + font-size: 24px; + margin-top: 20px; + } + + .label { + text-align: center; + color: #002475; + font-size: 32px; + margin: 20px 0 20px 0; + } + + .table-cell.percentage-cell { + margin-bottom: 3em; + } + + .percentage-cell { + display: flex; + justify-content: space-around; + align-items: center; + } + + input[type=range] { + -webkit-appearance: none; + appearance: none; + padding: 0; + width: 50%; + cursor: pointer; + background-color: transparent; + border: 0; + } + + input[type=range]::-webkit-slider-thumb { + appearance: none; + width: 4em; + height: 4em; + border: solid #F5F5F5; + border-radius: 50%; + background: #FFF; + position: relative; + bottom: 15px; + } + input[type=range]::-webkit-slider-runnable-track { + border-radius: 50px; + height: 30px; + background: linear-gradient(90deg, #D53C3D 0%, #ED911D 25%, #F2C32E 50%, #92D444 75%, #57AD39 100%); + } + + input[type=range]::-moz-range-thumb { + appearance: none; + width: 4em; + height: 4em; + border: solid #F5F5F5; + border-radius: 50%; + background: #FFF; + position: relative; + bottom: 15px; + } + input[type=range]::-moz-range-track { + border-radius: 50px; + height: 30px; + background: linear-gradient(90deg, #D53C3D 0%, #ED911D 25%, #F2C32E 50%, #92D444 75%, #57AD39 100%); + } +} diff --git a/public/public_answer.php b/public/public_answer.php index bd070339..07a1e7e7 100644 --- a/public/public_answer.php +++ b/public/public_answer.php @@ -159,8 +159,8 @@ $substitutionArray = getCommonSubstitutionArray($langs, 0, null, $object); complete_substitutions_array($substitutionArray, $langs, $object); $answerPublicInterfaceTitle = make_substitutions($langs->transnoentities($conf->global->DIGIQUALI_ANSWER_PUBLIC_INTERFACE_TITLE), $substitutionArray); -print '

' . (dol_strlen($answerPublicInterfaceTitle) > 0 ? $answerPublicInterfaceTitle : $langs->transnoentities('AnswerPublicInterface')) . '

'; -print '
'; +//print '

' . (dol_strlen($answerPublicInterfaceTitle) > 0 ? $answerPublicInterfaceTitle : $langs->transnoentities('AnswerPublicInterface')) . '

'; +//print '
'; $publicInterface = true; $sheet->fetchObjectLinked($object->fk_sheet, 'digiquali_' . $sheet->element, null, '', 'OR', 1, 'position'); require_once __DIR__ . '/../core/tpl/digiquali_answers.tpl.php'; @@ -179,6 +179,8 @@ print '
'; } print ''; +print ''; +print ''; print ''; llxFooter('', 'public');