1
0
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:
Morris Brodersen
2020-10-21 14:04:40 +02:00
parent 4dc6ac879d
commit 00f5323541
8 changed files with 17 additions and 8 deletions

View File

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

View File

@@ -27,7 +27,7 @@ VT.TodoApp = function (el) {
' <p>', ' <p>',
' VANILLA TODO &copy 2020 <a href="https://morrisbrodersen.de">Morris Brodersen</a>', ' VANILLA TODO &copy 2020 <a href="https://morrisbrodersen.de">Morris Brodersen</a>',
' &mdash; A case study on viable techniques for vanilla web development.', ' &mdash; 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');

View File

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

View File

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

View File

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

View File

@@ -5,6 +5,10 @@
color: #999; color: #999;
} }
.app-footer a {
color: #999;
}
.app-footer > p { .app-footer > p {
margin: 0; margin: 0;
} }

View File

@@ -1,5 +1,5 @@
.app-header { .app-header {
background: #249; background: #001f3f;
padding: 10px 20px; padding: 10px 20px;
} }

View File

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