Skip to content

Commit d07e52d

Browse files
author
Jason White
committed
changes for menu decoration and related code updates
1 parent c9bde0d commit d07e52d

File tree

5 files changed

+146
-103
lines changed

5 files changed

+146
-103
lines changed

‎src/main/webapp/WEB-INF/pages/main_new.jsp‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -113,11 +113,11 @@
113113
<ul class="nano-content">
114114
<li class="sub-menu" ng-repeat="item in menuTopics">
115115
<a ng-click="accordionMenu(item.id)" href=""><i class="fa {{item.class}}"></i><span>{{item.name}}</span></a><!-- expanded = !expanded-->
116-
<ul class="slideDown lessonsAndStages" id="{{item.id}}" isOpen=0>
117-
<li ng-repeat="lesson in item.children">
118-
<a ng-click="renderLesson(lesson.id,lesson.link)" id="{{lesson.id}}" title="link to {{lesson.name}}" href="">{{lesson.name}}</a><span class="{{lesson.completeClass}}"></span>
119-
<span ng-repeat="stage in lesson.children" >
120-
<a ng-click="renderLesson(lesson.id,stage.link)" id="{{stage.id}}" title="link to {{stage.name}}" href="">{{stage.name}}</a><span class="{{stage.completeClass}}"></span>
116+
<ul class="slideDown lessonsAndStages {{item.displayClass}}" id="{{item.id}}" isOpen=0>
117+
<li ng-repeat="lesson in item.children" class="{{lesson.selectedClass}}">
118+
<a ng-click="renderLesson(lesson.id,lesson.link)" id="{{lesson.id}}" class="{{lesson.selectedClass}}" title="link to {{lesson.name}}" href="">{{lesson.name}}</a><span class="{{lesson.completeClass}}"></span>
119+
<span ng-repeat="stage in lesson.children">
120+
<a ng-click="renderLesson(lesson.id,stage.link)" class="selectedClass" id="{{stage.id}}" title="link to {{stage.name}}" href="">{{stage.name}}</a><span class="{{stage.completeClass}}"></span>
121121
</span>
122122
</li>
123123
</ul>
@@ -177,7 +177,7 @@
177177
<h4>Cookies</h4>
178178
<table class="cookieTable table-striped table-nonfluid" ng-repeat="cookie in cookies">
179179
<thead>
180-
<tr><th>Field</th><th>Value</th></tr>
180+
<tr><th class="col-sm-1">Field</th><th class="col-sm-1">Value</th></tr>
181181
</thead>
182182
<tbody>
183183
<tr ng-repeat="(key, value) in cookie">
@@ -293,9 +293,7 @@
293293
294294
$(document).ready(function() {
295295
//TODO merge appliction.js code into other js files
296-
app.init();
297-
298-
296+
app.init();
299297
});
300298
// make all forms ajax forms
301299
var options = {
@@ -353,6 +351,8 @@
353351
// make any embedded forms ajaxy
354352
goat.utils.showLessonCookiesAndParams();
355353
goat.utils.makeFormsAjax();
354+
//refresh menu
355+
angular.element($('#leftside-navigation')).scope().renderMenu();
356356
}
357357
358358
</script>

‎src/main/webapp/css/main.css‎

Lines changed: 103 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -141,99 +141,18 @@ img {
141141
margin-top:25px;
142142
margin-right:20px;
143143
}
144-
/* Sidebar */
145-
.sidebar {
146-
width: 240px;
147-
/*height: 100%;*/
148-
background: #222;
149-
position: absolute;
150-
-webkit-transition: all 0.3s ease-in-out;
151-
-moz-transition: all 0.3s ease-in-out;
152-
-o-transition: all 0.3s ease-in-out;
153-
-ms-transition: all 0.3s ease-in-out;
154-
transition: all 0.3s ease-in-out;
155-
z-index: 100;
156-
}
157144

158-
#leftside-navigation {
159-
overflow-y:scroll;
160-
overflow-x:hidden;
161-
}
162-
163-
#sidebar {
164-
/*background-color:#333;*/
165-
background-color:blue;
166-
}
167-
168-
169-
.sidebar-toggle {
170-
margin-left: -240px;
171-
}
172-
#leftside-navigation ul,
173-
#leftside-navigation ul ul {
174-
margin: -2px 0 0;
175-
padding: 0;
176-
}
177-
#leftside-navigation ul li {
178-
list-style-type: none;
179-
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
180-
}
181-
#leftside-navigation ul li a {
182-
color: #aeb2b7;
183-
text-decoration: none;
184-
display: block;
185-
padding: 18px 0 18px 25px;
186-
font-size: 12px;
187-
outline: none;
188-
-webkit-transition: all 200ms ease-in;
189-
-moz-transition: all 200ms ease-in;
190-
-o-transition: all 200ms ease-in;
191-
-ms-transition: all 200ms ease-in;
192-
transition: all 200ms ease-in;
193-
}
194-
#leftside-navigation ul li a span {
195-
display: inline-block;
196-
}
197-
#leftside-navigation ul ul li {
198-
background: #333;
199-
margin-bottom: 0;
200-
margin-left: 0;
201-
margin-right: 0;
202-
border-bottom: none;
203-
}
204-
#leftside-navigation ul ul li a {
205-
font-size: 12px;
206-
padding-top: 13px;
207-
padding-bottom: 13px;
208-
color: #aeb2b7;
209-
}
210-
#leftside-navigation ul li a i {
211-
width: 20px;
212-
}
213-
#leftside-navigation ul li a i.fa-angle-right,
214-
#leftside-navigation ul li a i.fa-angle-left {
215-
padding-top: 3px;
216-
}
217-
#leftside-navigation ul ul {
218-
display: none;
219-
}
220-
#leftside-navigation li.active ul {
221-
display: block;
222-
}
223-
#leftside-navigation ul li a:hover,
224-
#leftside-navigation ul li.active > a {
225-
color: #e84c3d;
226-
}
227145
.btn-primary + .dropdown-menu > li > a:hover,
228146
.btn-primary + .dropdown-menu > li > a:active {
229147
background-color: #16a086;
230148
}
231149

232150
.sidebar > div > ul > li > ul > li > span.lessonComplete {
233-
float: right;
234-
margin-left: 1.5em;
151+
/*float: right;
152+
margin-left: 1.5em;*/
235153
margin-right: 5px;
236-
margin-top: -25px;
154+
margin-top: -38px; /* << don't like doing this, but otherwise it does not line up correctly */
155+
color:#0F0
237156
}
238157

