diff --git a/_includes/app_carousel.html b/_includes/app_carousel.html new file mode 100644 index 0000000..90af02a --- /dev/null +++ b/_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" %} \ No newline at end of file diff --git a/_includes/carousel_img.html b/_includes/carousel_img.html index a8c29b1..669da45 100644 --- a/_includes/carousel_img.html +++ b/_includes/carousel_img.html @@ -11,5 +11,5 @@ {% endif %}
- {{ alt }} + {{ alt }}
\ No newline at end of file diff --git a/docs/app/app.md b/docs/app/app.md index 927fc46..501a01c 100644 --- a/docs/app/app.md +++ b/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 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 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 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 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 %} \ No newline at end of file +{% include "app_carousel.html" %} diff --git a/docs/app/connect.md b/docs/app/connect.md new file mode 100644 index 0000000..fe8be23 --- /dev/null +++ b/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 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 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 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 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 %} \ No newline at end of file diff --git a/docs/assets/images/app/screenshots/screen_1.jpg b/docs/assets/images/app/screenshots/screen_1.jpg new file mode 100644 index 0000000..fabac24 Binary files /dev/null and b/docs/assets/images/app/screenshots/screen_1.jpg differ diff --git a/docs/assets/images/app/screenshots/screen_2.jpg b/docs/assets/images/app/screenshots/screen_2.jpg new file mode 100644 index 0000000..dff9a7a Binary files /dev/null and b/docs/assets/images/app/screenshots/screen_2.jpg differ diff --git a/docs/assets/images/app/screenshots/screen_3.jpg b/docs/assets/images/app/screenshots/screen_3.jpg new file mode 100644 index 0000000..dd4e913 Binary files /dev/null and b/docs/assets/images/app/screenshots/screen_3.jpg differ diff --git a/docs/assets/images/app/screenshots/screen_4.jpg b/docs/assets/images/app/screenshots/screen_4.jpg new file mode 100644 index 0000000..94e70c4 Binary files /dev/null and b/docs/assets/images/app/screenshots/screen_4.jpg differ diff --git a/docs/assets/images/app/screenshots/screen_5.jpg b/docs/assets/images/app/screenshots/screen_5.jpg new file mode 100644 index 0000000..8e66c87 Binary files /dev/null and b/docs/assets/images/app/screenshots/screen_5.jpg differ diff --git a/docs/assets/images/app/screenshots/screen_6.jpg b/docs/assets/images/app/screenshots/screen_6.jpg new file mode 100644 index 0000000..8284be5 Binary files /dev/null and b/docs/assets/images/app/screenshots/screen_6.jpg differ diff --git a/docs/assets/images/app/screenshots/screen_7.jpg b/docs/assets/images/app/screenshots/screen_7.jpg new file mode 100644 index 0000000..b294201 Binary files /dev/null and b/docs/assets/images/app/screenshots/screen_7.jpg differ diff --git a/docs/assets/images/app/screenshots/screen_8.jpg b/docs/assets/images/app/screenshots/screen_8.jpg new file mode 100644 index 0000000..8647eb3 Binary files /dev/null and b/docs/assets/images/app/screenshots/screen_8.jpg differ diff --git a/docs/stylesheets/bootstrap.css b/docs/stylesheets/bootstrap.css index 1fd10a4..e626528 100644 --- a/docs/stylesheets/bootstrap.css +++ b/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 { diff --git a/mkdocs.yml b/mkdocs.yml index ad30f18..7f76d83 100644 --- a/mkdocs.yml +++ b/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