Fixed spacing and sizes

includes/sys_template.php

@@ -440,7 +440,7 @@ function button_help($topic = '')
  */
 function buttons($buttons = [])
 {
-    return '<div class="form-group">' . table_buttons($buttons) . '</div>';
+    return '<div class="mb-3">' . table_buttons($buttons) . '</div>';
 }
 
 /**

includes/view/ShiftCalendarShiftRenderer.php

@@ -261,7 +261,7 @@ class ShiftCalendarShiftRenderer
     {
         $header_buttons = '';
         if (auth()->can('admin_shifts')) {
-            $header_buttons = '<div class="pull-right d-print-none">' . table_buttons([
+            $header_buttons = '<div class="float-end d-print-none">' . table_buttons([
                     button(
                         page_link_to('user_shifts', ['edit_shift' => $shift['SID']]),
                         icon('pencil'),

includes/view/ShiftsFilterRenderer.php

@@ -64,7 +64,7 @@ class ShiftsFilterRenderer
                 );
             }
         }
-        return div('form-group', [
+        return div('mb-3', [
             toolbar_pills($toolbar)
         ]);
     }

includes/view/Shifts_view.php

@@ -213,7 +213,7 @@ function Shift_view_render_needed_angeltype($needed_angeltype, $angeltypes, $shi
     }
     $needed_angels .= '<div class="list-group-item">';
 
-    $needed_angels .= '<div class="pull-right">' . Shift_signup_button_render($shift, $angeltype) . '</div>';
+    $needed_angels .= '<div class="float-end m-3">' . Shift_signup_button_render($shift, $angeltype) . '</div>';
 
     $needed_angels .= '<h3>' . AngelType_name_render($angeltype) . '</h3>';
     $bar_max = max($needed_angeltype['count'] * 10, $needed_angeltype['taken'] * 10, 10);
@@ -253,7 +253,7 @@ function Shift_view_render_shift_entry($shift_entry, $user_shift_admin, $angelty
     }
     $isUser = $shift_entry['UID'] == auth()->user()->id;
     if ($user_shift_admin || $angeltype_supporter || $isUser) {
-        $entry .= ' <div class="btn-group">';
+        $entry .= ' <div class="btn-group m-1">';
         if ($user_shift_admin || $isUser) {
             $entry .= button_icon(
                 page_link_to('user_myshifts', ['edit' => $shift_entry['id'], 'id' => $shift_entry['UID']]),

includes/view/User_view.php

@@ -615,7 +615,7 @@ function User_view(
         . (config('enable_user_name') ? ' <small>' . $user_name . '</small>' : ''),
         [
             msg(),
-            div('row space-top', [
+            div('row m-3', [
                 div('col-md-12', [
                     buttons([
                         $admin_user_privilege ? button(

resources/assets/js/forms.js

@@ -186,10 +186,10 @@ $('select').select2({
  */
 $(function () {
     $('#welcome-title').on('click', function () {
-        $('.form-group.btn-group .btn.hidden').removeClass('hidden');
+        $('.btn-group.btn-group .btn.d-none').removeClass('d-none');
     });
     $('#oauth-settings-title').on('click', function () {
-        $('table tr.hidden').removeClass('hidden');
+        $('table tr.d-none').removeClass('d-none');
     });
 });
 

resources/assets/themes/base.scss

@@ -82,10 +82,6 @@ table a > .icon-icon_angel {
   background-color: $body-color;
 }
 
-.table .form-group {
-  margin-bottom: 0;
-}
-
 .stats {
   font-size: 20px;
   height: 150px;
@@ -242,10 +238,6 @@ table a > .icon-icon_angel {
   }
 }
 
-.space-top {
-  margin-top: 15px;
-}
-
 .column_duration {
   text-align: right;
 }

resources/views/macros/form.twig

@@ -66,7 +66,9 @@
 {%- endmacro %}
 
 {% macro button(label, opt) %}
