Merge pull request #99 from RSE-Sheffield/ui/icons-consistent

UI/icons consistent
RSE-Sheffield · Feb 12, 2025 · 8e9a571 · 8e9a571
2 parents 9f73a8e + 6a4635e
commit 8e9a571
Show file tree

Hide file tree

Showing 15 changed files with 80 additions and 79 deletions.
diff --git a/assets/sort-survey-configurator/src/lib/components/input/InputComponent.svelte b/assets/sort-survey-configurator/src/lib/components/input/InputComponent.svelte
@@ -272,7 +272,6 @@
                 </div>
             {/if}
 
-
             <div class="form-check form-switch mb-3">
                 <label class="form-label">
                     Required

diff --git a/assets/sort-survey-configurator/src/lib/components/input/OptionsList.svelte b/assets/sort-survey-configurator/src/lib/components/input/OptionsList.svelte
@@ -27,5 +27,5 @@
 </div>
 {/each}
 <div>
-    <button class="btn btn-primary btn-sm" onclick={addOption}>Add option</button>
+    <button class="btn btn-primary btn-sm" onclick={addOption}><i class="bx bx-plus"></i> Add option</button>
 </div>
diff --git a/assets/sort-survey-configurator/src/lib/components/input/SectionComponent.svelte b/assets/sort-survey-configurator/src/lib/components/input/SectionComponent.svelte
@@ -167,10 +167,11 @@
         {/each}
 
         {#if editable}
+
             <div class="d-flex justify-content-between">
-                <button class="btn btn-primary" onclick={addField}>Add field</button>
+                <button class="btn btn-primary" onclick={addField}><i class="bx bx-plus"></i> Add field</button>
                 <div></div>
-                <button class="btn btn-danger" onclick={() => {onDeleteSectionRequest()}}>Delete section</button>
+                <button class="btn btn-danger" onclick={() => {onDeleteSectionRequest()}}><i class="bx bxs-trash"></i> Delete section</button>
             </div>
 
         {/if}

diff --git a/home/templates/components/search_bar.html b/home/templates/components/search_bar.html
@@ -1,15 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-<form method="get" action="{{ search_url }}" class="d-flex gap-2">
-    {% for key, value in current_params.items %}
-        {% if key != 'q' and key != 'page' %}
-            <input type="hidden" name="{{ key }}" value="{{ value }}">
+    <form method="get" action="{{ search_url }}" class="d-flex gap-2">
+        {% for key, value in current_params.items %}
+            {% if key != 'q' and key != 'page' %}
+                <input type="hidden" name="{{ key }}" value="{{ value }}">
+            {% endif %}
+        {% endfor %}
+        {{ search_form.q }}
+        <button type="submit" class="btn btn-primary"><div class="d-flex flex-row align-items-center"><i class="bx bxs-search"></i> Search</div></button>
+        {% if current_search %}
+            <a href="{{ search_url }}" class="btn btn-light border"><div class="d-flex flex-row align-items-center"><i class="bx bxs-x-circle"></i> Clear</div></a>
         {% endif %}
-    {% endfor %}
-    {{ search_form.q }}
-    <button type="submit" class="btn btn-primary">Search</button>
-    {% if current_search %}
-        <a href="{{ search_url }}" class="btn btn-outline-secondary">Clear</a>
-    {% endif %}
-</form>
+    </form>
+
 </html>
diff --git a/home/templates/home/profile.html b/home/templates/home/profile.html
@@ -34,7 +34,7 @@ <h1>Profile</h1>
 
                     <div class="text-center">
                         <button type="submit" class="btn btn-primary" style="background-color: #6933AD; border: none;">
-                            Update Profile
+                            <i class="bx bxs-user-check"></i> Update Profile
                         </button>
                         <!-- <a href="{% url 'home' %}" class="btn btn-primary" style="background-color: #6933AD; border: none; margin-left: 10px;">
                             Cancel

diff --git a/home/templates/organisation/organisation.html b/home/templates/organisation/organisation.html
@@ -26,7 +26,7 @@ <h2 class="text-2xl font-bold d-inline-block">Projects</h2>
       {% if can_create %}
         <a href="{% url 'project_create' organisation.id %}">
           <button type="button" class="btn btn-primary">
-            <i class="bx bxs-folder-plus align-middle"></i> Create project
+            <i class="bx bxs-folder-plus"></i> Create project
           </button>
         </a>
       {% endif %}

diff --git a/home/templates/projects/create.html b/home/templates/projects/create.html
@@ -26,7 +26,7 @@ <h1>Create Project</h1>
                 {% endfor %}
                 <div class="text-center">
                     <button type="submit" class="btn btn-primary" style="background-color: #6933AD; border: none;">
-                        Create Project
+                        <i class="bx bxs-folder-plus"></i> Create Project
                     </button>
                 </div>
             </form>

diff --git a/home/templates/projects/project.html b/home/templates/projects/project.html
@@ -30,7 +30,7 @@ <h1>{{ project.name }}</h1>
                     <div></div>
                     <div></div>
                     <div>
-                        <a href="{% url 'project_delete' project.pk %}" class="btn btn-danger">Delete project</a>
+                        <a href="{% url 'project_delete' project.pk %}" class="btn btn-danger"><i class="bx bxs-trash"></i> Delete project</a>
                     </div>
                 </div>
             </div>
@@ -42,9 +42,9 @@ <h1>{{ project.name }}</h1>
         <div class="w-100 d-flex justify-content-between align-items-center mt-3 mb-6">
             <h2 class="text-2xl font-bold d-inline-block">Surveys</h2>
             {% if can_create %}
-                <a href="{% url "survey_create" project.id %}">
+                <a href="{% url 'survey_create' project.id %}">
                     <button type="button" class="btn btn-primary">
-                        <i class="bx bx-chart align-middle"></i> Create survey
+                        <i class="bx bx-chart"></i> Create survey
                     </button>
                 </a>
             {% endif %}
@@ -60,7 +60,7 @@ <h3 class="card-title">{{ survey.name }}</h3>
                         <div class="mt-2 w-100 d-flex flex-wrap justify-content-end gap-2">
                             <a href="{% url 'survey' survey.id %}">
                                 <button type="button" class="btn btn-dark">
-                                    <i class="bx bxs-chart align-middle"></i> View
+                                    <i class="bx bxs-chart"></i> View
                                 </button>
                             </a>
                         </div>

diff --git a/static/css/base.css b/static/css/base.css
@@ -112,4 +112,4 @@ h1, h2, h3, h4, h5, h6 {
 
 .form-control {
     padding: 0.375rem 0.75rem;
-}
+}
diff --git a/static/templates/base.html b/static/templates/base.html
@@ -1,46 +1,46 @@
-{% load static %}
-{% load django_bootstrap5 %}
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>
-            {% block title %}SORT{% endblock %}
-        </title>
-        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
-              rel="stylesheet">
-        <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css"
-              rel="stylesheet">
-        <link href="{% static 'css/base.css' %}" rel="stylesheet">
-        <link href="{% static 'css/utilities.css' %}" rel="stylesheet">
-        {% block extra_css %}{% endblock %}
-    </head>
-    <body>
-        {% block navitems %}<!-- Content  here -->{% endblock %}
-        <main>
-            <div class="card-body">
-                {% if messages %}
-                    {% for message in messages %}
-                        {% if message.tags == 'success' %}
-                            <div class="text-center alert alert-success" role="alert">{{ message }}</div>
-                        {% endif %}
-                        {% if message.tags == 'error' %}
-                            <div class="text-center alert alert-danger" role="alert">{{ message }}</div>
-                        {% elif message.tags == 'warning' %}
-                            <div class="text-center alert alert-warning" role="alert">{{ message }}</div>
-                        {% elif message.tags == 'info' %}
-                            <div class="text-center alert alert-info" role="alert">{{ message }}</div>
-                        {% endif %}
-                    {% endfor %}
-                {% endif %}
-                {% block content %}<!-- Content  here -->{% endblock %}
-            </div>
-        </main>
-
-        {% include 'footer.html' %}
-
-        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    </body>
-</html>
+{% load static %}
+{% load django_bootstrap5 %}
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>
+            {% block title %}SORT{% endblock %}
+        </title>
+        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+              rel="stylesheet">
+        <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css"
+              rel="stylesheet">
+        <link href="{% static 'css/base.css' %}" rel="stylesheet">
+        <link href="{% static 'css/utilities.css' %}" rel="stylesheet">
+        {% block extra_css %}{% endblock %}
+    </head>
+    <body>
+        {% block navitems %}<!-- Content  here -->{% endblock %}
+        <main>
+            <div class="card-body">
+                {% if messages %}
+                    {% for message in messages %}
+                        {% if message.tags == 'success' %}
+                            <div class="text-center alert alert-success" role="alert">{{ message }}</div>
+                        {% endif %}
+                        {% if message.tags == 'error' %}
+                            <div class="text-center alert alert-danger" role="alert">{{ message }}</div>
+                        {% elif message.tags == 'warning' %}
+                            <div class="text-center alert alert-warning" role="alert">{{ message }}</div>
+                        {% elif message.tags == 'info' %}
+                            <div class="text-center alert alert-info" role="alert">{{ message }}</div>
+                        {% endif %}
+                    {% endfor %}
+                {% endif %}
+                {% block content %}<!-- Content  here -->{% endblock %}
+            </div>
+        </main>
+
+        {% include 'footer.html' %}
+
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    </body>
+</html>
diff --git a/static/templates/base_manager.html b/static/templates/base_manager.html
@@ -18,10 +18,10 @@
                 <div class="collapse navbar-collapse" id="navbarNav">
                     <ul class="navbar-nav ms-auto">
                         <li class="nav-item">
-                            <a class="nav-link {% if request.path == invite_url %}active{% endif %}" href="{{ home_url }}">Home</a>
+                            <a class="nav-link {% if request.path == invite_url %}active{% endif %}" href="{{ home_url }}"><i class="bx bxs-home"></i>Home</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link {% if '/profile' in request.path %}active{% endif %}" href="{% url 'profile' %}">Profile</a>
+                            <a class="nav-link {% if '/profile' in request.path %}active{% endif %}" href="{% url 'profile' %}"><i class="bx bxs-user"></i>Profile</a>
                         </li>
                         <li class="nav-item">
                             {% url 'organisation_create' as organisation_create_url %}
@@ -30,7 +30,7 @@
                                 {% if '/projects' in request.path %}active{% endif %}
                                 {% if '/survey' in request.path %}active{% endif %}
                                 {% if '/completion' in request.path %}active{% endif %}"
-                                href="{% url 'myorganisation' %}">My Organisation</a>
+                                href="{% url 'myorganisation' %}"><i class="bx bxs-buildings"></i>My Organisation</a>
                         </li>
                         {% if user.is_authenticated %}
                             <li class="nav-item">
@@ -39,7 +39,7 @@
                                       method="POST"
                                       style="display: inline">
                                     {% csrf_token %}
-                                    <button type="submit" class="nav-link btn btn-link">Logout</button>
+                                    <button type="submit" class="nav-link btn btn-link btn-primary"><i class="bx bxs-user-x"></i> Logout</button>
                                 </form>
                             </li>
                         {% endif %}

diff --git a/survey/templates/invitations/send_invitation.html b/survey/templates/invitations/send_invitation.html
@@ -27,7 +27,7 @@ <h1>Invitations</h1>
                 </div>
 
                 <div class="text-center">
-                    <button type="submit" class="btn btn-primary" style="background-color: #6933AD; border: none;">Send</button>
+                    <button type="submit" class="btn btn-primary" style="background-color: #6933AD; border: none;"><i class="bx bxs-send"></i> Send</button>
                 </div>
             </form>
         </div>

diff --git a/survey/templates/survey/create.html b/survey/templates/survey/create.html
@@ -26,7 +26,7 @@ <h1>Create Survey</h1>
                 {% endfor %}
                 <div class="text-center">
                     <button type="submit" class="btn btn-primary" style="background-color: #6933AD; border: none;">
-                        Create Survey
+                        <i class="bx bx-chart"></i> Create Survey
                     </button>
                 </div>
             </form>

diff --git a/survey/templates/survey/survey.html b/survey/templates/survey/survey.html
@@ -29,7 +29,7 @@ <h1>{{ survey.name }}</h1>
                     <div></div>
                     <div></div>
                     <div>
-                        <a href="{% url 'survey_delete' survey.pk %}" class="btn btn-danger">Delete survey</a>
+                        <a href="{% url 'survey_delete' survey.pk %}" class="btn btn-danger"><i class="bx bxs-trash"></i>Delete survey</a>
                     </div>
                 </div>
             </div>
@@ -48,7 +48,7 @@ <h2>1. Configure Your Survey</h2>
                 <div class="mb-3 mt-3">
                     <p>First, configure you survey here. You are able to add and customise demographic questions asked
                         in the survey.</p>
-                    <a href="{% url "survey_configure" survey.id %}" class="btn btn-primary">Configure the survey</a>
+                    <a href="{% url 'survey_configure' survey.id %}" class="btn btn-primary"><i class="bx bxs-cog"></i> Configure the survey</a>
                 </div>
             </div>
         </div>
@@ -135,7 +135,7 @@ <h2>2. Invite Your Participants</h2>
                     <form method="post" action="{% url 'suvey_create_invite' survey.id %}">
                         {% csrf_token %}
                         <input type="submit" name="generate_token" value="Generate invitation"
-                               class="btn btn-primary"/>
+                               class="btn btn-primary"></input>
                     </form>
                 {% endif %}
             </div>

diff --git a/survey/templates/survey/survey_configure.html b/survey/templates/survey/survey_configure.html
@@ -17,7 +17,7 @@
                     <i class="bx bxs-chart"></i> <a href="{% url 'survey' survey.id %}"> Survey: {{ survey.name }}</a>
                 </li>
                 <li class="breadcrumb-item active" aria-current="page">
-                    <i class="bx bxs-chart"></i> Configuration
+                    <i class="bx bxs-cog"></i> Configuration
                 </li>
             </ol>
         </nav>
-Original file line number
+Diff line change
@@ Expand Up / @@ -272,7 +272,6 @@ @@
                     </div>
                 {/if}
                 <div class="form-check form-switch mb-3">
                     <label class="form-label">
                         Required
@@ Expand Down @@