feat: replaces feather icons with material-symbols

- removes logic for rendering feather icons - adds link to material symbol stylesheet to base.html - replaces all feather icons with material symbols
acdh-oeaw · Sep 21, 2023 · 44a55a4 · 44a55a4
1 parent 6e4df12
commit 44a55a4
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 127 deletions.
diff --git a/apis_core/apis_entities/templates/apis_entities/detail_views/detail_generic.html b/apis_core/apis_entities/templates/apis_entities/detail_views/detail_generic.html
@@ -29,18 +29,7 @@
             {% if object.get_prev_url %}
               <h2>
                 <a href="{{ object.get_prev_url }}" style="float:right">
-                  <svg xmlns="http://www.w3.org/2000/svg"
-                       width="24"
-                       height="24"
-                       viewBox="0 0 24 24"
-                       fill="none"
-                       stroke="currentColor"
-                       stroke-width="2"
-                       stroke-linecap="round"
-                       stroke-linejoin="round"
-                       class="feather feather-chevron-left">
-                    <polyline points="15 18 9 12 15 6" />
-                  </svg>
+                  <span class="material-symbols-outlined">chevron_left</span>
                 </a>
               </h2>
             {% endif %}
@@ -64,57 +53,21 @@ <h2 style="text-align: center;">
                 {% if user.is_authenticated %}
                   {% if object.get_edit_url %}
                     <a href="{{ object.get_edit_url }}">
-                      <svg width="24"
-                           height="24"
-                           viewBox="0 0 24 24"
-                           xmlns="http://www.w3.org/2000/svg"
-                           fill="none"
-                           stroke="currentColor"
-                           stroke-width="2"
-                           stroke-linecap="round"
-                           stroke-linejoin="round"
-                           class="feather feather-edit">
-                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-                      </svg>
+                      <span class="material-symbols-outlined">edit</span>
                     </a>
                   {% endif %}
 
                   {% if object.get_delete_url %}
                     |
                     <a href="{{ object.get_delete_url }}">
-                      <svg xmlns="http://www.w3.org/2000/svg"
-                           width="24"
-                           height="24"
-                           viewBox="0 0 24 24"
-                           fill="none"
-                           stroke="currentColor"
-                           stroke-width="2"
-                           stroke-linecap="round"
-                           stroke-linejoin="round"
-                           class="feather feather-trash">
-                        <polyline points="3 6 5 6 21 6" />
-                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-                      </svg>
+                      <span class="material-symbols-outlined">delete</span>
                     </a>
                   {% endif %}
 
                   {% if object.get_duplicate_url %}
                     |
                     <a href="{{ object.get_duplicate_url }}" title="Duplicate">
-                      <svg xmlns="http://www.w3.org/2000/svg"
-                           width="24"
-                           height="24"
-                           viewBox="0 0 24 24"
-                           fill="none"
-                           stroke="currentColor"
-                           stroke-width="2"
-                           stroke-linecap="round"
-                           stroke-linejoin="round"
-                           class="feather feather-copy">
-                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-                      </svg>
+                      <span class="material-symbols-outlined">content_copy</span>
                     </a>
                   {% endif %}
                 {% endif %}
@@ -131,18 +84,7 @@ <h2 style="text-align: center;">
             {% if object.get_next_url %}
               <h2>
                 <a href="{{ object.get_next_url }}" style="float:left">
-                  <svg xmlns="http://www.w3.org/2000/svg"
-                       width="24"
-                       height="24"
-                       viewBox="0 0 24 24"
-                       fill="none"
-                       stroke="currentColor"
-                       stroke-width="2"
-                       stroke-linecap="round"
-                       stroke-linejoin="round"
-                       class="feather feather-chevron-right">
-                    <polyline points="9 18 15 12 9 6" />
-                  </svg>
+                  <span class="material-symbols-outlined">chevron_right</span>
                 </a>
               </h2>
             {% endif %}
@@ -159,20 +101,7 @@ <h3>
                   General Info
                   <a href="/entity/{{ object.id }}">
                     <small>
-                      <svg xmlns="http://www.w3.org/2000/svg"
-                           width="24"
-                           height="24"
-                           viewBox="0 0 24 24"
-                           fill="none"
-                           stroke="currentColor"
-                           stroke-width="2"
-                           stroke-linecap="round"
-                           stroke-linejoin="round"
-                           class="feather feather-database">
-                        <ellipse cx="12" cy="5" rx="9" ry="3" />
-                        <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
-                        <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
-                      </svg>
+                      <span class="material-symbols-outlined">database</span>
                     </small>
                   </a>
                 </h3>

diff --git a/apis_core/apis_entities/templates/apis_entities/edit_generic.html b/apis_core/apis_entities/templates/apis_entities/edit_generic.html
@@ -33,10 +33,10 @@ <h1>
               <small>{{ entity_type }}s</small>
             </a>
             <strong>{{ instance }}</strong> <a href="{{ instance.get_absolute_url }}">
-              <i data-feather="eye" title="eye"></i>
+              <span class="material-symbols-outlined">visibility</span>
             </a>
             <a href="/entity/{{ instance.id }}">
-              <i data-feather="database" title="database"></i>
+              <span class="material-symbols-outlined">database</span>
             </a>
           </h1>
         </div>

diff --git a/apis_core/apis_metainfo/templates/apis_metainfo/uri_detail.html b/apis_core/apis_metainfo/templates/apis_metainfo/uri_detail.html
@@ -18,7 +18,7 @@
             {% if object.get_prev_url %}
               <h2>
                 <a href="{{ object.get_prev_url }}" style="float:right">
-                  <i data-feather="chevron-left" title="previous"></i>
+                  <span class="material-symbols-outlined">chevron_left</span>
                 </a>
               </h2>
             {% endif %}
