Added basic side-panel help info, soon will add router implementation for pages.

src/main/java/com/andrewlalis/perfin/control/MainViewController.java

@@ -4,9 +4,11 @@ import com.andrewlalis.javafx_scene_router.AnchorPaneRouterView;
 import com.andrewlalis.perfin.view.BindingUtil;
 import com.andrewlalis.perfin.view.ProfilesStage;
 import javafx.fxml.FXML;
+import javafx.scene.control.Button;
 import javafx.scene.control.Label;
 import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.HBox;
+import javafx.scene.layout.VBox;
 
 import static com.andrewlalis.perfin.PerfinApp.router;
 
@@ -14,6 +16,10 @@ public class MainViewController {
     @FXML public BorderPane mainContainer;
     @FXML public HBox breadcrumbHBox;
 
+    @FXML public Button showManualButton;
+    @FXML public Button hideManualButton;
+    @FXML public VBox manualVBox;
+
     @FXML public void initialize() {
         AnchorPaneRouterView routerView = (AnchorPaneRouterView) router.getView();
         mainContainer.setCenter(routerView.getAnchorPane());
@@ -31,6 +37,13 @@ public class MainViewController {
                 }
         );
 
+        manualVBox.managedProperty().bind(manualVBox.visibleProperty());
+        manualVBox.setVisible(false);
+        showManualButton.managedProperty().bind(showManualButton.visibleProperty());
+        showManualButton.visibleProperty().bind(manualVBox.visibleProperty().not());
+        hideManualButton.managedProperty().bind(hideManualButton.visibleProperty());
+        hideManualButton.visibleProperty().bind(manualVBox.visibleProperty());
+
         router.navigate("accounts");
     }
 
@@ -55,4 +68,12 @@ public class MainViewController {
     @FXML public void viewProfiles() {
         ProfilesStage.open(mainContainer.getScene().getWindow());
     }
+
+    @FXML public void showManual() {
+        manualVBox.setVisible(true);
+    }
+
+    @FXML public void hideManual() {
+        manualVBox.setVisible(false);
+    }
 }

src/main/resources/account-view.fxml

@@ -10,7 +10,7 @@
         fx:controller="com.andrewlalis.perfin.control.AccountViewController"
 >
     <top>
-        <Label fx:id="titleLabel" styleClass="std-padding,large-text,bold-text"/>
+        <Label fx:id="titleLabel" styleClass="std-padding,large-font,bold-text"/>
     </top>
     <center>
         <VBox>

src/main/resources/create-balance-record.fxml

@@ -10,7 +10,7 @@
             fx:controller="com.andrewlalis.perfin.control.CreateBalanceRecordController"
 >
     <top>
-        <Label text="Create New Balance Record" styleClass="large-text,bold-text,std-padding"/>
+        <Label text="Create New Balance Record" styleClass="large-font,bold-text,std-padding"/>
     </top>
     <center>
         <VBox styleClass="std-padding,std-spacing" style="-fx-max-width: 500px;" BorderPane.alignment="TOP_LEFT">

src/main/resources/edit-account.fxml

@@ -10,7 +10,7 @@
 >
     <top>
         <HBox styleClass="std-padding,std-spacing">
-            <Label fx:id="titleLabel" text="Edit Account" styleClass="large-text,bold-text"/>
+            <Label fx:id="titleLabel" text="Edit Account" styleClass="large-font,bold-text"/>
         </HBox>
     </top>
     <center>

src/main/resources/main-view.fxml

@@ -2,6 +2,8 @@
 
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
+<?import javafx.scene.text.TextFlow?>
+<?import javafx.scene.text.Text?>
 <BorderPane
         xmlns="http://javafx.com/javafx"
         xmlns:fx="http://javafx.com/fxml"
@@ -16,6 +18,9 @@
                 <Button text="Accounts" onAction="#goToAccounts"/>
                 <Button text="Transactions" onAction="#goToTransactions"/>
                 <Button text="Profiles" onAction="#viewProfiles"/>
+
+                <Button text="View Manual" fx:id="showManualButton" onAction="#showManual"/>
+                <Button text="Hide Manual" fx:id="hideManualButton" onAction="#hideManual"/>
             </HBox>
             <HBox fx:id="breadcrumbHBox" styleClass="std-spacing,small-font"/>
         </VBox>
@@ -25,4 +30,15 @@
             <Label text="Perfin Version 1.2.0"/>
         </HBox>
     </bottom>
+    <right>
+        <VBox fx:id="manualVBox" style="-fx-min-width: 400px;" styleClass="padding-extra-1,std-spacing">
+            <Label text="Perfin User Manual" styleClass="large-font,bold-text"/>
+            <TextFlow>
+                <Text>
+                    This manual is your guide on how to properly use Perfin to
+                    manage your personal finances.
+                </Text>
+            </TextFlow>
+        </VBox>
+    </right>
 </BorderPane>

src/main/resources/style/base.css

@@ -61,10 +61,6 @@ Text {
     -fx-font-style: italic;
 }
 
-.large-text {
-    -fx-font-size: large;
-}
-
 .std-padding {
     -fx-padding: 3px;
 }

src/main/resources/transaction-view.fxml

@@ -11,7 +11,7 @@
 >
     <top>
         <HBox styleClass="std-padding,std-spacing">
-            <Label fx:id="titleLabel" styleClass="large-text,bold-text"/>
+            <Label fx:id="titleLabel" styleClass="large-font,bold-text"/>
         </HBox>
     </top>
     <center>