UI/icons consistent

[rosannamilner]

Closes #76

Added lots of icons! Let me know what you think

• finished adding to myorganisation page and newly added to navbar
• added button look to logout on navbar

Notes

• still working out how to add the Search and Clear icon correctly
  • the change in search_bar.html is indentation and comments for the search and clear icons
• I'm not sure how to add icons to the survey (svelte) buttons but I can look into this more deeply if wanted

[f-allian]

@rosannamilner Thanks Rosanna. I'm a big fan of the icons, but I've requested a review from @twinkarma too to get his opinion.

Also, could you please merge the latest dev into this branch / resolve the conflicts before merging into dev?

[twinkarma]

Looks really good, thanks!

[rosannamilner]

Added logout icon too

[rosannamilner]

Worked out how to add icons to search bar

[twinkarma]

@rosannamilner are you happy for this to be merged?

[rosannamilner]

@rosannamilner are you happy for this to be merged?

Yes, thanks Twin.

However, the buttons inside the survey (svelte files) haven't had logos added to them as I'm still working that out, not being familiar to svelte. In base.html they're added like this below, how would I add boxicons package to svelte?

        <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css" rel="stylesheet">

I can see in assets/sort-survey-configurator/src/lib/components/input/SectionComponent.svelte it has imports as javascript and it's this button I would like to change L167

        {#if editable}
            <button class="btn btn-primary" onclick={addField}><i class="bx bxs-plus" alt=""></i> Add field</button>
        {/if}

[twinkarma]

Boxicon package has already been included both on the main site (in base.html) or in the test harness (in /assets/sort-survey-configurator/index.html).

You might not be seeing an update when viewing the site itself as when you make a change in the sort-survey-configurator project you need to go in to the folder /assets/sort-survey-configurator and run npm run build, this builds the javascript files into the the /static/js/sort-ui folder which is then picked up by the django site (see the bottom of survey_configure.html template).

Sorry it's a bit convoluted at the moment, I'll be looking into how we can streamline the build process (or at least document it better) soon!

[rosannamilner]

Boxicon package has already been included both on the main site (in base.html) or in the test harness (in /assets/sort-survey-configurator/index.html).

You might not be seeing an update when viewing the site itself as when you make a change in the sort-survey-configurator project you need to go in to the folder /assets/sort-survey-configurator and run npm run build, this builds the javascript files into the the /static/js/sort-ui folder which is then picked up by the django site (see the bottom of survey_configure.html template).

Sorry it's a bit convoluted at the moment, I'll be looking into how we can streamline the build process (or at least document it better) soon!

Ah ok I see great, thanks! I'll aim to add them later and let you know when this PR is fully ready

[rosannamilner]

I have run out of time before the feedback session tomorrow to do much more but the internal survey buttons have been given icons now:

• anything inside an input form I will need to look into further
  • missing qr_code button icons and configure survey submit button

So this PR is ready @twinkarma for now if you're happy with these few missing icons!

[twinkarma]

It's looking really good, I think we'll be ok missing a few icons. Thanks so much @rosannamilner!