Merge pull request #177 from Manoharan-Ajay-Anand/ajay/ug-images

Add labelled images and captions

docs/UserGuide.md

@@ -53,11 +53,17 @@ Displays [orders](#33-order), [client bookmarks](#31-client-bookmarks) and [reci
 
 ![Home tab](images/product-screenshots/general/HomeTab.png)
 
+Fig 1. Home tab
+{:.caption}
+
 #### 2.2.2 Inventory & Statistics Tab
 Displays [inventory](#32-inventory) and [statistics](#35-statistics).
 
 ![Inventory & Statistics tab](images/product-screenshots/general/BarChart.png)
 
+Fig 2. Inventory & Statistics tab
+{:.caption}
+
 --------------------------------------------------------------------------------------------------------------------
 
 ## 3. Overview of Features
@@ -154,6 +160,11 @@ Example:
 
 ### 4.3 Client
 
+![Client card](images/labelled-cards/ClientCardLabelled.png)
+
+Fig 3. Parts of a client
+{:.caption}
+
 #### 4.3.1 Adding a client: `add-c`
 
 Adds a client to the application.
@@ -249,6 +260,11 @@ Format: `list-c`
 
 ### 4.4 Ingredient
 
+![Ingredient card](images/labelled-cards/IngredientCardLabelled.png)
+
+Fig 4. Parts of an ingredient
+{:.caption}
+
 #### 4.4.1 Adding an ingredient: `add-i`
 
 Adds an ingredient to the application.
@@ -344,6 +360,11 @@ Format: `list-i`
 
 ### 4.5 Order
 
+![Order card](images/labelled-cards/OrderCardLabelled.png)
+
+Fig 5. Parts of an order
+{:.caption}
+
 #### 4.5.1 Adding an order: `add-o`
 
 Adds an order to the application.
@@ -386,19 +407,31 @@ Secondary processes that happen when you add an order:
 * `add-o cn/Amy Tang cp/98796844 ca/188 Gul Circle rn/Chicken Rice ri/Rice-2-cups, Chicken-1-half op/5.00 od/12-12-2021
   1800 oq/2`. Adding an order without client index and recipe index.
 
-![AddOrderCommandFull](images/product-screenshots/order/AddOrderCommandFullFocused.png)
+![Full add order command](images/product-screenshots/order/AddOrderCommandFullFocused.png)
+
+Fig 6. Adding an order without client index and recipe index
+{:.caption}
 
 * `add-o c/1 rn/Chicken Rice ri/Rice-2-cups, Chicken-1-half op/5.00 od/12-12-2021 1800 oq/2`. Adding an order using a client index.
 
-![AddOrderCommandFull](images/product-screenshots/order/AddOrderCommandWithClientIndexOnlyFocused.png)
+![Add order command with client index only](images/product-screenshots/order/AddOrderCommandWithClientIndexOnlyFocused.png)
+
+Fig 7. Adding an order using a client index
+{:.caption}
 
 * `add-o cn/Amy Tang cp/98796844 ca/188 Gul Circle r/3 od/12-12-2021 1800 oq/2`. Adding an order using a recipe index.
 
-![AddOrderCommandFull](images/product-screenshots/order/AddOrderCommandWithRecipeIndexOnlyFocused.png)
+![Add order command with recipe index only](images/product-screenshots/order/AddOrderCommandWithRecipeIndexOnlyFocused.png)
+
+Fig 8. Adding an order using a recipe index
+{:.caption}
 
 * `add-o c/1 r/3 od/12-12-2021 1800 oq/2`. Adding an order using both client and recipe indexes.
 
-![AddOrderCommandFull](images/product-screenshots/order/AddOrderCommandWithClientAndRecipeIndexFocused.png)
+![Add order command with client and recipe index](images/product-screenshots/order/AddOrderCommandWithClientAndRecipeIndexFocused.png)
+
+Fig 9. Adding an order using both client and recipe indexes
+{:.caption}
 
 #### 4.5.2 Adding an order ingredient: `add-oi`
 
@@ -545,6 +578,11 @@ Format: `undone-o INDEX`
 
 ### 4.6 Recipe
 
+![Recipe card](images/labelled-cards/RecipeCardLabelled.png)
+
+Fig 10. Parts of a recipe
+{:.caption}
+
 #### 4.6.1 Adding a recipe: `add-r`
 
 Adds a recipe to the application.
@@ -689,23 +727,32 @@ Format: `list-r`
   from completed orders
 * Values will be displayed when you hover your cursor over each bar.
 
-![Inventory & Statistics tab](images/product-screenshots/general/BarChart.png)
+![Revenue bar chart](images/product-screenshots/general/BarChart.png)
+
+Fig 11. Revenue bar chart
+{:.caption}
 
 #### 4.7.2 Viewing top 10 clients
 * Displays a pie chart showing the top 10 clients who made the highest number of orders.
 * Ties are broken arbitrarily i.e. If there are multiple clients with the same number of orders, 10 random clients
   will be displayed.
 * Values will be displayed when you hover your cursor over each wedge.
 
-![Inventory & Statistics tab](images/product-screenshots/general/ClientPieChart.png)
+![Client pie chart](images/product-screenshots/general/ClientPieChart.png)
+
+Fig 12. Client pie chart
+{:.caption}
 
 #### 4.7.3 Viewing top 10 recipes
 * Displays a pie chart showing the top 10 recipes that appear in the highest number of orders.
 * Ties are broken arbitrarily i.e. If there are multiple recipes with the same number of orders, 10 random recipes
   will be displayed.
 * Values will be displayed when you hover your cursor over each wedge.
 
-![Inventory & Statistics tab](images/product-screenshots/general/RecipePieChart.png)
+![Recipe pie chart](images/product-screenshots/general/RecipePieChart.png)
+
+Fig 13. Recipe pie chart
+{:.caption}
 
 ### 4.8 Exiting the program: `exit`
 

docs/_sass/minima/_layout.scss

@@ -273,3 +273,10 @@
 .toc-no-bullet-points ul, .toc-no-bullet-points ol {
   list-style-type: none;
 }
+
+.caption {
+  text-align: center;
+  color: gray;
+  font-size: 0.9em;
+  font-style: italic;
+}