From be73364e9e45b94888353b0989ddb60f18e93496 Mon Sep 17 00:00:00 2001 From: Arlen Johnson Date: Thu, 11 Apr 2019 21:25:11 -0400 Subject: [PATCH] Full update to Match UI to upgrade all libraries (including a move a way from MDL which is end-of-life). Insure baseline WCAG AA conformance. General clean up and UI refactoring. (CO-1662) --- app/src/Template/Element/javascript.ctp | 60 +- app/src/Template/Element/menuMain.ctp | 10 +- app/src/Template/Element/menuUser.ctp | 6 +- app/src/Template/Layout/default.ctp | 116 +- app/src/Template/Layout/error.ctp | 2 + app/src/Template/Matchgrids/manage.ctp | 7 +- app/src/Template/Matchgrids/pending.ctp | 6 +- app/src/Template/Matchgrids/reconcile.ctp | 7 +- app/src/Template/Matchgrids/select.ctp | 21 +- app/src/Template/Pages/home.ctp | 4 +- app/src/Template/Standard/index.ctp | 21 +- app/webroot/css/base.css | 455 - .../css/bootstrap/bootstrap-4.3.1.min.css | 7 + app/webroot/css/co-base.css | 117 +- app/webroot/css/co-responsive.css | 152 +- .../Font-Awesome-4.6.3/css/font-awesome.css | 2203 --- .../css/font-awesome.css.map | 7 - .../css/font-awesome.min.css | 4 - .../Font-Awesome-4.6.3/fonts/FontAwesome.otf | Bin 124988 -> 0 bytes .../fonts/fontawesome-webfont.eot | Bin 76518 -> 0 bytes .../fonts/fontawesome-webfont.svg | 685 - .../fonts/fontawesome-webfont.ttf | Bin 152796 -> 0 bytes .../fonts/fontawesome-webfont.woff | Bin 90412 -> 0 bytes .../fonts/fontawesome-webfont.woff2 | Bin 71896 -> 0 bytes app/webroot/css/home.css | 240 - app/webroot/css/jquery/jquery-3.2.1.min.js | 4 - .../external/jquery/jquery.js | 11008 --------------- ...isMenu.min.css => metisMenu-2.5.2.min.css} | 0 .../css/jquery/metisMenu/metisMenu.css | 99 - app/webroot/css/jquery/metisMenu/metisMenu.js | 375 - .../css/jquery/metisMenu/metisMenu.js.map | 1 - app/webroot/css/mdl/mdl-1.3.0/LICENSE | 212 - app/webroot/css/mdl/mdl-1.3.0/bower.json | 29 - app/webroot/css/mdl/mdl-1.3.0/material.css | 11476 ---------------- app/webroot/css/mdl/mdl-1.3.0/material.js | 3996 ------ .../css/mdl/mdl-1.3.0/material.min.css | 9 - .../css/mdl/mdl-1.3.0/material.min.css.map | 1 - app/webroot/css/mdl/mdl-1.3.0/material.min.js | 10 - .../css/mdl/mdl-1.3.0/material.min.js.map | 1 - app/webroot/css/mdl/mdl-1.3.0/package.json | 77 - .../mdl-selectfield.min.css | 3 - .../mdl-selectfield.min.js | 2 - app/webroot/font/cakedingbats-webfont.eot | Bin 75538 -> 0 bytes app/webroot/font/cakedingbats-webfont.svg | 78 - app/webroot/font/cakedingbats-webfont.ttf | Bin 75412 -> 0 bytes app/webroot/font/cakedingbats-webfont.woff | Bin 43484 -> 0 bytes app/webroot/font/cakedingbats-webfont.woff2 | Bin 35456 -> 0 bytes app/webroot/img/cake-logo.png | Bin 2683 -> 0 bytes app/webroot/img/cake.icon.png | Bin 943 -> 0 bytes app/webroot/img/cake.logo.svg | 41 - app/webroot/img/cake.power.gif | Bin 201 -> 0 bytes .../js/bootstrap/bootstrap-4.3.1.min.js | 7 + app/webroot/js/jquery/jquery-3.2.1.min.js | 4 - app/webroot/js/jquery/jquery-3.3.1.min.js | 2 + .../jquery/metisMenu/metisMenu-2.5.2.min.js} | 0 app/webroot/js/jquery/metisMenu/metisMenu.css | 99 - app/webroot/js/jquery/metisMenu/metisMenu.js | 375 - .../js/jquery/metisMenu/metisMenu.js.map | 1 - .../js/jquery/metisMenu/metisMenu.min.css | 10 - .../js/jquery/metisMenu/metisMenu.min.js | 11 - .../js/jquery/{ => spin}/spin.license.txt | 0 app/webroot/js/jquery/{ => spin}/spin.min.js | 0 app/webroot/js/mdl/mdl-1.3.0/LICENSE | 212 - app/webroot/js/mdl/mdl-1.3.0/bower.json | 29 - app/webroot/js/mdl/mdl-1.3.0/material.css | 11476 ---------------- app/webroot/js/mdl/mdl-1.3.0/material.js | 3996 ------ app/webroot/js/mdl/mdl-1.3.0/material.min.css | 9 - .../js/mdl/mdl-1.3.0/material.min.css.map | 1 - app/webroot/js/mdl/mdl-1.3.0/material.min.js | 10 - .../js/mdl/mdl-1.3.0/material.min.js.map | 1 - app/webroot/js/mdl/mdl-1.3.0/package.json | 77 - .../mdl-selectfield.min.css | 3 - .../mdl-selectfield.min.js | 2 - 73 files changed, 275 insertions(+), 47602 deletions(-) delete mode 100644 app/webroot/css/base.css create mode 100644 app/webroot/css/bootstrap/bootstrap-4.3.1.min.css delete mode 100644 app/webroot/css/fonts/Font-Awesome-4.6.3/css/font-awesome.css delete mode 100644 app/webroot/css/fonts/Font-Awesome-4.6.3/css/font-awesome.css.map delete mode 100644 app/webroot/css/fonts/Font-Awesome-4.6.3/css/font-awesome.min.css delete mode 100644 app/webroot/css/fonts/Font-Awesome-4.6.3/fonts/FontAwesome.otf delete mode 100644 app/webroot/css/fonts/Font-Awesome-4.6.3/fonts/fontawesome-webfont.eot delete mode 100644 app/webroot/css/fonts/Font-Awesome-4.6.3/fonts/fontawesome-webfont.svg delete mode 100644 app/webroot/css/fonts/Font-Awesome-4.6.3/fonts/fontawesome-webfont.ttf delete mode 100644 app/webroot/css/fonts/Font-Awesome-4.6.3/fonts/fontawesome-webfont.woff delete mode 100644 app/webroot/css/fonts/Font-Awesome-4.6.3/fonts/fontawesome-webfont.woff2 delete mode 100644 app/webroot/css/home.css delete mode 100644 app/webroot/css/jquery/jquery-3.2.1.min.js delete mode 100644 app/webroot/css/jquery/jquery-ui-1.12.1.custom/external/jquery/jquery.js rename app/webroot/css/jquery/metisMenu/{metisMenu.min.css => metisMenu-2.5.2.min.css} (100%) delete mode 100644 app/webroot/css/jquery/metisMenu/metisMenu.css delete mode 100644 app/webroot/css/jquery/metisMenu/metisMenu.js delete mode 100644 app/webroot/css/jquery/metisMenu/metisMenu.js.map delete mode 100644 app/webroot/css/mdl/mdl-1.3.0/LICENSE delete mode 100644 app/webroot/css/mdl/mdl-1.3.0/bower.json delete mode 100644 app/webroot/css/mdl/mdl-1.3.0/material.css delete mode 100644 app/webroot/css/mdl/mdl-1.3.0/material.js delete mode 100644 app/webroot/css/mdl/mdl-1.3.0/material.min.css delete mode 100644 app/webroot/css/mdl/mdl-1.3.0/material.min.css.map delete mode 100644 app/webroot/css/mdl/mdl-1.3.0/material.min.js delete mode 100644 app/webroot/css/mdl/mdl-1.3.0/material.min.js.map delete mode 100644 app/webroot/css/mdl/mdl-1.3.0/package.json delete mode 100644 app/webroot/css/mdl/mdl-selectfield-1.0.2/mdl-selectfield.min.css delete mode 100644 app/webroot/css/mdl/mdl-selectfield-1.0.2/mdl-selectfield.min.js delete mode 100644 app/webroot/font/cakedingbats-webfont.eot delete mode 100644 app/webroot/font/cakedingbats-webfont.svg delete mode 100644 app/webroot/font/cakedingbats-webfont.ttf delete mode 100644 app/webroot/font/cakedingbats-webfont.woff delete mode 100644 app/webroot/font/cakedingbats-webfont.woff2 delete mode 100644 app/webroot/img/cake-logo.png delete mode 100644 app/webroot/img/cake.icon.png delete mode 100644 app/webroot/img/cake.logo.svg delete mode 100644 app/webroot/img/cake.power.gif create mode 100644 app/webroot/js/bootstrap/bootstrap-4.3.1.min.js delete mode 100644 app/webroot/js/jquery/jquery-3.2.1.min.js create mode 100644 app/webroot/js/jquery/jquery-3.3.1.min.js rename app/webroot/{css/jquery/metisMenu/metisMenu.min.js => js/jquery/metisMenu/metisMenu-2.5.2.min.js} (100%) delete mode 100644 app/webroot/js/jquery/metisMenu/metisMenu.css delete mode 100644 app/webroot/js/jquery/metisMenu/metisMenu.js delete mode 100644 app/webroot/js/jquery/metisMenu/metisMenu.js.map delete mode 100644 app/webroot/js/jquery/metisMenu/metisMenu.min.css delete mode 100644 app/webroot/js/jquery/metisMenu/metisMenu.min.js rename app/webroot/js/jquery/{ => spin}/spin.license.txt (100%) rename app/webroot/js/jquery/{ => spin}/spin.min.js (100%) delete mode 100644 app/webroot/js/mdl/mdl-1.3.0/LICENSE delete mode 100644 app/webroot/js/mdl/mdl-1.3.0/bower.json delete mode 100644 app/webroot/js/mdl/mdl-1.3.0/material.css delete mode 100644 app/webroot/js/mdl/mdl-1.3.0/material.js delete mode 100644 app/webroot/js/mdl/mdl-1.3.0/material.min.css delete mode 100644 app/webroot/js/mdl/mdl-1.3.0/material.min.css.map delete mode 100644 app/webroot/js/mdl/mdl-1.3.0/material.min.js delete mode 100644 app/webroot/js/mdl/mdl-1.3.0/material.min.js.map delete mode 100644 app/webroot/js/mdl/mdl-1.3.0/package.json delete mode 100644 app/webroot/js/mdl/mdl-selectfield-1.0.2/mdl-selectfield.min.css delete mode 100644 app/webroot/js/mdl/mdl-selectfield-1.0.2/mdl-selectfield.min.js diff --git a/app/src/Template/Element/javascript.ctp b/app/src/Template/Element/javascript.ctp index c8891f937..c46b3f145 100644 --- a/app/src/Template/Element/javascript.ctp +++ b/app/src/Template/Element/javascript.ctp @@ -32,18 +32,9 @@ // Establish left-side navigation $('#main-menu').metisMenu(); - // Never allow MDL to apply "aria-hidden" on the fixed menu drawer (it should always be available to screen readers) - $('#navigation-drawer').removeAttr('aria-hidden'); - // Focus any designated form element $('.focusFirst').focus(); - // MDL prematurely marks all required=true fields with "is-invalid" class. - // Remove it. Must be done after MDL scripts have run (hence, window.load) - $(window).on('load', function() { - $('.mdl-textfield').removeClass('is-invalid'); - }); - // DESKTOP MENU DRAWER BEHAVIOR // Check the drawer half-closed cookie on first load and set the drawer state appropriately if (Cookies.get("desktop-drawer-state") == "half-closed") { @@ -61,21 +52,37 @@ } } - // Desktop hamburger menu-drawer toggle - $('#desktop-hamburger').click(function () { - if( $("#navigation-drawer").hasClass("half-closed")) { - $("#navigation-drawer").removeClass("half-closed"); - $("#main").removeClass("drawer-half-closed"); - // set a cookie to hold drawer half-open state between requests - Cookies.set("desktop-drawer-state", "open"); + // Hamburger menu-drawer toggle + $('#co-hamburger').click(function () { + if($(window).width() < 768) { + // Mobile mode + $("#navigation-drawer").removeClass("half-closed").toggle(); } else { - $("#navigation-drawer").addClass("half-closed"); - $("#main").addClass("drawer-half-closed"); - // ensure all the sub-menus collapse when half-closing the menu - $("#navigation .metismenu li ul").removeClass("in"); - $("#navigation .metismenu li").removeClass("active"); - // set a cookie to hold drawer half-open state between requests - Cookies.set("desktop-drawer-state", "half-closed"); + // Desktop mode + if ($("#navigation-drawer").hasClass("half-closed")) { + $("#navigation-drawer").removeClass("half-closed"); + $("#main").removeClass("drawer-half-closed"); + // set a cookie to hold drawer half-open state between requests + Cookies.set("desktop-drawer-state", "open"); + } else { + $("#navigation-drawer").addClass("half-closed"); + $("#main").addClass("drawer-half-closed"); + // ensure all the sub-menus collapse when half-closing the menu + $("#navigation .metismenu li ul").removeClass("in"); + $("#navigation .metismenu li").removeClass("active"); + // set a cookie to hold drawer half-open state between requests + Cookies.set("desktop-drawer-state", "half-closed"); + } + } + }); + + // Catch the edge-case of browser resize causing menu-drawer + // to remain hidden and vice versa. + $(window).resize(function() { + if($( window ).width() > 767) { + $("#navigation-drawer").show(); + } else { + $("#navigation-drawer").hide(); } }); @@ -130,8 +137,11 @@ // Accordion $(".accordion").accordion(); - // Make all submit buttons pretty (MDL) - $("input:submit").addClass("spin submit-button mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"); + // Make all submit buttons pretty (Bootstrap) + $("input:submit").addClass("spin submit-button btn btn-primary"); + + // Make all select form controls Bootstrappy + $("select").addClass("form-control"); // Other buttons (jQuery) $(".addbutton").button({ diff --git a/app/src/Template/Element/menuMain.ctp b/app/src/Template/Element/menuMain.ctp index 78f1ecbfc..8f9bba476 100644 --- a/app/src/Template/Element/menuMain.ctp +++ b/app/src/Template/Element/menuMain.ctp @@ -47,7 +47,7 @@ $linkContent = '' . __('match.ct.'.$model, [99]) - . ''; + . ''; print $this->Html->link( $linkContent, @@ -55,8 +55,7 @@ 'controller' => $model, 'action' => 'index', 'matchgrid_id' => $vv_cur_mg->id], - ['class' => 'mdl-js-ripple-effect', - 'escape' => false] + ['escape' => false] ); print ""; @@ -77,15 +76,14 @@ $linkContent = '' . __('match.ct.'.$model, [99]) - . ''; + . ''; print $this->Html->link( $linkContent, ['plugin' => null, 'controller' => $model, 'action' => 'index'], - ['class' => 'mdl-js-ripple-effect', - 'escape' => false] + ['escape' => false] ); print ""; diff --git a/app/src/Template/Element/menuUser.ctp b/app/src/Template/Element/menuUser.ctp index 6ebb09aa6..b98b78d63 100644 --- a/app/src/Template/Element/menuUser.ctp +++ b/app/src/Template/Element/menuUser.ctp @@ -39,10 +39,10 @@