cinera.c: Put sort button on query box's line

This commit is contained in:
Matt Mascarenhas 2019-03-03 23:32:58 +00:00
parent f5a767ff94
commit 9278390a38
3 changed files with 31 additions and 25 deletions

View File

@ -17,7 +17,7 @@ typedef struct
version CINERA_APP_VERSION = { version CINERA_APP_VERSION = {
.Major = 0, .Major = 0,
.Minor = 6, .Minor = 6,
.Patch = 6 .Patch = 7
}; };
#include <stdarg.h> // NOTE(matt): varargs #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; char *Theme = StringsDiffer(Config.Theme, "") ? Config.Theme : Config.ProjectID;
int Allowance = StringLength(Theme) * 2 + StringLength(Config.ProjectID) + StringLength(Config.BaseURL) + StringLength(Config.PlayerLocation); 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), CopyString(queryContainer, sizeof(queryContainer),
"<div class=\"cineraQueryContainer %s\">\n" "<div id=\"cineraIndexControl\" class=\"%s\">\n"
" <label for=\"query\">Query:</label>\n" " <div id=\"cineraIndexSort\">Sort: Old to New &#9206;</div>\n"
" <div class=\"inputContainer\">\n" " <div class=\"cineraQueryContainer\">\n"
" <input type=\"text\" autocomplete=\"off\" id=\"query\">\n" " <label for=\"query\">Query:</label>\n"
" <div class=\"spinner\">\n" " <div class=\"inputContainer\">\n"
" Downloading data...\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>\n"
" </div>\n" " <div id=\"cineraResultsSummary\">Found: 0 episodes, 0 markers, 0h 0m 0s total.</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=\"cineraResults\" data-single=\"%d\"></div>\n"
"\n" "\n"
" <div id=\"cineraIndex\" class=\"%s\" data-project=\"%s\" data-baseURL=\"%s\" data-playerLocation=\"%s\">\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", " <div id=\"cineraIndexEntries\">\n",
Theme, Theme,
Config.Mode & MODE_SINGLETAB ? 1 : 0, Config.Mode & MODE_SINGLETAB ? 1 : 0,

View File

@ -1,10 +1,18 @@
/* Index */ /* Index */
.cineraQueryContainer { #cineraIndexControl {
display: flex;
margin: 16px auto;
max-width: 1024px; max-width: 1024px;
margin: 15px auto; padding: 8px;
}
.cineraQueryContainer {
flex-grow: 1;
padding-left: 16px;
display: flex; display: flex;
flex-direction: horizontal; flex-direction: horizontal;
margin: auto;
} }
.cineraQueryContainer label { .cineraQueryContainer label {
@ -34,16 +42,15 @@
display: block; display: block;
} }
#cineraResults, #cineraResults,
#cineraIndex { #cineraIndex {
margin: 0 auto; margin: 0 auto;
max-width: 800px; max-width: 800px;
} }
#cineraIndex #cineraIndexSort { #cineraIndexControl #cineraIndexSort {
margin-bottom: 8px; padding: 4px;
display: inline-block;
padding: 5px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
@ -110,19 +117,15 @@
@media (max-width: 512px), (max-height: 512px) @media (max-width: 512px), (max-height: 512px)
{ {
.cineraQueryContainer { #cineraIndexControl {
margin: 4px auto; margin: 4px auto;
} }
#cineraIndex #cineraIndexSort, #cineraIndexControl,
#cineraResultsSummary { #cineraResultsSummary {
font-size: 64%; font-size: 64%;
} }
#cineraIndex #cineraIndexSort {
margin-bottom: 4px;
}
#cineraResults .dayContainer { #cineraResults .dayContainer {
flex-direction: column; flex-direction: column;
} }

View File

@ -8,6 +8,7 @@ if (location.hash && location.hash.length > 0) {
document.getElementById("query").value = decodeURIComponent(initialQuery); document.getElementById("query").value = decodeURIComponent(initialQuery);
} }
var indexControl = document.getElementById("cineraIndexControl");
var indexContainer = document.getElementById("cineraIndex"); var indexContainer = document.getElementById("cineraIndex");
var projectID = indexContainer.attributes.getNamedItem("data-project").value; var projectID = indexContainer.attributes.getNamedItem("data-project").value;
var theme = indexContainer.classList.item(0); 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 playerLocation = indexContainer.attributes.getNamedItem("data-playerLocation").value;
var resultsSummary = document.getElementById("cineraResultsSummary"); var resultsSummary = document.getElementById("cineraResultsSummary");
var indexSort = indexContainer.querySelector("#cineraIndexSort"); var indexSort = indexControl.querySelector("#cineraIndexSort");
var indexEntries = indexContainer.querySelector("#cineraIndexEntries"); var indexEntries = indexContainer.querySelector("#cineraIndexEntries");
var indexSortChronological = true; var indexSortChronological = true;