[#343] Fix a number of HTML validation errors and warnings

(Merge pull request #415 from Igalia/i343-html-validation)
Igalia · Nov 26, 2018 · f6a4831 · f6a4831
2 parents 3dfa13c + 6847bdf
commit f6a4831
Show file tree

Hide file tree

Showing 30 changed files with 141 additions and 161 deletions.
diff --git a/web/analysistracker-summary.php b/web/analysistracker-summary.php
@@ -38,10 +38,10 @@
 ?>
 
 <link rel="stylesheet" type="text/css" href="include/ColumnNodeUI.css" />
-<script type="text/javascript" src="include/ColumnNodeUI.min.js"></script>
-<script type="text/javascript" src="include/AnalysisTrackerSummaryTree.min.js"></script>
+<script src="include/ColumnNodeUI.min.js"></script>
+<script src="include/AnalysisTrackerSummaryTree.min.js"></script>
 
-<script type="text/javascript">
+<script>
 Ext.onReady(function(){
 <?php
     $user = $_SESSION['user'];

diff --git a/web/calendarManagement.php b/web/calendarManagement.php
@@ -32,15 +32,15 @@
 include_once(PHPREPORT_ROOT . '/model/facade/AdminFacade.php');
 $cities = AdminFacade::GetAllCities();
 
-echo '<script type="text/javascript">';
+echo '<script>';
 echo 'var citiesArray = [';
 foreach((array)$cities as $city)
     echo "[{$city->getId()}, '" . ucwords($city->getName()) . "'],";
 echo '];';
 echo '</script>';
 
 ?>
-<script type="text/javascript" src='js/calendarManagement.min.js'></script>
+<script src='js/calendarManagement.min.js'></script>
 
 <div id="sidebar-panel" class="auxiliarpanel"></div>
 <div id="content" style="margin-left: 215px;"></div>

diff --git a/web/cityManagement.php b/web/cityManagement.php
@@ -39,7 +39,7 @@
 
 ?>
 <script src="include/RowEditor.min.js"></script>
-<script type="text/javascript" src="js/cityManagement.min.js"></script>
+<script src="js/cityManagement.min.js"></script>
 
 <div id="content">
 </div>

diff --git a/web/hourCompensationManagement.php b/web/hourCompensationManagement.php
@@ -39,7 +39,7 @@
 
 ?>
 <script src="include/RowEditor.min.js"></script>
-<script type="text/javascript" src="js/hourCompensationManagement.min.js"></script>
+<script src="js/hourCompensationManagement.min.js"></script>
 
 <div id="content">
 </div>

diff --git a/web/include/footer.php b/web/include/footer.php
@@ -24,4 +24,5 @@
     <div id="footer">
     </div>
 
-</body>
+</body>
+</html>
diff --git a/web/include/header.php b/web/include/header.php
@@ -20,8 +20,10 @@
 
   header('Content-Type: text/html; charset=UTF-8');
 ?>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<!DOCTYPE html>
+<html>
 <head>
+    <meta charset="UTF-8">
 
     <title><?php echo PAGE_TITLE; ?></title>
 
@@ -38,20 +40,20 @@
     <link rel="stylesheet" type="text/css" href="include/ext.ux.datepickerplus/datepickerplus.css"/>
 
     <!-- Include Ext library -->
-    <script type="text/javascript" src="ext/adapter/ext/base.min.js"></script>
-    <script type="text/javascript" src="ext/ext.min.js"></script>
-    <script type="text/javascript" src="include/App.min.js"></script>
+    <script src="ext/adapter/ext/base.min.js"></script>
+    <script src="ext/ext.min.js"></script>
+    <script src="include/App.min.js"></script>
 
-        <!-- Configure prototypes -->
-    <script type="text/javascript">
+    <!-- Configure prototypes -->
+    <script>
       Ext.DatePicker.prototype.startDay = 1;
     </script>
 
     <!-- Include other common validations -->
-    <script type="text/javascript" src="include/validations.min.js"></script>
+    <script src="include/validations.min.js"></script>
 
     <!-- Include other common functions -->
-    <script type="text/javascript" src="include/functions.min.js"></script>
+    <script src="include/functions.min.js"></script>
 
     <!-- Include improved calendar widget -->
     <script src="include/ext.ux.datepickerplus/ext.ux.datepickerplus.min.js"></script>
@@ -73,6 +75,6 @@
 <body>
 
     <?php include("include/menubar.php"); ?>
-    <script type="text/javascript">
+    <script>
         var HEADER_HEIGHT = document.getElementById('menubar').scrollHeight;
     </script>
diff --git a/web/include/menubar.css b/web/include/menubar.css
@@ -10,32 +10,23 @@ ul#menubar {
     float: left;
 }
 
-#menubar li {
+#menubar > li {
     float: left;
-    font: normal 14px arial,tahoma,verdana,helvetica;
 }
 
 #menubar li.right {
     float: right;
 }
 
-#menubar li a,
-.dropdown-button {
-    display: inline-block;
+#menubar a {
+    font: normal 14px arial,tahoma,verdana,helvetica;
+    display: block;
     color: black;
-    text-align: center;
-    padding: 14px 16px;
     text-decoration: none;
 }
 
-#menubar li a:hover,
-.dropdown:hover .dropdown-button,
-.dropdown-content a:hover {
-    background-color: #bfd4f0;
-}
-
-#menubar li.dropdown {
-    display: inline-block;
+#menubar > li > a {
+    padding: 14px 16px;
 }
 
 #menubar .dropdown-content {
