songs2slides

commit 416aa5108962ea9691ba1564d97d2051bc88aadd
parent 7abbc0a8049e549473b6620b1de4c952199152be
Author: Asher Morgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Tue, 26 Mar 2024 15:21:46 -0700

Improve appearance

Add logo in header, turn remove buttons into trash icons, and
emphasize submit buttons.

Diffstat:
M
songs2slides/static/global.css
 | 
38
+++++++++++++++++++++++++++++++++++---
A
songs2slides/static/trash.svg
 | 
2
++
M
songs2slides/templates/create.html
 | 
22
++++++++++++++++------
M
songs2slides/templates/layout.html
 | 
5
++++-

4 files changed, 57 insertions(+), 10 deletions(-)
diff --git a/songs2slides/static/global.css b/songs2slides/static/global.css
@@ -5,7 +5,7 @@
 }
 
 /* page setup */
-body {
+body, textarea {
     font-family: sans-serif;
 }
 header {
@@ -13,6 +13,10 @@ header {
     text-align: center;
     font-size: 1.5rem;
 }
+header img {
+    vertical-align: bottom;
+    height: 2rem;
+}
 main {
     margin: auto;
     max-width: 500px;
@@ -27,8 +31,25 @@ p {
     margin-bottom: 1rem;
 }
 
+/* button icons */
+.icon {
+  height: 2rem;
+  border: none;
+  padding: 0rem;
+  background-color: #00000000;
+  vertical-align: middle;
+}
+.icon img {
+  height: 2rem;
+  width: 2rem;
+  padding: 0.3rem;
+}
+
 /* padding */
-header, main {
+header {
+    padding: 0.75rem;
+}
+main {
     padding: 1rem;
 }
 button, input {
@@ -43,6 +64,10 @@ button, input, textarea {
     border: 1px solid;
     border-radius: 5px;
 }
+button[type=submit] {
+    font-weight: bold;
+    border-color: var(--foreground);
+}
 
 /* colors */
 body {
@@ -50,9 +75,12 @@ body {
     background-color: var(--background1);
 }
 header {
-    color: #000000;
     background: var(--theme);
 }
+header a {
+    color: #000000;
+    text-decoration: none;
+}
 input, button, textarea {
     color: var(--foreground);
     border-color: var(--background5);
@@ -111,6 +139,10 @@ a {
     --foreground: #e8e8e8;
     --link: hsl(210, 100%, 65%);
   }
+
+  .icon img {
+      filter: invert(95%);
+  }
 }
 
 /* print media mode */
diff --git a/songs2slides/static/trash.svg b/songs2slides/static/trash.svg
@@ -0,0 +1 @@
+<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>
+\ No newline at end of file
diff --git a/songs2slides/templates/create.html b/songs2slides/templates/create.html
@@ -23,7 +23,10 @@
                 <input name="artist-" placeholder="Song artist"/>
             </td>
             <td>
-                <input type="button" value="Remove"/>
+                <button class="icon" type="button" title="Remove">
+                        <img src="{{ url_for('static', filename='trash.svg') }}"
+                            alt="Remove icon"/>
+                </button>
             </td>
         </tr>
     </template>
@@ -48,7 +51,11 @@
                     <input type="text" name="artist-1" placeholder="Song artist"/>
                 </td>
                 <td>
-                    <input type="button" value="Remove" onclick="remove_song(1)"/>
+                    <button class="icon" type="button" onclick="remove_song(1)"
+                       title="Remove">
+                        <img src="{{ url_for('static', filename='trash.svg') }}"
+                            alt="Remove icon"/>
+                    </button>
                 </td>
             </tr>
             {% else %}
@@ -64,8 +71,11 @@
                             placeholder="Song artist" value="{{ song.artist }}"/>
                     </td>
                     <td>
-                        <input type="button" value="Remove"
-                            onclick="remove_song({{ loop.index }})"/>
+                        <button class="icon" type="button" title="Remove"
+                            onclick="remove_song({{ loop.index }})">
+                            <img src="{{ url_for('static', filename='trash.svg') }}"
+                                 alt="Remove icon"/>
+                        </button>
                     </td>
                 </tr>
                 {% endfor %}
@@ -75,7 +85,7 @@
 
     <div id="actions">
         <input type="button" value="Add song" onclick="add_song()"/>
-        <button>
+        <button type="submit">
             Next
         </button>
     </div>
@@ -171,7 +181,7 @@
 
     <div id="actions">
         <input onclick="back()" type="button" value="Back"/>
-        <button>
+        <button type="submit">
             Create Slide Show
         </button>
     </div>
diff --git a/songs2slides/templates/layout.html b/songs2slides/templates/layout.html
@@ -12,7 +12,10 @@
     </head>
     <body>
         <header>
-            Songs2Slides
+            <a href="{{ url_for('.home') }}">
+                <img src="{{ url_for('static', filename='icon.svg') }}" alt=""/>
+                Songs2Slides
+            </a>
         </header>
 
         <main>