cinera.css: Search page mobile style

cinera_search.js: Conditionally display the results summary

cinera/cinera.c

@@ -17,7 +17,7 @@ typedef struct
 version CINERA_APP_VERSION = {
     .Major = 0,
     .Minor = 6,
-    .Patch = 5
+    .Patch = 6
 };
 
 #include <stdarg.h> // NOTE(matt): varargs

cinera/cinera.css

@@ -78,7 +78,7 @@
 }
 
 #cineraIndexEntries div a::before {
-    content: "✓";
+    content: "\2713";
     margin: 0 4px;
 }
 
@@ -105,6 +105,41 @@
 #cineraResultsSummary {
     margin: 10px 0;
     text-align: center;
+    display: none;
+}
+
+@media (max-width: 512px), (max-height: 512px)
+{
+    .cineraQueryContainer {
+        margin: 4px auto;
+    }
+
+    #cineraIndex #cineraIndexSort,
+    #cineraResultsSummary {
+        font-size: 64%;
+    }
+
+    #cineraIndex #cineraIndexSort {
+        margin-bottom: 4px;
+    }
+
+    #cineraResults .dayContainer {
+        flex-direction: column;
+    }
+
+    #cineraResults .dayContainer .dayname {
+        font-weight: bold;
+        text-align: center;
+        width: 100%;
+    }
+
+    #cineraResults .dayContainer .markerList {
+        max-width: 100%;
+    }
+
+    #cineraIndexEntries div a {
+        font-size: 80%;
+    }
 }
 
 /* Player */

cinera/cinera_search.js

@@ -13,6 +13,7 @@ var projectID = indexContainer.attributes.getNamedItem("data-project").value;
 var theme = indexContainer.classList.item(0);
 var baseURL = indexContainer.attributes.getNamedItem("data-baseURL").value;
 var playerLocation = indexContainer.attributes.getNamedItem("data-playerLocation").value;
+var resultsSummary = document.getElementById("cineraResultsSummary");
 
 var indexSort = indexContainer.querySelector("#cineraIndexSort");
 var indexEntries = indexContainer.querySelector("#cineraIndexEntries");
@@ -106,6 +107,7 @@ function runSearch() {
     var totalSeconds = 0;
     if (queryStr && queryStr.length > 0) {
         indexContainer.style.display = "none";
+        resultsSummary.style.display = "block";
         if (episodes.length > 0) {
             var query = new RegExp(queryStr.replace("(", "\\(").replace(")", "\\)").replace(/\|+/, "\|").replace(/\|$/, "").replace(/(^|[^\\])\\$/, "$1"), "gi");
             for (var i = 0; i < episodes.length; ++i) {
@@ -143,11 +145,12 @@ function runSearch() {
     else
     {
         indexContainer.style.display = "block";
+        resultsSummary.style.display = "none";
     }
 
     var totalTime = Math.floor(totalSeconds/60/60) + "h " + Math.floor(totalSeconds/60)%60 + "m " + totalSeconds%60 + "s ";
 
-    document.getElementById("cineraResultsSummary").textContent = "Found: " + numEpisodes + " episodes, " + numMarkers + " markers, " + totalTime + "total.";
+    resultsSummary.textContent = "Found: " + numEpisodes + " episodes, " + numMarkers + " markers, " + totalTime + "total.";
 }
 
 function renderResults() {