cinera.c: Put sort button on query box's line
This commit is contained in:
		
							parent
							
								
									f5a767ff94
								
							
						
					
					
						commit
						9278390a38
					
				|  | @ -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,9 +7471,11 @@ 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" | ||||
|                     "<div id=\"cineraIndexControl\" class=\"%s\">\n" | ||||
|                     "                <div id=\"cineraIndexSort\">Sort: Old to New ⏶</div>\n" | ||||
|                     "                <div class=\"cineraQueryContainer\">\n" | ||||
|                     "                    <label for=\"query\">Query:</label>\n" | ||||
|                     "                    <div class=\"inputContainer\">\n" | ||||
|                     "                        <input type=\"text\" autocomplete=\"off\" id=\"query\">\n" | ||||
|  | @ -7482,11 +7484,11 @@ SearchToBuffer(buffers *CollationBuffers) // NOTE(matt): This guy malloc's Colla | |||
|                     "                        </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" | ||||
|                     "\n" | ||||
|                     "        <div id=\"cineraIndex\" class=\"%s\" data-project=\"%s\" data-baseURL=\"%s\" data-playerLocation=\"%s\">\n" | ||||
|                     "            <div id=\"cineraIndexSort\">Sort: Old to New ⏶</div>\n" | ||||
|                     "            <div id=\"cineraIndexEntries\">\n", | ||||
|                     Theme, | ||||
|                     Config.Mode & MODE_SINGLETAB ? 1 : 0, | ||||
|  |  | |||
|  | @ -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; | ||||
|     } | ||||
|  |  | |||
|  | @ -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; | ||||
| 
 | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue