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)
skoranda · Apr 12, 2019 · be73364 · be73364
1 parent b19c82e
commit be73364
Showing 73 changed files with 275 additions and 47,602 deletions.
diff --git 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
@@ -47,16 +47,15 @@
 
           $linkContent = '<em class="material-icons" aria-hidden="true">' . $icon . '</em><span class="menuTitle">'
             . __('match.ct.'.$model, [99])
-            . '</span><span class="mdl-ripple"></span>';
+            . '</span>';
 
           print $this->Html->link(
             $linkContent,
             ['plugin'       => null,
              'controller'   => $model,
              'action'       => 'index',
              'matchgrid_id' => $vv_cur_mg->id],
-            ['class' => 'mdl-js-ripple-effect',
-             'escape' => false]
+            ['escape' => false]
           );
 
           print "</li>";
@@ -77,15 +76,14 @@
 
           $linkContent = '<em class="material-icons" aria-hidden="true">' . $icon . '</em><span class="menuTitle">'
             . __('match.ct.'.$model, [99])
-            . '</span><span class="mdl-ripple"></span>';
+            . '</span>';
 
           print $this->Html->link(
             $linkContent,
             ['plugin'     => null,
              'controller' => $model,
              'action'     => 'index'],
-            ['class' => 'mdl-js-ripple-effect',
-             'escape' => false]
+            ['escape' => false]
           );
 
           print "</li>";

diff --git a/app/src/Template/Element/menuUser.ctp b/app/src/Template/Element/menuUser.ctp
@@ -39,10 +39,10 @@
     <div id="user-panel" aria-expanded="false" style="display: none;">
       <div id="logout-in-panel">
         <?php
-          print $this->Html->link(__('match.op.logout') . ' <span class="fa fa-sign-out"></span>',
+          print $this->Html->link(__('match.op.logout'),
                                   '/auth/logout/logout.php',
                                   ['escape'     => false,
-                                   'class'      => 'mdl-button mdl-js-button mdl-js-ripple-effect']);
+                                   'class'      => 'btn']);
         ?>
       </div>
       <div id="user-panel-user-info">
