finished attachment styles

lms/static/sass/course/wiki/_wiki.scss

@@ -1,7 +1,7 @@
 section.wiki {
   padding-top: 25px;
 
-  header {
+  > header {
     height: 33px;
     margin-bottom: 36px;
     padding-bottom: 26px;
@@ -406,6 +406,7 @@ section.wiki {
     letter-spacing: 0 !important;
 
     &:hover {
+      color: $base-font-color;
       text-decoration: none;
     }
 
@@ -621,14 +622,58 @@ section.wiki {
 
   .attachment-options {
     height: 40px;
-    margin-bottom: 30px;
+    margin: 40px 0 30px; 
-    padding: 20px 0 2px;
-    border-bottom: 1px solid $light-gray;
-    border-top: 1px solid $light-gray;    
   }
 
   .attachment-list {
-    
+    ul {
+      list-style: none;
+      padding: 0;
+    }
+
+    li {
+      margin-bottom: 15px;
+      border: 1px solid #DDD;
+      background: #F9F9F9;
+      @include border-radius(5px);
+    }
+
+    header,
+    .attachment-details {
+      padding: 12px 15px;
+    }
+
+    .attachment-details {
+      background: #eee;
+      @include border-radius(0 0 5px 5px);
+    }
+
+    h3 {
+      a {
+        font-weight: bold;
+        font-size: 0.9em;
+      }
+
+      .badge {
+        float: right;
+        font-size: 0.6em;
+        line-height: 20px;
+        color: #aaa;
+      }
+    }
+
+    .attachment-description {
+      font-size: 0.8em;
+    }
+
+    table {
+      width: 100%;
+      font-size: 0.8em;
+    }
+
+    .attachment-actions .btn {
+      float: right;
+    }
   }
 
 

lms/templates/wiki/plugins/attachments/index.html

@@ -62,66 +62,68 @@
 
 
   <div class="attachment-list">
-    <p class="lead">{% trans "The following files are available for this article. Copy the markdown tag to directly refer to a file from the article text." %}</p>
+    <!--<p class="lead">{% trans "The following files are available for this article. Copy the markdown tag to directly refer to a file from the article text." %}</p>-->
-    {% for attachment in attachments %}
+    <ul>
-      <table class="table table-bordered table-striped" style="width: 100%;">
+      {% for attachment in attachments %}
-      <tr>
+        <li>
-        <td colspan="4">
+          <header>
-          <h3>
+            <h3>
-            <a href="{% url 'wiki:attachments_download' path=urlpath.path article_id=article.id attachment_id=attachment.id %}">{{ attachment.current_revision.get_filename }}</a>
+              <a href="{% url 'wiki:attachments_download' path=urlpath.path article_id=article.id attachment_id=attachment.id %}">{{ attachment.current_revision.get_filename }}</a>
-            <span class="badge">{{ attachment.current_revision.created|naturaltime }}</span>
+              <span class="badge">{{ attachment.current_revision.created|naturaltime }}</span>
-            {% if attachment.current_revision.deleted %}
+              {% if attachment.current_revision.deleted %}
-            <span class="badge badge-important">{% trans "deleted" %}</span>
+              <span class="badge badge-important">{% trans "deleted" %}</span>
-            {% endif %}
-          </h3>
-          {{ attachment.current_revision.description }}
-        </td>
-      </tr>
-      <tr>
-        <th>{% trans "Markdown tag" %}</th>
-        <th>{% trans "Uploaded by" %}</th>
-        <th>{% trans "Size" %}</th>
-        <td style="text-align: right;" rowspan="2">
-          {% if attachment|can_write:user %}
-            <p>
-            {% if not attachment.current_revision.deleted %}
-              <a href="{% url 'wiki:attachments_replace' path=urlpath.path article_id=article.id attachment_id=attachment.id %}" class="btn">{% trans "Replace" %}</a>
-              {% if attachment.article = article %}
-                <a href="{% url 'wiki:attachments_delete' path=urlpath.path article_id=article.id attachment_id=attachment.id %}" class="btn">{% trans "Delete" %}</a>
-              {% else %}
-                <a href="{% url 'wiki:attachments_delete' path=urlpath.path article_id=article.id attachment_id=attachment.id %}" class="btn">{% trans "Detach" %}</a>
               {% endif %}
-            {% else %}
+            </h3>
-              {% if attachment.current_revision.previous_revision.id %}
+            <p class="attachment-description">
-              <form method="POST" action="{% url 'wiki:attachments_revision_change' path=urlpath.path article_id=article.id attachment_id=attachment.id revision_id=attachment.current_revision.previous_revision.id %}">
+              {{ attachment.current_revision.description }}
-                {% csrf_token %}
-                <button class="btn">
-                  {% trans "Restore" %}
-                </button>
-              </form>
-              {% endif %}
-            {% endif %}
             </p>
-          {% endif %}
+          </header>
-          <p>
+          <div class="attachment-details">
-          <a href="{% url 'wiki:attachments_history' path=urlpath.path article_id=article.id attachment_id=attachment.id %}">
+            <table>
-            <span class="icon-time"></span>
+            <tr>
-            {% trans "File history" %} ({{ attachment.attachmentrevision_set.all.count }} {% trans "revisions" %})
+              <th>{% trans "Markdown tag" %}</th>
-          </a>
+              <th>{% trans "Uploaded by" %}</th>
-          </p>
+              <th>{% trans "Size" %}</th>
-        </td>
+              <th>{% trans "File History" %}</th>
-      </tr>
+              <td class="attachment-actions">
-      <tr>
+                {% if attachment|can_write:user %}
-        <td><code>[attachment:{{ attachment.id }}]</code></td>
+                  {% if not attachment.current_revision.deleted %}
-        <td>
+                    {% if attachment.article = article %}
-        {% if attachment.current_revision.user %}{{ attachment.current_revision.user }}{% else %}{% if user|is_moderator %}{{ attachment.current_revision.ip_address|default:"anonymous (IP not logged)" }}{% else %}{% trans "anonymous (IP logged)" %}{% endif %}{% endif %}
+                      <a href="{% url 'wiki:attachments_delete' path=urlpath.path article_id=article.id attachment_id=attachment.id %}" class="btn btn-danger">{% trans "Delete" %}</a>
-        </td>
+                    {% else %}
-        <td>{{ attachment.current_revision.get_size|filesizeformat }}</td>
+                      <a href="{% url 'wiki:attachments_delete' path=urlpath.path article_id=article.id attachment_id=attachment.id %}" class="btn">{% trans "Detach" %}</a>
-      </tr>
+                    {% endif %}
-      </table>
+
-    {% empty %}
+                    <a href="{% url 'wiki:attachments_replace' path=urlpath.path article_id=article.id attachment_id=attachment.id %}" class="btn">{% trans "Replace" %}</a>
-      <p style="margin-bottom: 20px;"><em>{% trans "There are no attachments for this article." %}</em></p>
+                    
-    {% endfor %}
+                  {% else %}
+                    {% if attachment.current_revision.previous_revision.id %}
+                    <form method="POST" action="{% url 'wiki:attachments_revision_change' path=urlpath.path article_id=article.id attachment_id=attachment.id revision_id=attachment.current_revision.previous_revision.id %}">
+                      {% csrf_token %}
+                      <button class="btn">
+                        {% trans "Restore" %}
+                      </button>
+                    </form>
+                    {% endif %}
+                  {% endif %}
+                {% endif %}                
+              </td>
+            </tr>
+            <tr>
+              <td><code>[attachment:{{ attachment.id }}]</code></td>
+              <td>
+              {% if attachment.current_revision.user %}{{ attachment.current_revision.user }}{% else %}{% if user|is_moderator %}{{ attachment.current_revision.ip_address|default:"anonymous (IP not logged)" }}{% else %}{% trans "anonymous (IP logged)" %}{% endif %}{% endif %}
+              </td>
+              <td>{{ attachment.current_revision.get_size|filesizeformat }}</td>
+              <td>{{ attachment.attachmentrevision_set.all.count }} {% trans "revisions" %}</td>
+            </tr>
+            </table>
+          </div>
+        </li>
+      {% empty %}
+        <p style="margin-bottom: 20px;"><em>{% trans "There are no attachments for this article." %}</em></p>
+      {% endfor %}
+    </ul>
   </div>