> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gunp.la/llms.txt
> Use this file to discover all available pages before exploring further.

# Using plamotrack on a phone or tablet

> plamotrack lays itself out for the screen it is on: a tab bar and cards on a phone, an icon rail on a tablet. Add it to your home screen to open it like an app.

plamotrack is one web app that lays itself out for the screen it is on. There is nothing extra to install and no separate mobile site: open your instance's address in the phone's browser and sign in as you do on a computer. Everything you record lands in the same collection.

The layout follows the width of the window, not the kind of device:

| Width                                                       | What you get                                                                          |
| ----------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| Below 768 px — a phone                                      | A tab bar at the foot of the screen, lists as cards, dialogs as full-screen sheets    |
| 768 to 1279 px — a tablet, or a narrow window on a computer | A narrow rail of icons in place of the sidebar; tables that fold their columns to fit |
| 1280 px and wider                                           | The desktop layout, with the full sidebar                                             |

A tablet turned on its side, or a browser window dragged narrower, changes layout on the spot. A half-filled form keeps what you typed.

<Note>
  Your phone has to be able to reach your instance. On the same Wi-Fi as a [local or LAN install](/deployment/local-and-lan) that is the computer's address on your network. To reach it from the hobby shop, you need one of the [remote deployments](/deployment/overview).
</Note>

## On a phone

<Frame caption="Home on a phone: the bench first, the tab bar under your thumb. All collection details shown here are invented demo data.">
  <img className="block dark:hidden mx-auto" width="320" src="https://mintcdn.com/plamotrack/YpFsa6OoQofygFHX/images/screenshots/phone-home-light.png?fit=max&auto=format&n=YpFsa6OoQofygFHX&q=85&s=2d910cf5cfcea92e0813a736b4bbc9e0" alt="Home on a phone, with two kits on the bench, the backlog below them, and a tab bar with Home, Kits, Orders, Inventory and More." data-path="images/screenshots/phone-home-light.png" />

  <img className="hidden dark:block mx-auto" width="320" src="https://mintcdn.com/plamotrack/YpFsa6OoQofygFHX/images/screenshots/phone-home.png?fit=max&auto=format&n=YpFsa6OoQofygFHX&q=85&s=daab719ef0d3c6210c3cbd29a431bc5e" alt="Home on a phone, with two kits on the bench, the backlog below them, and a tab bar with Home, Kits, Orders, Inventory and More." data-path="images/screenshots/phone-home.png" />
</Frame>

### Getting around

The tab bar has five tabs: **Home**, **Kits**, **Orders**, **Inventory** and **More**. **More** holds what the sidebar's lower half holds on a computer: **Retailers**, **Settings**, the theme choice and **Sign out**.

<Frame caption="More: Retailers, Settings, the theme and Sign out.">
  <img className="block dark:hidden mx-auto" width="320" src="https://mintcdn.com/plamotrack/YpFsa6OoQofygFHX/images/screenshots/phone-more-light.png?fit=max&auto=format&n=YpFsa6OoQofygFHX&q=85&s=de119c8d3e92c3695eb81fd4ff6ad2e3" alt="The More tab on a phone, listing Retailers and Settings, a Theme control with Light, Dark and Device, and Sign out." data-path="images/screenshots/phone-more-light.png" />

  <img className="hidden dark:block mx-auto" width="320" src="https://mintcdn.com/plamotrack/YpFsa6OoQofygFHX/images/screenshots/phone-more.png?fit=max&auto=format&n=YpFsa6OoQofygFHX&q=85&s=8038ae8f33af5b3a7ddf7c41437d6ea2" alt="The More tab on a phone, listing Retailers and Settings, a Theme control with Light, Dark and Device, and Sign out." data-path="images/screenshots/phone-more.png" />
</Frame>

### Home

Home is one column. **On the bench** comes first, then **Backlog** and **Recently completed**, then **In the mail** as three groups — **Pre-ordered**, **Ordered** and **In Transit** — one under the other on a phone held upright. Where there is room for two side by side — a large phone on its side, a small tablet — the groups sit two abreast. The pencil on any card opens that kit or order for editing.

