Show inline SVG icons instead of text

The text was cheap and clear but with more and more buttons this became a bit unwieldy, especially on mobile. Replace them with icons from https://flowbite.com/icons.
matze · Jan 13, 2025 · b687a31 · b687a31
1 parent b11cd5f
commit b687a31
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Changed
+
+- Use SVG icons instead of text for action links and buttons.
+
 
 ## 2.6.0
 

diff --git a/src/themes/style.css b/src/themes/style.css
@@ -54,6 +54,10 @@ body {
   height: 100vh;
 }
 
+svg {
+  display: block;
+}
+
 #main-container {
   display: flex;
   flex-direction: column;

diff --git a/templates/base.html b/templates/base.html
@@ -15,7 +15,14 @@
     {% block body_top %}{% endblock %}
     <div id="main-container">
       <header>
-        <span id="nav-title"><a href="{{ base_path.path() }}" class="navigation">home</a>{% block title %}{% endblock %}</span>
+        <span id="nav-title">
+          <a href="{{ base_path.path() }}" class="navigation" title="home" aria-label="home">
+            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" style="display: block;">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m4 12 8-8 8 8M6 10.5V19a1 1 0 0 0 1 1h3v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h3a1 1 0 0 0 1-1v-8.5"/>
+            </svg>
+          </a>
+          {% block title %}{% endblock %}
+        </span>
         <nav>
           <ul>
             {% block nav %}{% endblock %}

diff --git a/templates/index.html b/templates/index.html
@@ -5,7 +5,13 @@
 {% endblock %}
 
 {% block nav %}
-    <li><button id="open" class="navigation">open</button></li>
+    <li>
+      <button id="open" class="navigation" aria-label="upload">
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" style="display: block;">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v9m-5 0H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2M8 9l4-5 4 5m1 8h.01"/>
+        </svg>
+      </button>
+    </li>
 {% endblock %}
 
 {%- block content -%}

diff --git a/templates/paste.html b/templates/paste.html
@@ -17,9 +17,42 @@
 
 {% block nav %}
   {% if can_delete %}
-    <li><a href="{{ base_path.join("delete/") }}{{ id }}" class="navigation">delete</a></li>
+    <li>
+      <span id="nav-title">
+        <a href="{{ base_path.join("delete/") }}{{ id }}" class="navigation" title="delete paste" aria-label="delete paste">
+          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" style="display: block;">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 7h14m-9 3v8m4-8v8M10 3h4a1 1 0 0 1 1 1v3H9V4a1 1 0 0 1 1-1ZM6 7h12v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7Z"/>
+          </svg>
+        </a>
+      </span>
+    </li>
   {% endif %}
-    <li><a href="{{ base_path.join(id) }}?dl={{ ext }}" class="navigation">download</a></li>
-    <li><a href="{{ base_path.join(id) }}?fmt=raw" class="navigation">raw</a></li>
-    <li><a href="{{ base_path.join(id) }}?fmt=qr" class="navigation">qr</a></li>
+    <li>
+      <span id="nav-title">
+        <a href="{{ base_path.join(id) }}?dl={{ ext }}" class="navigation" title="download file" aria-label="download file">
+          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" style="display: block;">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V4M7 14H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2m-1-5-4 5-4-5m9 8h.01"/>
+          </svg>
+        </a>
+      </span>
+    </li>
+    <li>
+      <span id="nav-title">
+        <a href="{{ base_path.join(id) }}?fmt=raw" class="navigation" title="display raw file" aria-label="display raw file">
+          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" style="display: block;">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 3v4a1 1 0 0 1-1 1H5m5 4-2 2 2 2m4-4 2 2-2 2m5-12v16a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7.914a1 1 0 0 1 .293-.707l3.914-3.914A1 1 0 0 1 9.914 3H18a1 1 0 0 1 1 1Z"/>
+          </svg>
+        </a>
+      </span>
+    </li>
+    <li>
+      <span id="nav-title">
+        <a href="{{ base_path.join(id) }}?fmt=qr" class="navigation" title="qr code" aria-label="qr code">
+          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" style="display: block;">
+            <path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M4 4h6v6H4V4Zm10 10h6v6h-6v-6Zm0-10h6v6h-6V4Zm-4 10h.01v.01H10V14Zm0 4h.01v.01H10V18Zm-3 2h.01v.01H7V20Zm0-4h.01v.01H7V16Zm-3 2h.01v.01H4V18Zm0-4h.01v.01H4V14Z"/>
+            <path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M7 7h.01v.01H7V7Zm10 10h.01v.01H17V17Z"/>
+          </svg>
+        </a>
+      </span>
+    </li>
 {% endblock %}