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 = {
.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,

View File

@ -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;
}

View File

@ -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;