<Frame caption="Further down Home: recently completed kits, then the mail in its three groups.">
  <img className="block dark:hidden mx-auto" width="320" src="https://mintcdn.com/plamotrack/YpFsa6OoQofygFHX/images/screenshots/phone-home-mail-light.png?fit=max&auto=format&n=YpFsa6OoQofygFHX&q=85&s=a73f1fbe06a0fdbcebec86e740798a04" alt="The lower part of Home on a phone: completed kits with their ratings and dates, then In the mail grouped under Pre-ordered, Ordered and In Transit." data-path="images/screenshots/phone-home-mail-light.png" />

  <img className="hidden dark:block mx-auto" width="320" src="https://mintcdn.com/plamotrack/YpFsa6OoQofygFHX/images/screenshots/phone-home-mail.png?fit=max&auto=format&n=YpFsa6OoQofygFHX&q=85&s=e390b1519f240cea6ea9dc862925f398" alt="The lower part of Home on a phone: completed kits with their ratings and dates, then In the mail grouped under Pre-ordered, Ordered and In Transit." data-path="images/screenshots/phone-home-mail.png" />
</Frame>

### Lists, filters and sorting

**Kits**, **Orders**, **Inventory** and **Retailers** show a card for each row. Tap the pencil on a card to edit it. On **Orders**, tap the card itself to see the order's lines.

On **Kits** and **Orders**, the search box stays at the top of the list and everything else — status, series, retailer, sort order — lives behind one button beside it.

<Steps>
  <Step title="Open the sheet">
    Tap the **Filter and sort** button to the right of the search box. A badge on the button counts the filters already in effect.
  </Step>

  <Step title="Choose">
    Pick a status, a series or a sort order. Each status shows how many kits it holds, and the button at the foot of the sheet counts what your choices will show.
  </Step>

  <Step title="Apply">
    Tap **Show … kits**. Tap **Clear** to reset the choices, or close the sheet to leave the list as it was.
  </Step>
</Steps>

<Frame caption="Kits on a phone, filtered to the backlog, and the Filter and sort sheet that did it.">
  <img className="block dark:hidden mx-auto" width="320" src="https://mintcdn.com/plamotrack/YpFsa6OoQofygFHX/images/screenshots/phone-filter-light.png?fit=max&auto=format&n=YpFsa6OoQofygFHX&q=85&s=d8a443043585077b4e0df13ed5b186d1" alt="The Filter and sort sheet over the Kits list, with a button for each status and its count, three sort orders, and Clear and Show 5 kits at the foot." data-path="images/screenshots/phone-filter-light.png" />

  <img className="hidden dark:block mx-auto" width="320" src="https://mintcdn.com/plamotrack/YpFsa6OoQofygFHX/images/screenshots/phone-filter.png?fit=max&auto=format&n=YpFsa6OoQofygFHX&q=85&s=3103261ab84193db59bb07f3a5aa2891" alt="The Filter and sort sheet over the Kits list, with a button for each status and its count, three sort orders, and Clear and Show 5 kits at the foot." data-path="images/screenshots/phone-filter.png" />
</Frame>

A filtered list has its own address, exactly as on a computer, so a bookmark or a **view all** link from Home opens already filtered.

### Recording an order

Every dialog opens as a full-screen sheet. Its buttons — **Cancel** and **Record order**, say — sit in a bar at the foot of the screen, where they stay while you scroll the form. In **New order**, each line is a card of its own: the type, the quantity and the price, then the kit's details or the catalog search.

<Frame caption="New order on a phone: a line is a card, and the actions stay at the foot of the screen.">
  <img className="block dark:hidden mx-auto" width="320" src="https://mintcdn.com/plamotrack/YpFsa6OoQofygFHX/images/screenshots/phone-order-form-light.png?fit=max&auto=format&n=YpFsa6OoQofygFHX&q=85&s=ee3fe5190602c131de325c6fd7380af0" alt="The New order sheet on a phone, showing one kit line as a card with quantity, unit price, name and grade, and Cancel and Record order in a bar at the bottom." data-path="images/screenshots/phone-order-form-light.png" />

  <img className="hidden dark:block mx-auto" width="320" src="https://mintcdn.com/plamotrack/YpFsa6OoQofygFHX/images/screenshots/phone-order-form.png?fit=max&auto=format&n=YpFsa6OoQofygFHX&q=85&s=ebbf6c22c3c1eda7a873da963b69325c" alt="The New order sheet on a phone, showing one kit line as a card with quantity, unit price, name and grade, and Cancel and Record order in a bar at the bottom." data-path="images/screenshots/phone-order-form.png" />
