files page new layout

webApp_DoVoiceInteraction/base/templates/base/files.html

 {%  extends 'mainTemplate.html' %}
 
 {% block content %}
-
-<div>
-    <div>
-        {% for file in audio_files %}
-        <div>
-                {{ file.name }} --- {{ file.created }}
-                {% if file.file %}
-                    --- {{ file.filename }} --- {{ file.file.size|filesizeformat }}
-                {% endif %}
-                {% include 'base/audioPlayer.html' %}
-        <br>
-                <form method="POST"
-                      style="display: inline;"
-                      action="{% url 'delete' file.id %}">
-                    {% csrf_token %}
-                    <input type="submit" value="Delete"/>
-                </form>
-
-            <hr>
+<h2 class="ui center aligned icon header">
+  <i class="circular file audio icon"></i>
+  Audio file Library
+</h2>
+<div class="ui divider"></div>
+<div class="ui four column doubling stackable grid">
+    {% for file in audio_files %}
+    <div class="column">
+        <div class="ui raised segment">
+            <div class="ui items">
+                <div class="item">
+                    <div class="content">
+                        <a class="header">{{ file.name }}</a>
+                        <div class="meta">
+                            <span>
+                                {{ file.created }}<br>
+                                {% if file.file %}
+                                {{ file.filename }}<br>
+                                {{ file.file.size|filesizeformat }}
+                                {% endif %}
+                            </span>
+                        </div>
+                        {% include 'base/audioPlayer.html' %}
+                        <form method="POST"
+                              style="display: inline;"
+                              action="{% url 'delete' file.id %}">
+                            {% csrf_token %}
+                            <input type="submit" value="Delete" class="ui secondary mini button">
+                        </form>
+                        <div class="ui horizontal divider"><a>Transcription</a></div>
+                        <div class="description">
+                            Audio transcription goes here.
+                        </div>
+                        <div class="extra">
+                            Correct? What about the label below?
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="ui pointing orange label">
+            <i class="id badge icon"> User label here</i>
         </div>
-        {% endfor %}
     </div>
 
+    {% endfor %}
 </div>
 
+<!-------------------------------------->
+<!--<div>-->
+<!--    <div>-->
+<!--        {% for file in audio_files %}-->
+<!--        <div>-->
+<!--            {{ file.name }} -&#45;&#45; {{ file.created }}-->
+<!--            {% if file.file %}-->
+<!--            -&#45;&#45; {{ file.filename }} -&#45;&#45; {{ file.file.size|filesizeformat }}-->
+<!--            {% endif %}-->
+<!--            {% include 'base/audioPlayer.html' %}-->
+<!--            <br>-->
+<!--            <form method="POST"-->
+<!--                  style="display: inline;"-->
+<!--                  action="{% url 'delete' file.id %}">-->
+<!--                {% csrf_token %}-->
+<!--                <input type="submit" value="Delete"/>-->
+<!--            </form>-->
+
+<!--            <hr>-->
+<!--        </div>-->
+<!--        {% endfor %}-->
+<!--    </div>-->
+
+<!--</div>-->
+
 {% endblock content %}
\ No newline at end of file