Skip to content

Commit

Permalink
[#343] ul tags must only contain li elements.
Browse files Browse the repository at this point in the history 
Added <li> items as direct descendants of <ul>, wrapping the existing
contents in most cases.

Modified menu items to remove the <img> tag inside them, and assign
an icon directly to the <li> tag using CSS.
  • Loading branch information
@jaragunde
jaragunde committed Oct 31, 2018
1 parent 824c30c commit 6847bdf
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 98 deletions.
47 changes: 20 additions & 27 deletions web/include/menubar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 {
Expand Down
126 changes: 55 additions & 71 deletions web/include/menubar.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,10 @@
<script src="js/include/menubar.min.js"></script>

<ul id="menubar">
<img id="header-icon" alt="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>
Expand All @@ -40,14 +41,12 @@
<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) ?>
Expand All @@ -57,36 +56,29 @@
<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">
Expand All @@ -95,38 +87,30 @@
<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 -->
Expand Down

0 comments on commit 6847bdf

Please sign in to comment.