cinera.web: Better fitting and effiency

Better text fitting
Account for the scrollbar width in our max width considerations
Don't bother to compute the grid size merely when toggling the view
This commit is contained in:
Matt Mascarenhas 2021-02-04 23:19:56 +00:00
parent 50dbc7b5c3
commit 0a9d51b0d7
4 changed files with 16 additions and 32 deletions

View File

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

View File

@ -356,6 +356,7 @@ ul.cineraNavPlain li.current > a {
display: flex;
width: 100%;
height: 50%;
overflow: hidden;
}
#cineraIndex #cineraIndexGrid .cineraButton.subdivision .head-item p,

View File

@ -57,7 +57,7 @@ GetRealOrientation(PreferredLandscape, IsMobile)
}
else
{
WindowDim.X = window.innerWidth;
WindowDim.X = document.body.clientWidth;
WindowDim.Y = window.innerHeight;
}
if(WindowDim.Y > WindowDim.X)
@ -383,7 +383,7 @@ MaxHeightOfElement(Element, WindowDim)
Element.style.height = "unset";
var Default = parseInt(window.getComputedStyle(Element).height);
var InnerHeight = WindowDim ? WindowDim.Y : document.body.clientHeight;
var InnerHeight = WindowDim ? WindowDim.Y : window.innerHeight;
if(Max > InnerHeight || Max == Default)
{

View File

@ -1688,7 +1688,7 @@ GetTraversalLevelBundle()
}
function
FitText(Element)
FitText(Element, ItemEnd)
{
var Paragraph = Element.firstElementChild;
var ParagraphStyle = window.getComputedStyle(Paragraph);
@ -1696,21 +1696,25 @@ FitText(Element)
var Width = parseInt(ElementStyle.width);
var Height = parseInt(ElementStyle.height);
Element.style.alignItems = "flex-start";
Element.style.alignItems = "flex-start"; // NOTE(matt): Allows IsOverflowed() to work on a flex-end Element
var FontSize = parseInt(window.getComputedStyle(Element).fontSize);
while(FontSize > 10 && (IsOverflowed(Element) || parseInt(ParagraphStyle.width) > Width || parseInt(ParagraphStyle.height) > Height))
while(FontSize >= 10.2 && (IsOverflowed(Element) || parseInt(ParagraphStyle.width) > Width || parseInt(ParagraphStyle.height) > Height))
{
FontSize -= 0.2;
Element.style.fontSize = FontSize + "px";
ParagraphStyle = window.getComputedStyle(Paragraph);
}
ParagraphStyle = window.getComputedStyle(Paragraph);
if(IsOverflowed(Element) || parseInt(ParagraphStyle.width) > Width || parseInt(ParagraphStyle.height) > Height)
{
Element.style.fontWeight = "normal";
}
Element.style.alignItems = null;
var IsHeadOrTailAndTooTallForElement = ItemEnd !== undefined && (Element.scrollHeight > Element.clientHeight || parseInt(ParagraphStyle.height) > Height);
// NOTE(matt): Leave "flex-start" in place for tall items, to keep their beginning visible
if(!IsHeadOrTailAndTooTallForElement)
{
Element.style.alignItems = null;
}
}
function
@ -1751,7 +1755,7 @@ AppendItemToButton(Button, Text, ItemEnd)
SetDim(Button.Element, ButtonWidth + "px", ButtonHeight + "px");
////
FitText(Item);
FitText(Item, ItemEnd);
}
function
@ -2940,7 +2944,7 @@ ComputeOptimalGridSize()
}
else
{
WindowDim.X = window.innerWidth;
WindowDim.X = document.body.clientWidth;
WindowDim.Y = window.innerHeight;
}
var DimReduction = {
@ -3472,27 +3476,6 @@ ToggleView()
}
else
{
CineraProps.Orientation = GetRealOrientation(orientations.LANDSCAPE_LEFT, CineraProps.IsMobile);
if(CineraProps.IsMobile)
{
UseOrientation(CineraProps.Orientation);
}
var NewGridSize = ComputeOptimalGridSize();
if(Nav.GridSize !== NewGridSize)
{
UnbindGridKeys();
Nav.GridSize = NewGridSize;
ReinitButtons();
BindGridKeys();
SetHelpKeyAvailability(Nav.GridSize)
if(GridSizeIsSupported(Nav.GridSize))
{
var TargetLevel = Nav.TraversalStack[Nav.TraversalStack.length - 1];
var ProjectsStack = EmptyTraversalStackIntoProjectsStack();
DeriveTraversalStack(ProjectsStack, TargetLevel);
}
}
if(GridSizeIsSupported(Nav.GridSize))
{
Nav.Controls.View.textContent = "View: Grid";