Details
-
Type:
Improvement
-
Status: Closed
-
Priority:
Major
-
Resolution: Fixed
-
Affects Version/s: 4.0.0-b1
-
Fix Version/s: 4.0.0-b1
-
Component/s: Staff Interface
-
Labels:None
-
Epic Link:
Description
Convert staff sub-nav links into a drop down menu. Use bootstrap for the menu, styles will change as described below.
- Hovering over a primary nav item should still change it's tab color (for example: to gray in the case of the FOUR theme).
- Sub nav links will no longer appear in the star/search bar.
- Clicking on a primary nav item would drop down a menu with sub-nav items. The background color of the menu should be the same color as the sub-nav background area and the text color should be the same as the current sub-nav links.
I'll attach a mock of the menu shortly.
Activity
Paul Phillips
created issue -
Paul Phillips
made changes -
| Field | Original Value | New Value |
|---|---|---|
| Epic Link | CORE-1841 [ 12716 ] |
Paul Phillips
made changes -
| Attachment | capture-for-jira-screenshot-20160129-153648-208.png [ 11508 ] |
Paul Phillips
made changes -
| Attachment | blesta-staff-dropdown.png [ 11509 ] |
Paul Phillips
made changes -
| Rank | Ranked higher |
It's ideal if for the desktop the drop down menu is activated on hover. The problem with making it on hover is that the menu would be inaccessible to mobile devices which cannot hover. However, there may be a solution to this.
See the first response to http://stackoverflow.com/questions/24685000/bootstrap-3-dropdowns-on-hover-and-on-click
..since jQuery is a dependency for bootstrap.js, you might as well do it the jQuery way by just adding all of the events that you want to attach to in quotes space-separated:
$('.dropdown').on('mouseenter mouseleave click tap', function()
Unknown macro: { $(this).toggleClass("open"); });
The selectors are based on the standard Bootstrap markup, taken directly from the docs
Paul Phillips
added a comment - It's ideal if for the desktop the drop down menu is activated on hover. The problem with making it on hover is that the menu would be inaccessible to mobile devices which cannot hover. However, there may be a solution to this.
See the first response to http://stackoverflow.com/questions/24685000/bootstrap-3-dropdowns-on-hover-and-on-click
..since jQuery is a dependency for bootstrap.js, you might as well do it the jQuery way by just adding all of the events that you want to attach to in quotes space-separated:
$('.dropdown').on('mouseenter mouseleave click tap', function()
Unknown macro: {
$(this).toggleClass("open");
}
);
The selectors are based on the standard Bootstrap markup, taken directly from the docs Paul Phillips
made changes -
| Security | Private [ 10000 ] |
Automated transition triggered when Tyson Phillips (Inactive) created a branch in Stash -
| Status | Open [ 1 ] | In Progress [ 3 ] |
Automated transition triggered when Tyson Phillips (Inactive) created pull request #105 in Stash -
| Status | In Progress [ 3 ] | In Review [ 5 ] |
| Resolution | Fixed [ 1 ] |
Let's make the following changes:
Update the theme style:
header#main_header .menu ul ul li, header#main_header .menu ul ul li a
Add the following attributes:
padding-bottom: 2px;
font-weight: 300;
Paul Phillips
added a comment - Let's make the following changes:
Update the theme style:
header#main_header .menu ul ul li, header#main_header .menu ul ul li a
Add the following attributes:
padding-bottom: 2px;
font-weight: 300; Those styles have been updated.
Tyson Phillips (Inactive)
added a comment - Those styles have been updated.
Automated transition triggered when Cody Phillips (Inactive) merged pull request #105 in Stash -
| Status | In Review [ 5 ] | Closed [ 6 ] |
Here's a photoshop mockup of what the drop down menu should look like.