Merge pull request #61 from misfir3/master

Recent UI Fixes

webgoat-container/src/main/webapp/WEB-INF/pages/main_new.jsp

@@ -37,8 +37,6 @@
 
         <!-- Require.js used to load js asynchronously -->
         <script src="js/libs/require.min.js" data-main="js/main.js"></script>
-        <script src="js/jquery/jquery-1.10.2.min.js"></script>
-        <script src="plugins/bootstrap/js/bootstrap.min.js"></script>
         <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
         <title>WebGoat</title>
     </head>
@@ -51,16 +49,16 @@
                 </div>
                 <!--logo end-->
                 <div class="toggle-navigation toggle-left">
-                    <button type="button" class="btn btn-default" id="toggle-left" data-toggle="tooltip" data-placement="right" title="Toggle Navigation">
+                    <button type="button" class="btn btn-default" id="toggle-menu" data-toggle="tooltip" data-placement="right" title="Toggle Navigation">
                         <i class="fa fa-bars"></i>
                     </button>
                 </div><!--toggle navigation end-->
                 <div id="lesson-title-wrapper" >
                     
                 </div><!--lesson title end-->
-                <div class="user-nav pull-right" style="margin-right: 75px;">
+                <div class="user-nav pull-right" id="user-and-info-nav" style="margin-right: 75px;">
                     <div class="dropdown" style="display:inline">
-                        <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle" id="dropdownMenu1" >
+                        <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle" id="user-menu" >
                             <i class="fa fa-user"></i> <span class="caret"></span>
                         </button>                   
                         <ul class="dropdown-menu dropdown-menu-left">
@@ -74,7 +72,7 @@
 
                         </ul>
                     </div>
-                    <button type="button" data-toggle="modal" data-target="#aboutModal" class="btn btn-default right_nav_button" title="About WebGoat">
+                    <button type="button" id="about-button"  class="btn btn-default right_nav_button" title="About WebGoat" data-toggle="modal" data-target="#about-modal"> 
                         <i class="fa fa-info"></i>
                     </button>
                     <a href="mailto:${contactEmail}?Subject=Webgoat%20feedback" target="_top">
@@ -176,7 +174,7 @@
 
 
         <!-- About WebGoat Modal -->
-        <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+        <div class="modal" id="about-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
             <div class="modal-dialog modal-lg">
                 <div class="modal-content">
                     <jsp:include page="../pages/about.jsp"/> 

webgoat-container/src/main/webapp/css/main.css

@@ -659,6 +659,10 @@ fieldset[disabled] .btn-warning.active {
   max-height: 375px;
   overflow-y: auto;
 }
+
+#about-modal {
+  opacity: 95%;
+}
 /* ==========================================================================
    Media Queries
    ========================================================================== */

webgoat-container/src/main/webapp/js/goatApp/controller/LessonController.js

@@ -11,7 +11,9 @@ define(['jquery',
 	'goatApp/view/CookieView',
 	'goatApp/view/ParamView',
 	'goatApp/model/ParamModel',
-	'goatApp/support/GoatUtils'
+	'goatApp/support/GoatUtils',
+	'goatApp/view/UserAndInfoView',
+	'goatApp/view/MenuButtonView'
 	], 
 	function($,
 		_,
@@ -26,7 +28,9 @@ define(['jquery',
 		CookieView,
 		ParamView,
 		ParamModel,
-		GoatUtils
+		GoatUtils,
+		UserAndInfoView,
+		MenuButtonView
 	) {
 		'use strict'
 		
@@ -36,8 +40,12 @@ define(['jquery',
 			this.lessonView = options.lessonView;
 
 			_.extend(Controller.prototype,Backbone.Events);
+
 			this.start = function() {
 				this.listenTo(this.lessonContent,'contentLoaded',this.onContentLoaded);
+				//'static' elements of page/app
+				this.userAndInfoView = new UserAndInfoView();
+				this.menuButtonView = new MenuButtonView();
 			};
 			//load View, which can pull data
 			this.loadLesson = function(scr,menu,stage) {

webgoat-container/src/main/webapp/js/goatApp/view/MenuButtonView.js

@@ -0,0 +1,27 @@
+//
+//UserAndInfoView
+define(['jquery',
+	'underscore',
+	'backbone'],
+function($,
+	_,
+	Backbone) {
+	return Backbone.View.extend({
+		el:'#toggle-menu', //Check this,
+
+		initialize: function() {
+			this.$el.on('click',this.toggleMenu);
+		},
+		
+		toggleMenu: function() {
+			//left
+			if (!$('.sidebarRight').hasClass('.sidebar-toggle-right')) {
+	            $('.sidebarRight').removeClass('sidebar-toggle-right');
+                $('.main-content-wrapper').removeClass('main-content-toggle-right');
+            }
+            $('.sidebar').toggleClass('sidebar-toggle');
+            $('.main-content-wrapper').toggleClass('main-content-toggle-left');
+            //e.stopPropagation();
+        }
+	});
+});

webgoat-container/src/main/webapp/js/goatApp/view/UserAndInfoView.js

@@ -0,0 +1,45 @@
+//UserAndInfoView
+define(['jquery',
+	'underscore',
+	'backbone'],
+function($,
+	_,
+	Backbone) {
+	return Backbone.View.extend({
+		el:'#user-and-info-nav', //Check this,
+
+		events: {
+			'click #about-button': 'showAboutModal',
+			'click #user-menu': 'showUserMenu'
+		},
+
+		initialize: function() {
+
+		},
+		
+		render:function(title) {
+		},
+
+		showUserMenu: function() {
+			var menu = this.$el.find('.dropdown-menu');
+			if (menu.is(':visible')) {
+				menu.hide(200);
+			} else {
+				menu.show(400);
+				/*menu.on('mouseout', function() {
+					$('#user-and-info-nav .dropdown-menu').hide(200);
+				});*/
+			}
+		
+		},
+
+		showAboutModal: function() {
+			$('#about-modal').show(400);
+			$('#about-modal div.modal-header button.close').unbind('click').on('click', function() {
+				$('#about-modal').hide(200);
+			});
+		}
+
+
+	});
+});