Skip to content
Jump to bottom

Upgrade Match to Bootstrap 5 (CO-2266) #32

Merged
merged 3 commits into from
Nov 5, 2021
Merged

Upgrade Match to Bootstrap 5 (CO-2266) #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0707be9
Upgrade Match to Bootstrap 5 (CO-2266)
arlen Nov 5, 2021
57520c4
Trivial color change to filter bar icons (NOJIRA)
arlen Nov 5, 2021
c2df3db
Add"nospin" class to skip-to-content link (NOJIRA)
arlen Nov 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions app/templates/Standard/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,16 +228,16 @@ function _column_key($modelsName, $c, $tz=null) {
}
if(!empty($cfg['button']['popover'])) {
if($cfg['button']['popover'] == 'fieldVal') {
$buttonAttrs['data-content'] = $entity->$col;
$buttonAttrs['data-bs-content'] = $entity->$col;
} else {
$buttonAttrs['data-content'] = $cfg['button']['popover'];
$buttonAttrs['data-bs-content'] = $cfg['button']['popover'];
}
$label = !empty($cfg['label']) ? $cfg['label'] : _column_key($modelsName, $col, $vv_tz);
$buttonAttrs['title'] = $label;
$buttonAttrs['data-toggle'] = 'popover';
$buttonAttrs['data-container'] = 'body';
$buttonAttrs['data-placement'] = 'top';
$buttonAttrs['data-animation'] = 'false';
$buttonAttrs['data-bs-toggle'] = 'popover';
$buttonAttrs['data-bs-container'] = 'body';
$buttonAttrs['data-bs-placement'] = 'top';
$buttonAttrs['data-bs-animation'] = 'false';
}
print $this->Form->button($buttonText, $buttonAttrs);
}
Expand Down
8 changes: 3 additions & 5 deletions app/templates/element/dialog.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,16 +35,14 @@
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="dialog-title"><?= __('match.op.confirm'); ?></h2>
<button type="button" class="close nospin" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close nospin" data-bs-dismiss="modal" aria-label="Close"/>
</div>
<div id="dialog-text" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn nospin"
id="dialog-cancel-button" data-dismiss="modal"><?= __('match.op.cancel'); ?></button>
<button type="button" class="btn btn-primary" data-dismiss="modal"
id="dialog-cancel-button" data-bs-dismiss="modal"><?= __('match.op.cancel'); ?></button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal"
id="dialog-confirm-button"><?= __('match.op.confirm'); ?></button>
</div>
</div>
Expand Down
30 changes: 6 additions & 24 deletions app/templates/element/javascript.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,29 +94,11 @@
}
});
// END DESKTOP MENU DRAWER BEHAVIOR

// USER MENU BEHAVIORS

// Toggle the custom user panel in the user menu
$("#user-panel-toggle").click(function(e) {
e.stopPropagation();
if ($("#user-panel").is(":visible")) {
$("#user-panel").hide();
$("#user-panel").attr("aria-expanded","false");
} else {
$("#user-panel").show();
$("#user-panel").attr("aria-expanded","true");
}
});