</Frame>

The steps are the ones in [Kits & Orders](/using/kits-and-orders); only the shape differs.

### Counting stock

On **Inventory**, each card has a minus and a plus button either side of the count, sized for a finger. It is the quickest way to take one pot of cement off the shelf mid-build.

<Frame caption="Consumables on a phone. The thinner is at 0 until its order arrives; the cement is below its threshold.">
  <img className="block dark:hidden mx-auto" width="320" src="https://mintcdn.com/plamotrack/YpFsa6OoQofygFHX/images/screenshots/phone-inventory-light.png?fit=max&auto=format&n=YpFsa6OoQofygFHX&q=85&s=2dd54d617dbefec4b8d1852e59751b88" alt="Inventory on a phone, on the Consumables tab: a card for each item with its category, a low-stock threshold where set, and minus and plus buttons beside the count." data-path="images/screenshots/phone-inventory-light.png" />

  <img className="hidden dark:block mx-auto" width="320" src="https://mintcdn.com/plamotrack/YpFsa6OoQofygFHX/images/screenshots/phone-inventory.png?fit=max&auto=format&n=YpFsa6OoQofygFHX&q=85&s=b5826a54f498f2de6c98163893614b70" alt="Inventory on a phone, on the Consumables tab: a card for each item with its category, a low-stock threshold where set, and minus and plus buttons beside the count." data-path="images/screenshots/phone-inventory.png" />
</Frame>

### Settings

**Settings**, from **More**, opens as a list of its five sections. Tap one to open it; the arrow at the top left goes back to the list.

<Frame caption="Settings on a phone is the list of its sections.">
  <img className="block dark:hidden mx-auto" width="320" src="https://mintcdn.com/plamotrack/YpFsa6OoQofygFHX/images/screenshots/phone-settings-light.png?fit=max&auto=format&n=YpFsa6OoQofygFHX&q=85&s=e56cbf10c427ce5e0f26250139bc1d04" alt="Settings on a phone: a list of General, Language & region, Data management, Access tokens and About." data-path="images/screenshots/phone-settings-light.png" />

  <img className="hidden dark:block mx-auto" width="320" src="https://mintcdn.com/plamotrack/YpFsa6OoQofygFHX/images/screenshots/phone-settings.png?fit=max&auto=format&n=YpFsa6OoQofygFHX&q=85&s=0c85fb644a0186c6bd2e7a496d7eafaf" alt="Settings on a phone: a list of General, Language & region, Data management, Access tokens and About." data-path="images/screenshots/phone-settings.png" />
</Frame>

### What a phone leaves out

**Data management** on a phone offers the exports only: **Download full archive (.zip)** and the per-table CSV buttons. An archive saved to your phone is a fair quick backup. Importing and the blank templates need a screen at least 768 px wide — a tablet or a computer. The import preview is a set of wide tables, and **Replace everything** is the one action in plamotrack that deletes a collection; neither belongs on a small touch screen.

<Frame caption="Data management on a phone: the exports, and where importing lives.">
  <img className="block dark:hidden mx-auto" width="320" src="https://mintcdn.com/plamotrack/YpFsa6OoQofygFHX/images/screenshots/phone-data-light.png?fit=max&auto=format&n=YpFsa6OoQofygFHX&q=85&s=9919eeedb66efc9017007d68b4a3b500" alt="Settings → Data management on a phone: the Export card with the full archive and per-table CSV buttons, and a sentence saying importing and the templates need a wider screen." data-path="images/screenshots/phone-data-light.png" />

  <img className="hidden dark:block mx-auto" width="320" src="https://mintcdn.com/plamotrack/YpFsa6OoQofygFHX/images/screenshots/phone-data.png?fit=max&auto=format&n=YpFsa6OoQofygFHX&q=85&s=582de883501fffcf475ab3569d14aeb5" alt="Settings → Data management on a phone: the Export card with the full archive and per-table CSV buttons, and a sentence saying importing and the templates need a wider screen." data-path="images/screenshots/phone-data.png" />
</Frame>

Everything else is there: every page, every dialog and every field.

## On a tablet

From 768 px the sidebar becomes a rail of icons down the left edge — the same destinations, the theme control and **Sign out**, without their labels. Pages use the desktop's tables, and a table that is wider than its space folds columns away instead of scrolling sideways: on **Orders**, the order number tucks under the retailer's name, the shipped and received dates go under the status, and the tracking number moves into the order's expanded lines. Nothing is dropped; it moves.

