Removed and replaced outdated classes and styling, use secondary buttons

.gitignore

@@ -39,3 +39,4 @@ _vimrc_local.vim
 /node_modules
 /public/assets
 /package-lock.json
+/yarn-error.log

includes/sys_template.php

@@ -65,7 +65,7 @@ function tabs($tabs, $selected = 0)
             : '';
     }
     return div('', [
-        '<ul class="nav nav-tabs" role="tablist">' . join($tab_header) . '</ul>',
+        '<ul class="nav nav-tabs mb-3" role="tablist">' . join($tab_header) . '</ul>',
         '<div class="tab-content">' . join($tab_content) . '</div>'
     ]);
 }
@@ -311,10 +311,10 @@ function description($data)
     $elements = [];
     foreach ($data as $label => $description) {
         if (!empty($label) && !empty($description)) {
-            $elements[] = '<dt>' . $label . '</dt><dd>' . $description . '</dd>';
+            $elements[] = '<dt class="col-sm-1">' . $label . '</dt><dd class="col-sm-11">' . $description . '</dd>';
         }
     }
-    return '<dl class="dl-horizontal">' . join($elements) . '</dl>';
+    return '<dl class="row">' . join($elements) . '</dl>';
 }
 
 /**
@@ -391,7 +391,7 @@ function render_table($columns, $rows, $data = true)
  */
 function button($href, $label, $class = '')
 {
-    return '<a href="' . $href . '" class="btn btn-primary ' . $class . '">' . $label . '</a>';
+    return '<a href="' . $href . '" class="btn btn-secondary ' . $class . '">' . $label . '</a>';
 }
 
 /**
@@ -404,7 +404,7 @@ function button($href, $label, $class = '')
  */
 function button_js($javascript, $label, $class = '')
 {
-    return '<a onclick="' . $javascript . '" href="#" class="btn btn-primary ' . $class . '">' . $label . '</a>';
+    return '<a onclick="' . $javascript . '" href="#" class="btn btn-secondary ' . $class . '">' . $label . '</a>';
 }
 
 /**

includes/view/AngelTypes_view.php

@@ -403,7 +403,7 @@ function AngelType_view_info(
     $info[] = '<h3>' . __('Description') . '</h3>';
     $parsedown = new Parsedown();
     if ($angeltype['description'] != '') {
-        $info[] = '<div class="well">' . $parsedown->parse($angeltype['description']) . '</div>';
+        $info[] = $parsedown->parse($angeltype['description']);
     }
 
     list($supporters, $members_confirmed, $members_unconfirmed) = AngelType_view_members(
@@ -553,7 +553,7 @@ function AngelTypes_about_view_angeltype($angeltype)
         );
     }
     if ($angeltype['description'] != '') {
-        $html .= '<div class="well">' . $parsedown->parse($angeltype['description']) . '</div>';
+        $html .= $parsedown->parse($angeltype['description']);
     }
     $html .= '<hr />';
 

includes/view/PublicDashboard_view.php

@@ -99,9 +99,9 @@ function public_dashboard_shift_render($shift)
     }
 
     return div('col-md-3 mb-3', [
-        div('dashboard-card card card-' . $shift['style'] . ' ' . $type, [
+        div('dashboard-card card border-' . $shift['style'] . ' ' . $type, [
             div('card-body', [
-                '<a class="panel-link" href="' . shift_link($shift) . '"></a>',
+                '<a class="card-link" href="' . shift_link($shift) . '"></a>',
                 $panel_body
             ])
         ])

includes/view/Rooms_view.php

@@ -24,7 +24,7 @@ function Room_view(Room $room, ShiftsFilterRenderer $shiftsFilterRenderer, Shift
     if ($room->description) {
         $description = '<h3>' . __('Description') . '</h3>';
         $parsedown = new Parsedown();
-        $description .= '<div class="well">' . $parsedown->parse($room->description) . '</div>';
+        $description .= $parsedown->parse($room->description);
     }
 
     $tabs = [];

resources/assets/themes/base.scss

@@ -124,12 +124,12 @@ table a > .icon-icon_angel {
   color: map-get($theme-colors, 'success');
 }
 
-.dashboard-panel {
+.dashboard-card {
   position: relative;
   font-size: 20px;
   color: $headings-color;
 
-  .panel-link {
+  .card-link {
     position: absolute;
     width: 100%;
     height: 100%;
@@ -142,41 +142,11 @@ table a > .icon-icon_angel {
     filter: alpha(opacity=1); /* Fix to make div clickable in IE */
   }
 