-    <button class="btn btn-{{ opt.btn_type|default('primary') }} btn-{{ opt.btn_size|default('sm') }}"
+    <button
+        class="btn btn-{{ opt.btn_type|default('primary') }}
+            {%- if 'btn_size' in opt %} btn-{{ opt.btn_size }}{% endif %}"
         {%- if opt.type is defined %} type="{{ opt.type }}"{% endif %}
         {%- if opt.name is defined %} name="{{ opt.name }}"{% endif %}
         {%- if opt.title is defined %} title="{{ opt.title }}"{% endif %}

resources/views/pages/login.twig

@@ -19,7 +19,7 @@
                 (__('Teardown ends')): config('teardown_end')
             } | filter(date => date) %}
                 {% if date > date() %}
-                    <div class="col-sm-3 text-center hidden-xs">
+                    <div class="col-sm-3 text-center d-none d-sm-block">
                         <h4>{{ name }}</h4>
                         <span class="moment-countdown text-big" data-timestamp="{{ date.getTimestamp }}">%c</span>
                         <small>{{ date.format(__('Y-m-d')) }}</small>
@@ -73,7 +73,7 @@
                             {%  if config('oauth') is not empty %}
                                 <div class="mb-3 btn-group btn-group-justified">
                                     {% for name,config in config('oauth') %}
-                                        <a href="{{ url('oauth/' ~ name) }}" class="btn btn-primary btn-lg{% if config.hidden|default(false) %} hidden{% endif %}">
+                                        <a href="{{ url('oauth/' ~ name) }}" class="btn btn-primary btn-lg{% if config.hidden|default(false) %} d-none{% endif %}">
                                             {{ __(
                                                 'oauth.login-using-provider',
                                                 [__(config.name|default(name|capitalize))]
@@ -99,9 +99,7 @@
                 <h2>{{ __('Register') }}</h2>
                 {% if has_permission_to('register') and config('registration_enabled') %}
                     <p>{{ __('Please sign up, if you want to help us!') }}</p>
-                    <div class="form-group">
                     <a href="{{ url('register') }}" class="btn btn-primary">{{ __('Register') }} &raquo;</a>
-                    </div>
                 {% else %}
                     {{ m.alert(__('Registration is disabled.'), 'danger') }}
                 {% endif %}
@@ -110,12 +108,10 @@
             <div class="col-sm-6 text-center">
                 <h2>{{ __('What can I do?') }}</h2>
                 <p>{{ __('Please read about the jobs you can do to help us.') }}</p>
-                <div class="form-group">
                 <a href="{{ url('angeltypes', {'action': 'about'}) }}" class="btn btn-primary">
                     {{ __('Teams/Job description') }} &raquo;
                 </a>
             </div>
-            </div>
 
             <div class="col-md-12 text-center">
                 {{ m.icon('info-lg') }} {{ __('Please note: You have to activate cookies!') }}

resources/views/pages/password/reset-form.twig

@@ -10,9 +10,7 @@
             {{ f.input('password', __('Password'), 'password', {'min': min_length, 'required': true}) }}
             {{ f.input('password_confirmation', __('Confirm password'), 'password', {'min': min_length, 'required': true}) }}
 
-            <div class="form-group">
             {{ f.submit(__('Save')) }}
-            </div>
         </form>
     </div>
 {% endblock %}

resources/views/pages/password/reset.twig

@@ -19,9 +19,7 @@
                         {{ __('We will send you an e-mail with a password recovery link. Please use the email address you used for registration.') }}
                         {{ f.input('email', __('E-Mail'), 'email', {'required': true}) }}
 
-                        <div class="form-group">
                         {{ f.submit(__('Recover')) }}
-                        </div>
                     </form>
                 </div>
             {% endblock %}

resources/views/pages/settings/oauth.twig

@@ -20,7 +20,7 @@
     </thead>
     <tbody>
     {% for name,config in providers %}
-        <tr{% if config.hidden|default(false) %} class="hidden"{% endif %}>
+        <tr{% if config.hidden|default(false) %} class="d-none"{% endif %}>
             <td>
                 {% if config.url|default %}
                     <a href="{{ config.url }}" target="_blank" rel="noopener">