239158
/* ==========================================================================
@@ -797,14 +716,109 @@ fieldset[disabled] .btn-warning.active {
797716

798717
.table-nonfluid {
799718
width:auto;
719+
720+
}
721+
.table-nonfluid {
722+
800723
}
801724

802725
.cookieTable tr td, .paramsTable tr td {
803726
padding: 3px;
804727
max-width: 200px;
805728
font-size: x-small;
729+
word-wrap: break-word;
806730
}
807-
/* MENU */
731+
732+
/* ==========================================================================
733+
MENU / Sidebar
734+
========================================================================== */
735+
/* Sidebar */
736+
.sidebar {
737+
width: 240px;
738+
/*height: 100%;*/
739+
background: #222;
740+
position: absolute;
741+
-webkit-transition: all 0.3s ease-in-out;
742+
-moz-transition: all 0.3s ease-in-out;
743+
-o-transition: all 0.3s ease-in-out;
744+
-ms-transition: all 0.3s ease-in-out;
745+
transition: all 0.3s ease-in-out;
746+
z-index: 100;
747+
}
748+
749+
#leftside-navigation {
750+
overflow-y:scroll;
751+
overflow-x:hidden;
752+
}
753+
754+
#sidebar {
755+
/*background-color:#333;*/
756+
background-color:blue;
757+
}
758+
759+
760+
.sidebar-toggle {
761+
margin-left: -240px;
762+
}
763+
#leftside-navigation ul,
764+
#leftside-navigation ul ul {
765+
margin: -2px 0 0;
766+
padding: 0;
767+
}
768+
#leftside-navigation ul li {
769+
list-style-type: none;
770+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
771+
}
772+
773+
774+
#leftside-navigation ul li a {
775+
color: #aeb2b7;
776+
text-decoration: none;
777+
display: block;
778+
padding: 5px 0 5px 15px;
779+
font-size: 12px;
780+
outline: none;
781+
-webkit-transition: all 200ms ease-in;
782+
-moz-transition: all 200ms ease-in;
783+
-o-transition: all 200ms ease-in;
784+
-ms-transition: all 200ms ease-in;
785+
transition: all 200ms ease-in;
786+
}
787+
#leftside-navigation ul li a span {
788+
display: inline-block;
789+
}
790+
#leftside-navigation ul ul li {
791+
background: #333;
792+
margin-bottom: 0;
793+
margin-left: 0;
794+
margin-right: 0;
795+
border-bottom: none;
796+
}
797+
#leftside-navigation ul ul li a {
798+
font-size: 11px;
799+
padding-top: 5px;
800+
padding-bottom: 5px;
801+
color: #aeb2b7;
802+
margin-left:8px;
803+
}
804+
#leftside-navigation ul li a i {
805+
width: 20px;
806+
}
807+
#leftside-navigation ul li a i.fa-angle-right,
808+
#leftside-navigation ul li a i.fa-angle-left {
809+
padding-top: 3px;
810+
}
811+
#leftside-navigation ul ul {
812+
display: none;
813+
}
814+
#leftside-navigation li.active ul {
815+
display: block;
816+
}
817+
#leftside-navigation ul li a:hover,
818+
#leftside-navigation ul li.active > a {
819+
color: #e84c3d;
820+
}
821+
808822
.sidebar ul span.lessonComplete {
809823
float: right;
810824
margin-left: -5px;
@@ -820,6 +834,9 @@ fieldset[disabled] .btn-warning.active {
820834
color:white;
821835
}
822836

837+
#leftside-navigation ul ul.lessonsAndStages.keepOpen {
838+
display: block
839+
}
823840

824841
/* HINTS */
825842
#hintsViewTop{

