# Add a description to the scenes

**URL:** <https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500>\
**Category:** Demandes livrées\
**Tags:** feature-core, scene\
**Created:** [September 5, 2021, 2:46am UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500 "2021-09-05T02:46:13Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [September 5, 2021, 2:46am UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500/1 "2021-09-05T02:46:13Z")

</div>

Add a description to scenes

 ![Gladys04](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/8/8fcb3678d2648cb716ff1dee69c782dc13de960f.png)

See request here:

> [@Retours et demandes en vrac](https://community.gladysassistant.com/t/retours-et-demandes-en-vrac/6474/7):
>
> Bonjour, merci pour ces réponses. Dans l’idée : Soit on crée 2 scènes identiques en modifiant simplement le déclencheur. Soit on crée 1 scène avec 2 déclencheurs possibles. Et dans ce cas, il serait bien de savoir quel est le déclencheurs s’étant activé. Lorsque le déclencheur est un changement d’état, par défaut, sa valeur devrait être récupérée afin d’éviter de faire cette action à l’utilisateur. Non non, imaginons, que j’ai créé tout ma scène (donc plusieurs…

---

<div class="post-metadata">

**Author:** ![Lokkye](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/lokkye/32/5881_2.png) [@Lokkye](https://community.gladysassistant.com/u/Lokkye)\
**Post date:** [May 11, 2023, 2:49pm UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500/2 "2023-05-11T14:49:57Z")

</div>

I tinkered with it this afternoon. What do you think?

 ![Screenshot 2023-05-11 at 16.47.28](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/2/2605371dc10fbdefd8d15dc551b0798305dd13f4.png)

I haven’t yet figured out how to make this look nice in the editor. If anyone has any ideas I’m all ears 🙂

 ![Screenshot 2023-05-11 at 16.47.37](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/4/429dc931358b21bfcdaaaefe35372a9e508df1a2.png)

---

<div class="post-metadata">

**Author:** ![Tlse-vins](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/tlse-vins/32/6054_2.png) [@Tlse-vins](https://community.gladysassistant.com/u/Tlse-vins)\
**Post date:** [May 11, 2023, 3:44pm UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500/3 "2023-05-11T15:44:38Z")

</div>

I didn’t even remember that request, and besides, I had voted.  
I will add «&nbsp;Description&nbsp;» just above the input field.

---

<div class="post-metadata">

**Author:** ![Lokkye](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/lokkye/32/5881_2.png) [@Lokkye](https://community.gladysassistant.com/u/Lokkye)\
**Post date:** [May 11, 2023, 6:47pm UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500/4 "2023-05-11T18:47:36Z")

</div>

Like this ?

 ![Screenshot 2023-05-11 at 20.47.04](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/4/4bd81dfd449e89a7e9cad0a0b832997a712c82e6.png)

---

<div class="post-metadata">

**Author:** ![guim31](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/guim31/32/4840_2.png) [@guim31](https://community.gladysassistant.com/u/guim31)\
**Post date:** [May 11, 2023, 7:07pm UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500/5 "2023-05-11T19:07:27Z")

</div>

I really like it! The textarea may be a bit bulky, but I especially support the idea of adding a description!

---

<div class="post-metadata">

**Author:** ![Lokkye](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/lokkye/32/5881_2.png) [@Lokkye](https://community.gladysassistant.com/u/Lokkye)\
**Post date:** [May 16, 2023, 1:36pm UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500/6 "2023-05-16T13:36:52Z")

</div>

A nice little PR:

> <https://github.com/GladysAssistant/Gladys/pull/1778>
>
> \### Pull Request check-list
> 
> To ensure your Pull Request can be accepted as fa…st as possible, make sure to review and check all of these items:
> 
> \- \[x\] If your changes affects code, did your write the tests?
> \- \[x\] Are tests passing? (\`npm test\` on both front/server)
> \- \[x\] Is the linter passing? (\`npm run eslint\` on both front/server)
> \- \[x\] Did you run prettier? (\`npm run prettier\` on both front/server)
> \- \[x\] If you are adding a new features/services, did you run integration comparator? (\`npm run compare-translations\` on front)
> \- \[x\] Did you test this pull request in real life? With real devices? If this development is a big feature or a new service, we recommend that you provide a Docker image to \[the community\](https://community.gladysassistant.com/) for testing before merging.
> \- ~~\[\] If your changes modify the API (REST or Node.js), did you modify the API documentation? (Documentation is based on comments in code)~~
> \- ~~\[\] If you are adding a new features/services which needs explanation, did you modify the user documentation? See \[the GitHub repo\](https://github.com/GladysAssistant/v4-website) and the \[website\](https://gladysassistant.com).~~
> \- ~~\[\] Did you add fake requests data for the demo mode (\`front/src/config/demo.js\`) so that the demo website is working without a backend? (if needed) See \[https://demo.gladysassistant.com\](https://demo.gladysassistant.com).~~
> 
> NOTE: these things are not required to open a PR and can be done afterwards / while the PR is open.
> 
> \### Description of change
> 
> !\[Screenshot 2023-05-11 at 20 47 04\](https://github.com/GladysAssistant/Gladys/assets/11317212/89ab97ac-f9ed-420c-aa64-4933ee7e128f)
> !\[Screenshot 2023-05-11 at 16 47 28\](https://github.com/GladysAssistant/Gladys/assets/11317212/bda4b656-eab0-46b5-b430-11d70253c664)

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [May 17, 2023, 2:51am UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500/7 "2023-05-17T02:51:02Z")

</div>

@Lokkye cool! 🙂 don’t hesitate to tag me here when the PR is ready 🙂

For the design, it feels a bit «&nbsp;blocky&nbsp;» I agree 😁

Also watch the alignment of the scenes in the list view — it needs to stay aligned regardless of the description size (since it’s dynamic)

---

<div class="post-metadata">

**Author:** ![Lokkye](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/lokkye/32/5881_2.png) [@Lokkye](https://community.gladysassistant.com/u/Lokkye)\
**Post date:** [May 17, 2023, 6:13am UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500/8 "2023-05-17T06:13:38Z")

</div>

I made a small tweak to the list of scenes to avoid any size issues.

 ![Screenshot 2023-05-17 at 07.53.18](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/1/1e4b2cafa2e1fa5836a84565f3769b403d49b4e0.png)

@pierre-gilles : The PR should be ready 🙂

---

<div class="post-metadata">

**Author:** ![guim31](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/guim31/32/4840_2.png) [@guim31](https://community.gladysassistant.com/u/guim31)\
**Post date:** [May 17, 2023, 8:20am UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500/9 "2023-05-17T08:20:48Z")

</div>

I really like that thing @Lokkye 👍👍👍

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [May 17, 2023, 11:28am UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500/10 "2023-05-17T11:28:27Z")

</div>

> [@Lokkye](#):
>
> I made a small change to the list of scenes to avoid any sizing issues.

Cool! It would be nice if the footer were aligned too:

 ![Screenshot 2023-05-17 at 07.53.18](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/f/fdf7e9993064ba202f65b93d37a1553692eb2c02.png)

When there’s dynamically sized content in a card, the best practice is to align elements of the same type with each other 🙂

 ![Screenshot 2023-05-17 at 17.20.57](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/d/d41ae96072c67dbec9aa71061371385076cf4735.png)

A nice UX resource that talks about this topic: [The ultimate UX and UI guide to card design for the web - Point Jupiter](https://pointjupiter.com/ultimate-ux-ui-guide-card-design-web-sites-apps/)

Otherwise, for editing the description, how does it end up looking?

---

<div class="post-metadata">

**Author:** ![Lokkye](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/lokkye/32/5881_2.png) [@Lokkye](https://community.gladysassistant.com/u/Lokkye)\
**Post date:** [May 17, 2023, 12:57pm UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500/11 "2023-05-17T12:57:24Z")

</div>

I aligned the footer, it does look nicer 🙂

 ![Screenshot 2023-05-17 at 14.51.14](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/a/ab2a73704293af82eb15181636491d19fd91d018.png)

For editing, I don’t see how to do it any other way than this:

 ![Screenshot 2023-05-11 at 20.47.04](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/4/4bd81dfd449e89a7e9cad0a0b832997a712c82e6.png)

@pierre-gilles: If you have any idea, I’m open to suggestions

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [May 18, 2023, 3:40am UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500/12 "2023-05-18T03:40:34Z")

</div>

> [@Lokkye](#):
>
> I aligned the footer, it’s true that it’s prettier 🙂

Cool, it’s much better like that 🙂

> [@Lokkye](#):
>
> For editing, I don’t see how to do it other than like this:

The description doesn’t need to be editable all the time; you could display it the same way as in the list view (in gray text), placed under the title

For the «&nbsp;edit&nbsp;» mode, either you use the same pattern as the title (clickable to edit), or we could display a «&nbsp;pen&nbsp;» icon that allows switching to edit mode for the title and the description, and that turns the description display into input fields

I’m not convinced a textarea is necessary — it pushes the user to write a huge description when we could instead encourage writing a short description

Also, we should maybe set a character limit so it doesn’t get out of hand

Also watch the page’s responsive behavior, test thoroughly on mobile too 🙂

---

<div class="post-metadata">

**Author:** ![Hizo](https://gladys-assistant-community.b-cdn.net/letter_avatar_proxy/v4/letter/h/51bf81/32.png) [@Hizo](https://community.gladysassistant.com/u/Hizo)\
**Post date:** [May 19, 2023, 11:17am UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500/13 "2023-05-19T11:17:15Z")

</div>

Thanks Lokkye, I can’t wait 🙂

---

<div class="post-metadata">

**Author:** ![Kevin](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/kevin/32/6521_2.png) [@Kevin](https://community.gladysassistant.com/u/Kevin)\
**Post date:** [May 20, 2023, 5:12pm UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500/14 "2023-05-20T17:12:44Z")

</div>

While you’re working on this dev, is it possible to add the ability to edit the scene title too? 🙂 Unless there’s a particular reason we can’t rename a scene?

---

<div class="post-metadata">

**Author:** ![Tlse-vins](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/tlse-vins/32/6054_2.png) [@Tlse-vins](https://community.gladysassistant.com/u/Tlse-vins)\
**Post date:** [May 20, 2023, 6:08pm UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500/15 "2023-05-20T18:08:00Z")

</div>

You can already do it. You just need to click on the title of your scene after having done " edit "

---

<div class="post-metadata">

**Author:** ![Kevin](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/kevin/32/6521_2.png) [@Kevin](https://community.gladysassistant.com/u/Kevin)\
**Post date:** [May 20, 2023, 7:14pm UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500/16 "2023-05-20T19:14:20Z")

</div>

Oh sh\*\*! How embarrassing! I had never seen this tip. I was duplicating and deleting the old one 🙈

---

<div class="post-metadata">

**Author:** ![Lokkye](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/lokkye/32/5881_2.png) [@Lokkye](https://community.gladysassistant.com/u/Lokkye)\
**Post date:** [May 22, 2023, 9:38am UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500/17 "2023-05-22T09:38:45Z")

</div>

I made the change to the description editing.

 ![Screenshot 2023-05-22 at 11.31.29](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/1/1bfecfe474579063ef39ef0b713d948cb33ccae9.png)  
 ![Screenshot 2023-05-22 at 11.31.35](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/d/df1fd2910bf4a9fb6f103e125ba2db8eae012905.png)

 ![Screenshot 2023-05-22 at 11.31.50](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/6/6345254206f78af552d5ddd06872eb0baf788318.png)  
 ![Screenshot 2023-05-22 at 11.31.54](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/c/cce8c276d3aedd95e90203327c6c61034fcebc5b.png)

What do you think?

@pierre-gilles: I tested with the device simulation on Chrome for the mobile version. How do you do your tests? And I added a 100-character limit for now, we’ll see if that’s enough.

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [May 22, 2023, 10:42am UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500/18 "2023-05-22T10:42:20Z")

</div>

> [@Lokkye](#):
>
> What do you think?

It’s much better 🙂

The spacing is a bit odd though, it creates a large gap between the title and the description, don’t you think?

For the text, instead of using a custom class you can use Bootstrap’s «&nbsp;text-muted&nbsp;» class to stay consistent with the rest of Gladys.

It’s good you bring that up, I was working on improving the scenes’ UX to address this request =\> [Pouvoir déplacer une action vers le haut ou le bas dans les scènes - #3 par lmilcent](https://community.gladysassistant.com/t/pouvoir-deplacer-une-action-vers-le-haut-ou-le-bas-dans-les-scenes/7325/3)

I imagine this for the description:

 ![Screenshot 2023-05-22 at 17.32.01](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/2/24e17b5759e6200bc015a87ebefbcedf8bb465e2.png)

For edit mode, we might need to add a hint so the user understands it’s editable (I admit that the current solution for the title wasn’t great)

For responsiveness, I was working a bit on improving the responsiveness of this page, which isn’t great:

 ![Screenshot 2023-05-22 at 17.39.29](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/e/e2a8d38e216602d8b3e641fa6f41941e1594d4ac.png)

What I propose is, if your PR is functionally good, I’ll integrate it into the design I’m working on so the work isn’t done twice 🙂

What do you think?

> [@Lokkye](#):
>
> @pierre-gilles: I tested using Chrome’s device simulation for the mobile version. How do you do your tests?

Same, on Chrome!

For «&nbsp;sensitive&nbsp;» things like drag and drop, I do real tests on my phone (on the same network as my Mac, I access my dev environment)

Edit: My scene UX improvements: [Pouvoir déplacer une action vers le haut ou le bas dans les scènes - #23 par pierre-gilles](https://community.gladysassistant.com/t/pouvoir-deplacer-une-action-vers-le-haut-ou-le-bas-dans-les-scenes/7325/23?u=pierre-gilles)

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [May 22, 2023, 11:11am UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500/19 "2023-05-22T11:11:49Z")

</div>

For editing the title, 2 options for me

The «&nbsp;pen&nbsp;» to indicate that it’s editable on click:

 ![Screenshot 2023-05-22 at 18.07.29](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/1/14daa7aaa401026123744a6e3880384141421f0a.png)

Alternatively, a new button:

 ![Screenshot 2023-05-22 at 18.10.36](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/3/38336e467a3435fa6ca8518276697857f6def443.png)

---

<div class="post-metadata">

**Author:** ![Tlse-vins](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/tlse-vins/32/6054_2.png) [@Tlse-vins](https://community.gladysassistant.com/u/Tlse-vins)\
**Post date:** [May 22, 2023, 11:22am UTC](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500/20 "2023-05-22T11:22:32Z")

</div>

The «&nbsp;plus&nbsp;» button would make it lighter, in my opinion.  
And keep the pen only to edit the description.

[Next page](https://community.gladysassistant.com/t/ajouter-une-description-aux-scenes/6500.md?page=2)