@@ -57,7 +57,7 @@
 <?php if(!isset($noLoginLogout) || !$noLoginLogout) : ?>
   <?php
     if(!$vv_user) {
-      print $this->Html->link(__('match.op.login') . ' <span class="fa fa-sign-in"></span>',
+      print $this->Html->link(__('match.op.login'),
                               ['controller' => 'matchgrids',
                                'action'     => 'select',
                                'plugin'     => false],

diff --git a/app/src/Template/Layout/default.ctp b/app/src/Template/Layout/default.ctp
@@ -56,20 +56,14 @@ if(isset($_SERVER['HTTP_USER_AGENT']) && (strpos($_SERVER['HTTP_USER_AGENT'], 'M
 
     <!-- Load CSS -->
     <?= $this->Html->css([
+      'bootstrap/bootstrap-4.3.1.min',
       'jquery/jquery-ui-1.12.1.custom/jquery-ui.min',
-      'mdl/mdl-1.3.0/material.min.css',
-      'jquery/metisMenu/metisMenu.min.css',
-      'fonts/Font-Awesome-4.6.3/css/font-awesome.min',
+      'jquery/metisMenu/metisMenu-2.5.2.min.css',
+      'fonts/Font-Awesome-4.6.3/css/font-awesome.min', // XXX Font-Awesome only used for login/logout icon; replace???
       'co-base',
       'co-responsive'
     ]) . "\n"; ?>
 
-    <!-- Load JavaScript (only JQuery here - other scripts at bottom) -->
-    <?= $this->Html->script([
-      'jquery/jquery-3.2.1.min.js',
-      'jquery/jquery-ui-1.12.1.custom/jquery-ui.min.js'
-    ]) . "\n"; ?>
-
     <!-- Include external files and scripts -->
     <?= $this->fetch('meta') ?>
     <?= $this->fetch('css') ?>
@@ -95,75 +89,75 @@ if(isset($_SERVER['HTTP_USER_AGENT']) && (strpos($_SERVER['HTTP_USER_AGENT'], 'M
     </div>
 
     <!-- Primary layout -->
-    <div id="comanage-wrapper" class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
+    <div id="comanage-wrapper">
       <div id="top-menu">
         <?php if(!empty($vv_user)): ?>
-          <div id="desktop-hamburger"><em class="material-icons">menu</em></div>
+          <div id="co-hamburger"><em class="material-icons">menu</em></div>
         <?php endif; // vv_user ?>
         <nav id="user-menu">
           <?php print $this->element('menuUser'); ?>
         </nav>
       </div>
 
-      <header id="banner" class="mdl-layout__header mdl-layout__header--scroll">
-        <div class="mdl-layout__header-row">
-          <div id="collaborationTitle">
-            <?= __('match.meta.match'); ?>
-          </div>
-
-          <div id="logo">
-            <?=
-              $this->Html->link(
-                $this->Html->image(
-                  "COmanage-Logo-LG-onGreen.png",
-                  array(
-                    'alt' => __('match.meta.logo')
-                  )
-                ),'/',
-                array('escape' => false)
-              );
-            ?>
-          </div>
+      <header id="banner">
+        <div id="collaborationTitle">
+          <?= $this->Html->link(__('match.meta.match'),'/'); ?>
         </div>
-      </header>
-
-      <?php if(!empty($vv_user)): ?>
-        <div id="navigation-drawer" class="mdl-layout__drawer">
-          <nav id="navigation" aria-label="main menu" class="mdl-navigation">
-            <?= $this->element('menuMain'); ?>
-          </nav>
+
+        <div id="logo">
+          <?=
+            $this->Html->image(
+              "COmanage-Logo-LG-onGreen.png",
+              array(
+                'alt' => __('match.meta.logo')
+              )
+            );
+          ?>
         </div>
-      <?php endif ?>
-
-      <main id="main" class="mdl-layout__content">
-        <div id="content" class="mdl-grid">
-          <div id="content-inner" class="mdl-cell mdl-cell--12-col">
-            <!-- insert breadcrumbs -->
-            <div id="breadcrumbs">
-              <?= $this->element('breadcrumbs'); ?>
+      </header>
+
+      <div id="main-wrapper">
+        <?php if(!empty($vv_user)): ?>
+          <div id="navigation-drawer">
+            <nav id="navigation" aria-label="main menu">
+              <?= $this->element('menuMain'); ?>
+            </nav>
+          </div>
+        <?php endif ?>
+
+        <main id="main">
+          <div id="content">
+            <div id="content-inner">
+              <!-- insert breadcrumbs -->
+              <div id="breadcrumbs">
+                <?= $this->element('breadcrumbs'); ?>
+              </div>
+
+              <!-- insert the anchor that is the target of accessible "skip to content" link -->
+              <a id="content-start"></a>
+
+              <!-- insert the page internal content -->
+              <?= $this->fetch('content'); ?>
             </div>
-
-            <!-- insert the anchor that is the target of accessible "skip to content" link -->
-            <a id="content-start"></a>
-
-            <!-- insert the page internal content -->
-            <?= $this->fetch('content'); ?>
           </div>
-        </div>
-      </main>
-
-      <footer id="co-footer">
-<!-- XXX we appear to need the footer (or the error) to get everything else to render? -->
-        <?= $this->element('footer'); ?>
-      </footer>
+
+          <footer id="co-footer">
+            <!-- XXX we appear to need the footer (or the error) to get everything else to render? -->
+            <?= $this->element('footer'); ?>
+          </footer>
+        </main>
+      </div>
+
     </div>
 
     <!-- Load Javascript -->
     <?= $this->Html->script([
-      'mdl/mdl-1.3.0/material.min.js',
-      'jquery/metisMenu/metisMenu.min.js',
+      'jquery/jquery-3.3.1.min.js',
+      'bootstrap/bootstrap-4.3.1.min',
+      'jquery/jquery-ui-1.12.1.custom/jquery-ui.min.js',
+      'jquery/metisMenu/metisMenu-2.5.2.min.js',
       'js-cookie/js.cookie-2.1.3.min.js',
-      'jquery/spin.min.js',
+      'jquery/spin/spin.min.js',
       'jquery/noty/jquery.noty.js',
       'jquery/noty/layouts/topCenter.js',
       'jquery/noty/themes/comanage.js',

diff --git a/app/src/Template/Layout/error.ctp b/app/src/Template/Layout/error.ctp
@@ -22,6 +22,8 @@
     </title>
     <?= $this->Html->meta('icon') ?>
 
+    <?php /* XXX Fix this file to look like the rest of the application
+                 and then remove the following two files. */ ?>
     <?= $this->Html->css('base.css') ?>
     <?= $this->Html->css('cake.css') ?>
 

diff --git a/app/src/Template/Matchgrids/manage.ctp b/app/src/Template/Matchgrids/manage.ctp
@@ -27,8 +27,11 @@
 
 declare(strict_types = 1);
 ?>
-
-<h1><?= $vv_title; ?></h1>
+<div class="titleNavContainer">
+  <div class="pageTitle">
+    <h1><?= $vv_title; ?></h1>
+  </div>
+</div>
 
 <!-- Matchgrid Management Menu -->
 <section class="inner-content">

diff --git a/app/src/Template/Matchgrids/pending.ctp b/app/src/Template/Matchgrids/pending.ctp
@@ -28,7 +28,11 @@
 declare(strict_types = 1);
 ?>
 
-<h1><?= $vv_title; ?></h1>
+<div class="titleNavContainer">
+  <div class="pageTitle">
+    <h1><?= $vv_title; ?></h1>
+  </div>
+</div>
 
 <h2><?= __('match.rs.pending', [count($vv_pending)]); ?></h2>
 

diff --git a/app/src/Template/Matchgrids/reconcile.ctp b/app/src/Template/Matchgrids/reconcile.ctp
@@ -27,7 +27,12 @@
 
 declare(strict_types = 1);
 ?>
-<h1><?= __('match.op.reconcile'); ?></h1>
+
+<div class="titleNavContainer">
+  <div class="pageTitle">
+    <h1><?= __('match.op.reconcile'); ?></h1>
+  </div>
+</div>
 
 <table>
   <tr>

diff --git a/app/src/Template/Matchgrids/select.ctp b/app/src/Template/Matchgrids/select.ctp
@@ -29,19 +29,22 @@ declare(strict_types = 1);
 
 use \App\Lib\Enum\PermissionEnum;
 ?>
-
-<h1><?= $vv_title; ?></h1>
+<div class="titleNavContainer">
+  <div class="pageTitle">
+    <h1><?= $vv_title; ?></h1>
+  </div>
+</div>
 
 <?php if(count($vv_matchgrids) == 0): ?>
 <div class="co-info-topbox">
   <em class="material-icons">info</em>
   <?= __('match.in.matchgrids.none'); ?>
 </div>
 <?php else: // vv_matchgrids ?>
-<div id="fpCoList" class="co-grid co-grid-with-header mdl-shadow--2dp">
-  <div class="mdl-grid co-grid-header">
-    <div class="mdl-cell mdl-cell--6-col"><?= __('match.ct.matchgrids', [1]) ?></div>
-    <div class="mdl-cell mdl-cell--6-col"><?= __('match.fd.action') ?></div>
+<div id="fpCoList" class="co-grid co-grid-with-header container">
+  <div class="co-grid-header row">
+    <div class="col"><?= __('match.ct.matchgrids', [1]) ?></div>
+    <div class="col"><?= __('match.fd.action') ?></div>
   </div>
   <?php foreach($vv_matchgrids as $id => $name): ?>
   <?php
@@ -50,11 +53,11 @@ use \App\Lib\Enum\PermissionEnum;
       continue;
     }
   ?>
-  <div class="mdl-grid co-row spin">
-    <div class="mdl-cell mdl-cell--6-col collab-name">
+  <div class="row co-row spin">
+    <div class="collab-name col">
       <?= filter_var($name, FILTER_SANITIZE_SPECIAL_CHARS); ?>
     </div>
-    <div class="mdl-cell mdl-cell--6-col collab-desc">
+    <div class="collab-desc col">
       <?php
         // Can manage this matchgrid?
         if((isset($vv_menu_permissions['gridroles'][$id][PermissionEnum::MatchgridAdmin])