‎src/main/webapp/js/goatConstants.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ var goatConstants = {
44
CATEGORYCLASS:'fa-angle-right pull-right',
55
lessonCompleteClass:'glyphicon glyphicon-check lessonComplete',
66
selectedMenuClass:'selected',
7+
keepOpenClass:'keepOpen',
78
menuPrefix : [
89
{
910
name:'LESSONS',

‎src/main/webapp/js/goatControllers.js‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,17 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
1313
var menuItems = goat.utils.addMenuClasses(goatConstants.menuPrefix.concat(menuData.data));
1414
//top-tier 'categories'
1515
for (var i=0;i<menuItems.length;i++) {
16-
menuItems[i].id = menuItems[i].name.replace(/\s|\(|\)/g,'');
16+
menuItems[i].id = menuItems[i].name.replace(/\s|\(|\)/g,'');//TODO move the replace routine into util function
17+
menuItems[i].displayClass= ($scope.openMenu === menuItems[i].id) ? goatConstants.keepOpenClass : '';
1718
if (menuItems[i].children) {
1819
for (var j=0;j<menuItems[i].children.length;j++){
1920
menuItems[i].children[j].id = menuItems[i].children[j].name.replace(/\s|\(|\)/g,'');
21+
//handle selected Menu state
22+
if (menuItems[i].children[j].id === $scope.curMenuItemSelected) {
23+
menuItems[i].children[j].selectedClass = goatConstants.selectedMenuClass;
24+
menuItems[i].selectedClass = goatConstants.selectedMenuClass;
25+
}
26+
//handle complete state
2027
if (menuItems[i].children[j].complete) {
2128
menuItems[i].children[j].completeClass = goatConstants.lessonCompleteClass;
2229
} else {
@@ -26,6 +33,12 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
2633
for (var k=0;k < menuItems[i].children[j].children.length;k++) {
2734
//TODO make utility function for name >> id
2835
menuItems[i].children[j].children[k].id = menuItems[i].children[j].children[k].name.replace(/\s|\(|\)/g,'');
36+
//handle selected Menu state
37+
if (menuItems[i].children[j].children[k].id === $scope.curMenuItemSelected) {
38+
menuItems[i].children[j].children[k].selectedClass = goatConstants.selectedMenuClass;
39+
menuItems[i].children[j].selectedClass = goatConstants.selectedMenuClass;
40+
}
41+
//handle complete state
2942
if (menuItems[i].children[j].children[k].complete) {
3043
menuItems[i].children[j].children[k].completeClass= goatConstants.lessonCompleteClass;
3144
} else {
@@ -37,6 +50,11 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
3750
}
3851
}
3952
$scope.menuTopics = menuItems;
53+
//
54+
if ($scope.openMenu) {
55+
$('ul'+$scope.openMenu).show();
56+
}
57+
4058
},
4159
function(error) {
4260
// TODO - handle this some way other than an alert
@@ -52,11 +70,8 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
5270
var curScope = $scope;
5371
$('.lessonHelp').hide();
5472
// clean up menus, mark selected
55-
$('ul li.selected').removeClass(goatConstants.selectedMenuClass)
56-
$('ul li.selected a.selected').removeClass(goatConstants.selectedMenuClass)
57-
$('#'+id).addClass(goatConstants.selectedMenuClass);
58-
$('#'+id).parent().addClass(goatConstants.selectedMenuClass);
59-
//
73+
$scope.curMenuItemSelected = id;
74+
goat.utils.highlightCurrentLessonMenu(id);
6075
curScope.parameters = goat.utils.scrapeParams(url);
6176
// lesson content
6277
goat.data.loadLessonContent($http,url).then(
@@ -69,17 +84,20 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
6984
$("#lesson_content").html(reply.data);
7085
//hook forms
7186
goat.utils.makeFormsAjax();
72-
$('#leftside-navigation').height($('#main-content').height()+15)
87+
$('#leftside-navigation').height($('#main-content').height()+15)//TODO: get ride of fixed value (15)here
7388
$scope.$emit('lessonUpdate',{params:curScope.parameters});
7489
}
75-
)};
90+
)
91+
$scope.renderMenu();
92+
};
7693
$scope.accordionMenu = function(id) {
7794
if ($('ul#'+id).attr('isOpen') == 0) {
7895
$scope.expandMe = true;
7996
} else {
8097
$('ul#'+id).slideUp(300).attr('isOpen',0);
8198
return;
8299
}
100+
$scope.openMenu = id;
83101
$('.lessonsAndStages').not('ul#'+id).slideUp(300).attr('isOpen',0);
84102
if ($scope.expandMe) {
85103
$('ul#'+id).slideDown(300).attr('isOpen',1);

‎src/main/webapp/js/goatUtil.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,13 @@ goat.utils = {
8080
paramsArr.push(paramObj);
8181
}
8282
return paramsArr;
83+
},
84+
highlightCurrentLessonMenu: function(id) {
85+
//TODO: move selectors in first two lines into goatConstants
86+
$('ul li.selected').removeClass(goatConstants.selectedMenuClass)
87+
$('ul li.selected a.selected').removeClass(goatConstants.selectedMenuClass)
88+
$('#'+id).addClass(goatConstants.selectedMenuClass);
89+
$('#'+id).parent().addClass(goatConstants.selectedMenuClass);
8390
}
8491
};
8592

0 commit comments

Comments
 (0)