diff --git a/apps/docs/docs/management/api/index.mdx b/apps/docs/docs/management/api/index.mdx index 3fec73bb1..2c5bd42e2 100644 --- a/apps/docs/docs/management/api/index.mdx +++ b/apps/docs/docs/management/api/index.mdx @@ -80,6 +80,6 @@ The OpenAPI and MCP APIs include board management endpoints for common automatio - Change board visibility - Update board visual and behavior settings - Set desktop and mobile home boards for the current user -- Configure global board defaults such as public home boards, automatic mobile layout mode, and status behavior +- Configure global board defaults such as public home boards and status behavior Use the interactive API reference to inspect the exact request body for each endpoint under the `boards` and `settings` tags. diff --git a/apps/docs/docs/management/boards/index.mdx b/apps/docs/docs/management/boards/index.mdx index d03fa878b..f1eb3c572 100644 --- a/apps/docs/docs/management/boards/index.mdx +++ b/apps/docs/docs/management/boards/index.mdx @@ -9,9 +9,11 @@ tags: - Layout --- -import iconColorImage from "./img/icon-color.png"; -import itemRadiusImage from "./img/item-radius.png"; -import layoutLargeImage from "./img/layout-large.png"; +import iconColorImage from './img/icon-color.png' +import itemRadiusImage from './img/item-radius.png' +import layoutLargeImage from './img/layout-large.png' +import layoutMediumImage from './img/layout-medium.png' +import layoutSmallImage from './img/layout-small.png' Each dashboard is called a "board". You can create as many boards as you want. @@ -22,29 +24,24 @@ Other boards can be viewed by direct links (e.g. my-homarr.com/board/smart-home) Names of boards must be unique because this will be used in the URL to load the desired board. ## Create a new board - When creating a board, the availability of the board name will be checked for you. ![](./img/create-board-modal.png) ### Name - The name must not include any special characters and must be at least one character long. Underscores and hyphen-minus are allowed. ### Column count - Homarr has a complex drag and drop system that can be used from the browser. The column count defines how many horizontal columns are available to drag and drop elements to. ### Public - This will enable public access for everyone - regardless of whether they are logged in or not. This can be really useful if you want to have public boards in your company or for family and fiends. Modifications for public boards must be allowed explicitly using user groups and their permissions. ## Board settings - You navigate to the board settings by clicking on these three dots: ![](./img/navigate-to-settings.png) @@ -54,9 +51,7 @@ Alternatively, you can also navigate from the board page itself using the cog ic ![](./img/navigate-to-settings-2.png) ### General - #### Page title - This is the title that will be visible at the top left in the navigation bar: ![](./img/page-title.png) @@ -64,7 +59,6 @@ This is the title that will be visible at the top left in the navigation bar: This field is optional and Homarr will fall back to "Homarr" if nothing is set. #### Meta title - This is the secondary title of the page that is not directly visible in the page itself. Browser will use it to set the title of tabs: @@ -73,89 +67,78 @@ Browser will use it to set the title of tabs: Homarr will fall back to the board name and a suffix if nothing is set. #### Logo image URL - This is the URL that is used for the image at the top left. Homarr will fall back to the Homarr logo if nothing is set. #### Favicon image URL - This is the URL that is used for the favicon in the tab title. Homarr will fall back to the Homarr logo if nothing is set. ### Layout -The available controls depend on the server-wide **Use automatic mobile layout** setting under `Management` > `Settings` > `Boards`. +In this section you can configure the different responsive layouts. Depending on your screens width the layout will change. -#### Automatic mobile layout +![](./img/layout-settings.png) -When automatic mode is enabled, this section configures the desktop column count. Items and sections can be moved and resized on desktop while the board is in edit mode. +On each element the position and size of items can be changed seperately. +When adding a new layout the position and sizes will automatically be generated depending on the column count. +When adding a new item / dynamic section that will always be 1x1 on each layout and placed on the first available position. -Automatic mode is enabled by default on fresh Homarr installations. It is a server-wide setting, so creating another account on an existing installation does not change the saved choice. +#### Name -Phones and small tablets display the same widgets in a generated, read-only two-column grid. Widget content and controls are unchanged. Items follow desktop visual order and retain their desktop footprint, clamped to two columns wide and three rows high. +The name of the layout can be choosen freely. It is only used for the management and will not be visible on the board. -Categories and dynamic sections are flattened: their items participate directly in the generated grid instead of rendering nested layout containers. To rearrange, add, remove, or resize items, open the board on a larger screen. +#### Column count -In desktop edit mode, select the floating **Mobile preview** button to expand a lightweight map of the generated layout. The map updates with unsaved board changes and can be collapsed back to the button without leaving edit mode. +Amount of columns for this layout. Defines how many items can be placed in a row. When changed it will automatically adjust the position and size of the items. - +#### Breakpoint -#### Saved responsive layouts +Minimum width of the screen where the layout will be used. +Once the minmum of the next layout is reached the layout will change. -When automatic mode is disabled, boards use their saved responsive layouts and breakpoint selection. These layouts can still be edited on mobile. +#### Preview -Switching automatic mode on does not delete saved responsive layouts. They remain available if the server is switched back. + + + ### Background - #### Background image URL - Homarr can display a background image behind apps and widgets. This URL can be used to define what image should be shown. #### Background image attachment - This defines whether the background should move when the user scrolls. #### Background image size - This defines whether the background should cover the entire page (and possibly be cropped) or never be cropped but may not cover the entire page. #### Background image repeat - This defines whether the background should be repeated if it cannot cover the entire page. This option can be useful if you have patterns that can be repeated easily (e.g. patterns): ![](./img/background-repeat.png) ### Appearance - #### Primary color - Color that can be chosen freely to give accents to active elements. - #### Secondary color - Color that can be chosen freely to give accents. - #### Opacity - Opacity of the colors. - #### Icon color - Change the color of your bookmark / app icons. - + #### Item radius - Change the radius of your items / categories. - + + ### Custom CSS - This is the field where you can enter custom CSS. The styling will only be applied on the respective board page. @@ -164,16 +147,14 @@ The styling will only be applied on the respective board page. ### Behaviour #### Disable app status - This will disable the status check for apps. ### Access control - With the access control, you can permit a single user or a group to your board. The users and groups can have one of these three levels of access: | **Permission Level** | View board | Edit mode | Settings | Danger zone (eg. delete) | -| -------------------- | ---------- | --------- | -------- | ------------------------ | +|----------------------|------------|-----------|----------|--------------------------| | View board | X | | | | | Modify board | X | X | X | | | Full access | X | X | X | X | @@ -192,23 +173,18 @@ After editing permissions, the save button below the table must be pressed. Otherwise, all changes will be discarded. ### Danger zone - #### Rename - Renaming a board will break all existing links to it permanently with no redirect. #### Board visibility - By default, boards will be private. This means only authenticated users that are authorized have access. Making a board public will expose it to everyone - including unauthenticated users. #### Delete - This will permanently delete the board. This action is irreversible and cannot be undone. ## Delete boards - The deletion of boards is permanent and cannot be undone. There are two ways to delete a board: @@ -220,7 +196,7 @@ Both actions will execute the same deletion process. ## Duplicate boards :::note -Duplicating a board will not copy the users and groups that have access to the board +Duplicating a board will not copy the users and groups that have access to the board nor the integrations the user does not have access to. ::: @@ -230,51 +206,47 @@ You can duplicate a board by clicking on the three dots in the list of boards an ![](./img/duplicate-board-modal.png) ## Setting boards as your home board - The home board is the dashboard, that will be shown at the root path of Homarr or if no board name was passed in the URL. All the following paths will lead to the home board: - -- `my-homarr.com` -- `my-homarr.com/boards` +- ``my-homarr.com`` +- ``my-homarr.com/boards`` Your home board will have a special small badge at the top right in the list of boards: ![](./img/home-board-flag.png) ### For yourself - To set the home board yourself, the easiest option is to set it directly in the list of boards: ![](./img/set-as-home-board-menu.png) Alternatively, you can also define it via your user profile: - 1. Click on your user profile at the top right -2. Click on `Your preferences` -3. Change the home board in the `home board` dropdown and click on `Save`. +2. Click on ``Your preferences`` +3. Change the home board in the ``home board`` dropdown and click on ``Save``. ### For other users -1. Navigate to the users: `Management` > `Users` > `Manage` +1. Navigate to the users: ``Management`` > ``Users`` > ``Manage`` 2. Click on the username of the user that you want to adjust -3. Select the desired home board via the dropdown and click on `Save` \ - ![](./img/set-home-board-other-user.png) +3. Select the desired home board via the dropdown and click on ``Save`` \ +![](./img/set-home-board-other-user.png) ### For user groups -1. Navigate to the user groups: `Management` > `Users` > `Groups` > `Manage` -2. Go to tab `Settings` -3. Select the desired home board via the dropdown and click on `Save` \ - ![](./img/set-home-board-user-group.png) +1. Navigate to the user groups: ``Management`` > ``Users`` > ``Groups`` > ``Manage`` +2. Go to tab ``Settings`` +3. Select the desired home board via the dropdown and click on ``Save`` \ +![](./img/set-home-board-user-group.png) ### For whole server You can also set a global home board that will be used for all users that have not set a home board themselves. It will also be used for anonymous users. -1. Navigate to the settings: `Management` > `Settings` > `Boards` -2. Select the desired home board via the dropdown and click on `Save` \ - ![](./img/set-home-board-global.png) +1. Navigate to the settings: ``Management`` > ``Settings`` > ``Boards`` +2. Select the desired home board via the dropdown and click on ``Save`` \ +![](./img/set-home-board-global.png) :::note For the global home board you can only select boards that are public. @@ -283,4 +255,4 @@ For the global home board you can only select boards that are public. ### Mobile home board Same as the home board, you can also set a mobile home board. -It will be used for devices that are detected as mobile devices. (Using User-Agent header) +It will be used for devices that are detected as mobile devices. (Using User-Agent header) \ No newline at end of file diff --git a/apps/docs/docs/management/settings/index.mdx b/apps/docs/docs/management/settings/index.mdx index 2f82d395f..016d56d10 100644 --- a/apps/docs/docs/management/settings/index.mdx +++ b/apps/docs/docs/management/settings/index.mdx @@ -110,14 +110,6 @@ Homarr shows this board on mobile devices instead of the global home board. Homarr detects mobile devices with the User-Agent header. The board must be public. -### Automatic mobile layout - -**Use automatic mobile layout** renders every board as a read-only two-column layout on phones and small tablets. Fresh Homarr installations enable this setting by default. Creating another account on an existing installation does not change it because this is a server-wide setting. - -When upgrading, Homarr enables automatic mode only if every board still has its single canonical base layout. Installations with saved responsive layouts remain in legacy mode, and an explicit saved choice is never overwritten. Turning automatic mode off restores the saved responsive layouts and mobile editing. - -While editing a board on desktop, use the floating **Mobile preview** control to inspect the automatic item order and sizing without loading every widget a second time. - ### App status #### Enable status by default diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx index a4f731c05..1b4308d38 100644 --- a/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx +++ b/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx @@ -4,17 +4,13 @@ import { Box, Stack } from "@mantine/core"; import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context"; -import { MobileBoard } from "~/components/board/mobile/mobile-board"; -import { MobileBoardPreview } from "~/components/board/mobile/mobile-preview"; import { BoardCategorySection } from "~/components/board/sections/category-section"; import { BoardEmptySection } from "~/components/board/sections/empty-section"; -import { useIsMobileBoard } from "~/components/board/use-mobile-board"; import { BoardBackgroundVideo } from "~/components/layout/background"; export const ClientBoard = () => { const board = useRequiredBoard(); const currentLayoutId = useCurrentLayout(); - const isMobile = useIsMobileBoard(); const fullWidthSortedSections = board.sections .filter((section) => section.kind === "empty" || section.kind === "category") @@ -23,20 +19,15 @@ export const ClientBoard = () => { return ( - {isMobile ? ( - - ) : ( - - {fullWidthSortedSections.map((section) => - section.kind === "empty" ? ( - - ) : ( - - ), - )} - - )} - + + {fullWidthSortedSections.map((section) => + section.kind === "empty" ? ( + + ) : ( + + ), + )} + ); }; diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx index 72df6ef45..6036a4905 100644 --- a/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx +++ b/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx @@ -19,7 +19,6 @@ import { useI18n, useScopedI18n } from "@homarr/translation/client"; import { Link } from "@homarr/ui"; import { useBoardPermissions } from "~/components/board/permissions/client"; -import { useIsMobileBoard } from "~/components/board/use-mobile-board"; import { HeaderButton } from "~/components/layout/header/button"; import { TourTarget } from "~/components/layout/header/tour-target"; @@ -37,7 +36,6 @@ export const BoardContentHeaderActions = ({ demoReadOnly }: { demoReadOnly: bool const [isEditMode] = useEditMode(); const board = useRequiredBoard(); const { hasChangeAccess } = useBoardPermissions(board); - const isMobile = useIsMobileBoard(); if (!hasChangeAccess) { return ; @@ -45,9 +43,9 @@ export const BoardContentHeaderActions = ({ demoReadOnly }: { demoReadOnly: bool return ( <> - {isEditMode && !isMobile && } + {isEditMode && } -