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

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
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 = { version CINERA_APP_VERSION = {
.Major = 0, .Major = 0,
.Minor = 8, .Minor = 8,
.Patch = 2 .Patch = 3
}; };
#include <stdarg.h> // NOTE(matt): varargs #include <stdarg.h> // NOTE(matt): varargs

1
cinera/cinera.css
View File

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

4
cinera/cinera_pre.js
View File

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

39
cinera/cinera_search_pre.js
View File

@ -1688,7 +1688,7 @@ GetTraversalLevelBundle()
} }
function function
FitText(Element) FitText(Element, ItemEnd)
{ {
var Paragraph = Element.firstElementChild; var Paragraph = Element.firstElementChild;
var ParagraphStyle = window.getComputedStyle(Paragraph); var ParagraphStyle = window.getComputedStyle(Paragraph);
@ -1696,21 +1696,25 @@ FitText(Element)
var Width = parseInt(ElementStyle.width); var Width = parseInt(ElementStyle.width);
var Height = parseInt(ElementStyle.height); 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); 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; FontSize -= 0.2;
Element.style.fontSize = FontSize + "px"; Element.style.fontSize = FontSize + "px";
ParagraphStyle = window.getComputedStyle(Paragraph);
} }
ParagraphStyle = window.getComputedStyle(Paragraph);
if(IsOverflowed(Element) || parseInt(ParagraphStyle.width) > Width || parseInt(ParagraphStyle.height) > Height) if(IsOverflowed(Element) || parseInt(ParagraphStyle.width) > Width || parseInt(ParagraphStyle.height) > Height)
{ {
Element.style.fontWeight = "normal"; Element.style.fontWeight = "normal";
} }
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; Element.style.alignItems = null;
}
} }
function function
@ -1751,7 +1755,7 @@ AppendItemToButton(Button, Text, ItemEnd)
SetDim(Button.Element, ButtonWidth + "px", ButtonHeight + "px"); SetDim(Button.Element, ButtonWidth + "px", ButtonHeight + "px");
//// ////
FitText(Item); FitText(Item, ItemEnd);
} }
function function
@ -2940,7 +2944,7 @@ ComputeOptimalGridSize()
} }
else else
{ {
WindowDim.X = window.innerWidth; WindowDim.X = document.body.clientWidth;
WindowDim.Y = window.innerHeight; WindowDim.Y = window.innerHeight;
} }
var DimReduction = { var DimReduction = {
@ -3472,27 +3476,6 @@ ToggleView()
} }
else 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)) if(GridSizeIsSupported(Nav.GridSize))
{ {
Nav.Controls.View.textContent = "View: Grid"; Nav.Controls.View.textContent = "View: Grid";