Improve navigation bar (#890)

* Remove Raspberry pi Docker file

* Remove old show-source/solution and plan button

* Remove commented out code

* Improve navigation

* Remove underline from navigation and remove margin of left navigation button

* Make arrow a bit smaller so it aligns a bit better with the navigation bar itself

webgoat-container/src/main/resources/static/css/main.css

@@ -1022,10 +1022,9 @@ cookie-container {
     display: inline-block;
     background-color: #555;
     border-radius: 8px;
-    min-width: 20px;
+    min-width: 25px;
     text-align: center;
     font-weight: bold;
-    padding-top: 2px;
 }
 
 .attack-link.solved-false {
@@ -1057,12 +1056,13 @@ cookie-container {
 }
 
 .cur-page {
-    border-bottom: 2px solid #000;
+    border: 3px solid #000;
     color:#aaa;
 }
 
 span.show-next-page, span.show-prev-page {
-    font-size: 1.3em;
+    font-size: 1.1em;
+    align-content: space-evenly;
 }
 
 .show-prev-page {
@@ -1073,6 +1073,10 @@ span.show-next-page, span.show-prev-page {
     cursor: pointer;
 }
 
+.no-underline:hover {
+    text-decoration: none;
+}
+
 /* attack ... */
 
 .attack-feedback {

webgoat-container/src/main/resources/static/js/goatApp/templates/paging_controls.html

@@ -1,9 +1,9 @@
 <div>
-    <div class="page-nav-wrapper"><span class="glyphicon-class glyphicon glyphicon-circle-arrow-left show-prev-page"></span></div>
     <div class="page-link-wrapper">
+        <span class="glyphicon-class glyphicon glyphicon-circle-arrow-left show-prev-page"></span>
         <% var baseUrl = overview.baseUrl; %>
         <% _.each(overview.pages, function(page,index) { %>
-            <a href="<%=overview.baseUrl%>/<%=index%>"  alt="Page <%=index++ %>">
+            <a href="<%=overview.baseUrl%>/<%=index%>"  alt="Page <%=index++ %>" class="no-underline">
             <% if (page.content === 'assignment') { %>
                 <div class="<%=page.pageClass%> <%=page.solvedClass%> <%=page.curPageClass%>"><%=index++%></div>
             <% } else { %>
@@ -11,6 +11,6 @@
             <% } %>
             </a>
         <% }); %>
+        <span class="glyphicon-class glyphicon glyphicon-circle-arrow-right show-next-page"></span>
     </div>
-    <div class="page-nav-wrapper"><span class="glyphicon-class glyphicon glyphicon-circle-arrow-right show-next-page"></span></div>
 </div>

webgoat-container/src/main/resources/static/js/goatApp/view/HelpControlsView.js

@@ -22,18 +22,7 @@ function($,_,Backbone) {
            $('#show-hints-button').hide();
         },
 
-		render:function(title) {
+		render:function() {
-			$('#show-source-button').hide();
-			$('#show-solution-button').hide();
-			$('#show-plan-button').hide();
-
-			if (this.hasSource) {
-				this.$el.find('#show-source-button').unbind().on('click',_.bind(this.showSource,this)).show();
-			}
-			if (this.hasSolution) {
-				this.$el.find('#show-solution-button').unbind().on('click',_.bind(this.showSolution,this)).show();
-			}
-
 			this.$el.find('#restart-lesson-button').unbind().on('click',_.bind(this.restartLesson,this)).show();
 		},
 

webgoat-container/src/main/resources/templates/main_new.html

@@ -103,14 +103,10 @@
 
     <!--main content start-->
     <section class="main-content-wrapper">
-        <section id="main-content"> <!--ng-controller="goatLesson"-->
+        <section id="main-content">
             <div id="lesson-page" class="pages">
                 <div class="row">
                     <div class="col-md-8">
-                        <!--<div class="col-md-12" align="left">-->
-                        <!---->
-                        <!--&lt;!&ndash; hints moved into lesson template &ndash;&gt;-->
-                        <!--</div>-->
                         <div class="col-md-12" align="left">
                             <div id="lesson-content-wrapper" class="panel">
                                 <div class="" id="error-notification-container">
@@ -120,10 +116,6 @@
                                     </div>
                                 </div>
                                 <div class="" id="help-controls">
-                                    <button class="btn btn-primary btn-xs btn-danger help-button"
-                                            id="show-source-button">
-                                        <i class="fa fa-code"></i>
-                                    </button>
                                     <button class="btn btn-primary btn-xs btn-danger help-button"
                                             id="show-hints-button" th:text="#{show.hints}">Show hints
                                     </button>

webgoat-server/src/main/docker_rpi3/Dockerfile

@@ -1,10 +0,0 @@
-# Baseimage specially for raspberry pi usage
-FROM resin/rpi-raspbian:jessie
-VOLUME /tmp
-# Installing openjdk-8-headless like in the standard Webgoat Docker container
-RUN apt-get update && apt-get install -y \
-      openjdk-8-jre-headless
-RUN cd /root; mkdir -p .webgoat
-ADD webgoat-server-8.0-SNAPSHOT.jar webgoat.jar
-RUN sh -c 'touch /webgoat.jar'
-ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/webgoat.jar"]