@@ -47,19 +38,14 @@ ul#menubar {
     z-index: 99
 }
 
-#menubar .dropdown-content a {
-    color: black;
-    padding: 12px 32px 12px 16px;
-    text-decoration: none;
-    display: block;
-    text-align: left;
+#menubar .dropdown-content li {
+    background-position-x: left;
+    background-position-y: center;
+    border-left: 16px solid #f9f9f9;
 }
 
-#menubar .dropdown-content img {
-    height: 16px;
-    width: 16px;
-    padding-right: 16px;
-    vertical-align: text-bottom;
+#menubar .dropdown-content a {
+    padding: 12px 32px;
 }
 
 #menubar .show {
@@ -68,9 +54,16 @@ ul#menubar {
 
 #menubar .dropdown-content .divider {
   height: 1px;
-  width: 206px; /* FIXME: do not hardcode this value */
   overflow: hidden;
   background-color: #e5e5e5;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+#menubar li:not(#icon):hover {
+    background-color: #bfd4f0;
+    border-color: #bfd4f0;
 }
 
 .menu-arrow {

diff --git a/web/include/menubar.php b/web/include/menubar.php
@@ -24,109 +24,93 @@
 ?>
 
 <link rel="stylesheet" type="text/css" href="include/menubar.css"/>
-<script type="text/javascript" src="js/include/menubar.min.js"></script>
+<script src="js/include/menubar.min.js"></script>
 
 <ul id="menubar">
-    <img id="header-icon"
-        srcset="include/images/header-icon-64.png 2x, include/images/header-icon-32.png 1x"
-        src="include/images/header-icon-32.png" />
+    <li id="icon">
+        <img id="header-icon" alt="Header icon" src="include/images/header-icon-32.png"
+            srcset="include/images/header-icon-64.png 2x, include/images/header-icon-32.png 1x"/>
+    </li>
 
     <?php if ($SHOW_MENU) {?>
     <li><a href="tasks.php">Tasks</a></li>
     <?php if ($MENU_COORDINATION) {?>
     <li class="dropdown">
         <a href="#" class="dropdown-button">
             Coordination
-            <img class="menu-arrow" src="include/images/menu-arrow.svg"/>
+            <img class="menu-arrow" alt="Dropdown menu" src="include/images/menu-arrow.svg"/>
         </a>
         <ul class="dropdown-content">
-            <a href="xptracker-summary.php">
-                <img class="silk-sitemap" src="include/icons/s.gif" />
-                XP Tracker
-            </a>
-            <a href="analysistracker-summary.php">
-                <img class="silk-sitemap-color" src="include/icons/s.gif" />
-                Analysis Tracker
-            </a>
+            <li class="silk-sitemap">
+                <a href="xptracker-summary.php">XP Tracker</a>
+            </li>
+            <li class="silk-sitemap-color">
+                <a href="analysistracker-summary.php">Analysis Tracker</a>
+            </li>
         </ul>
     </li>
     <?php } // endif ($MENU_COORDINATION) ?>
     <li class="dropdown">
         <a href="#" class="dropdown-button">
             Reports
-            <img class="menu-arrow" src="include/images/menu-arrow.svg"/>
+            <img class="menu-arrow" alt="Dropdown menu" src="include/images/menu-arrow.svg"/>
         </a>
         <ul class="dropdown-content">
-            <a href="userTasksReport.php">
-                <img class="silk-pencil" src="include/icons/s.gif" />
-                User tasks
-            </a>
+            <li class='silk-pencil'>
+                <a href="userTasksReport.php">User tasks</a>
+            </li>
             <li class="divider"></li>
-            <a href="viewUserDetails.php">
-                <img class="silk-user-green" src="include/icons/s.gif" />
-                User details
-            </a>
-            <a href="usersEvaluation.php">
-                <img class="silk-user" src="include/icons/s.gif" />
-                Users evaluation
-            </a>
-            <a href="viewWorkingHoursResultsReport.php">
-                <img class="silk-report-user" src="include/icons/s.gif" />
-                Accumulated hours
-            </a>
+            <li class="silk-user-green">
+                <a href="viewUserDetails.php">User details</a>
+            </li>
+            <li class="silk-user">
+                <a href="usersEvaluation.php">Users evaluation</a>
+            </li>
+            <li class="silk-report-user">
+                <a href="viewWorkingHoursResultsReport.php">Accumulated hours</a>
+            </li>
             <li class="divider"></li>
-            <a href="projectDetails.php">
-                <img class="silk-book-go" src="include/icons/s.gif" />
-                Project details
-            </a>
-            <a href="projectsEvaluation.php">
-                <img class="silk-book-open" src="include/icons/s.gif" />
-                Project evaluation
-            </a>
-            <a href="projectsSummary.php">
-                <img class="silk-book" src="include/icons/s.gif" />
-                Projects summary
-            </a>
+            <li class="silk-book-go">
+                <a href="projectDetails.php">Project details</a>
+            </li>
+            <li class="silk-book-open">
+                <a href="projectsEvaluation.php">Project evaluation</a>
+            </li>
+            <li class="silk-book">
+                <a href="projectsSummary.php">Projects summary</a>
+            </li>
         </ul>
     </li>
     <li class="dropdown">
         <a href="#" class="dropdown-button">
             Data management
-            <img class="menu-arrow" src="include/images/menu-arrow.svg"/>
+            <img class="menu-arrow" alt="Dropdown menu" src="include/images/menu-arrow.svg"/>
         </a>
         <ul class="dropdown-content">
-            <a href="viewUsers.php">
-                <img class="silk-user-edit" src="include/icons/s.gif" />
-                Users
-            </a>
-            <a href="projectManagement.php">
-                <img class="silk-book-edit" src="include/icons/s.gif" />
-                Projects
-            </a>
-            <a href="customerManagement.php">
-                <img class="silk-vcard-edit" src="include/icons/s.gif" />
-                Clients
-            </a>
-            <a href="areaManagement.php">
-                <img class="silk-brick-edit" src="include/icons/s.gif" />
-                Areas
-            </a>
-            <a href="cityManagement.php">
-                <img class="silk-building-edit" src="include/icons/s.gif" />
-                Cities
-            </a>
-            <a href="calendarManagement.php">
-                <img class="silk-calendar-edit" src="include/icons/s.gif" />
-                Calendars
-            </a>
-            <a href="hourCompensationManagement.php">
-                <img class="silk-script-edit" src="include/icons/s.gif" />
-                Hour compensations
-            </a>
-            <a href="settings.php">
-                <img class="silk-brick-edit" src="include/icons/s.gif" />
-                Application settings
-            </a>
+            <li class="silk-user-edit">
+                <a href="viewUsers.php">Users</a>
+            </li>
+            <li class="silk-book-edit">
+                <a href="projectManagement.php">Projects</a>
+            </li>
+            <li class="silk-vcard-edit">
+                <a href="customerManagement.php">Clients</a>
+            </li>
+            <li class="silk-brick-edit">
+                <a href="areaManagement.php">Areas</a>
+            </li>
+            <li class="silk-building-edit">
+                <a href="cityManagement.php">Cities</a>
+            </li>
+            <li class="silk-calendar-edit">
+                <a href="calendarManagement.php">Calendars</a>
+            </li>
+            <li class="silk-script-edit">
+                <a href="hourCompensationManagement.php">Hour compensations</a>
+            </li>
+            <li class="silk-brick-edit">
+                <a href="settings.php">Application settings</a>
+            </li>
         </ul>
     </li>
     <!-- Last items must be listed from right to left -->

diff --git a/web/iterationForm.php b/web/iterationForm.php
@@ -92,7 +92,7 @@
 }
 
 ?>
-<script type="text/javascript">
+<script>
 // Add the additional VType to validate date inputs
 Ext.apply(Ext.form.VTypes, {
 

diff --git a/web/moduleForm.php b/web/moduleForm.php
@@ -93,7 +93,7 @@
 }
 
 ?>
-<script type="text/javascript">
+<script>
 // Add the additional VType to validate date inputs
 Ext.apply(Ext.form.VTypes, {
 

diff --git a/web/projectDetails.php b/web/projectDetails.php
@@ -31,12 +31,12 @@
 
 //output vars as JS code
 echo "<!-- Global variables extracted from the PHP side -->\n";
-echo "<script type='text/javascript'>\n";
+echo "<script>\n";
 echo "var user = '" . $user->getLogin() . "';\n";
 echo "</script>\n";
 
 ?>
-<script type="text/javascript" src="js/include/ExportableGridPanel.min.js"></script>
+<script src="js/include/ExportableGridPanel.min.js"></script>
 <script src="js/projectDetails.min.js"></script>
 
 <div id="content">
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,4 +24,5 @@ @@
         <div id="footer">
         </div>
-    </body>
+    </body>
+    </html>