Add a carousel for the app index page

_includes/app_carousel.html

@@ -0,0 +1,37 @@
+{% with image_count=8 %}
+{% include "carousel_start.html" %}
+{% endwith %}
+
+{% with src="app/screenshots/screen_1.jpg", alt="App screenshot", active=True%}
+{% include "carousel_img.html" %}
+{% endwith %}
+
+{% with src="app/screenshots/screen_2.jpg", alt="App screenshot" %}
+{% include "carousel_img.html" %}
+{% endwith %}
+
+{% with src="app/screenshots/screen_3.jpg", alt="App screenshot" %}
+{% include "carousel_img.html" %}
+{% endwith %}
+
+{% with src="app/screenshots/screen_4.jpg", alt="App screenshot" %}
+{% include "carousel_img.html" %}
+{% endwith %}
+
+{% with src="app/screenshots/screen_5.jpg", alt="App screenshot" %}
+{% include "carousel_img.html" %}
+{% endwith %}
+
+{% with src="app/screenshots/screen_6.jpg", alt="App screenshot" %}
+{% include "carousel_img.html" %}
+{% endwith %}
+
+{% with src="app/screenshots/screen_7.jpg", alt="App screenshot" %}
+{% include "carousel_img.html" %}
+{% endwith %}
+
+{% with src="app/screenshots/screen_8.jpg", alt="App screenshot" %}
+{% include "carousel_img.html" %}
+{% endwith %}
+
+{% include "carousel_end.html" %}

_includes/carousel_img.html

@@ -11,5 +11,5 @@
 {% endif %}
 
 <div class='item{% if active %} active{% endif %}'>
-    <img src='{{ img_url }}' alt='{{ alt }}' style='width: 100%'>
+    <img class='center' src='{{ img_url }}' alt='{{ alt }}' style='{% if max_height %}max-height: {{ max_height }}; {% endif %}'>
 </div>

docs/app/app.md

@@ -19,106 +19,4 @@ The InvenTree App can be downloaded for Android devices via the [Play Store](htt
 !!! missing "Not Yet Available"
     The InvenTree app is not yet available for iOS devices
 
-## Connect to InvenTree
-
-Use of the InvenTree app assumes that you (the user) have access to an InvenTree server.
-
-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.
-
-{% with id="no_server", url="app/initial_home_screen.jpg", maxheight="240px", description="No server configured" %}
-{% include "img.html" %}
-{% endwith %}
-
-Press on the mesage to navigate to the server selection view:
-
-### Create Server
-
-!!! success "Server Profiles"
-    The app supports multiple server profiles, providing simple switching between different InvenTree servers and/or account profiles.
-
-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.
-
-{% with id="add_profile", url="app/add_server_profile.jpg", maxheight="240px", description="Add server" %}
-{% include 'img.html' %}
-{% endwith %}
-
-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.md) for more information.
-
-### Search
-
-Select *Search* to open a global search screen.
-
-### Parts
-
-Select *Parts* to navigate to the [Parts](./part.md) view.
-
-### Stock
-
-Select *Stock* to navigate to the [Stock](./stock.md) view.
-
-### Settings
-
-Select *Settings* to navigate to the app [settings](./settings.md) 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 %}
+{% include "app_carousel.html" %}

docs/app/connect.md

@@ -0,0 +1,107 @@
+---
+title: Connect to Server
+---
+
+## Connect to InvenTree
+
+Use of the InvenTree app assumes that you (the user) have access to an InvenTree server.
+
+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.
+
+{% with id="no_server", url="app/initial_home_screen.jpg", maxheight="240px", description="No server configured" %}
+{% include "img.html" %}
+{% endwith %}
+
+Press on the mesage to navigate to the server selection view:
+
+### Create Server
+
+!!! success "Server Profiles"
+    The app supports multiple server profiles, providing simple switching between different InvenTree servers and/or account profiles.
+
+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.
+
+{% with id="add_profile", url="app/add_server_profile.jpg", maxheight="240px", description="Add server" %}
+{% include 'img.html' %}
+{% endwith %}
+
+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.md) for more information.
+
+### Search
+
+Select *Search* to open a global search screen.
+
+### Parts
+
+Select *Parts* to navigate to the [Parts](./part.md) view.
+
+### Stock
+
+Select *Stock* to navigate to the [Stock](./stock.md) view.
+
+### Settings
+
+Select *Settings* to navigate to the app [settings](./settings.md) 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/stylesheets/bootstrap.css

@@ -6311,6 +6311,10 @@ html {
   .carousel-inner > .item > img,
   .carousel-inner > .item > a > img {
     line-height: 1;
+    max-width: 100%;
+    max-height: 320px;
+    margin-left: auto;
+    margin-right: auto;
   }
   @media all and (transform-3d), (-webkit-transform-3d) {
     .carousel-inner > .item {
@@ -6388,23 +6392,13 @@ html {
     filter: alpha(opacity=50);
     opacity: 0.5;
   }
-  .carousel-control.left {
-    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
-    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
-    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
-    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
-    background-repeat: repeat-x;
+  .carousel-control.leftxx {
+    left: 0;
+    right: auto;
   }
   .carousel-control.right {
     right: 0;
     left: auto;
-    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
-    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
-    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
-    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
-    background-repeat: repeat-x;
   }
   .carousel-control:hover,
   .carousel-control:focus {

mkdocs.yml

@@ -106,6 +106,7 @@ nav:
     - Third-Party: extend/integrate.md
   - App:
     - InvenTree App: app/app.md
+    - Connect: app/connect.md
     - Barcodes: app/barcode.md
     - Parts: app/part.md
     - Stock: app/stock.md