From 91c7a19f11cb20b3bca2a10ddeb378f6321d8cfc Mon Sep 17 00:00:00 2001 From: Igor Scheller Date: Sun, 25 Jul 2021 21:41:57 +0200 Subject: [PATCH] Removed and replaced outdated classes and styling, use secondary buttons --- .gitignore | 1 + includes/sys_template.php | 10 +-- includes/view/AngelTypes_view.php | 4 +- includes/view/PublicDashboard_view.php | 4 +- includes/view/Rooms_view.php | 2 +- resources/assets/themes/base.scss | 40 ++--------- resources/assets/themes/cyborg_styles.scss | 6 -- resources/assets/themes/cyborg_variables.scss | 66 ----------------- resources/assets/themes/theme10.scss | 4 -- resources/assets/themes/theme11.scss | 7 -- resources/assets/themes/theme12.scss | 4 -- resources/assets/themes/theme13.scss | 12 ---- resources/assets/themes/theme14.scss | 12 ---- resources/assets/themes/theme15.scss | 70 ------------------- resources/assets/themes/theme4.scss | 10 --- resources/assets/themes/theme6.scss | 8 --- resources/assets/themes/theme7.scss | 10 +-- resources/assets/themes/theme8.scss | 4 -- resources/assets/themes/theme9.scss | 4 -- resources/views/pages/design.twig | 60 +++++++++++----- resources/views/pages/faq/overview.twig | 4 +- 21 files changed, 60 insertions(+), 282 deletions(-) diff --git a/.gitignore b/.gitignore index 5c07aa1c..3ee90a37 100644 --- a/.gitignore +++ b/.gitignore @@ -39,3 +39,4 @@ _vimrc_local.vim /node_modules /public/assets /package-lock.json +/yarn-error.log diff --git a/includes/sys_template.php b/includes/sys_template.php index 6258dbb4..443024ab 100644 --- a/includes/sys_template.php +++ b/includes/sys_template.php @@ -65,7 +65,7 @@ function tabs($tabs, $selected = 0) : ''; } return div('', [ - '', + '', '
' . join($tab_content) . '
' ]); } @@ -311,10 +311,10 @@ function description($data) $elements = []; foreach ($data as $label => $description) { if (!empty($label) && !empty($description)) { - $elements[] = '
' . $label . '
' . $description . '
'; + $elements[] = '
' . $label . '
' . $description . '
'; } } - return '
' . join($elements) . '
'; + return '
' . join($elements) . '
'; } /** @@ -391,7 +391,7 @@ function render_table($columns, $rows, $data = true) */ function button($href, $label, $class = '') { - return '' . $label . ''; + return '' . $label . ''; } /** @@ -404,7 +404,7 @@ function button($href, $label, $class = '') */ function button_js($javascript, $label, $class = '') { - return '' . $label . ''; + return '' . $label . ''; } /** diff --git a/includes/view/AngelTypes_view.php b/includes/view/AngelTypes_view.php index 93cc4ba1..5ab16791 100644 --- a/includes/view/AngelTypes_view.php +++ b/includes/view/AngelTypes_view.php @@ -403,7 +403,7 @@ function AngelType_view_info( $info[] = '

' . __('Description') . '

'; $parsedown = new Parsedown(); if ($angeltype['description'] != '') { - $info[] = '
' . $parsedown->parse($angeltype['description']) . '
'; + $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 .= '
' . $parsedown->parse($angeltype['description']) . '
'; + $html .= $parsedown->parse($angeltype['description']); } $html .= '
'; diff --git a/includes/view/PublicDashboard_view.php b/includes/view/PublicDashboard_view.php index 4fa3e8c8..b07c8b25 100644 --- a/includes/view/PublicDashboard_view.php +++ b/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', [ - '', + '', $panel_body ]) ]) diff --git a/includes/view/Rooms_view.php b/includes/view/Rooms_view.php index 337d1666..ee36a541 100644 --- a/includes/view/Rooms_view.php +++ b/includes/view/Rooms_view.php @@ -24,7 +24,7 @@ function Room_view(Room $room, ShiftsFilterRenderer $shiftsFilterRenderer, Shift if ($room->description) { $description = '

' . __('Description') . '

'; $parsedown = new Parsedown(); - $description .= '
' . $parsedown->parse($room->description) . '
'; + $description .= $parsedown->parse($room->description); } $tabs = []; diff --git a/resources/assets/themes/base.scss b/resources/assets/themes/base.scss index 26470aa3..808fe7b6 100644 --- a/resources/assets/themes/base.scss +++ b/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 { - margin: 0; - + .card-header { small a.ref-link { display: none; } diff --git a/resources/assets/themes/cyborg_styles.scss b/resources/assets/themes/cyborg_styles.scss index 462e7a83..75a3b9e6 100644 --- a/resources/assets/themes/cyborg_styles.scss +++ b/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 { diff --git a/resources/assets/themes/cyborg_variables.scss b/resources/assets/themes/cyborg_variables.scss index d0d13fa9..ea636d34 100644 --- a/resources/assets/themes/cyborg_variables.scss +++ b/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 // //## diff --git a/resources/assets/themes/theme10.scss b/resources/assets/themes/theme10.scss index 5775e9ba..e67d05ea 100644 --- a/resources/assets/themes/theme10.scss +++ b/resources/assets/themes/theme10.scss @@ -47,10 +47,6 @@ h1 { } } -.panel-title { - color: #fff; -} - .input-group-addon { color: #000; diff --git a/resources/assets/themes/theme11.scss b/resources/assets/themes/theme11.scss index 575640d7..128f648e 100644 --- a/resources/assets/themes/theme11.scss +++ b/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; diff --git a/resources/assets/themes/theme12.scss b/resources/assets/themes/theme12.scss index 7402cc7d..df155cdc 100644 --- a/resources/assets/themes/theme12.scss +++ b/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; diff --git a/resources/assets/themes/theme13.scss b/resources/assets/themes/theme13.scss index 46cd22a1..24ed287d 100644 --- a/resources/assets/themes/theme13.scss +++ b/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; diff --git a/resources/assets/themes/theme14.scss b/resources/assets/themes/theme14.scss index 27ab5896..7de23c85 100644 --- a/resources/assets/themes/theme14.scss +++ b/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; diff --git a/resources/assets/themes/theme15.scss b/resources/assets/themes/theme15.scss index d9bea874..3612d51c 100644 --- a/resources/assets/themes/theme15.scss +++ b/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, diff --git a/resources/assets/themes/theme4.scss b/resources/assets/themes/theme4.scss index ac4c6085..ac83811a 100644 --- a/resources/assets/themes/theme4.scss +++ b/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; diff --git a/resources/assets/themes/theme6.scss b/resources/assets/themes/theme6.scss index 08d507a6..9b0c7aba 100644 --- a/resources/assets/themes/theme6.scss +++ b/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; diff --git a/resources/assets/themes/theme7.scss b/resources/assets/themes/theme7.scss index 26717669..24cd02ae 100644 --- a/resources/assets/themes/theme7.scss +++ b/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)); } diff --git a/resources/assets/themes/theme8.scss b/resources/assets/themes/theme8.scss index a66c3dc8..db708806 100644 --- a/resources/assets/themes/theme8.scss +++ b/resources/assets/themes/theme8.scss @@ -46,10 +46,6 @@ h1 { } } -.panel-title { - color: #fff; -} - .input-group-addon { color: #000; diff --git a/resources/assets/themes/theme9.scss b/resources/assets/themes/theme9.scss index d476f3b0..191a10df 100644 --- a/resources/assets/themes/theme9.scss +++ b/resources/assets/themes/theme9.scss @@ -47,10 +47,6 @@ h1 { } } -.panel-title { - color: #fff; -} - .input-group-addon { color: #000; diff --git a/resources/views/pages/design.twig b/resources/views/pages/design.twig index 560430eb..1a9f6281 100644 --- a/resources/views/pages/design.twig +++ b/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 link amet, consectetur adipisici elit!' %} @@ -144,7 +145,7 @@
-
+

Badges

{% for type in types_color %} @@ -152,7 +153,7 @@ {% endfor %}

-
+

Buttons

{% for type in types_buttons %} @@ -163,12 +164,12 @@

-
+

Alerts

{% for color in colors %} -
+

{{ color|capitalize }}

{{ m.alert(lipsum, color) }}
@@ -177,53 +178,76 @@
+
+
+

Cards

+ +
+ {% for type in types %} +
+
+

{{ type|capitalize }}

+
+

{{ shortsum }}

+

Some link

+
+
+ Footer +
+
+
+ {% endfor %} +
+
+
+

Forms

-
+
{{ f.input('form-input-text', 'Text', 'text', {'value': 'Value'}) }}
-
+
{{ f.input('form-input-text-hidden-label', 'Hidden label', 'text', {'value': 'Hidden label', 'hide_label': true}) }}
-
+
{{ f.input('form-input-text-disabled', 'Disabled', 'text', {'disabled': true, 'value': 'Value'}) }}
-
+
{{ f.input('form-input-text-readonly', 'Readonly', 'text', {'readonly': true, 'value': 'Value'}) }}
-
+
{{ f.input('form-input-password', 'Password', 'password', {'value': 'Value'}) }}
-
+
{{ f.input('form-input-number', 'Number', 'number', {'value': 42}) }}
-
+
{{ f.textarea('form-input-textarea', 'Textarea', {'rows': 2, 'value': lipsum}) }}
-
+
{{ f.select('form-input-select', {'lorem': 'Ipsum', 'dolor': 'Sit'}, 'Select', 'dolor') }}
-
+
{{ f.button('Button', {'btn_type': 'primary'}) }}
-
+
Submit button
{{ f.submit() }}
-
+
Checkbox
{{ f.checkbox('form-input-checkbox', 'Checkbox', true) }} {{ f.checkbox('form-input-checkbox-2', 'Checkbox 2') }}
-
+
Radio