From 222be7756acabfc5ad7a0025979c10f755a70e60 Mon Sep 17 00:00:00 2001
From: Sergio Brighenti <sergio@brighenti.me>
Date: Sat, 8 Oct 2016 00:00:20 +0200
Subject: [PATCH] fixed grid

---
 src/main/resources/assets/custom.css  | 14 +++++++++++++-
 src/main/resources/templates/home.peb | 13 ++++++++-----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/main/resources/assets/custom.css b/src/main/resources/assets/custom.css
index 2727659..2509f32 100644
--- a/src/main/resources/assets/custom.css
+++ b/src/main/resources/assets/custom.css
@@ -3,7 +3,7 @@ body {
 }
 
 .thumb {
-   display: block;
+    display: block;
     background-size: contain;
     height: 200px;
     position: relative;
@@ -19,10 +19,22 @@ body {
     -moz-background-size: contain;
     -o-background-size: contain;
 }
+
 .thumb:hover {
     border: 1px solid #337ab7;
 }
 
+.file-name {
+    cursor: pointer;
+}
+
+.file-hide-name {
+    overflow: hidden;
+    display: inline-block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+}
 
 .rect {
     max-height: 270px;
diff --git a/src/main/resources/templates/home.peb b/src/main/resources/templates/home.peb
index 793b63c..e174be2 100644
--- a/src/main/resources/templates/home.peb
+++ b/src/main/resources/templates/home.peb
@@ -15,8 +15,7 @@
 <nav class="navbar navbar-default navbar-fixed-top navbar-collapse">
     <div class="container">
         <div class="navbar-header">
-            <button type="button" class="navbar-toggle" data-toggle="collapse"
-                    data-target="#nb-collapse">
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nb-collapse">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
@@ -55,8 +54,8 @@
         {% for f in files %}
             <div class="col-md-3">
                 <div class="row">
-                    <div class="col col-md-9"><b>{{ f.file }}</b></div>
-                    <div class="col col-md-3">
+                    <div class="col col-md-10"><b class="file-hide-name file-name">{{ f.file }}</b></div>
+                    <div class="col col-md-2">
                         <a href="/panel?p={{ page }}&delete={{ f.file }}" class="btn btn-danger btn-sm pull-right">
                             <span class="glyphicon glyphicon-minus-sign"></span>
                         </a>
@@ -69,7 +68,6 @@
                         {% else %}
                             <a class="thumb" href="/{{ f.file }}" style="background-image: url('/assets/imgs/file.png')"></a>
                         {% endif %}
-
                     </div>
                 </div>
             </div>
@@ -90,5 +88,10 @@
 </div>
 <script src="/assets/jquery.js"></script>
 <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
+<script>
+    $('.file-name').click(function () {
+        $(this).toggleClass('file-hide-name');
+    });
+</script>
 </body>
 </html>