Removed and replaced outdated classes and styling, use secondary buttons

This commit is contained in:
Igor Scheller 2021-07-25 21:41:57 +02:00 committed by Michael Weimann
parent 191a3a7d48
commit 91c7a19f11
No known key found for this signature in database
GPG Key ID: 34F0524D4DA694A1
21 changed files with 60 additions and 282 deletions

1
.gitignore vendored
View File

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

View File

@ -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>';
}
/**

View File

@ -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 />';

View File

@ -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
])
])

View File

@ -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 = [];

View File

@ -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;
}

View File

@ -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 {

View File

@ -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
//
//##

View File

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

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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,

View File

@ -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;

View File

@ -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;

View File

@ -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));
}

View File

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

View File

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

View File

@ -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>

View File

@ -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 }}