Add a bunch o' screenshots

docs/app/app.md

@@ -6,7 +6,7 @@ title: InvenTree Mobile App
 
 The InvenTree Mobile App brings stock control to your pocket. Integrating seamlessly with the [InvenTree API](../../extend/api), the app provides immediate access to inventory data without requiring physical access to a computer.
 
-Native barcode support provides a multitude of context-sensitive stock control actions, allowing streamlined inventory management at your fingertips.
+Native barcode support provides a multitude of context-sensitive stock control actions, allowing streamlined inventory management at your fingertips. The app has been optimized for speed, providing instant access to stock knowledge and handy on-site functionality.
 
 ## Download
 
@@ -23,24 +23,102 @@ The InvenTree App can be downloaded for Android devices via the [Play Store](htt
 
 Use of the InvenTree app assumes that you (the user) have access to an InvenTree server.
 
-!!! success "Profiles"
-    The app supports multiple user profiles, providing simple switching between different InvenTree servers and/or account profiles.
+When first running the app, no profile has been configured. A message is displayed at the bottom of the screen, indicting that a server profile needs to be configured.
 
-!!! todo "Add Screenshot"
-    Add screenshot of "Profiles" screen
+{% with id="no_server", url="app/initial_home_screen.jpg", maxheight="240px", description="No server configured" %}
+{% include "img.html" %}
+{% endwith %}
 
-!!! todo "Add Screenshot"
-    Add screenshot of "connection failed" screen
+Press on the mesage to navigate to the server selection view:
 
-!!! todo "Add Screenshot"
-    Add screenshow of "connection success" screen
+### Create Server
 
-## Index Page
+!!! success "Server Profiles"
+    The app supports multiple server profiles, providing simple switching between different InvenTree servers and/or account profiles.
 
-!!! todo "TODO"
-    This section requires further work
+Press the <span class='fas fa-plus-circle blue'></span> button in the bottom-right corner of the screen to create a new server profile.
 
-## Menu Bar
+{% with id="add_profile", url="app/add_server_profile.jpg", maxheight="240px", description="Add server" %}
+{% include 'img.html' %}
+{% endwith %}
 
-!!! todo "TODO"
-    This section requires further work
+Enter the required server details:
+
+| Parameter | Description |
+| --- | --- |
+| Name | Name for the server profile (can be any value, simply for reference) |
+| Server | InvenTree server address (including port, if required). e.g. `http://inventree.myserver.com:8080` |
+| Username | Your account username (case sensitive) |
+| Password | Your account password (case sensitive) |
+
+### Connect to Server
+
+Once the server profile is created, you need to connect to the server. Simply short press on the server profile to connect.
+
+Alternatively, long press on the server profile to activate the context menu, then select *Connect to Server*.
+
+When the app successfully connects to the server, a success message is briefly displayed at the bottom of the screen. A green <span class='fas fa-check-circle green'></span> icon next to the server profile indicate that the profile is currently *selected* and also the connection was successful.
+
+{% with id="connected", url="app/connected.jpg", maxheight="240px", description="Connected to server" %}
+{% include 'img.html' %}
+{% endwith %}
+
+### Connection Failure
+
+If (for whatever reason) the app does not successfully connect to the InvenTree server, a failure message is displayed, and a red <span class='fas fa-times-circle red'></span> icon is displayed next to the server profile.
+
+{% with id="failed", url="app/unauthorized.jpg", maxheight="240px", description="Connection failure" %}
+{% include 'img.html' %}
+{% endwith %}
+
+In this case, the error message displayed at the bottom of the screen provides context as to why the app could not successfully connect to the server.
+
+To edit the server profile details, long press on the server profile, and select *Edit Server Profile*:
+
+{% with id="edit", url="app/edit_server.jpg", maxheight="240px", description="Edit server profile" %}
+{% include 'img.html' %}
+{% endwith %}
+
+## Drawer Menu
+
+The *Drawer Menu* is accessible from all top-level app views, and provides quick access to important app features. To open the drawer menu, select the <span class='fas fa-bars'></span> icon in the top-left corner of the screen (where available).
+
+{% with id="drawer", url="app/drawer.jpg", maxheight="240px", description="Open drawer menu" %}
+{% include 'img.html' %}
+{% endwith %}
+
+The *Drawer Menu* provides instant access to the following views:
+
+### InvenTree
+
+Select *InvenTree* to navigate to the [home screen](#home-screen).
+
+### Scan Barcode
+
+Select *Scan Barcode* to open the barcode scanner, and scan an InvenTree stock item or location to instantly jump to the relevent view. Refer to the [barcode documentation](./barcode) for more information.
+
+### Search
+
+Select *Search* to open a global search screen.
+
+### Parts
+
+Select *Parts* to navigate to the [Parts](./parts) view.
+
+### Stock
+
+Select *Stock* to navigate to the [Stock](./stock) view.
+
+### Settings
+
+Select *Settings* to navigate to the app [settings](./settings) menu.
+
+## Home Screen
+
+The app *home screen* provides quick-access buttons for stock view and actions.
+
+Additionally, the connection status of the server is displayed at the bottom of the screen.
+
+{% with id="home", url="app/home.jpg", maxheight="240px", description="Home screen" %}
+{% include 'img.html' %}
+{% endwith %}

docs/app/settings.md

@@ -0,0 +1,54 @@
+---
+title: App Settings
+---
+
+## Settings
+
+The *Settings* view provides access to user configurable settings, in addition to information about the app itself.
+
+The main settings view is shown below, and provides the following options:
+
+- **Server** - Configure and select server profile 
+- **App Settings** - Configure app settings
+- **About** - Information about the InvenTree app
+- **Documentation** - Opens the InvenTree documentation in an external browser
+
+{% with id="settings_view", url="app/settings.jpg", maxheight="240px", description="Settings view" %}
+{% include 'img.html' %}
+{% endwith %}
+
+## App Settings
+
+The *App Settings* view provides configuration options for the InvenTree app:
+
+{% with id="app_settings", url="app/app_settings.jpg", maxheight="240px", description="App Settings" %}
+{% include 'img.html' %}
+{% endwith %}
+
+### Sounds
+
+Configure audible app notifications:
+
+- **Server Error** - Play an audible tone when a server error occurs
+- **Barcode Tones** - Play audible tones when scanning barcodes
+
+## About
+
+The *About* view provides details about the app itself:
+
+{% with id="about_app", url="app/about.jpg", maxheight="240px", description="About the InvenTree app" %}
+{% include 'img.html' %}
+{% endwith %}
+
+### Server Details
+
+- **Address** - URL of the currently connected server
+- **Version** - Version of InvenTree software running on the server
+- **Server Instance** - Instance name of the server
+
+### App Details
+
+- **Package Name** - Package identifier for the compiled app
+- **Version** - App software version
+- **Release Notes** - Select to view app release notes
+- **Credits** - Select to view additional app credits

docs/features.md

@@ -0,0 +1,45 @@
+---
+title: Features
+---
+
+## Organize Parts
+
+Parts are the fundamental element of any inventory. InvenTree groups parts into structured categories which allow you to arrange parts to meet your particular needs. 
+
+[Read more...](./part/part)
+
+## Manage Suppliers
+
+InvenTree allows you to easily create, modify or delete suppliers and supplier items linked to any part in your inventory.
+
+[Read more...](./buy/supplier)
+
+## Instant Stock Knowledge
+
+Instantly view current stock for a certain part, in a particular location, or required for an individual build. Stock items are organized in cascading locations and sub-locations, allowing flexible inspection of stock under any location. Stock items can be serialized for tracking of individual items, and test results can be stored against a serialized stock item for the purpose of acceptance testing and commissioning.
+
+[Read more...](./stock/stock)
+
+## BOM Management
+
+Intelligent BOM (Bill of Material) management provides a clear understanding of the sub-parts required to make a new part. 
+InvenTree allows you to upload simple BOM files in multiple formats, and download a detailed BOM with all the information stored in its database.
+
+[Read more...](./build/bom)
+
+## Build Parts
+
+Inventree features a build management system to help you track the progress of your builds.
+Builds consume stock items to make new parts, you can decide to automatically or manually allocate parts from your current inventory.
+
+[Read more...](./build/build)
+
+## Report
+
+Generate a wide range of reports using custom templates. [Read more...](./report/report)
+
+## Extend and Customize
+
+InvenTree is designed to be highly extensible. If the core InvenTree functionality does not meet your particular need, InvenTree provides a RESTful API, a native Python library, and a powerful plugin system.
+
+[Read more...](./extend/api)

docs/index.md

@@ -16,48 +16,12 @@ InvenTree is designed to allow for a flexible installation. You could run the In
 
 ## Features
 
-### Organize Parts
-
-Parts are the fundamental element of any inventory. InvenTree groups parts into structured categories which allow you to arrange parts to meet your particular needs. 
-
-[Read more...](./part/part)
-
-### Manage Suppliers
-
-InvenTree allows you to easily create, modify or delete suppliers and supplier items linked to any part in your inventory.
-
-[Read more...](./buy/supplier)
-
-### Instant Stock Knowledge
-
-Instantly view current stock for a certain part, in a particular location, or required for an individual build. Stock items are organized in cascading locations and sub-locations, allowing flexible inspection of stock under any location. Stock items can be serialized for tracking of individual items, and test results can be stored against a serialized stock item for the purpose of acceptance testing and commissioning.
-
-[Read more...](./stock/stock)
-
-### BOM Management
-
-Intelligent BOM (Bill of Material) management provides a clear understanding of the sub-parts required to make a new part. 
-InvenTree allows you to upload simple BOM files in multiple formats, and download a detailed BOM with all the information stored in its database.
-
-[Read more...](./build/bom)
-
-### Build Parts
-
-Inventree features a build management system to help you track the progress of your builds.
-Builds consume stock items to make new parts, you can decide to automatically or manually allocate parts from your current inventory.
-
-[Read more...](./build/build)
-
-### Report
-
-Generate a wide range of reports using custom templates. [Read more...](./report/report)
-
-### Extend and Customize
-
-InvenTree is designed to be highly extensible. If the core InvenTree functionality does not meet your particular need, InvenTree provides a RESTful API, a native Python library, and a powerful plugin system.
-
-[Read more...](./extend/api)
+Refer to the [features](./features) page for a rundown on the features that InvenTree provides out of the box.
 
 ## Getting Started
 
-Refer to the [installation guide](./start/install) for instructions on installing InvenTree. The server where InvenTree is to be installed will need to meet some basic package requirements, and a certain level of system administration understanding is assumed.
+Refer to the [installation guide](./start/install) for instructions on installing InvenTree. The server where InvenTree is to be installed will need to meet some basic package requirements, and a certain level of system administration understanding is assumed.
+
+## Get the App
+
+InvenTree is supported by a [companion mobile app](./app/app) which is tightly integrated with the InvenTree database. Lightning fast stock control, in your pocket!

docs/stylesheets/extra.css

@@ -67,4 +67,16 @@ p {
 /* Remove top margin for first h2 header */
 .md-typeset h2:first-of-type {
 	margin-top: 0em;
+}
+
+.red {
+	color: #C55;
+}
+
+.green {
+	color: #5C5;
+}
+
+.blue {
+	color: #55C;
 }

mkdocs.yml

@@ -38,6 +38,7 @@ extra_javascript:
 nav:
   - InvenTree:
     - About InvenTree: index.md
+    - Features: features.md
     - What's New: releases/new.md
     - FAQ: faq.md
     - Contribute: contribute.md
@@ -96,7 +97,8 @@ nav:
     - InvenTree App: app/app.md
     - Barcodes: app/barcode.md
     - Parts: app/part.md
-    - Stock: app/barcode.md
+    - Stock: app/stock.md
+    - Settings: app/settings.md
     - Privacy: app/privacy.md
     - Translation: app/translation.md
     - Suggestions: app/issues.md