added names underneath

static/css/main.css

@@ -39,6 +39,14 @@ div.nav-bottom ul, div.nav-top ul {
   padding: 0;
 }
 
+ul {
+  list-style: none;
+}
+
+ul.name-elements li {
+  padding: 1em;
+}
+
 li a.nav-button {
   display: block;
   text-decoration: none;
@@ -92,7 +100,7 @@ span.librarian-names:hover, span.file-names:hover {
   transform-origin: top left;
   border:blue 1px solid;
   height: 50vw;
-  width: 50vw;
+  width: 30vw;
   overflow-y: scroll;
   overflow-x: hidden;
   position: absolute;
@@ -102,5 +110,17 @@ span.librarian-names:hover, span.file-names:hover {
 }
 
 img.listed-images {
-  width: 2rem;
+  width: 100%;
+}
+
+video.listed-videos {
+    width: 100%;
+}
+
+audio.listed-audio {
+  width: 100%;
+}
+
+embed.listed-pdf {
+  width: 100%;
 }

templates/layout.html

@@ -22,27 +22,28 @@
              var item = test[i];
              if(item.librarian.includes(thename)){
                ledocument = item.debrispath;
+               lelibrarian = item.librarian;
                //put ledocument into li and nest inside ul
                var extension = ledocument.replace(/^.*\./, '');
                console.log(ledocument);
                if ((extension=="jpg") || (extension=="jpeg") || (extension=="png") || (extension=="gif") || (extension=="tiff")) {
-                 $(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'></li>");
+                 $(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'>Librarians: "+lelibrarian+"</li>");
                }
                else if (extension=="pdf") {
-                 $(".name-elements").append("<li><embed class='listed-pdf' src='files/"+ledocument+"'/></li>");
+                 $(".name-elements").append("<li><embed class='listed-pdf' src='files/"+ledocument+"'/>Librarians: "+lelibrarian+"</li>");
                }
                else if (extension=="epub") {
-                 $(".name-elements").append("<li>"+ledocument+"</li>");
+                 $(".name-elements").append("<li>"+ledocument+lelibrarian+"</li>");
                }
                else if ((extension=="mp3") || (extension=="wav") || (extension=="m4a")) {
-                 $(".name-elements").append("<li><audio class='listed-audio' controls><source src='files/"+ledocument+"'></audio></li>");
+                 $(".name-elements").append("<li><audio class='listed-audio' controls><source src='files/"+ledocument+"'></audio>Librarians: "+lelibrarian+"</li>");
                }
                else if ((extension=="mov") || (extension=="mp4")) {
-                 $(".name-elements").append("<li><video class='listed-videos' controls><source src='files/"+ledocument+"'></video></li>");
+                 $(".name-elements").append("<li><video class='listed-videos' controls><source src='files/"+ledocument+"'></video>Librarians: "+lelibrarian+"</li>");
                }
                else if ((extension=="odt") || (extension=="docx")) {
                // something for odt and docx
-                 $(".name-elements").append("<li>"+ledocument+"</li>");
+                 $(".name-elements").append("<li>"+ledocument+lelibrarian+"</li>");
              };
            };
          };