Merge pull request #204 from rootcoma/top_scores

Adding media queries to resize modals on short screens

php/css/triviatime.css

@@ -26,9 +26,34 @@ body {
   word-wrap: break-word;
   overflow-wrap: break-word;
   -ms-word-break: break-all;
-  word-break: break-all
+  word-break: break-all;
 }
 .modal-table tbody tr:hover {
   background-color: #E0E0E0;
   cursor: pointer;
 }
+@media screen and (max-height: 600px) {
+  .modal-body {
+    max-height: 340px;
+  }
+}
+@media screen and (max-height: 520px) {
+  .modal-body {
+    max-height: 260px;
+  }
+}
+@media screen and (max-height: 438px) {
+  .modal-body {
+    max-height: 200px;
+  }
+}
+@media screen and (max-height: 370px) {
+  .modal-body {
+    max-height: 150px;
+  }
+}
+@media screen and (max-height: 320px) {
+  .modal-body {
+    max-height: 70px;
+  }
+}

php/js/triviatime.js

@@ -21,7 +21,7 @@ $(function() {
         var values = $(this).children("td");
         var content = '';
         for(var i=0;i<values.length;i++) {
-            content += "<h2>" + headers.eq(i).text() + "</h2>";
+            content += "<h4>" + headers.eq(i).text() + "</h4>";
             content += "<p>" + values.eq(i).text() + "</p>";
         }
         $('#infoModal > .modal-body').html(content);