From 9278390a38c868622e9fcfdcf8794e97bb78577c Mon Sep 17 00:00:00 2001
From: Matt Mascarenhas <miblodelcarpio@gmail.com>
Date: Sun, 3 Mar 2019 23:32:58 +0000
Subject: [PATCH] cinera.c: Put sort button on query box's line

---
 cinera/cinera.c         | 26 ++++++++++++++------------
 cinera/cinera.css       | 27 +++++++++++++++------------
 cinera/cinera_search.js |  3 ++-
 3 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/cinera/cinera.c b/cinera/cinera.c
index 959fdc7..6483043 100644
--- a/cinera/cinera.c
+++ b/cinera/cinera.c
@@ -17,7 +17,7 @@ typedef struct
 version CINERA_APP_VERSION = {
     .Major = 0,
     .Minor = 6,
-    .Patch = 6
+    .Patch = 7
 };
 
 #include <stdarg.h> // NOTE(matt): varargs
@@ -7471,22 +7471,24 @@ SearchToBuffer(buffers *CollationBuffers) // NOTE(matt): This guy malloc's Colla
 
             char *Theme = StringsDiffer(Config.Theme, "") ? Config.Theme : Config.ProjectID;
             int Allowance = StringLength(Theme) * 2 + StringLength(Config.ProjectID) + StringLength(Config.BaseURL) + StringLength(Config.PlayerLocation);
-            char queryContainer[678 + Allowance]; // NOTE(matt): Update the size if changing the string
+            char queryContainer[827 + Allowance]; // NOTE(matt): Update the size if changing the string
             CopyString(queryContainer, sizeof(queryContainer),
-                    "<div class=\"cineraQueryContainer %s\">\n"
-                    "            <label for=\"query\">Query:</label>\n"
-                    "            <div class=\"inputContainer\">\n"
-                    "                <input type=\"text\" autocomplete=\"off\" id=\"query\">\n"
-                    "                <div class=\"spinner\">\n"
-                    "                    Downloading data...\n"
+                    "<div id=\"cineraIndexControl\" class=\"%s\">\n"
+                    "                <div id=\"cineraIndexSort\">Sort: Old to New &#9206;</div>\n"
+                    "                <div class=\"cineraQueryContainer\">\n"
+                    "                    <label for=\"query\">Query:</label>\n"
+                    "                    <div class=\"inputContainer\">\n"
+                    "                        <input type=\"text\" autocomplete=\"off\" id=\"query\">\n"
+                    "                        <div class=\"spinner\">\n"
+                    "                            Downloading data...\n"
+                    "                        </div>\n"
+                    "                    </div>\n"
                     "                </div>\n"
                     "            </div>\n"
-                    "        </div>\n"
-                    "        <div id=\"cineraResultsSummary\">Found: 0 episodes, 0 markers, 0h 0m 0s total.</div>\n"
-                    "        <div id=\"cineraResults\" data-single=\"%d\"></div>\n"
+                    "            <div id=\"cineraResultsSummary\">Found: 0 episodes, 0 markers, 0h 0m 0s total.</div>\n"
+                    "            <div id=\"cineraResults\" data-single=\"%d\"></div>\n"
                     "\n"
                     "        <div id=\"cineraIndex\" class=\"%s\" data-project=\"%s\" data-baseURL=\"%s\" data-playerLocation=\"%s\">\n"
-                    "            <div id=\"cineraIndexSort\">Sort: Old to New &#9206;</div>\n"
                     "            <div id=\"cineraIndexEntries\">\n",
                     Theme,
                     Config.Mode & MODE_SINGLETAB ? 1 : 0,
diff --git a/cinera/cinera.css b/cinera/cinera.css
index 04e191a..9b7133b 100644
--- a/cinera/cinera.css
+++ b/cinera/cinera.css
@@ -1,10 +1,18 @@
 /* Index */
 
-.cineraQueryContainer {
+#cineraIndexControl {
+    display: flex;
+    margin: 16px auto;
     max-width: 1024px;
-    margin: 15px auto;
+    padding: 8px;
+}
+
+.cineraQueryContainer {
+    flex-grow: 1;
+    padding-left: 16px;
     display: flex;
     flex-direction: horizontal;
+    margin: auto;
 }
 
 .cineraQueryContainer label {
@@ -34,16 +42,15 @@
     display: block;
 }
 
+
 #cineraResults,
 #cineraIndex {
     margin: 0 auto;
     max-width: 800px;
 }
 
-#cineraIndex #cineraIndexSort {
-    margin-bottom: 8px;
-    display: inline-block;
-    padding: 5px;
+#cineraIndexControl #cineraIndexSort {
+    padding: 4px;
     cursor: pointer;
     user-select: none;
     -moz-user-select: none;
@@ -110,19 +117,15 @@
 
 @media (max-width: 512px), (max-height: 512px)
 {
-    .cineraQueryContainer {
+    #cineraIndexControl {
         margin: 4px auto;
     }
 
-    #cineraIndex #cineraIndexSort,
+    #cineraIndexControl,
     #cineraResultsSummary {
         font-size: 64%;
     }
 
-    #cineraIndex #cineraIndexSort {
-        margin-bottom: 4px;
-    }
-
     #cineraResults .dayContainer {
         flex-direction: column;
     }
diff --git a/cinera/cinera_search.js b/cinera/cinera_search.js
index 6c4371e..6c470c5 100644
--- a/cinera/cinera_search.js
+++ b/cinera/cinera_search.js
@@ -8,6 +8,7 @@ if (location.hash && location.hash.length > 0) {
     document.getElementById("query").value = decodeURIComponent(initialQuery);
 }
 
+var indexControl = document.getElementById("cineraIndexControl");
 var indexContainer = document.getElementById("cineraIndex");
 var projectID = indexContainer.attributes.getNamedItem("data-project").value;
 var theme = indexContainer.classList.item(0);
@@ -15,7 +16,7 @@ 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 indexSort = indexControl.querySelector("#cineraIndexSort");
 var indexEntries = indexContainer.querySelector("#cineraIndexEntries");
 var indexSortChronological = true;