diff --git a/cinera/cinera.c b/cinera/cinera.c index 1ea305d..6bb0db4 100644 --- a/cinera/cinera.c +++ b/cinera/cinera.c @@ -23,7 +23,7 @@ typedef struct version CINERA_APP_VERSION = { .Major = 0, .Minor = 8, - .Patch = 0 + .Patch = 1 }; #include // NOTE(matt): varargs diff --git a/cinera/cinera.css b/cinera/cinera.css index 65fec11..2e15f87 100644 --- a/cinera/cinera.css +++ b/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; diff --git a/cinera/cinera_player_post.js b/cinera/cinera_player_post.js index d15a671..56d79ab 100644 --- a/cinera/cinera_player_post.js +++ b/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); diff --git a/cinera/cinera_player_pre.js b/cinera/cinera_player_pre.js index 795a8c4..ee1952e 100644 --- a/cinera/cinera_player_pre.js +++ b/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 { diff --git a/cinera/cinera_search_pre.js b/cinera/cinera_search_pre.js index 10d1c56..08144a3 100644 --- a/cinera/cinera_search_pre.js +++ b/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; - - FitText(HeadEntry); - FitText(TailEntry); + AppendItemToButton(This, TailText, item_end.TAIL); } } else @@ -1816,27 +1838,11 @@ UpdateButtons(TransitionType, RelevantButton, PoppedLevel) } else { - var HeadEntryElement = document.createElement("div"); - HeadEntryElement.classList.add("text"); - 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 HeadText = LevelBundle.This.Entries[ButtonInfo.HeadIndex].innerText; + AppendItemToButton(This, HeadText, item_end.HEAD); - var TailEntryElement = document.createElement("div"); - TailEntryElement.classList.add("text"); - 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)"; - } + var TailText = LevelBundle.This.Entries[ButtonInfo.TailIndex].innerText; + AppendItemToButton(This, TailText, item_end.TAIL); } } @@ -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.height = Dim + "px"; + ButtonStyleRule.style.width = Nav.ButtonDim + "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";