<Frame caption="Home on a tablet held upright: the icon rail on the left, the bench two abreast.">
  <img className="block dark:hidden" src="https://mintcdn.com/plamotrack/YpFsa6OoQofygFHX/images/screenshots/tablet-home-light.png?fit=max&auto=format&n=YpFsa6OoQofygFHX&q=85&s=37f149896f05009d9018b36a222ccd78" alt="Home at a tablet's width, with a rail of icons down the left edge, two kits side by side on the bench, then the backlog, recently completed kits and the mail." width="1640" height="2360" data-path="images/screenshots/tablet-home-light.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/plamotrack/YpFsa6OoQofygFHX/images/screenshots/tablet-home.png?fit=max&auto=format&n=YpFsa6OoQofygFHX&q=85&s=12ea70dbdfc6da366909afa8250d6614" alt="Home at a tablet's width, with a rail of icons down the left edge, two kits side by side on the bench, then the backlog, recently completed kits and the mail." width="1640" height="2360" data-path="images/screenshots/tablet-home.png" />
</Frame>

<Frame caption="Orders on a tablet held upright: the icon rail, and a table folded to the width it has.">
  <img className="block dark:hidden" src="https://mintcdn.com/plamotrack/YpFsa6OoQofygFHX/images/screenshots/tablet-orders-light.png?fit=max&auto=format&n=YpFsa6OoQofygFHX&q=85&s=fb4d1473d1038c73c9c89fdd16835e27" alt="Orders at a tablet's width, with a rail of icons on the left and a table whose order numbers sit under the retailer names, one order expanded to show its two lines." width="1640" height="2360" data-path="images/screenshots/tablet-orders-light.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/plamotrack/YpFsa6OoQofygFHX/images/screenshots/tablet-orders.png?fit=max&auto=format&n=YpFsa6OoQofygFHX&q=85&s=1ea0bc169a2ab4eb916cbe9f7521726d" alt="Orders at a tablet's width, with a rail of icons on the left and a table whose order numbers sit under the retailer names, one order expanded to show its two lines." width="1640" height="2360" data-path="images/screenshots/tablet-orders.png" />
</Frame>

Buttons and controls are finger-sized on any touch screen, whatever its width. A tablet wide enough for the desktop layout — a 13-inch one on its side — gets the full sidebar with the larger controls. Dialogs are the desktop's centred panels, and **Data management** is complete, imports included.

## Add plamotrack to your home screen

Adding plamotrack to your home screen gives it an icon of its own and opens it in its own window, without the browser's address bar. You stay signed in: the home-screen app opens with the session your browser already had.

<Tabs>
  <Tab title="iPhone and iPad">
    <Steps>
      <Step title="Open your instance in Safari">
        Sign in, so you know the address works from this device.
      </Step>

      <Step title="Open the share menu">
        Tap the **Share** button, then **View More**, then **Add to Home Screen**. On an older iOS, **Add to Home Screen** is in the share menu's own list.
      </Step>

      <Step title="Add it">
        Keep the name or change it, then tap **Add**.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Android">
    <Steps>
      <Step title="Open your instance in Chrome">
        Sign in, so you know the address works from this device.
      </Step>

      <Step title="Open the menu">
        Tap the three-dot menu, scroll down, and tap **Install and create shortcut**.
      </Step>

      <Step title="Choose Install">
        Chrome offers two choices. **Install** adds plamotrack as an app: an icon on the home screen and in the app drawer, its own window, and an **Uninstall** button under the app's info like any other app. **Create shortcut** only adds an icon that opens the page in Chrome, address bar and all.
      </Step>
    </Steps>
  </Tab>
</Tabs>

The icon is a way in to your server, not a copy of your collection:

* **There is no offline mode.** Without a connection to your instance, plamotrack cannot load or save anything.
* **Nothing is stored on the device** but your sign-in and your theme choice.
* **Removing it removes nothing else.** Delete the icon, or uninstall the app on Android, and your collection is untouched on the server.

## Large text

plamotrack follows your browser's text-size setting. On a phone, rows wrap and long names break onto further lines rather than pushing anything off the screen; this is checked up to two and a half times the default size on a phone 320 px wide.
