Adjust spacing and scrolling of recipe instructions

src/main/java/no/ntnu/idatt1002/demo/data/recipes/FileHandler.java

@@ -122,12 +122,13 @@ public class FileHandler {
                 recipe.addIngredient(ingredientType, ingredientAmount, ingredientUnit);
 
             } else {
+                sb.append(line).append("\n");
                 if (!line.isBlank()) {
-                    sb.append(line).append("\n");
+                   // sb.append(line).append("\n");
                 }
             }
         }
-        recipe.setInstructions(String.valueOf(sb));
+        recipe.setInstructions(String.valueOf(sb).strip());
 
         return recipe;
     }

src/main/resources/style.css

@@ -16,10 +16,8 @@
     -fx-scale-z: 1.05;
 }
 
-
-
 .recipe-tile {
-    -fx-background-color: rgba(252, 203, 80, 0.8);
+    -fx-background-color: rgba(255, 213, 0, 0.86);
     -fx-background-radius: 25;
     -fx-border-color: white;
     -fx-border-width: 6px;
@@ -64,13 +62,22 @@
     -fx-alignment: center;
 }
 
-.recipe-instructions {
-    -fx-font-size: 16;
-    -fx-font-style: italic;
-}
-
 .ingredient:hover {
     -fx-scale-x: 1.05;
     -fx-scale-y: 1.05;
     -fx-scale-z: 1.05;
+}
+/*
+.instructions-pane {
+    -fx-background-color:transparent;
+}*/
+
+/*.instructions-pane .viewport {
+    -fx-background-color: transparent;
+}*/
+
+.recipe-instructions {
+    -fx-font-size: 16;
+    -fx-font-style: italic;
+    -fx-spacing: 2;
 }
\ No newline at end of file

src/main/resources/view/Recipe.fxml

@@ -14,7 +14,7 @@
          </image></ImageView>
       <BorderPane prefHeight="695.0" prefWidth="1130.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
          <top>
-            <HBox prefHeight="136.0" prefWidth="1130.0" BorderPane.alignment="CENTER">
+            <HBox prefHeight="164.0" prefWidth="1130.0" BorderPane.alignment="CENTER">
                <children>
                   <Pane prefHeight="136.0" prefWidth="411.0">
                      <children>
@@ -38,13 +38,13 @@
             </HBox>
          </top>
          <center>
-            <HBox prefHeight="100.0" prefWidth="200.0" BorderPane.alignment="CENTER">
+            <HBox prefHeight="100.0" prefWidth="200.0" spacing="50.0" BorderPane.alignment="CENTER">
                <children>
-                  <ScrollPane prefHeight="457.0" prefWidth="271.0" stylesheets="@../style.css">
+                  <ScrollPane prefHeight="431.0" prefWidth="271.0" stylesheets="@../style.css">
                     <content>
                       <AnchorPane prefHeight="449.0" prefWidth="262.0" styleClass="ingredient-pane" stylesheets="@../style.css">
                            <children>
-                              <VBox fx:id="ingredientList" prefHeight="438.0" prefWidth="262.0" styleClass="ingredient-list" stylesheets="@../style.css" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+                              <VBox fx:id="ingredientList" styleClass="ingredient-list" stylesheets="@../style.css">
                                  <padding>
                                     <Insets left="15.0" top="20.0" />
                                  </padding></VBox>
@@ -52,17 +52,18 @@
                         </AnchorPane>
                     </content>
                   </ScrollPane>
-                  <Pane id="recipe-instructions" prefHeight="457.0" prefWidth="582.0" stylesheets="@../style.css">
-                     <children>
-                        <Text fx:id="instructions" layoutX="14.0" layoutY="47.0" strokeType="OUTSIDE" strokeWidth="0.0" styleClass="recipe-instructions" text="Instructions" wrappingWidth="531.7294921875" />
-                     </children>
-                     <opaqueInsets>
-                        <Insets />
-                     </opaqueInsets>
-                     <HBox.margin>
-                        <Insets left="20.0" />
-                     </HBox.margin>
-                  </Pane>
+                  <ScrollPane prefHeight="429.0" prefWidth="632.0">
+                     <content>
+                        <Pane id="recipe-instructions" stylesheets="@../style.css">
+                           <children>
+                              <Text fx:id="instructions" layoutX="50.0" layoutY="54.0" lineSpacing="10.0" strokeType="OUTSIDE" strokeWidth="0.0" styleClass="recipe-instructions" text="Instructions" wrappingWidth="506.7294921875" />
+                           </children>
+                           <opaqueInsets>
+                              <Insets />
+                           </opaqueInsets>
+                        </Pane>
+                     </content>
+                  </ScrollPane>
                </children>
             </HBox>
          </center>
@@ -70,10 +71,10 @@
             <Pane prefHeight="457.0" prefWidth="75.0" BorderPane.alignment="CENTER" />
          </left>
          <bottom>
-            <Pane prefHeight="102.0" prefWidth="1130.0" BorderPane.alignment="CENTER" />
+            <Pane prefHeight="77.0" prefWidth="1130.0" BorderPane.alignment="CENTER" />
          </bottom>
          <right>
-            <Pane prefHeight="493.0" prefWidth="148.0" BorderPane.alignment="CENTER" />
+            <Pane prefHeight="454.0" prefWidth="122.0" BorderPane.alignment="CENTER" />
          </right></BorderPane>
    </children>
 </AnchorPane>