@@ -40,14 +40,14 @@ <h2 style="text-align: center;">
               {% if user.is_authenticated %}
                 {% if object.get_edit_url %}
                   <a href="{{ object.get_edit_url }}">
-                    <i class="feather-32" data-feather="edit" title="edit"></i>
+                    <span class="material-symbols-outlined">edit</span>
                   </a>
                 {% endif %}
 
                 {% if object.get_delete_url %}
                   |
                   <a href="{{ object.get_delete_url }}">
-                    <i class="feather-32" data-feather="trash" title="delete"></i>
+                    <span class="material-symbols-outlined">delete_forever</span>
                   </a>
                 {% endif %}
               {% endif %}
@@ -59,7 +59,7 @@ <h2 style="text-align: center;">
             {% if object.get_next_url %}
               <h2>
                 <a href="{{ object.get_next_url }}" style="float:left">
-                  <i data-feather="chevron-right" title="next"></i>
+                  <span class="material-symbols-outlined">chevron_right</span>
                 </a>
               </h2>
             {% endif %}

diff --git a/apis_core/apis_metainfo/templates/base.html b/apis_core/apis_metainfo/templates/base.html
@@ -32,6 +32,8 @@
     <link rel="mask-icon"
           href="{{ SHARED_URL }}favicon/safari-pinned-tab.svg"
           color="#00aba9" />
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
+          rel="stylesheet" />
 
     {% block styles %}
       {% include "partials/bootstrap4_css.html" %}
@@ -145,7 +147,7 @@
                       <div class="dropdown-menu dropdown-menu-right">
                         <div class="dropdown-item">
                           <a class="nav-link p-0" href="{% url 'admin:logout' %}">
-                            <span class="feather-32" data-feather="log-out"></span>
+                            <span class="material-symbols-outlined">logout</span>
                             log out
                           </a>
                         </div>
@@ -155,7 +157,7 @@
                     <li class="nav-item dropdown ml-auto">
                       <a class="nav-link p-0"
                          href="{% url 'admin:login' %}?next={{ request.path|urlencode }}">
-                        <span class="feather-32" data-feather="log-in"></span>
+                        <span class="material-symbols-outlined">login</span>
                       </a>
                     </li>
                   {% endif %}
@@ -225,7 +227,6 @@
     </div>
 
     {% block scripts %}
-      {% include "partials/feather_js.html" %}
       {% include "partials/bootstrap4_js.html" %}
       <script type="text/javascript"
               src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

diff --git a/apis_core/apis_metainfo/templates/partials/feather_js.html b/apis_core/apis_metainfo/templates/partials/feather_js.html
diff --git a/apis_core/apis_relations/templates/apis_relations/delete_button_generic_ajax_form.html b/apis_core/apis_relations/templates/apis_relations/delete_button_generic_ajax_form.html
@@ -2,17 +2,5 @@
 {# djlint:off #}
 <a id="tempEntity_{% if record.relation_pk %}{{ record.relation_pk }}{% else %}{{ record.pk }}{% endif %}" class="reldelete" aria-label="Left Align" onclick=DeleteTempEntity('{% if record.relation_pk %}{{ record.relation_pk }}{% else %}{{ record.pk }}{% endif %}',"relations/{{ record|content_type|lower }}")>
 {# djlint:on #}
-<svg xmlns="http://www.w3.org/2000/svg"
-     width="24"
-     height="24"
-     viewBox="0 0 24 24"
-     fill="none"
-     stroke="currentColor"
-     stroke-width="2"
-     stroke-linecap="round"
-     stroke-linejoin="round"
-     class="feather feather-trash">
-  <polyline points="3 6 5 6 21 6"></polyline>
-  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-</svg>
+<span class="material-symbols-outlined">delete</span>
 </a>
diff --git a/apis_core/apis_relations/templates/apis_relations/edit_button_generic_ajax_form.html b/apis_core/apis_relations/templates/apis_relations/edit_button_generic_ajax_form.html
@@ -2,16 +2,5 @@
 {# djlint:off #}
 <a class='reledit' onclick=GetFormAjax(null,"{% if record.relation_pk %}{{ record.relation_pk }}{% else %}{{ record.pk }}{% endif %}")>
 {# djlint:on #}
-<svg xmlns="http://www.w3.org/2000/svg"
-     width="24"
-     height="24"
-     viewBox="0 0 24 24"
-     fill="none"
-     stroke="currentColor"
-     stroke-width="2"
-     stroke-linecap="round"
-     stroke-linejoin="round"
-     class="feather feather-edit-2">
-  <polygon points="16 3 21 8 8 21 3 21 3 16 16 3"></polygon>
-</svg>
+<span class="material-symbols-outlined">edit</span>
 </a>
diff --git a/apis_core/apis_relations/templates/apis_relations/references_button_generic_ajax_form.html b/apis_core/apis_relations/templates/apis_relations/references_button_generic_ajax_form.html
@@ -2,17 +2,5 @@
 <a class="bibsonomy-anker" data-bibs-contenttype="{{ record|content_type|lower }}" data-bibs-object_pk=" 
   {% if record.relation_pk %}{{ record.relation_pk }}{% else %}{{ record.pk }}{% endif %}
    ">
-  <svg xmlns="http://www.w3.org/2000/svg"
-       width="24"
-       height="24"
-       viewBox="0 0 24 24"
-       fill="none"
-       stroke="currentColor"
-       stroke-width="2"
-       stroke-linecap="round"
-       stroke-linejoin="round"
-       class="feather feather-book-open">
-    <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
-    <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
-  </svg>
+  <span class="material-symbols-outlined">import_contacts</span>
 </a>