#1775 [PublicAnswer add: improve design

Evarisk · Jul 23, 2024 · 58f6792 · 58f6792
1 parent 0893c7d
commit 58f6792
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 56 deletions.
diff --git a/admin/publicinterface.php b/admin/publicinterface.php
@@ -124,20 +124,24 @@
 $dolEditor->Create();
 print '</td></tr>';
 
-// Use signatory
-print '<tr class="oddeven"><td>';
-print $langs->transnoentities('AnswerPublicInterfaceUseSignatory');
-print '</td><td>';
-print $langs->transnoentities('AnswerPublicInterfaceUseSignatoryDescription');
-print '</td>';
-print '<td class="center">';
-print ajax_constantonoff('DIGIQUALI_ANSWER_PUBLIC_INTERFACE_USE_SIGNATORY');
-print '</td><td></td></tr>';
-
 print '</table>';
 print $form->buttonsSaveCancel('Save', '');
 print '</form>';
 
+$constArray['digiquali'] = [
+    'AnswerPublicInterfaceUseSignatory' => [
+        'name'        => 'AnswerPublicInterfaceUseSignatory',
+        'description' => 'AnswerPublicInterfaceUseSignatoryDescription',
+        'code'        => 'DIGIQUALI_ANSWER_PUBLIC_INTERFACE_USE_SIGNATORY',
+    ],
+    'AnswerPublicInterfaceShowTitle' => [
+        'name'        => 'AnswerPublicInterfaceShowTitle',
+        'description' => 'AnswerPublicInterfaceShowTitleDescription',
+        'code'        => 'DIGIQUALI_ANSWER_PUBLIC_INTERFACE_SHOW_TITLE',
+    ]
+];
+require __DIR__ . '/../../saturne/core/tpl/admin/object/object_const_view.tpl.php';
+
 // Page end
 print dol_get_fiche_end();
 llxFooter();

diff --git a/core/tpl/digiquali_answers.tpl.php b/core/tpl/digiquali_answers.tpl.php
@@ -59,11 +59,8 @@
                                 } ?>
                             </div>
                             <?php if ($question->type == 'Text') : ?>
-                                <div class="<?php echo ($object->status > 0) ? 'style="pointer-events: none"' : '' ?>">
-                                    <?php
-                                    print '<span>' . $langs->trans('Answer') . ' : </span>';
-                                    $object->status > $object::STATUS_DRAFT ? print $questionAnswer :
-                                    print '<input' . ($object->status > $object::STATUS_DRAFT ? ' disabled' : '') . ' name="answer' . $question->id . '" id="answer' . $question->id . '"class="question-textarea input-answer ' . ($object->status > 0 ? 'disable' : '') . '" value="' . $questionAnswer . '">'; ?>
+                                <div>
+                                    <textarea name="answer<?php echo $question->id; ?>'" id="answer<?php echo $question->id; ?>'" rows="3" placeholder="<?php echo $langs->trans('Comment'); ?>" <?php echo $object->status > $object::STATUS_DRAFT ? ' disabled' : ''; ?>><?php echo $questionAnswer; ?></textarea>
                                 </div>
                             <?php endif; ?>
                             <?php if ($question->enter_comment > 0) : ?>
@@ -156,9 +153,9 @@
                     <?php elseif ($question->type == 'Percentage') : ?>
                         <div class="table-cell answer-cell table-flex table-full percentage-cell <?php echo ($object->status > 0) ? 'style="pointer-events: none"' : '' ?>" data-questionId="<?php echo $question->id; ?>">
                             <?php
-                            print img_picto('', 'fontawesome_fa-frown-open_fas_#D53C3D_2em', 'class="range-image"');
+                            print img_picto('', 'fontawesome_fa-frown-open_fas_#D53C3D_3em', 'class="range-image"');
                             print '<input type="range" class="search_component_input range input-answer ' . ($object->status > 0 ? 'disable' : '') . ' ' . ($questionAnswer == $answerLinked->position ? 'active' : '') . '" name="answer' . $question->id . '" id="answer' . $question->id . '" min="0" max="100" step="25" value="' . $questionAnswer . '"' . ($object->status > $object::STATUS_DRAFT ? ' disabled' : '') . '>';
-                            print img_picto('', 'fontawesome_fa-grin_fas_#57AD39_2em', 'class="range-image"');
+                            print img_picto('', 'fontawesome_fa-grin_fas_#57AD39_3em', 'class="range-image"');
                             ?>
                         </div>
                     <?php elseif ($question->type == 'Range') : ?>

diff --git a/css/digiquali.min.css b/css/digiquali.min.css
diff --git a/css/scss/page/_question-answer.scss b/css/scss/page/_question-answer.scss
@@ -8,60 +8,59 @@
 
   .label {
     text-align: center;
-    color: #002475;
-    font-size: 32px;
-    margin: 20px 0 20px 0;
-  }
-
-  .table-cell.percentage-cell {
-    margin-bottom: 3em;
+    color: #0d8aff;
+    font-size: 25px;
+    margin: 10px 0 10px 0;
   }
 
   .percentage-cell {
+    width: 100%;
     display: flex;
-    justify-content: space-around;
+    justify-content: center;
     align-items: center;
+    flex-direction: row;
+
+    .range-image {
+      padding: 0 0.5em 0 0.5em;
+    }
   }
 
   input[type=range] {
-    -webkit-appearance: none;
-    appearance: none;
-    padding: 0;
-    width: 50%;
+    width: 100%;
     cursor: pointer;
-    background-color: transparent;
-    border: 0;
+    margin-bottom: 0;
   }
-
   input[type=range]::-webkit-slider-thumb {
-    appearance: none;
-    width: 4em;
-    height: 4em;
+    width: 3em;
+    height: 3em;
     border: solid #F5F5F5;
-    border-radius: 50%;
-    background: #FFF;
-    position: relative;
-    bottom: 15px;
+    background: #0d8aff;
   }
   input[type=range]::-webkit-slider-runnable-track {
     border-radius: 50px;
-    height: 30px;
+    height: 35px;
     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;
+    width: 3em;
+    height: 3em;
     border: solid #F5F5F5;
-    border-radius: 50%;
-    background: #FFF;
-    position: relative;
-    bottom: 15px;
+    background: #0d8aff;
   }
   input[type=range]::-moz-range-track {
     border-radius: 50px;
-    height: 30px;
+    height: 35px;
     background: linear-gradient(90deg, #D53C3D 0%, #ED911D 25%, #F2C32E 50%, #92D444 75%, #57AD39 100%);
   }
 }
+
+:root {
+  background: none;
+}
+
+input, textarea {
+  background-color: #ebf0f8;
+  color: #0d8aff;
+  --form-element-placeholder-color: #0d8aff;
+}