Make the preview header look nicer

[christianp]

When you test run a question or exam, it's shown in a page with a banner across the top, showing links to edit, download or share the item. At the moment, it doesn't have much styling:

I'd like it to look a little bit nicer. The page doesn't load the bootstrap styles used by the rest of the site; maybe it should.

• It should look OK in a small portrait screen, and not take up too much space.
• I'm not very happy with the "Share" button at the moment - it pops up a <code> tag showing the URL, which it would ideally copy to the clipboard.
• The header starts with "PREVIEW of ..." - is that necessary?

[sarthak0699]

Hello, I would like to take up this task. Could you also give some pointers on how exactly you want the header to look like, as OK is a bit ambiguous .

[christianp]

@sarthak0699 thanks for offering to help. I don't really have anything in mind, I just think it's not very attractive at the moment!

[Maheshwaran17]

@christianp I am working on this. i will share the image of preview banner once completed.

[Maheshwaran17]

Hi @christianp , Can you pls let me know if the below changes looks fine, If yes, i will then create a pull request. Please let me know if incase of any suggestions.

1. By clicking the Share - The URL will be copied to Clipboard.
2. Reduced the size to look small

[christianp]

@Maheshwaran17 that looks good, thanks!

How small is the text? It shouldn't be any smaller than 16px, for accessibility. I think just reducing the padding would be enough.

What do you use to copy the URL to the clipboard? I think the URL could also still be displayed, rather than having the text change back after 1 second.

I like how you show the licence, and that the links on the right aren't underlined.

I don't think "Q:" before the question name is particularly helpful.

[Maheshwaran17]

Hi @christianp , Thank you for the reply.

I have made the below changes and attached the images below for your reference.

1. Updated the text to 16px
2. For copying the URL, i used navigator.clipboard.writeText(Value to be copied);
3. Removed "Q:" before the question name.
4. The links on the right are now underlined.
5. Added a close option - If you do not want this, i can remove it and submit.

Please let me know if you are happy with this look or let me know if in case of any corrections. I will submit the pull request based on your comment. Thanks in advance!

[christianp]

That looks better, thanks. It's still not great for accessibility for the URL to disappear automatically. Apart from that, it all looks good!