Evarisk#1775 [PublicAnswer add: improve design without pico.min

nicolas-eoxia · Jul 24, 2024 · cca9946 · cca9946
1 parent 58f6792
commit cca9946
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 26 deletions.
diff --git a/core/tpl/digiquali_answers.tpl.php b/core/tpl/digiquali_answers.tpl.php
@@ -59,9 +59,11 @@
                                 } ?>
                             </div>
                             <?php if ($question->type == 'Text') : ?>
-                                <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>
+                            <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 . '">'; ?>
                             <?php endif; ?>
                             <?php if ($question->enter_comment > 0) : ?>
                                 <?php print $langs->trans('Comment') . ' : '; ?>
@@ -153,7 +155,7 @@
                     <?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_3em', 'class="range-image"');
+                            print img_picto('', 'fontawesome_fa-frown_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_3em', 'class="range-image"');
                             ?>

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
@@ -1,4 +1,4 @@
-.question-answer-container {
+ .question-answer-container-pwa {
   .description {
     text-align: center;
     color: #4B4F5A;
@@ -27,40 +27,57 @@
 
   input[type=range] {
     width: 100%;
+    appearance: none;
     cursor: pointer;
-    margin-bottom: 0;
+    padding: 0;
+    border: 0;
+    outline: none;
+
+    &:disabled {
+       background: 0;
+    }
   }
+
   input[type=range]::-webkit-slider-thumb {
-    width: 3em;
-    height: 3em;
+    appearance: none;
+    width: 60px;
+    height: 60px;
+    margin-top: -10px;
     border: solid #F5F5F5;
+    border-radius: 50%;
     background: #0d8aff;
+    transition: transform 0.3s ease-in-out;
+
+    &:hover {
+      transform: scale(1.15);
+    }
   }
+
   input[type=range]::-webkit-slider-runnable-track {
     border-radius: 50px;
     height: 35px;
     background: linear-gradient(90deg, #D53C3D 0%, #ED911D 25%, #F2C32E 50%, #92D444 75%, #57AD39 100%);
+    transition: transform 0.3s ease-in-out;
   }
 
   input[type=range]::-moz-range-thumb {
-    width: 3em;
-    height: 3em;
+    appearance: none;
+    width: 60px;
+    height: 60px;
+    margin-top: -10px;
     border: solid #F5F5F5;
+    border-radius: 50%;
     background: #0d8aff;
+    transition: transform 0.3s ease-in-out;
+
+    &:hover {
+      transform: scale(1.15);
+    }
   }
+
   input[type=range]::-moz-range-track {
     border-radius: 50px;
     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;
-}
diff --git a/public/public_answer.php b/public/public_answer.php
@@ -142,21 +142,20 @@
  * View
  */
 
-$title   = $langs->trans('PublicAnswer');
-$moreJS  = ['/saturne/js/includes/signature-pad.min.js'];
-$moreCSS = ['/saturne/css/pico.min.css'];
+$title  = $langs->trans('PublicAnswer');
+$moreJS = ['/saturne/js/includes/signature-pad.min.js'];
 
 $conf->dol_hide_topmenu  = 1;
 $conf->dol_hide_leftmenu = 1;
 
-saturne_header(1,'', $title, '', '', 0, 0, $moreJS, $moreCSS, '', 'page-public-card page-signature');
+saturne_header(1,'', $title, '', '', 0, 0, $moreJS, [], '', 'page-public-card page-signature');
 
 print '<form method="POST" action="' . $_SERVER['PHP_SELF'] . '?action=save&id=' . $object->id . '&track_id=' . $trackID . '&object_type=' . $object->element . '&document_type=' . $documentType . '&entity=' . $conf->entity . '" id="saveObject" enctype="multipart/form-data">';
 print '<input type="hidden" name="token" value="' . newToken() . '">';
 print '<input type="hidden" name="public_interface" value="true">';
 print '<input type="hidden" name="action" value="save">';
 
-print '<div id="tablelines" class="question-answer-container public-card__container" data-public-interface="true" style="max-width: 1000px; margin-bottom: 4em;">';
+print '<div id="tablelines" class="question-answer-container-pwa public-card__container" data-public-interface="true" style="max-width: 1000px; margin-bottom: 4em;">';
 $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);