Skip to content

Commit

Permalink
Update image instructions for section view (home-assistant#34986)
Browse files Browse the repository at this point in the history
  • Loading branch information
piitaya authored Sep 30, 2024
1 parent bae2feb commit ea47493
Show file tree
Hide file tree
Showing 5 changed files with 12 additions and 12 deletions.
24 changes: 12 additions & 12 deletions source/_dashboards/sections.markdown
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ The sections view lets you organize your cards in sections on a grid.
You can group cards without using horizontal or vertical stack cards.

<p class='img'>
<img src="/images/blog/2024-03-dashboard-chapter-1/sections-example-dashboard.png" alt="A fully populated dashboard in Sections view layout"/>
<img src="/images/dashboards/section_view.png" alt="A fully populated dashboard in Sections view layout"/>
A fully populated dashboard in Sections view layout
</p>

Expand All @@ -49,20 +49,20 @@ Once you have created a sections view, you can populate it with sections and car
1. To add a card, select the **Add card** button.
- Follow the [steps on adding cards](/dashboards/cards/#adding-cards-to-your-dashboard).

![Add Section button](/images/dashboards/sections_view_add-card-or-section.png)
![Add Section button](/images/dashboards/sections_view_add-card-or-section.png)

2. To add a new section, select the **Create section** button.
3. A [heading card](/dashboards/heading) will be automatically added to the top of the section.
- To edit it, select the card.
- If you don't want a heading title at the top of the section, delete this card.
- If you don't want a heading title at the top of the section, delete this card.
- The title can be added again later, like any other card.
4. If you want this section to be visible only to specific users or under a certain condition, you can define those conditions:
- On the **Visibility** tab, select **Add condition**.
- Select the type of condition, and enter the parameters.
- If you define multiple conditions, the section is only shown when all conditions are met.
- If you did not define any conditions, the section is always shown, to all users.

![Define visibility](/images/dashboards/section-visibility.png)
![Define visibility](/images/dashboards/section-visibility.png)

## Deleting a section

Expand All @@ -77,17 +77,17 @@ In the sections view, you can rearrange sections and cards by dragging them to a
1. To edit your dashboard, in the top right corner, select the edit {% icon "mdi:edit" %} button.
2. To rearrange sections, hold the move {% icon "mdi:cursor-move" %} button and move the card.

<p class='img'>
<img src="/images/blog/2024-03-dashboard-chapter-1/drag-and-drop-sections.gif" alt="Rearranging sections by dragging"/>
Rearranging sections by dragging
</p>
<p class='img'>
<img src="/images/dashboards/section_view_rearrange_sections.gif" alt="Rearranging sections by dragging"/>
Rearranging sections by dragging
</p>

3. To rearrange cards, tap and hold the card and move it to your desired location.

<p class='img'>
<img src="/images/blog/2024-03-dashboard-chapter-1/drag-and-drop-cards.gif" alt="Rearranging cards by dragging"/>
Rearranging cards by dragging
</p>
<p class='img'>
<img src="/images/dashboards/section_view_rearrange_cards.gif" alt="Rearranging cards by dragging"/>
Rearranging cards by dragging
</p>

## Show or hide section conditionally

Expand Down
Binary file added source/images/dashboards/section_view.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified source/images/dashboards/sections_view_add-card-or-section.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit ea47493

Please sign in to comment.