cinera.web: Fix issues on desktop with new layout

Search page:
    Manually size the grid buttons, and head / tail items

Player page:
    Confine long menus to the player height
    Confine the help documentation to the window size

cinera/cinera.c

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

cinera/cinera.css

@@ -517,6 +517,8 @@ ul.cineraNavPlain li.current > a {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+    max-height: 97%;
+    overflow-y: scroll;
 }
 
 .cineraHelp .help_container.visible {
@@ -597,8 +599,6 @@ ul.cineraNavPlain li.current > a {
     border: 1px solid;
     border-top: none;
     display: none;
-    /* TODO(matt): Set the height to the player's height */
-    max-height: 512px;
     overflow-y: auto;
     position: absolute;
     right: 0;

cinera/cinera_player_post.js

@@ -273,10 +273,18 @@ var testMarkers = playerContainer.querySelectorAll(".marker");
 var MobileCineraContentRuleSelector = ".cinera.mobile .cineraPlayerContainer .markers_container > .markers .marker .cineraContent";
 var MobileCineraContentRule = GetOrSetRule(MobileCineraContentRuleSelector);
 
+var MenuContainerRuleSelector = ".cineraMenus > .menu .quotes_container, .cineraMenus > .menu .references_container, .cineraMenus > .menu .filter_container, .cineraMenus > .menu .views_container, .cineraMenus > .menu .link_container, .cineraMenus > .menu .credits_container";
+var MenuContainerRule = GetOrSetRule(MenuContainerRuleSelector);
+
 if(cineraProps.D == devices.MOBILE)
 {
     InitMobileStyle();
 }
+else
+{
+    var MenuMaxHeight = cinera.offsetHeight - titleBar.offsetHeight - 4;
+    MenuContainerRule.style.maxHeight = MenuMaxHeight + "px";
+}
 
 var player = new Player(playerContainer, onRefChanged);
 

cinera/cinera_player_pre.js

@@ -482,6 +482,9 @@ Player.prototype.updateSize = function() {
         width = this.videoContainer.offsetWidth;
         height = width / 16 * 9; // TODO(matt): Get the aspect ratio from the video itself?
         this.markersContainer.style.height = height + "px";
+
+        var MenuMaxHeight = cinera.offsetHeight - titleBar.offsetHeight - 4;
+        MenuContainerRule.style.maxHeight = MenuMaxHeight + "px";
     }
     else
     {

cinera/cinera_search_pre.js

@@ -645,6 +645,12 @@ var item_type =
     ENTRY: 1,
 };
 
+var item_end =
+{
+    HEAD: 0,
+    TAIL: 1,
+};
+
 var view_type =
 {
     LIST: 0,
@@ -676,6 +682,7 @@ var Nav = {
     ButtonsContainer: null,
     GridSize: null,
     GridWidth: null,
+    ButtonDim: null,
     GridColumnGap: null,
     GridRowGap: null,
 
@@ -950,10 +957,17 @@ EmptyAndResetButton(Button)
     EmptyElement(Button.Element);
     Button.Element.style.fontSize = null;
     Button.Element.style.fontWeight = null;
+
+    Button.Element.style.width = Nav.ButtonDim + "px";
+    Button.Element.style.height = Nav.ButtonDim + "px";
+
     for(var i = 0; i < Button.Element.children.length; ++i)
     {
         Button.Element.children[i].style.fontSize = null;
         Button.Element.children[i].style.fontWeight = null;
+
+        Button.Element.children[i].style.width = null;
+        Button.Element.children[i].style.height = null;
     }
 
     for(var i = 0; i < Button.Element.classList.length;)
@@ -1637,6 +1651,35 @@ FitText(Element)
     Element.style.alignItems = null;
 }
 
+function
+AppendItemToButton(Button, Text, ItemEnd)
+{
+    var ItemElement = document.createElement("div");
+    ItemElement.classList.add("text");
+    switch(ItemEnd)
+    {
+        case item_end.HEAD:
+            {
+                ItemElement.classList.add("head-item");
+            } break;
+        case item_end.TAIL:
+            {
+                ItemElement.classList.add("tail-item");
+            } break;
+    }
+
+    if(!Nav.SortChronological)
+    {
+        ItemElement.style.transform = "rotate3d(0, 0, 1, 180deg)";
+    }
+
+    var Item = Button.Element.appendChild(ItemElement);
+    Item.textContent = Text;
+    Item.style.width = Nav.ButtonDim + "px";
+    Item.style.height = (Nav.ButtonDim / 2) + "px";
+    FitText(Item);
+}
+
 function
 UpdateButtons(TransitionType, RelevantButton, PoppedLevel)
 {
@@ -1747,32 +1790,11 @@ UpdateButtons(TransitionType, RelevantButton, PoppedLevel)
                     }
                     else
                     {
-                        var HeadEntryElement = document.createElement("div");
-                        HeadEntryElement.classList.add("text");
-                        HeadEntryElement.classList.add("head-item");
-                        if(!Nav.SortChronological)
-                        {
-                            HeadEntryElement.style.transform = "rotate3d(0, 0, 1, 180deg)";
-                        }
-                        var HeadEntry = This.Element.appendChild(HeadEntryElement);
-
-                        var TailEntryElement = document.createElement("div");
-                        TailEntryElement.classList.add("text");
-                        TailEntryElement.classList.add("tail-item");
-                        if(!Nav.SortChronological)
-                        {
-                            TailEntryElement.style.transform = "rotate3d(0, 0, 1, 180deg)";
-                        }
-                        var TailEntry = This.Element.appendChild(TailEntryElement);
-
                         var HeadText = LevelBundle.This.Projects[ButtonInfo.HeadIndex].querySelector(".cineraProjectTitle").innerText;
-                        HeadEntry.textContent = HeadText;
+                        AppendItemToButton(This, HeadText, item_end.HEAD);
 
                         var TailText = LevelBundle.This.Projects[ButtonInfo.TailIndex].querySelector(".cineraProjectTitle").innerText;
-                        TailEntry.textContent = TailText;
+                        AppendItemToButton(This, TailText, item_end.TAIL);
-
-                        FitText(HeadEntry);
-                        FitText(TailEntry);
                     }
                 }
                 else
@@ -1816,27 +1838,11 @@ UpdateButtons(TransitionType, RelevantButton, PoppedLevel)
                     }
                     else
                     {
-                        var HeadEntryElement = document.createElement("div");
+                        var HeadText = LevelBundle.This.Entries[ButtonInfo.HeadIndex].innerText;
-                        HeadEntryElement.classList.add("text");
+                        AppendItemToButton(This, HeadText, item_end.HEAD);
-                        HeadEntryElement.classList.add("head-item");
-                        var HeadEntry = This.Element.appendChild(HeadEntryElement);
-                        HeadEntry.textContent = LevelBundle.This.Entries[ButtonInfo.HeadIndex].innerText;
-                        FitText(HeadEntry);
-                        if(!Nav.SortChronological)
-                        {
-                            HeadEntryElement.style.transform = "rotate3d(0, 0, 1, 180deg)";
-                        }
 
-                        var TailEntryElement = document.createElement("div");
+                        var TailText = LevelBundle.This.Entries[ButtonInfo.TailIndex].innerText;
-                        TailEntryElement.classList.add("text");
+                        AppendItemToButton(This, TailText, item_end.TAIL);
-                        TailEntryElement.classList.add("tail-item");
-                        var TailEntry = This.Element.appendChild(TailEntryElement);
-                        TailEntry.textContent = LevelBundle.This.Entries[ButtonInfo.TailIndex].innerText;
-                        FitText(TailEntry);
-                        if(!Nav.SortChronological)
-                        {
-                            TailEntryElement.style.transform = "rotate3d(0, 0, 1, 180deg)";
-                        }
                     }
                 }
 
