Increased the width of the input field for the prices of the events

This is especially useful for currencies like FCFA that have large numbers and large currency symbol

CHANGELOG.md

@@ -4,6 +4,7 @@
 - Updated i18next to 19.9.3
 - Prevent the worker from crashing if OpenLab is not reachable in dev
 - Allow setting multiple themes for a single event
+- Increased the width of the input field for the prices of the events
 - Fix a bug: the notification sent to the project author when a collaborator has confirmed his participation is not sent
 - Fix a bug: the event themes are not kept when editing the event again
 - Fix a security issue: updated underscore to 1.12.1 to fix [CVE-2021-23358](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-23358)

app/frontend/src/javascript/components/event-themes.tsx

@@ -63,7 +63,6 @@ const EventThemes: React.FC<EventThemesProps> = ({ event, onChange }) => {
       res.push(themes.find(t => t.id === opt.value));
     })
     onChange(res);
-    // compile
   }
 
   /**

app/frontend/src/stylesheets/app.utilities.scss

@@ -458,6 +458,10 @@ p, .widget p {
 .p-l {
   padding: 16px;
 }
+.p-h-0 {
+  padding-left: 0;
+  padding-right: 0;
+}
 
 .p-h-xs {
   padding-left: 5px;

app/frontend/templates/events/_form.html

@@ -229,7 +229,7 @@
       <div class="widget-content no-bg wrapper">
         <div class="form-group">
           <label for="event_amount" class="col-sm-5 control-label" translate>{{ 'app.shared.event.standard_rate' }}</label>
-          <div class="col-sm-5">
+          <div class="col-sm-6 p-h-0">
             <div class="input-group">
               <input ng-model="event.amount" type="number" name="event[amount]" class="form-control" id="event_amount" required>
               <div class="input-group-addon">{{currencySymbol}}</div>
@@ -246,7 +246,7 @@
                     ng-options="cat as cat.name for cat in priceCategories track by cat.id">
             </select>
           </div>
-          <div class="col-sm-5">
+          <div class="col-sm-6 p-h-0">
             <div class="input-group">
               <input ng-model="price.amount"
                      type="number"
@@ -257,17 +257,17 @@
           </div>
           <div class="col-sm-1">
             <input type="hidden" name="event[event_price_categories_attributes][][_destroy]" ng-value="price._destroy">
-            <a class="btn" ng-click="removePrice(price, $event)" href="#"><i class="fa fa-times text-danger"></i></a>
+            <a class="btn p-h-0" ng-click="removePrice(price, $event)" href="#"><i class="fa fa-times text-danger"></i></a>
           </div>
         </div>
         <div class="link-icon m-b" ng-hide="event.prices.length == priceCategories.length">
           <div class="col-sm-offset-5">
-            <i class="fa fa-plus"></i> <span ng-click="addPrice()">Ajouter un tarif</span>
+            <i class="fa fa-plus"></i> <span ng-click="addPrice()" translate>{{ 'app.shared.event.add_price' }}</span>
           </div>
         </div>
         <div class="form-group">
           <label for="event_nb_total_places" class="col-sm-5 control-label" translate>{{ 'app.shared.event.tickets_available' }}</label>
-          <div class="col-sm-6">
+          <div class="col-sm-6 p-h-0">
             <div class="input-group">
               <input ng-model="event.nb_total_places" type="number" name="event[nb_total_places]" class="form-control" id="event_nb_total_places">
               <div class="input-group-addon"><i class="fa fa-ticket"></i> </div>

config/locales/app.shared.en.yml

@@ -160,6 +160,7 @@ en:
         event_themes: "Event themes"
         select_theme: "Pick up a theme..."
         age_range: "Age range"
+        add_price: "Add a price"
       #subscription plan edition form
       plan:
         general_information: "General information"

config/locales/app.shared.fr.yml

@@ -160,6 +160,7 @@ fr:
         event_themes: "Thèmes de l'événement"
         select_theme: "Choisissez un thème ..."
         age_range: "Tranche d'âge"
+        add_price: "Ajouter un tarif"
       #subscription plan edition form
       plan:
         general_information: "Informations générales"