// Click outside behaviors
$(document).on('click', function (e) {
// Hide custom user menu items on click outside
if ($(e.target).closest("#user-panel").length === 0) {
$("#user-panel").hide();
}
// Hide popovers on click outside but don't close current popover when interacting with content inside it
$('#content [data-toggle="popover"]').each(function () {
$('#content [data-bs-toggle="popover"]').each(function () {
if (!$(this).is(e.target) && $('.popover.show').has(e.target).length === 0) {
$(this).popover('hide');
}
Expand Down Expand Up @@ -171,10 +153,10 @@
$("input:submit").addClass("spin submit-button btn btn-primary");

// Make all select form controls Bootstrappy
$("select").addClass("form-control");
$("select").addClass("form-select");

// Enable Bootstrap Popovers. Unless needed elsewhere, constrain this to #content
$('#content [data-toggle="popover"]').popover();
$('#content [data-bs-toggle="popover"]').popover();

// Generic row click handling for div-based rows
$('div.linked-row').click(function (e) {
Expand All @@ -185,8 +167,8 @@
$('td.row-link').each(function (e) {
url = $(this).find('a').attr('href');
if(url != undefined && url != '') {
$(this).closest('tr').addClass('linked-row').attr('data-target',url).click(function (e) {
location.href = $(this).attr('data-target');
$(this).closest('tr').addClass('linked-row').attr('data-cm-target',url).click(function (e) {
location.href = $(this).attr('data-cm-target');
}).find('a').on('click',function(e){
// don't propagate on other links to avoid redirecting dialog boxes
e.stopPropagation();
Expand Down
4 changes: 2 additions & 2 deletions app/templates/element/menuAction.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ class="<?= $actionsMenuClass; ?>">
'id' => 'action-menu-content_' . $actionsMenuUid,
'class' => 'nospin action-menu-toggle',
'escape' => false,
'data-toggle' => 'dropdown',
'data-bs-toggle' => 'dropdown',
'aria-haspopup' => true,
'aria-expanded' => false,
'title' => __('match.fd.action')
Expand Down Expand Up @@ -82,7 +82,7 @@ class="<?= $actionsMenuClass; ?>">
. '\']);';
?>
<a class="<?= $actionCssClass; ?>" href="#" onclick="<?= $dg_onclick; ?>"
data-toggle="modal" data-target="#dialog">
data-bs-toggle="modal" data-bs-target="#dialog">
<?php if(!empty($action['icon'])): ?>
<em class="material-icons"><?= $action['icon']; ?></em>
<?php endif; ?>
Expand Down
6 changes: 3 additions & 3 deletions app/templates/element/menuTop.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<ul>
<?php if($vv_menu_permissions['matchgrids']): ?>
<li id="top-menu-platform">
<a class="dropdown-toggle nospin" href="#" role="button" id="platform-dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="dropdown-toggle nospin" href="#" role="button" id="platform-dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="top-menu-link-text">
<?= __('match.op.platform'); ?>
</span>
Expand Down Expand Up @@ -65,14 +65,14 @@
</li>
<?php endif; ?>
<li id="top-menu-user">
<a class="dropdown-toggle nospin" href="#" role="button" id="user-panel-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="dropdown-toggle nospin" href="#" role="button" id="user-panel-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="top-menu-link-text">
<?= $vv_user['username']; ?>
</span>
<em class="material-icons icon-adjust">person</em>
</a>
<!-- Account Dropdown -->
<div id="user-panel" aria-expanded="false" style="display: none;">
<div id="user-panel" class="dropdown-menu" aria-labelledby="user-panel-toggle">
<div id="logout-in-panel">
<?php
print $this->Html->link(__('match.op.logout'),
Expand Down
6 changes: 3 additions & 3 deletions app/templates/layout/default.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@

<!-- Load CSS -->
<?= $this->Html->css([
'bootstrap/bootstrap-4.4.1.min',
'bootstrap/bootstrap-5.0.2.min',
'co-color',
'co-base',
'co-responsive'
Expand All @@ -83,7 +83,7 @@
?>
<body class="<?= $bodyClasses ?>" onload="js_onload_call_hooks()">
<div id="skip-to-content-box">
<a href="#content-start" id="skip-to-content"><?= __('match.op.skip_to_content') ?></a>
<a href="#content-start" id="skip-to-content" class="nospin"><?= __('match.op.skip_to_content') ?></a>
</div>

<!-- Primary layout -->
Expand Down Expand Up @@ -169,7 +169,7 @@
<!-- Load Javascript -->
<?= $this->Html->script([
'jquery/jquery-3.6.0.min.js',
'bootstrap/bootstrap-4.6.0.bundle.min.js',
'bootstrap/bootstrap-5.0.2.bundle.min.js',
'js-cookie/js.cookie-2.1.3.min.js',
'jquery/noty/jquery.noty.js',
'jquery/noty/layouts/topCenter.js',
Expand Down
7 changes: 0 additions & 7 deletions app/webroot/css/bootstrap/bootstrap-4.4.1.min.css
View file
Open in desktop

This file was deleted.

7 changes: 7 additions & 0 deletions app/webroot/css/bootstrap/bootstrap-5.0.2.min.css
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion app/webroot/css/bootstrap/bootstrap.min.css.map
View file
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 deletions app/webroot/css/co-base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,7 @@ body.logged-in #top-menu {
padding: 1em;
min-width: calc(100vw - 50px);
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
font-size: 1em;
}
#user-panel a:hover {
text-decoration: underline;
Expand Down Expand Up @@ -519,7 +520,8 @@ body.logged-in #top-menu {
}
#content .top-search legend .material-icons {
font-size: 1.4em;
vertical-align: top;
vertical-align: text-top;
color: var(--cmg-color-gray-002);
}
#content .top-search legend button.cm-toggle .material-icons {
font-size: 34px;
Expand All @@ -538,8 +540,6 @@ body.logged-in #top-menu {
.top-search legend {
width: 100%;
background-color: var(--cmg-color-lightgray-001);
margin: 0 -0.5em;
padding: 0.5em 0.5em 0;
line-height: 1.8em;
cursor: pointer;
font-size: 1em;
Expand Down
Loading