dashboard: fix store items with long name

circle/dashboard/static/dashboard/dashboard.css

@@ -740,6 +740,7 @@ textarea[name="list-new-namelist"] {
   text-align: center;
   display: inline-block;
   margin-right: 15px;
+  float: left;
 }
 
 .store-list-item-size {
@@ -765,20 +766,12 @@ textarea[name="list-new-namelist"] {
   background: #5bc0dc;
 }
 
-.store-download-button {
-  position: absolute; 
-  right: 15px; 
-  top: 18px;
+.store-list-item-icon-directory {
+  color: #ff8c00;
 }
 
 .store-remove-button {
-  position: absolute; 
-  right: 15px; 
-  top: 55px;
-}
-
-.store-list-item-icon-directory {
-  color: #ff8c00;
+  margin-top: 8px;
 }
 
 #dashboard-files-toplist div.list-group-item {
@@ -789,6 +782,19 @@ textarea[name="list-new-namelist"] {
   background: #eee;
 }
 
+.store-list-item-name {
+  max-width: 70%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  float: left;
+}
+
+.dashboard-toplist-icon {
+  float: left;
+  padding: 2px 5px 0 0;
+}
+
 .no-hover:hover {
   background: none !important;
 }

circle/dashboard/templates/dashboard/store/_list-box.html

@@ -20,7 +20,9 @@
         fa fa-{% if f.TYPE == "D" %}folder-open store-list-item-icon-directory{% else %}file{% endif %}"
         ></i>
     </div>
+    <div class="store-list-item-name">
       {{ f.NAME }}
+    </div>
     <div class="store-list-item-new">
       {% if f.is_new and f.TYPE == "F" %}
         <span class="badge badge-pulse">{% trans "new" %}</span>
@@ -33,16 +35,8 @@
     <div class="clearfix"></div>
   </a>
   <div class="store-list-file-infos">
-    <a href="{% url "dashboard.views.store-download" %}?path={{ f.path }}" 
-      class="btn btn-primary btn-sm store-download-button">
-      <i class="fa fa-download"></i>
-      {% trans "Download" %}
-    </a>
-    <a href="{% url "dashboard.views.store-remove" %}?path={{ f.path }}" 
-      class="btn btn-danger btn-xs store-remove-button">
-      <i class="fa fa-times"></i>
-      {% trans "Remove" %}
-    </a>
+    <div class="row">
+      <div class="col-sm-10">
         <dl class="dl-horizontal" style="margin: 0; padding: 0;">
           <dt>{% trans "Filename" %}</dt>
           <dd>{{ f.NAME }}</dd>
@@ -54,6 +48,20 @@
           <dd>{{ f.human_readable_date }}</dd>
         </dl>
       </div>
+      <div class="col-sm-2" style="text-align: right;">
+        <a href="{% url "dashboard.views.store-download" %}?path={{ f.path }}" 
+          class="btn btn-primary btn-sm store-download-button">
+          <i class="fa fa-download"></i>
+          {% trans "Download" %}
+        </a>
+        <a href="{% url "dashboard.views.store-remove" %}?path={{ f.path }}" 
+          class="btn btn-danger btn-xs store-remove-button">
+          <i class="fa fa-times"></i>
+          {% trans "Remove" %}
+        </a>
+      </div>
+    </div><!-- .row -->
+  </div>
   {% empty %}
   <a class="list-group-item">
     {% trans "This folder is empty." %}

circle/dashboard/templates/dashboard/store/index-files.html

@@ -13,7 +13,10 @@
     {% for t in toplist %}
     {% if t.TYPE == "F" %}
       <div class="list-group-item">
-        <i class="fa fa-file"></i> {{ t.NAME }}
+        <i class="fa fa-file dashboard-toplist-icon"></i> 
+        <div class="store-list-item-name">
+          {{ t.NAME }}
+        </div>
         <a href="{% url "dashboard.views.store-download" %}?path={{ t.path }}" 
           class="pull-right btn btn-xs" style="color: black;">
           <i class="fa fa-cloud-download" title="{% trans "Download" %}"></i>
@@ -22,10 +25,16 @@
           class="pull-right btn btn-xs" style="color: black;">
           <i class="fa fa-folder-open" title="{% trans "Show in directory" %}"></i>
         </a>
+        <div style="clear: both;"></div> 
       </div>
     {% else %}
-    <a href="{% url "dashboard.views.store-list" %}?directory={{ t.path }}" class="list-group-item">
-      <i class="fa fa-folder-open"></i> {{ t.NAME }}
+    <a href="{% url "dashboard.views.store-list" %}?directory={{ t.path }}" 
+      class="list-group-item">
+      <i class="fa fa-folder-open dashboard-toplist-icon"></i>
+        <div class="store-list-item-name">
+        {{ t.NAME }}
+      </div>
+      <div style="clear: both;"></div>
     </a>
     {% endif %}
     {% endfor %}