Fix the layout of the metadata listing for long file names on the browse tab

Author: ggilestro

Dockerfile

@@ -30,3 +30,8 @@ CMD ["python", "/opt/ethoscope_metadata_server/metadata_db_server.py", "--refres
 #       -e LETSENCRYPT_HOST="metadata.lab.gilest.ro" \
 #       -e LETSENCRYPT_EMAIL="giorgio@gilest.ro" \
 #       ethoscope_metadata_server-lab.gilest.ro
+
+
+# Update git repo without regenerating the Docker:
+# sudo docker exec ethoscope-metadata-server bash -c 'cd /opt/ethoscope_metadata_server && git pull' 
+# sudo docker restart ethoscope-metadata-server

static/css/style.css

@@ -69,4 +69,13 @@ nav{
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
+}
+
+.metadata_name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /* number of lines to show */
+          line-clamp: 2; 
+  -webkit-box-orient: vertical;
 }

static/index.html

@@ -150,7 +150,7 @@ <h4 class='header'>Browse</h4>
                     </div>
 
                     <div class="row col s12">
-                        <ul class="collection col s6" id="project-list" style="border:0px;">
+                        <ul class="collection col s12" id="project-list" style="border:0px;">
                         </ul>
                     </div>
 

static/js/script.js

@@ -104,7 +104,7 @@ function refresh_info () {
         $('#project-list').html('');
         let prj_name = $("#project-select").val();
         $.each(data[prj_name], function (filename, identifier) {
-            $('#project-list').append($('<a href="#" class="collection-item" onclick="update_browser(\''+identifier+'\');return false;" style="display:inline-block">'+filename+'</a><a class="fa fa-trash" style="color:grey;float:right;margin-top:15px;" onclick="delete_metadata(\''+identifier+'\');"></a>'));
+            $('#project-list').append($('<li><a href="#" class="collection-item metadata_name" onclick="update_browser(\''+identifier+'\');return false;" style="display:inline-block">'+filename+'</a><a class="fa fa-trash" style="color:grey;float:right;margin-top:15px;" onclick="delete_metadata(\''+identifier+'\');"></a></li>'));
           })
     })
 }