From 63f0a08407701e7f07827364637c83ffe4e7103e Mon Sep 17 00:00:00 2001
From: Igor Scheller <igor.scheller@igorshp.de>
Date: Sat, 24 Jul 2021 18:19:53 +0200
Subject: [PATCH] Fixed spacing and sizes

---
 includes/sys_template.php                      |  2 +-
 includes/view/ShiftCalendarShiftRenderer.php   |  2 +-
 includes/view/ShiftsFilterRenderer.php         |  2 +-
 includes/view/Shifts_view.php                  |  4 ++--
 includes/view/User_view.php                    |  2 +-
 resources/assets/js/forms.js                   |  4 ++--
 resources/assets/themes/base.scss              |  8 --------
 resources/views/macros/form.twig               |  4 +++-
 resources/views/pages/login.twig               | 16 ++++++----------
 resources/views/pages/password/reset-form.twig |  4 +---
 resources/views/pages/password/reset.twig      |  4 +---
 resources/views/pages/settings/oauth.twig      |  2 +-
 12 files changed, 20 insertions(+), 34 deletions(-)

diff --git a/includes/sys_template.php b/includes/sys_template.php
index c4b0b09e..f7dfedb7 100644
--- a/includes/sys_template.php
+++ b/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>';
 }
 
 /**
diff --git a/includes/view/ShiftCalendarShiftRenderer.php b/includes/view/ShiftCalendarShiftRenderer.php
index 5235501e..e23573e7 100644
--- a/includes/view/ShiftCalendarShiftRenderer.php
+++ b/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'),
diff --git a/includes/view/ShiftsFilterRenderer.php b/includes/view/ShiftsFilterRenderer.php
index d531c765..202298c6 100644
--- a/includes/view/ShiftsFilterRenderer.php
+++ b/includes/view/ShiftsFilterRenderer.php
@@ -64,7 +64,7 @@ class ShiftsFilterRenderer
                 );
             }
         }
-        return div('form-group', [
+        return div('mb-3', [
             toolbar_pills($toolbar)
         ]);
     }
diff --git a/includes/view/Shifts_view.php b/includes/view/Shifts_view.php
index 5d9d3075..3706d3a2 100644
--- a/includes/view/Shifts_view.php
+++ b/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']]),
diff --git a/includes/view/User_view.php b/includes/view/User_view.php
index 0d086cc2..0b6a9509 100644
--- a/includes/view/User_view.php
+++ b/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(
diff --git a/resources/assets/js/forms.js b/resources/assets/js/forms.js
index 1d073041..ed0f9a46 100644
--- a/resources/assets/js/forms.js
+++ b/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');
     });
 });
 
diff --git a/resources/assets/themes/base.scss b/resources/assets/themes/base.scss
index 2221eeba..49cacf5d 100644
--- a/resources/assets/themes/base.scss
+++ b/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;
 }
diff --git a/resources/views/macros/form.twig b/resources/views/macros/form.twig
index 4d3b3719..c9ec5cf9 100644
--- a/resources/views/macros/form.twig
+++ b/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 %}
diff --git a/resources/views/pages/login.twig b/resources/views/pages/login.twig
index 6067aba2..ffb9be7a 100644
--- a/resources/views/pages/login.twig
+++ b/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>
+                    <a href="{{ url('register') }}" class="btn btn-primary">{{ __('Register') }} &raquo;</a>
                 {% else %}
                     {{ m.alert(__('Registration is disabled.'), 'danger') }}
                 {% endif %}
@@ -110,11 +108,9 @@
             <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>
+                <a href="{{ url('angeltypes', {'action': 'about'}) }}" class="btn btn-primary">
+                    {{ __('Teams/Job description') }} &raquo;
+                </a>
             </div>
 
             <div class="col-md-12 text-center">
diff --git a/resources/views/pages/password/reset-form.twig b/resources/views/pages/password/reset-form.twig
index 3464abe8..e078ab0e 100644
--- a/resources/views/pages/password/reset-form.twig
+++ b/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>
+            {{ f.submit(__('Save')) }}
         </form>
     </div>
 {% endblock %}
diff --git a/resources/views/pages/password/reset.twig b/resources/views/pages/password/reset.twig
index b3fba53e..ce7b5e28 100644
--- a/resources/views/pages/password/reset.twig
+++ b/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>
+                        {{ f.submit(__('Recover')) }}
                     </form>
                 </div>
             {% endblock %}
diff --git a/resources/views/pages/settings/oauth.twig b/resources/views/pages/settings/oauth.twig
index d1f5075a..b2518554 100644
--- a/resources/views/pages/settings/oauth.twig
+++ b/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">