dev: Introduce the CSS class widget--small

Some widgets (e.g. inputs or select boxes) have smaller importance compared to others. The .widget--small class allows to make them less visible.
Probesys · Jun 4, 2024 · 9077d7e · 9077d7e
1 parent cd47d0f
commit 9077d7e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 23 deletions.
diff --git a/assets/stylesheets/components/forms.css b/assets/stylesheets/components/forms.css
@@ -257,6 +257,10 @@ select[aria-invalid] {
     border-color: var(--form-border-color-error);
 }
 
+.widget--small {
+    --form-padding: var(--space-smaller) var(--space-medium);
+}
+
 fieldset {
     min-width: auto;
     padding-right: var(--space-small);

diff --git a/assets/stylesheets/custom/tickets-show.css b/assets/stylesheets/custom/tickets-show.css
@@ -10,12 +10,4 @@
 
 .tickets-show .answer__select-answer-type {
     width: auto;
-    padding-top: var(--space-smaller);
-    padding-bottom: var(--space-smaller);
-}
-
-.tickets-show .answer__input-time-spent {
-    width: 6rem;
-    padding-top: var(--space-smaller);
-    padding-bottom: var(--space-smaller);
 }
diff --git a/templates/tickets/show.html.twig b/templates/tickets/show.html.twig
@@ -420,29 +420,29 @@
                                         <div class="col--extend">
                                             <select
                                                 name="answerType"
-                                                class="answer__select-answer-type"
+                                                class="answer__select-answer-type widget--small"
                                                 required
                                                 aria-label="{{ 'tickets.show.answer_type' | trans }}"
                                                 {% if errors.answerType is defined %}
                                                     aria-invalid="true"
                                                     aria-errormessage="answer-type-error"
                                                 {% endif %}
                                             >
-                                                    <option value="normal" {{ answerType == 'normal' ? 'selected' }}>
-                                                        {{ 'tickets.show.answer_type.normal' | trans }}
+                                                <option value="normal" {{ answerType == 'normal' ? 'selected' }}>
+                                                    {{ 'tickets.show.answer_type.normal' | trans }}
+                                                </option>
+
+                                                {% if is_granted('orga:create:tickets:messages:confidential', organization) %}
+                                                    <option value="confidential" {{ answerType == 'confidential' ? 'selected' }}>
+                                                        {{ 'tickets.show.answer_type.confidential' | trans }}
                                                     </option>
+                                                {% endif %}
 
-                                                    {% if is_granted('orga:create:tickets:messages:confidential', organization) %}
-                                                        <option value="confidential" {{ answerType == 'confidential' ? 'selected' }}>
-                                                            {{ 'tickets.show.answer_type.confidential' | trans }}
-                                                        </option>
-                                                    {% endif %}
-
-                                                    {% if canPostSolution %}
-                                                        <option value="solution" {{ answerType == 'solution' ? 'selected' }}>
-                                                            {{ 'tickets.show.answer_type.solution' | trans }}
-                                                        </option>
-                                                    {% endif %}
+                                                {% if canPostSolution %}
+                                                    <option value="solution" {{ answerType == 'solution' ? 'selected' }}>
+                                                        {{ 'tickets.show.answer_type.solution' | trans }}
+                                                    </option>
+                                                {% endif %}
                                             </select>
                                         </div>
 
@@ -467,7 +467,7 @@
                                                 <div data-switch-target="panel" id="time-spent-input" {{ minutesSpent == 0 ? 'hidden' }}>
                                                     <label>
                                                         <input
-                                                            class="answer__input-time-spent"
+                                                            class="input--size2 widget--small"
                                                             name="timeSpent"
                                                             type="number"
                                                             value="{{ minutesSpent }}"