From ca22615c0887d6e70558e20fdebfabfab8d129f4 Mon Sep 17 00:00:00 2001
From: Kusal Ekanayake <kre39@uclive.ac.nz>
Date: Thu, 25 May 2017 16:18:47 +1200
Subject: [PATCH] Add scroll bar to the side panel to cater for smaller screen.

---
 src/main/resources/css/master.css      |  4 +-
 src/main/resources/views/RaceView.fxml | 94 ++++++++++++++------------
 2 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/src/main/resources/css/master.css b/src/main/resources/css/master.css
index 42fc44c7..7620d831 100644
--- a/src/main/resources/css/master.css
+++ b/src/main/resources/css/master.css
@@ -168,7 +168,7 @@ Remove scroll bars
 
 .ui-table *.scroll-bar:vertical *.increment-arrow,
 .ui-table *.scroll-bar:vertical *.decrement-arrow {
-    -fx-background-color: null;
+    -fx-background-color: #0e6d6c;
     -fx-background-radius: 0;
     -fx-background-insets: 0;
     -fx-padding: 0;
@@ -177,7 +177,7 @@ Remove scroll bars
 
 .ui-table *.scroll-bar:vertical *.increment-button,
 .ui-table *.scroll-bar:vertical *.decrement-button {
-    -fx-background-color: null;
+    -fx-background-color: #0e6d6c;
     -fx-background-radius: 0;
     -fx-background-insets: 0;
     -fx-padding: 0;
diff --git a/src/main/resources/views/RaceView.fxml b/src/main/resources/views/RaceView.fxml
index d777cece..9a6d7c1c 100644
--- a/src/main/resources/views/RaceView.fxml
+++ b/src/main/resources/views/RaceView.fxml
@@ -9,8 +9,8 @@
 
 <GridPane maxHeight="960.0" maxWidth="1530.0" prefHeight="960.0" prefWidth="1530.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.controllers.RaceViewController">
     <columnConstraints>
-        <ColumnConstraints maxWidth="246.0" minWidth="246.0" prefWidth="246.0" />
-        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="1034.0" />
+        <ColumnConstraints maxWidth="419.0" minWidth="-Infinity" prefWidth="258.0" />
+        <ColumnConstraints hgrow="SOMETIMES" maxWidth="1278.0" minWidth="10.0" prefWidth="1272.0" />
     </columnConstraints>
     <rowConstraints>
         <RowConstraints minHeight="500.0" prefHeight="30.0" vgrow="SOMETIMES" />
@@ -18,49 +18,53 @@
         <RowConstraints />
     </rowConstraints>
     <children>
-        <AnchorPane prefHeight="960.0" prefWidth="250.0" style="-fx-background-color: #2C2c36;" GridPane.rowSpan="3">
-            <children>
-                <Label layoutX="11.0" layoutY="259.0" text="Team Position" textFill="WHITE" />
-                <Label layoutX="13.0" layoutY="432.0" text="Settings" textFill="WHITE" />
-                <Label layoutX="11.0" layoutY="14.0" text="Timer" textFill="WHITE" />
-                <Label layoutX="11.0" layoutY="88.0" text="Wind direction" textFill="WHITE" />
-                <Circle fx:id="windBackgroundCircle" blendMode="DARKEN" fill="#3dcdc8" layoutX="110.0" layoutY="166.0" radius="35.0" stroke="#d7d7d7" strokeType="INSIDE" strokeWidth="3.0" />
-                <Text fx:id="windArrowText" fill="#a8a8a8" layoutX="86.0" layoutY="186.0" strokeType="OUTSIDE" strokeWidth="0.0" text="↓">
-                    <font>
-                        <Font name="AdobeArabic-Regular" size="55.0" />
-                    </font>
-                </Text>
-                <Text fx:id="windDirectionText" fill="#d3d3d3" layoutX="171.0" layoutY="214.0" strokeType="OUTSIDE" strokeWidth="0.0" text="0.0°" textAlignment="RIGHT">
-                    <font>
-                        <Font name="System Bold" size="13.0" />
-                    </font>
-                </Text>
-                <CheckBox fx:id="toggleFps" graphicTextGap="0.0" layoutX="21.0" layoutY="453.0" mnemonicParsing="false" prefHeight="18.0" prefWidth="143.0" selected="true" styleClass="ui-checkbox" text="Show FPS" textFill="WHITE" />
-            <VBox fx:id="positionVbox" layoutX="12.0" layoutY="280.0" prefHeight="140.0" prefWidth="200.0" styleClass="text-white" />
-            <Pane layoutX="11.0" layoutY="30.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="51.0" prefWidth="193.0">
-               <children>
-                  <Text fx:id="timerLabel" fill="#f8f8f8" layoutX="-26.0" layoutY="34.0" strokeType="OUTSIDE" strokeWidth="0.0" text="00:00" textAlignment="CENTER" wrappingWidth="246.0">
-                     <font>
-                        <Font size="25.0" />
-                     </font>
-                  </Text>
-               </children>
-            </Pane>
-            <Slider fx:id="annotationSlider" blockIncrement="1.0" layoutX="38.0" layoutY="527.0" majorTickUnit="1.0" max="2.0" minorTickCount="0" prefHeight="51.0" prefWidth="170.0" showTickLabels="true" showTickMarks="true" snapToTicks="true" styleClass="ui-slider" />
-            <Label layoutX="10.0" layoutY="499.0" text="Annotations" textFill="WHITE" />
-            <Button fx:id="selectAnnotationBtn" layoutX="35.0" layoutY="578.0" mnemonicParsing="false" prefHeight="18.0" prefWidth="170.0" styleClass="blue-ui-btn" text="Select Annotations" textFill="WHITE" />
-            <Text fill="WHITE" layoutX="11.0" layoutY="649.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Boat Selection" />
-            <ComboBox fx:id="boatSelectionComboBox" layoutX="37.0" layoutY="664.0" prefHeight="25.0" prefWidth="170.0" promptText="Select Boat" styleClass="combo-box-base" />
-            <LineChart fx:id="raceSparkLine" layoutX="-1.0" layoutY="719.0" legendVisible="false" prefHeight="277.0" prefWidth="246.0" title="Boat Positions">
-              <xAxis>
-                <CategoryAxis label="Leg Number" side="BOTTOM" styleClass="spark-line-xaxis" />
-              </xAxis>
-              <yAxis>
-                <NumberAxis fx:id="sparklineYAxis" minorTickCount="1" minorTickLength="1.0" side="LEFT" styleClass="spark-line-yaxis" tickLabelGap="1.0" tickUnit="1.0" upperBound="7.0" />
-              </yAxis>
-            </LineChart>
-            </children>
-        </AnchorPane>
+      <ScrollPane prefHeight="200.0" prefWidth="200.0">
+         <content>
+              <AnchorPane prefHeight="996.0" prefWidth="240.0" style="-fx-background-color: #2C2c36;">
+                  <children>
+                      <Label layoutX="11.0" layoutY="259.0" text="Team Position" textFill="WHITE" />
+                      <Label layoutX="13.0" layoutY="432.0" text="Settings" textFill="WHITE" />
+                      <Label layoutX="11.0" layoutY="14.0" text="Timer" textFill="WHITE" />
+                      <Label layoutX="11.0" layoutY="88.0" text="Wind direction" textFill="WHITE" />
+                      <Circle fx:id="windBackgroundCircle" blendMode="DARKEN" fill="#3dcdc8" layoutX="110.0" layoutY="166.0" radius="35.0" stroke="#d7d7d7" strokeType="INSIDE" strokeWidth="3.0" />
+                      <Text fx:id="windArrowText" fill="#a8a8a8" layoutX="86.0" layoutY="186.0" strokeType="OUTSIDE" strokeWidth="0.0" text="↓">
+                          <font>
+                              <Font name="AdobeArabic-Regular" size="55.0" />
+                          </font>
+                      </Text>
+                      <Text fx:id="windDirectionText" fill="#d3d3d3" layoutX="171.0" layoutY="214.0" strokeType="OUTSIDE" strokeWidth="0.0" text="0.0°" textAlignment="RIGHT">
+                          <font>
+                              <Font name="System Bold" size="13.0" />
+                          </font>
+                      </Text>
+                      <CheckBox fx:id="toggleFps" graphicTextGap="0.0" layoutX="21.0" layoutY="453.0" mnemonicParsing="false" prefHeight="18.0" prefWidth="143.0" selected="true" styleClass="ui-checkbox" text="Show FPS" textFill="WHITE" />
+                  <VBox fx:id="positionVbox" layoutX="12.0" layoutY="280.0" prefHeight="140.0" prefWidth="200.0" styleClass="text-white" />
+                  <Pane layoutX="11.0" layoutY="30.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="51.0" prefWidth="193.0">
+                     <children>
+                        <Text fx:id="timerLabel" fill="#f8f8f8" layoutX="-26.0" layoutY="34.0" strokeType="OUTSIDE" strokeWidth="0.0" text="00:00" textAlignment="CENTER" wrappingWidth="246.0">
+                           <font>
+                              <Font size="25.0" />
+                           </font>
+                        </Text>
+                     </children>
+                  </Pane>
+                  <Slider fx:id="annotationSlider" blockIncrement="1.0" layoutX="38.0" layoutY="527.0" majorTickUnit="1.0" max="2.0" minorTickCount="0" prefHeight="51.0" prefWidth="170.0" showTickLabels="true" showTickMarks="true" snapToTicks="true" styleClass="ui-slider" />
+                  <Label layoutX="10.0" layoutY="499.0" text="Annotations" textFill="WHITE" />
+                  <Button fx:id="selectAnnotationBtn" layoutX="35.0" layoutY="578.0" mnemonicParsing="false" prefHeight="18.0" prefWidth="170.0" styleClass="blue-ui-btn" text="Select Annotations" textFill="WHITE" />
+                  <Text fill="WHITE" layoutX="11.0" layoutY="649.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Boat Selection" />
+                  <ComboBox fx:id="boatSelectionComboBox" layoutX="37.0" layoutY="664.0" prefHeight="25.0" prefWidth="170.0" promptText="Select Boat" styleClass="combo-box-base" />
+                  <LineChart fx:id="raceSparkLine" layoutX="-1.0" layoutY="719.0" legendVisible="false" prefHeight="277.0" prefWidth="233.0" title="Boat Positions">
+                    <xAxis>
+                      <CategoryAxis label="Leg Number" side="BOTTOM" styleClass="spark-line-xaxis" />
+                    </xAxis>
+                    <yAxis>
+                      <NumberAxis fx:id="sparklineYAxis" minorTickCount="1" minorTickLength="1.0" side="LEFT" styleClass="spark-line-yaxis" tickLabelGap="1.0" tickUnit="1.0" upperBound="7.0" />
+                    </yAxis>
+                  </LineChart>
+                  </children>
+              </AnchorPane>
+         </content>
+      </ScrollPane>
         <AnchorPane fx:id="contentAnchorPane" maxHeight="960.0" maxWidth="1280.0" prefHeight="960.0" prefWidth="1280.0" style="-fx-background-color: skyblue;" GridPane.columnIndex="1" GridPane.halignment="LEFT" GridPane.rowSpan="2147483647" GridPane.valignment="TOP">
          <children>
             <fx:include fx:id="includedCanvas" source="CanvasView.fxml" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />