Instructions and feedback tabs - add a space above the RECORD and UPLOAD A FILE

[corinnewo]

THe Record and Upload a file are directly below the written instructions/feedback field. THis implies that they belong to that field. Please add a space so that they look like they belong to the field below.

[corinnewo]

The radio buttons must be closer to the audio field, with a space above the radio buttons, so that they obviously belong to the audio field below.

[johnnynotsolucky]

@RickyLB there are two components to update here: The Instructions editor, and the audio-input element.

For the instructions editor, we want the spacing between the textarea and the audio-input to be increased. Currently there is no spacing, because it is contained an unstyled div.

To add a gap between the two elements, we can use either flexbox or CSS grid. A lot of the CSS uses the grid layout so that's probably the better option, although both will have the same results here.

For this, we can set the styles directly on the div in rust. See an example of how its being done here. We're only interested in rows, so the columns property can be ignored in this case.

To add spacing between elements have a look at the gap and row-gap properties.

The audio-input element also uses CSS grid to layout the elements.

I think the gap between elements for both the instructions editor and the audio-input can probably be 16px.

To test that your changes are rendering correctly, you can run any module edit crate which uses the instructions component. The ones that do are all the card game activities, cover, poster, answer this (called find-answer in the codebase), drag-drop, and probably a few more.

cargo make local-main module/flashcards/edit

And in your browser: http://localhost:4104/module/flashcards/edit/jig/<jig id>/<module id>

[RickyLB]

@johnnynotsolucky @corinnewo A gap has been applied to both instruction tab and feedback tabs for all assets in my PR. Does the spacing look fine?

[corinnewo]

Looking better, thanks Ricky. I would like more of a space above, and less below, so that it is clear that the radio buttons belong to the Record section below. Something like this:

[image: image.png]

On Tue, Nov 29, 2022 at 2:12 AM Ricky Saechao @.***> wrote:

@johnnynotsolucky https://github.com/johnnynotsolucky @corinnewo https://github.com/corinnewo A gap has been applied to both instruction tab and feedback tabs for all assets in my PR https://github.com/ji-devs/ji-cloud/pull/3392. Does the spacing look fine?

[image: Screenshot 2022-11-28 at 4 02 41 PM] https://user-images.githubusercontent.com/76449893/204406344-7118147e-66a5-4747-9c9a-0156addd354e.png

[image: Screenshot 2022-11-28 at 4 02 49 PM] https://user-images.githubusercontent.com/76449893/204406613-75989e03-e6f3-4e0f-8c7d-c74bc0aba26a.png

— Reply to this email directly, view it on GitHub https://github.com/ji-devs/ji-cloud/issues/3113#issuecomment-1329908033, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD4JEOIGNY7IRHPOHCJVPKLWKVC5VANCNFSM6AAAAAAQAF62EM . You are receiving this because you were mentioned.Message ID: @.***>

--

•••

Corinne Ossendryver CPO

mobile +27 (0)79 886 5326 web www.jewishinteractive.org

skype jewish.interactive fax 086 273 0351 (SA only) twitter @jewishinteract facebook www.facebook.com/JewishInteractive

[corinnewo]

@RickyLB I see the fix in sandbox - looks good, thanks! I'm closing this ticket.