Annotation-Pushers
/
Annotation-System
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

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
This commit is contained in:
Matt Mascarenhas 2021-01-27 21:58:56 +00:00
parent eccd02cc71
commit 2cf8739a60
5 changed files with 67 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cinera/cinera.c
View File

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

4
cinera/cinera.css
View File

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

8
cinera/cinera_player_post.js
View File

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

3
cinera/cinera_player_pre.js
View File

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

100
cinera/cinera_search_pre.js
View File

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