-  .panel-link:hover {
+  .card-link:hover {
     opacity: 0.3;
   }
 }
 
-//.panel-primary .panel-heading a {
-//  color: $panel-primary-text;
-//  background-color: $panel-primary-heading-bg;
-//}
-//
-//.panel-default .panel-heading a {
-//  color: $panel-default-text;
-//  background-color: $panel-default-heading-bg;
-//}
-//
-//.panel-info .panel-heading a {
-//  color: $panel-info-text;
-//  background-color: $panel-info-heading-bg;
-//}
-//
-//.panel-success .panel-heading a {
-//  color: $panel-success-text;
-//  background-color: $panel-success-heading-bg;
-//}
-//
-//.panel-warning .panel-heading a {
-//  color: $panel-warning-text;
-//  background-color: $panel-warning-heading-bg;
-//}
-//
-//.panel-danger .panel-heading a {
-//  color: $panel-danger-text;
-//  background-color: $panel-danger-heading-bg;
-//}
-
 .select2-dropdown {
   background-color: $input-bg;
 }
@@ -295,9 +265,7 @@ span.ref-id[id] {
 }
 
 .faq {
-  .panel-heading h3 {
+  .card-header {
-    margin: 0;
-
     small a.ref-link {
       display: none;
     }

resources/assets/themes/cyborg_styles.scss

@@ -152,12 +152,6 @@ table,
 
 // Containers =================================================================
 
-a.thumbnail:hover,
-a.thumbnail:focus,
-a.thumbnail.active {
-  border-color: $thumbnail-border;
-}
-
 .jumbotron {
 
   h1, h2, h3, h4, h5, h6 {

resources/assets/themes/cyborg_variables.scss

@@ -652,72 +652,6 @@ $list-group-link-hover-color:   $list-group-link-color;
 $list-group-link-heading-color: #fff;
 
 
-//== Panels
-//
-//##
-
-$panel-bg:                    $gray-darker;
-$panel-body-padding:          15px;
-$panel-heading-padding:       10px 15px;
-$panel-footer-padding:        $panel-heading-padding;
-$panel-border-radius:         $border-radius-base;
-
-//** Border color for elements within panels
-$panel-inner-border:          $gray-dark;
-
-$panel-default-text:          $text-color;
-$panel-default-border:        $panel-inner-border;
-$panel-default-heading-bg:    lighten($gray-darker, 10%);
-
-$panel-footer-bg:             $panel-default-heading-bg;
-
-$panel-primary-text:          #fff;
-$panel-primary-border:        $primary;
-$panel-primary-heading-bg:    $primary;
-
-$panel-success-text:          $state-success-text;
-$panel-success-border:        $state-success-border;
-$panel-success-heading-bg:    $state-success-bg;
-
-$panel-info-text:             $state-info-text;
-$panel-info-border:           $state-info-border;
-$panel-info-heading-bg:       $state-info-bg;
-
-$panel-warning-text:          $state-warning-text;
-$panel-warning-border:        $state-warning-border;
-$panel-warning-heading-bg:    $state-warning-bg;
-
-$panel-danger-text:           $state-danger-text;
-$panel-danger-border:         $state-danger-border;
-$panel-danger-heading-bg:     $state-danger-bg;
-
-
-//== Thumbnails
-//
-//##
-
-//** Padding around the thumbnail image
-$thumbnail-padding:           4px;
-//** Thumbnail background color
-$thumbnail-bg:                $gray-dark;
-//** Thumbnail border color
-$thumbnail-border:            $gray-dark;
-//** Thumbnail border radius
-$thumbnail-border-radius:     $border-radius-base;
-
-//** Custom text color for thumbnail captions
-$thumbnail-caption-color:     $text-color;
-//** Padding around the thumbnail caption
-$thumbnail-caption-padding:   9px;
-
-
-//== Wells
-//
-//##
-
-$well-bg:                     darken($gray-darker, 5%);
-$well-border:                 darken($well-bg, 7%);
-
 //== Breadcrumbs
 //
 //##

resources/assets/themes/theme10.scss

@@ -47,10 +47,6 @@ h1 {
   }
 }
 
-.panel-title {
-  color: #fff;
-}
-
 .input-group-addon {
   color: #000;
 

resources/assets/themes/theme11.scss

@@ -95,13 +95,6 @@ $headings-small-color:        $gray-lighter;
   background-color: $btn-default-bg;
 }
 
-
-// Containers =================================================================
-
-.panel-info .panel-title {
-  color: #000;
-}
-
 // code tag
 code {
   background-color: $btn-default-bg;

resources/assets/themes/theme12.scss

@@ -61,10 +61,6 @@ $pagination-active-color:              $black;
 $label-color:                 #000;
 $label-link-hover-color:      $gray-dark;
 
-//== Panels
-
-$panel-primary-text:          #000;
-
 //== Badges
 
 $badge-color:                 $black;

resources/assets/themes/theme13.scss

@@ -99,18 +99,6 @@ $state-danger-text:              #fff;
 
 $label-link-hover-color:      $gray-dark;
 
-//== Panels
-
-$panel-primary-text:          #000;
-
-$panel-success-text:          #fff;
-
-$panel-info-text:             #fff;
-
-$panel-warning-text:          #fff;
-
-$panel-danger-text:           #fff;
-
 //== Badges
 
 $badge-color:                 $black;

resources/assets/themes/theme14.scss

@@ -100,18 +100,6 @@ $state-danger-text:              #fff;
 
 $label-link-hover-color:      $gray-dark;
 
-//== Panels
-
-$panel-primary-text:          #000;
-
-$panel-success-text:          #fff;
-
-$panel-info-text:             #fff;
-
-$panel-warning-text:          #fff;
-
-$panel-danger-text:           #fff;
-
 //== Badges
 
 $badge-color:                 $black;

resources/assets/themes/theme15.scss

@@ -689,70 +689,6 @@ $list-group-link-color: $text-color;
 $list-group-link-hover-color: $list-group-link-color;
 $list-group-link-heading-color: #fff;
 
-//== Panels
-//
-//##
-
-$panel-bg: $plum;
-$panel-body-padding: 15px;
-$panel-heading-padding: 10px 15px;
-$panel-footer-padding: $panel-heading-padding;
-$panel-border-radius: $border-radius-base;
-
-//** Border color for elements within panels
-$panel-inner-border: lighten($plum, 3%);
-
-$panel-default-text: $text-color;
-$panel-default-border: $panel-inner-border;
-$panel-default-heading-bg: lighten($plum, 3%);
-
-$panel-footer-bg: $panel-default-heading-bg;
-
-$panel-primary-text: #fff;
-$panel-primary-border: $brand-primary;
-$panel-primary-heading-bg: $brand-primary;
-
-$panel-success-text: $state-success-text;
-$panel-success-border: $state-success-border;
-$panel-success-heading-bg: $state-success-bg;
-
-$panel-info-text: $state-info-text;
-$panel-info-border: $panel-inner-border;
-$panel-info-heading-bg: lighten($plum, 3%);
-
-$panel-warning-text: white;
-$panel-warning-border: $blue;
-$panel-warning-heading-bg: $blue;
-
-$panel-danger-text: $state-danger-text;
-$panel-danger-border: $state-danger-border;
-$panel-danger-heading-bg: $state-danger-bg;
-
-//== Thumbnails
-//
-//##
-
-//** Padding around the thumbnail image
-$thumbnail-padding: 4px;
-//** Thumbnail background color
-$thumbnail-bg: $gray-dark;
-//** Thumbnail border color
-$thumbnail-border: $gray-dark;
-//** Thumbnail border radius
-$thumbnail-border-radius: $border-radius-base;
-
-//** Custom text color for thumbnail captions
-$thumbnail-caption-color: $text-color;
-//** Padding around the thumbnail caption
-$thumbnail-caption-padding: 9px;
-
-//== Wells
-//
-//##
-
-$well-bg: darken($gray-darker, 5%);
-$well-border: darken($well-bg, 7%);
-
 //== Badges
 //
 //##
@@ -1013,12 +949,6 @@ table,
 
 // Containers =================================================================
 
-a.thumbnail:hover,
-a.thumbnail:focus,
-a.thumbnail.active {
-  border-color: $thumbnail-border;
-}
-
 .jumbotron {
   h1,
   h2,

resources/assets/themes/theme4.scss

@@ -97,16 +97,6 @@ $headings-small-color:        $gray-light;
   background-color: $btn-default-bg;
 }
 
-
-// added Containers =================================================================
-
-.label-warning, .label-success, .progress-bar-warning, .progress-bar-success,
-.panel-warning .panel-heading, .panel-warning .panel-heading a,
-.panel-success .panel-heading, .panel-success .panel-heading a {
-  color: $gray-darker;
-}
-
-
 // different code tag
 code {
   background-color: $state-info-bg;

resources/assets/themes/theme6.scss

@@ -82,14 +82,6 @@ $state-danger-border:            darken($state-danger-bg, 3%);
 
 $list-group-bg:                 darken($gray-darker, 10%);
 
-
-//== changed Panels
-
-$panel-bg:                    darken($gray-darker, 10%);
-
-$panel-default-heading-bg:    darken($gray-darker, 5%);
-
-
 //== changed Badges
 
 $badge-color:                 #fff;

resources/assets/themes/theme7.scss

@@ -148,14 +148,6 @@ $label-color:                 $gray-darker;
 
 $label-link-hover-color:      $brand-primary;
 
-//== changed Panels
-
-$panel-default-border:        $brand-primary;
-$panel-default-heading-bg:    $gray-darker;
-
-$panel-primary-text:          $gray-darker;
-
-
 //== changed Badges
 
 $badge-color:                 #fff;
@@ -259,7 +251,7 @@ table,
 
 // changed Containers =================================================================
 
-.btn-primary, .panel-info .panel-heading {
+.btn-primary, .card-info .card-heading {
   background-image: linear-gradient(to right, rgb(0, 132, 176) , rgb(0, 163, 86));
 }
 

resources/assets/themes/theme8.scss

@@ -46,10 +46,6 @@ h1 {
   }
 }
 
-.panel-title {
-  color: #fff;
-}
-
 .input-group-addon {
   color: #000;
 

resources/assets/themes/theme9.scss

@@ -47,10 +47,6 @@ h1 {
   }
 }
 
-.panel-title {
-  color: #fff;
-}
-
 .input-group-addon {
   color: #000;
 

resources/views/pages/design.twig

@@ -27,6 +27,7 @@
     ['dark', 'light'],
 ] %}
 {% set types_buttons=types|merge(['link']) %}
+{% set shortsum='Lorem ipsum dolor…' %}
 {% set lipsum='Lorem ipsum dolor sit amet, consectetur adipisici elit…' %}
 {% set linksum='Lorem ipsum! Dolor <a href="#">link</a> amet, consectetur adipisici elit!' %}
 
@@ -144,7 +145,7 @@
         </div>
 
         <div class="row">
-            <div class="col-md-6">
+            <div class="col">
                 <h3>Badges</h3>
                 <p>
                     {% for type in types_color %}
@@ -152,7 +153,7 @@
                     {% endfor %}
                 </p>
             </div>
-            <div class="col-md-6">
+            <div class="col">
                 <h3>Buttons</h3>
                 <p>
                     {% for type in types_buttons %}
@@ -163,12 +164,12 @@
         </div>
 
         <div class="row">
-            <div class="col-md-12">
+            <div class="col">
                 <h3>Alerts</h3>
 
                 <div class="row">
                     {% for color in colors %}
-                        <div class="col-md-3">
+                        <div class="col">
                             <h4>{{ color|capitalize }}</h4>
                             {{ m.alert(lipsum, color) }}
                         </div>
@@ -177,53 +178,76 @@
             </div>
         </div>
 
+        <div class="row">
+            <div class="col-md-12 mb-3">
+                <h3>Cards</h3>
+
+                <div class="row">
+                    {% for type in types %}
+                        <div class="col">
+                            <div class="card border-{{ type }} {{ m.type_bg_class() }}">
+                                <h4 class="card-header bg-{{ type }}">{{ type|capitalize }}</h4>
+                                <div class="card-body">
+                                    <p class="card-text">{{ shortsum }}</p>
+                                    <p class="card-text"><a href="#" class="card-link">Some link</a></p>
+                                </div>
+                                <div class="card-footer text-muted">
+                                    Footer
+                                </div>
+                            </div>
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+
         <div class="row">
             <div class="col-md-12">
                 <h3>Forms</h3>
 
                 <div class="row">
-                    <div class="col-md-2">
+                    <div class="col">
                         {{ f.input('form-input-text', 'Text', 'text', {'value': 'Value'}) }}
                     </div>
-                    <div class="col-md-2">
+                    <div class="col">
                         {{ f.input('form-input-text-hidden-label', 'Hidden label', 'text', {'value': 'Hidden label', 'hide_label': true}) }}
                     </div>
-                    <div class="col-md-2">
+                    <div class="col">
                         {{ f.input('form-input-text-disabled', 'Disabled', 'text', {'disabled': true, 'value': 'Value'}) }}
                     </div>
-                    <div class="col-md-2">
+                    <div class="col">
                         {{ f.input('form-input-text-readonly', 'Readonly', 'text', {'readonly': true, 'value': 'Value'}) }}
                     </div>
-                    <div class="col-md-2">
+                    <div class="col">
                         {{ f.input('form-input-password', 'Password', 'password', {'value': 'Value'}) }}
                     </div>
-                    <div class="col-md-2">
+                    <div class="col">
                         {{ f.input('form-input-number', 'Number', 'number', {'value': 42}) }}
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-md-2">
+                    <div class="col">
                         {{ f.textarea('form-input-textarea', 'Textarea', {'rows': 2, 'value': lipsum}) }}
                     </div>
-                    <div class="col-md-2">
+                    <div class="col">
                         {{ f.select('form-input-select', {'lorem': 'Ipsum', 'dolor': 'Sit'}, 'Select', 'dolor') }}
                     </div>
-                    <div class="col-md-2">
+                    <div class="col">
                         <label class="form-label">Button</label>
                         <div>
                             {{ f.button('Button', {'btn_type': 'primary'}) }}
                         </div>
                     </div>
-                    <div class="col-md-2">
+                    <div class="col">
                         Submit button<br>
                         {{ f.submit() }}
                     </div>
-                    <div class="col-md-2">
+                    <div class="col">
                         Checkbox<br>
                         {{ f.checkbox('form-input-checkbox', 'Checkbox', true) }}
                         {{ f.checkbox('form-input-checkbox-2', 'Checkbox 2') }}
                     </div>
-                    <div class="col-md-2 checkbox-inline">
+                    <div class="col checkbox-inline">
                         Radio<br>
                         <label>
                             <input type="radio" checked="checked" name="form-input-radio" value="1"> Yey
@@ -238,10 +262,10 @@
 
         <h3>Other</h3>
         <div class="row">
-            <div class="col-md-3">
+            <div class="col">
                 <h4>Code</h4>
                 <p>
-                    <code>3.1415926535897932384626433832795028841971693993751058209749445923</code>
+                    <code>3.1415926535897932384626433832795</code>
                 </p>
             </div>
         </div>

resources/views/pages/faq/overview.twig

@@ -31,12 +31,12 @@
                     <div class="col-md-12 faq">
                         <span id="faq-{{ item.id }}" class="ref-id"></span>
                         <div class="card {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %} mb-4">
-                            <div class="card-header">
+                            <h4 class="card-header">
                                 {{ item.question }}
                                 <small class="text-muted">
                                     <a class="ref-link" href="#faq-{{ item.id }}">{{ m.icon('link') }}</a>
                                 </small>
-                            </div>
+                            </h4>
 
                             <div class="card-body {{ m.type_bg_class() }}">
                                 {{ item.text|markdown }}