@@ -2804,21 +2810,21 @@ ComputeOptimalGridSize()
     var MaxGridSize = 4;
 
     Result = Clamp(MinGridSize, Math.floor(MaxWidth / MinButtonSize), MaxGridSize);
-    var Dim = (MaxWidth - Nav.GridRowGap * (Result - 1)) / Result;
+    Nav.ButtonDim = (MaxWidth - Nav.GridRowGap * (Result - 1)) / Result;
 
     // TODO(matt):  If Safari's head-item sizing bug proves to be a problem, use this:
     /*
     var ButtonStyleRuleSelector = "#cineraIndex #cineraIndexGrid .cineraButton.subdivision";
     var ButtonStyleRule = GetOrSetRule(ButtonStyleRuleSelector);
 
-    ButtonStyleRule.style.width = Dim + "px";
+    ButtonStyleRule.style.width = Nav.ButtonDim + "px";
-    ButtonStyleRule.style.height = Dim + "px";
+    ButtonStyleRule.style.height = Nav.ButtonDim + "px";
     */
 
     var GridTemplateColumnsStyle = "repeat(" + Result + ", 1fr)";
     Nav.ButtonsContainer.style.gridTemplateColumns = GridTemplateColumnsStyle;
 
-    var GridTemplateRowsStyle = "repeat(" + Result + ", " + Dim + "px)";
+    var GridTemplateRowsStyle = "repeat(" + Result + ", " + Nav.ButtonDim + "px)";
     Nav.ButtonsContainer.style.gridTemplateRows = GridTemplateRowsStyle;
 
     Nav.ButtonsContainer.style.width = MaxWidth + "px";