mirror of
https://github.com/tuna/mirror-web.git
synced 2025-12-25 20:32:46 +00:00
Rolling with CSS
This commit is contained in:
Liu Xiaoyi
parent
fe8111e4f3
commit
9f4f7bd9cc
|
|
@ -446,3 +446,54 @@ body {
|
|||
display: none;
|
||||
}
|
||||
|
||||
|
||||
// Scrolling columns in status page
|
||||
.tuna-roll {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
> div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
|
||||
animation-timing-function: ease;
|
||||
animation-duration: .2s;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
@keyframes tuna-roll-enter {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tuna-roll-leave {
|
||||
0% {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 to 7 {
|
||||
&[data-tuna-roll-cur="#{$i}"] {
|
||||
> * {
|
||||
animation-name: tuna-roll-leave;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
> [data-tuna-roll-seq~="#{$i}"] {
|
||||
animation-name: tuna-roll-enter;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,53 +1,43 @@
|
|||
---
|
||||
---
|
||||
$(document).ready(() => {
|
||||
function readableFileSize(size) {
|
||||
var units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||
var i = 0;
|
||||
while(size >= 1024) {
|
||||
size /= 1024;
|
||||
++i;
|
||||
}
|
||||
return size.toFixed(1) + ' ' + units[i];
|
||||
}
|
||||
$.get("/static/status/disk.json", (d) => {
|
||||
var used_percent = Math.round(d.used_kb * 100 / d.total_kb);
|
||||
$('#disk-usage-bar')
|
||||
.attr("aria-valuenow", used_percent)
|
||||
.css("width", used_percent + "%")
|
||||
.html("<strong>" + readableFileSize(d.used_kb * 1024) + " / " + readableFileSize(d.total_kb * 1024) + "</strong>");
|
||||
});
|
||||
var step = 0;
|
||||
var resetToZeroHandler = function(e){
|
||||
var $this = $(this);
|
||||
$this.addClass('notrans').css("transform", "translateY(0)");
|
||||
$this.off('transitioncancel.reset');
|
||||
setTimeout(function(){
|
||||
$this.removeClass('notrans');
|
||||
}, 0);
|
||||
}
|
||||
var clearResetHandler = function(e){
|
||||
var $this = $(this);
|
||||
$this.off('transitionend.reset')
|
||||
}
|
||||
setInterval(function(){
|
||||
if($('#mirror-list .hidden-md:not(.hidden-xs):not(.hidden-sm)').css('display') != 'none'){
|
||||
return;
|
||||
}
|
||||
step += 1;
|
||||
var $objs = $('tr:not(:hover):not(:active) > td[class*="rolling-"] > div');
|
||||
$objs.each(function(){
|
||||
var $this = $(this);
|
||||
var index = $this.children('div[data-tuna-roll-seq~="'+step+'"]').index();
|
||||
if(index == -1){
|
||||
return;
|
||||
}
|
||||
$this.css("transform", `translateY(-${index * 100}%)`);
|
||||
});
|
||||
step %= 6;
|
||||
if(step == 0){
|
||||
$objs.one('transitionend.reset', resetToZeroHandler);
|
||||
$objs.one('transitioncancel.reset', clearResetHandler);
|
||||
}
|
||||
}, 2500);
|
||||
function readableFileSize(size) {
|
||||
var units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||
var i = 0;
|
||||
while(size >= 1024) {
|
||||
size /= 1024;
|
||||
++i;
|
||||
}
|
||||
return size.toFixed(1) + ' ' + units[i];
|
||||
}
|
||||
$.get("/static/status/disk.json", (d) => {
|
||||
var used_percent = Math.round(d.used_kb * 100 / d.total_kb);
|
||||
$('#disk-usage-bar')
|
||||
.attr("aria-valuenow", used_percent)
|
||||
.css("width", used_percent + "%")
|
||||
.html("<strong>" + readableFileSize(d.used_kb * 1024) + " / " + readableFileSize(d.total_kb * 1024) + "</strong>");
|
||||
});
|
||||
|
||||
kickstartScroll();
|
||||
});
|
||||
|
||||
// Scrolling
|
||||
|
||||
const SCROLL_INTERVAL = 1000;
|
||||
function kickstartScroll() {
|
||||
console.log('Scroll start...');
|
||||
setInterval(doScroll, SCROLL_INTERVAL);
|
||||
}
|
||||
|
||||
function doScroll() {
|
||||
const targets = $('#mirror-list .row:not(:hover) .tuna-roll');
|
||||
targets.each(function() {
|
||||
const target = $(this);
|
||||
const cur = parseInt(target.attr('data-tuna-roll-cur'), 10);
|
||||
const max = parseInt(target.attr('data-tuna-roll-max'), 10);
|
||||
let next = cur + 1;
|
||||
if(next > max) next = 0;
|
||||
|
||||
target.attr('data-tuna-roll-cur', next);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
12
status.html
12
status.html
|
|
@ -59,15 +59,15 @@ permalink: /status/
|
|||
<td class="col-xs-8 hidden-md hidden-lg" v-else>Syncing Now</td>
|
||||
<td class="hidden-xs hidden-sm hidden-md hidden-lg"></td>
|
||||
<td class="col-md-2 col-xs-3 rolling-3 text-left-md text-right-xs hidden-xs hidden-sm">
|
||||
<div>
|
||||
<div class="tuna-roll" data-tuna-roll-cur="0" data-tuna-roll-max="6">
|
||||
<template v-if="mir.last_ended_ts == mir.last_update_ts">
|
||||
<div data-tuna-roll-seq="0 1 2 3">Last Successful Sync</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div data-tuna-roll-seq="0">Last Successful Sync</div>
|
||||
<div data-tuna-roll-seq="1">Last Attempted Sync</div>
|
||||
<div data-tuna-roll-seq="2">Last Successful Sync</div>
|
||||
<div data-tuna-roll-seq="3">Last Attempted Sync</div>
|
||||
<div data-tuna-roll-seq="0">Last Successful Sync</div>
|
||||
<div data-tuna-roll-seq="1">Last Attempted Sync</div>
|
||||
<div data-tuna-roll-seq="2">Last Successful Sync</div>
|
||||
<div data-tuna-roll-seq="3">Last Attempted Sync</div>
|
||||
</template>
|
||||
<div data-tuna-roll-seq="4 5">Next Scheduled Sync</div>
|
||||
<div data-tuna-roll-seq=6>Last Successful Sync</div>
|
||||
|
|
@ -75,7 +75,7 @@ permalink: /status/
|
|||
</td>
|
||||
<td class="hidden-xs hidden-sm hidden-md hidden-lg"></td>
|
||||
<td class="col-md-2 col-xs-5 rolling-6 hidden-xs hidden-sm">
|
||||
<div>
|
||||
<div class="tuna-roll" data-tuna-roll-cur="0" data-tuna-roll-max="6">
|
||||
<template v-if="mir.last_ended_ts == mir.last_update_ts">
|
||||
<div data-tuna-roll-seq="0 1">{{mir.last_update}}</div>
|
||||
<div data-tuna-roll-seq="2 3">{{mir.last_update_ago}}</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue