Merge pull request #61 from misfir3/master

Recent UI Fixes
This commit is contained in:
misfir3 2015-09-13 00:22:05 -04:00
commit 9a0ec81b64
5 changed files with 91 additions and 9 deletions

View File

@ -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"/>

View File

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

View File

@ -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) {

View File

@ -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();
}
});
});

View File

@ -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);
});
}
});
});