Merge branch 'bug/reduce-event-date-picker-width' into 'master'

Reduced datetime picker width

See merge request framasoft/mobilizon!302

CHANGELOG.md

@@ -56,6 +56,7 @@ In order to move participant stats to the event table for existing events, you n
 - Added missing `setup_db.psql` file (Geno)
 - Fixed docker setup when using non-GNU make (JohanBaskovec)
 - Fixed actors deletion that didn't cascade to followers
+- Reduced datetime picker input width
 
 ### Security
 - Sanitize event title to avoid XSS

js/src/components/Event/DateTimePicker.vue

@@ -12,26 +12,32 @@
 ```
 </docs>
 <template>
-    <b-field grouped horizontal :label="label">
+    <div class="field is-horizontal">
-        <b-datepicker
+        <div class="field-label is-normal">
-                :day-names="localeShortWeekDayNamesProxy"
+            <label class="label">{{ label }}</label>
-                :month-names="localeMonthNamesProxy"
+        </div>
-                expanded
+        <div class="field-body">
-                :first-day-of-week="parseInt($t('firstDayOfWeek'), 10)"
+            <div class="field is-narrow is-grouped">
-                :min-date="minDate"
+                <b-datepicker
-                v-model="dateWithoutTime"
+                        :day-names="localeShortWeekDayNamesProxy"
-                :placeholder="$t('Click to select')"
+                        :month-names="localeMonthNamesProxy"
-                icon="calendar"
+                        :first-day-of-week="parseInt($t('firstDayOfWeek'), 10)"
-        />
+                        :min-date="minDate"
-        <b-timepicker
+                        v-model="dateWithoutTime"
-                placeholder="Type or select a time..."
+                        :placeholder="$t('Click to select')"
-                icon="clock"
+                        icon="calendar"
-                v-model="dateWithTime"
+                        class="is-narrow"
-                expanded
+                />
-                size="is-small"
+                <b-timepicker
-                inline>
+                        placeholder="Type or select a time..."
-        </b-timepicker>
+                        icon="clock"
-    </b-field>
+                        v-model="dateWithTime"
+                        size="is-small"
+                        inline>
+                </b-timepicker>
+            </div>
+        </div>
+    </div>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
@@ -101,4 +107,4 @@ export default class DateTimePicker extends Vue {
             padding: 0;
         }
     }
-</style>
+</style>