Add download button for each file

- This commit also introduces some CSS to place the buttons/forms next to each other
azlux · May 20, 2018 · de96175 · de96175
1 parent f381377
commit de96175
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/static/index.css b/static/index.css
@@ -0,0 +1,23 @@
+/* necessary to place both forms/buttons next to each other */
+li.file {
+    clear: both;
+    list-style-position: outside;
+}
+
+/* necessary to place both forms/buttons next to each other */
+form.file {
+    /* Float both forms to the left */
+    float: left;
+}
+
+form.file.file_add {
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+/* necessary to place both forms/buttons next to each other */
+form.file.file_download {
+    clear: right;
+    /* with some space to the left of the second form */
+    margin-right: 20px;
+}
diff --git a/templates/index.html b/templates/index.html
@@ -14,8 +14,17 @@
             {%- set files = music_library.get_files(subdirpath) %}
             {%- if files %}
                 {% for file in files %}
-                <!--<li>{{ file }}</li>-->
-                <li><form method="post"><input type="text" value="{{ subdirpath }}/{{ file }}" name="add_file" hidden><input type="submit" value="Add">&nbsp;&nbsp;{{ file }}</form></li>
+                <li class="file">
+                    <form method="post" class="file file_add">
+                        <input type="text" value="{{ subdirpath }}/{{ file }}" name="add_file" hidden>
+                        <input type="submit" value="Add">
+                    </form>
+                    <form action="./download" method="get"  class="file file_download">
+                        <input type="text" value="{{ subdirpath }}/{{ file }}" name="file" hidden>
+                        <input type="submit" value="Download">
+                        &nbsp;{{ file }}
+                    </form>
+                </li>
                 {% endfor %}
             {%- endif %}
         </ul>