fixed grid

HermexTools · Oct 7, 2016 · 222be77 · 222be77
1 parent d0a9267
commit 222be77
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git 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
@@ -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>