added message to display when showing pdfs on mobile

static/css/main.css

@@ -141,6 +141,10 @@ span.librarian-names:hover, span.file-names:hover {
   cursor: pointer;
 }
 
+.mobile-pdf {
+  display: none;
+}
+
 /**************************/
 /* LAYOUT PHONE */
 
@@ -184,6 +188,10 @@ div#listofpeople{
   /* -webkit-clip-path: ellipse(49% 70% at center center); */
   }
 
+  .mobile-pdf {
+    display: block;
+  }
+
   /*buttons*/
 
   button#about, button#showall, button#reset{
@@ -299,7 +307,7 @@ div#closeintro {
 div#closeinsert {
     margin-left: 23.1em;
 }
-  
+
 
 }
 
@@ -520,5 +528,3 @@ hr {
     color: #f0f0f0;
     width: 50%;
 }
-
-

templates/layout.html

@@ -177,7 +177,7 @@ function getCookie(name) {
                  $(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'><br><br><span class='librarians-label'><b>Librarian(s):</b> "+librarianstring+"</span><br><span class='method-label'><b>Method:</b> "+methodstring+"</span><br><br><a href='/files/"+ledocument+"' download><button class='download'>Download file</button></a></li>");
                }
                else if (extension=="pdf") {
-                 $(".name-elements").append("<li><object class='listed-pdf' data='files/"+ledocument+"'/><br><br><span class='librarians-label'><b>Librarian(s):</b> "+librarianstring+"</span><br><span class='method-label'><b>Method:</b> "+methodstring+"</span><br><br><a href='/files/"+ledocument+"' download><button class='download'>Download file</button></a></li>");
+                 $(".name-elements").append("<span clas='mobile-pdf'>The PDF cannot be displayed on mobile. Please download the file to see it.</span>"+"<li><object class='listed-pdf' data='files/"+ledocument+"'/><br><br><span class='librarians-label'><b>Librarian(s):</b> "+librarianstring+"</span><br><span class='method-label'><b>Method:</b> "+methodstring+"</span><br><br><a href='/files/"+ledocument+"' download><button class='download'>Download file</button></a></li>");
                }
                else if ((extension=="mp3") || (extension=="wav") || (extension=="m4a")) {
                  $(".name-elements").append("<li><audio class='listed-audio' controls><source src='files/"+ledocument+"'></audio><br><br><span class='librarians-label'><b>Librarian(s):</b> "+librarianstring+"</span><br><span class='method-label'><b>Method:</b> "+methodstring+"</span><br><br><a href='/files/"+ledocument+"' download><button class='download'>Download file</button></a></li>");
@@ -228,7 +228,7 @@ var flag = true;
                     $(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'><br><br><span class='librarians-label'><b>Librarian(s):</b> "+librarianstring+"</span><br><span class='method-label'><b>Method:</b> "+methodstring+"</span><br><br><a href='/files/"+ledocument+"' download><button class='download'>Download file</button></a></li>");
                   }
                   else if (extension=="pdf") {
-                    $(".name-elements").append("<li><object class='listed-pdf' data='files/"+ledocument+"'/><br><br><span class='librarians-label'><b>Librarian(s):</b> "+librarianstring+"</span><br><span class='method-label'><b>Method:</b> "+methodstring+"</span><br><br><a href='/files/"+ledocument+"' download><button class='download'>Download file</button></a></li>");
+                    $(".name-elements").append("<span clas='mobile-pdf'>The PDF cannot be displayed on mobile. Please download the file to see it.</span>"+"<li><object class='listed-pdf' data='files/"+ledocument+"'/><br><br><span class='librarians-label'><b>Librarian(s):</b> "+librarianstring+"</span><br><span class='method-label'><b>Method:</b> "+methodstring+"</span><br><br><a href='/files/"+ledocument+"' download><button class='download'>Download file</button></a></li>");
                   }
                   else if ((extension=="mp3") || (extension=="wav") || (extension=="m4a")) {
                     $(".name-elements").append("<li><audio class='listed-audio' controls><source src='files/"+ledocument+"'></audio><br><br><span class='librarians-label'><b>Librarian(s):</b> "+librarianstring+"</span><br><span class='method-label'><b>Method:</b> "+methodstring+"</span><br><br><a href='/files/"+ledocument+"' download><button class='download'>Download file</button></a></li>");