mirror of
https://github.com/morris/vanilla-todo.git
synced 2025-08-21 13:21:29 +02:00
styling, improve fps
This commit is contained in:
@@ -2,6 +2,7 @@
|
|||||||
window.VT = window.VT || {};
|
window.VT = window.VT || {};
|
||||||
|
|
||||||
VT.AppFps = function (el) {
|
VT.AppFps = function (el) {
|
||||||
|
var sampleSize = 20;
|
||||||
var times = [];
|
var times = [];
|
||||||
|
|
||||||
tick();
|
tick();
|
||||||
@@ -11,20 +12,20 @@ VT.AppFps = function (el) {
|
|||||||
|
|
||||||
times.push(performance.now());
|
times.push(performance.now());
|
||||||
|
|
||||||
if (times.length < 60) return;
|
if (times.length <= sampleSize) return;
|
||||||
|
|
||||||
var min = Infinity;
|
var min = Infinity;
|
||||||
var max = 0;
|
var max = 0;
|
||||||
var sum = 0;
|
var sum = 0;
|
||||||
|
|
||||||
for (var i = 1; i < 60; ++i) {
|
for (var i = 1; i < sampleSize + 1; ++i) {
|
||||||
var delta = times[i] - times[i - 1];
|
var delta = times[i] - times[i - 1];
|
||||||
min = Math.min(min, delta);
|
min = Math.min(min, delta);
|
||||||
max = Math.max(max, delta);
|
max = Math.max(max, delta);
|
||||||
sum += delta;
|
sum += delta;
|
||||||
}
|
}
|
||||||
|
|
||||||
var fps = (60 / sum) * 1000;
|
var fps = (sampleSize / sum) * 1000;
|
||||||
|
|
||||||
el.innerText =
|
el.innerText =
|
||||||
fps.toFixed(0) +
|
fps.toFixed(0) +
|
||||||
|
@@ -27,7 +27,7 @@ VT.TodoApp = function (el) {
|
|||||||
' <p>',
|
' <p>',
|
||||||
' VANILLA TODO © 2020 <a href="https://morrisbrodersen.de">Morris Brodersen</a>',
|
' VANILLA TODO © 2020 <a href="https://morrisbrodersen.de">Morris Brodersen</a>',
|
||||||
' — A case study on viable techniques for vanilla web development.',
|
' — A case study on viable techniques for vanilla web development.',
|
||||||
' <a href="https://github.com/morris/vanilla-todo">About</a>',
|
' <a href="https://github.com/morris/vanilla-todo">About →</a>',
|
||||||
' </p>',
|
' </p>',
|
||||||
'</footer>',
|
'</footer>',
|
||||||
].join('\n');
|
].join('\n');
|
||||||
|
@@ -119,7 +119,7 @@ VT.TodoFrameCustom = function (el) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function updateHeight() {
|
function updateHeight() {
|
||||||
var height = 400;
|
var height = 280;
|
||||||
var container = el.querySelector('.container');
|
var container = el.querySelector('.container');
|
||||||
|
|
||||||
var i, l;
|
var i, l;
|
||||||
|
@@ -96,7 +96,7 @@ VT.TodoFrameDays = function (el) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function updateHeight() {
|
function updateHeight() {
|
||||||
var height = 400;
|
var height = 280;
|
||||||
var container = el.querySelector('.container');
|
var container = el.querySelector('.container');
|
||||||
|
|
||||||
for (var i = 0, l = container.children.length; i < l; ++i) {
|
for (var i = 0, l = container.children.length; i < l; ++i) {
|
||||||
|
@@ -6,6 +6,10 @@
|
|||||||
background: #eee;
|
background: #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.app-collapsible > .bar > .app-button:active {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.app-collapsible > .body {
|
.app-collapsible > .body {
|
||||||
transition: height 0.2s ease-out;
|
transition: height 0.2s ease-out;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@@ -5,6 +5,10 @@
|
|||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.app-footer a {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
.app-footer > p {
|
.app-footer > p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
@@ -1,5 +1,5 @@
|
|||||||
.app-header {
|
.app-header {
|
||||||
background: #249;
|
background: #001f3f;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -26,7 +26,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.todo-day.-today > .header > .dayofweek {
|
.todo-day.-today > .header > .dayofweek {
|
||||||
color: #c22;
|
color: #85144b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-day.-today > .header > .date {
|
.todo-day.-today > .header > .date {
|
||||||
|
Reference in New Issue
Block a user