Evarisk#1775 [PublicAnswer] add: improve design desktop and mobile

core/tpl/digiquali_answers.tpl.php

@@ -59,11 +59,10 @@
                                 } ?>
                             </div>
                             <?php if ($question->type == 'Text') : ?>
-                            <div class="<?php echo ($object->status > 0) ? 'style="pointer-events: none"' : '' ?>">
+                            <div class="question-answer-text">
                                 <?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 . '">'; ?>
+                                    print '<textarea' . ($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 . '"></textarea>'; ?>
                             <?php endif; ?>
                             <?php if ($question->enter_comment > 0) : ?>
                                 <?php print $langs->trans('Comment') . ' : '; ?>

css/scss/page/_question-answer.scss

@@ -1,16 +1,23 @@
  .question-answer-container-pwa {
-  .description {
-    text-align: center;
+  .page-title {
+    font-weight: 600;
+    font-size: 1.3em;
+    max-width: 800px;
     color: #4B4F5A;
-    font-size: 24px;
-    margin-top: 20px;
+    margin-bottom: 1.5em;
   }
 
+   .wpeo-table.table-flex .table-row:not(.table-header):nth-of-type(odd) {
+      background: none;
+   }
+
   .label {
     text-align: center;
-    color: #0d8aff;
-    font-size: 25px;
+    color: #002475;
+    font-size: 1.5em;
     margin: 10px 0 10px 0;
+    font-weight: 500;
+    font-family: var(--font-family);
   }
 
   .percentage-cell {
@@ -32,30 +39,28 @@
     padding: 0;
     border: 0;
     outline: none;
-
-    &:disabled {
-       background: 0;
-    }
+    margin: 0;
+    box-shadow: none;
   }
 
   input[type=range]::-webkit-slider-thumb {
     appearance: none;
     width: 60px;
     height: 60px;
-    margin-top: -10px;
-    border: solid #F5F5F5;
-    border-radius: 50%;
+    margin-top: -20px;
+    border: 10px solid #fff;
+    box-shadow: 0 4px 4px 0 rgba(0,0,0,0.25), 0 0 0 1px #c7c5c5;
     background: #0d8aff;
-    transition: transform 0.3s ease-in-out;
+    transition: transform 0.1s ease-in-out;
 
     &:hover {
-      transform: scale(1.15);
+      transform: scale(1.05);
     }
   }
 
   input[type=range]::-webkit-slider-runnable-track {
     border-radius: 50px;
-    height: 35px;
+    height: 20px;
     background: linear-gradient(90deg, #D53C3D 0%, #ED911D 25%, #F2C32E 50%, #92D444 75%, #57AD39 100%);
     transition: transform 0.3s ease-in-out;
   }
@@ -80,4 +85,65 @@
     height: 35px;
     background: linear-gradient(90deg, #D53C3D 0%, #ED911D 25%, #F2C32E 50%, #92D444 75%, #57AD39 100%);
   }
+
+   input, textarea {
+     background: #ebf0f8;
+     border: 0;
+     border-radius: 10px;
+     box-shadow: 0 4px 4px 0 #dfe5e4;
+   }
+   input:focus:not(.button):not(.buttonwebsite):not(.buttonreset):not(.select2-search__field):not(#top-bookmark-search-input):not(.search_component_input):not(.input-search-takepos) {
+     border-bottom: 0 !important;
+     border-bottom-left-radius: 10px !important;
+     border-bottom-right-radius: 10px !important;
+   }
+
+   .public-card__footer {
+     text-align: center !important;
+
+     .wpeo-button {
+       width: auto;
+     }
+   }
+
+   .question-answer-text {
+     text-align: center;
+      font-size: 1.3em;
+   }
 }
+
+ @media ( max-width: $media__small ) {
+   .question-answer-container-pwa {
+     padding: 1em !important;
+
+     .answer-cell {
+       .range-image:nth-of-type(1) {
+         padding-left: 0;
+         padding-right: 0.2em;
+       }
+       .range-image:nth-of-type(2) {
+         padding-right: 0;
+         padding-left: 0.2em;
+       }
+       .range-image {
+         vertical-align: middle;
+         line-height: 0;
+
+          &::before {
+            font-size: 25px;
+          }
+       }
+     }
+
+     input[type=range]::-webkit-slider-thumb {
+      width: 30px;
+      height: 30px;
+      margin-top: -5px;
+       border: 6px solid #fff;
+     }
+
+     .label {
+       font-size: 1.2em;
+     }
+   }
+ }

css/scss/style.scss

@@ -15,4 +15,7 @@
   border: 5px solid #0d8aff;
 }
 
-
+// Pico fix
+:where(:root) {
+  background: none;
+}