Made "spinner" consistent in every display theme

This commit is contained in:
bergware
2018-03-22 11:38:49 +01:00
parent 5367943166
commit 12d8d2caaf
19 changed files with 79 additions and 43 deletions
+1 -1
View File
@@ -33,6 +33,6 @@ $(function(){
</script>
<table class="indexer tablesorter">
<thead><tr><th>Type</th><th class='sorter-text'>Name</th><th>Size</th><th>Last Modified</th><th>Location</th></tr></thead>
<tbody><tr><td colspan="5" style="text-align:center;padding:24px"><i class='fa fa-circle-o-notch fa-spin fa-3x fa-fw'></i></td></tr></tbody>
<tbody><tr><td colspan="5"><div class="spinner"></div></td></tr></tbody>
</table>
<input type="button" value="Done" onclick="done('Browse')">
+1 -1
View File
@@ -24,7 +24,7 @@ $(function() {
</script>
<table class='share_status small'>
<thead><td style="width:40px">#</td><td>Attribute Name</td><td>Flag</td><td>Value</td><td>Worst</td><td>Threshold</td><td>Type</td><td>Updated</td><td>Failed</td><td style="width:145px">Raw Value</td></thead>
<tbody id="disk_attributes"><tr><td colspan='10' style='text-align:center;padding:24px'><i class='fa fa-circle-o-notch fa-spin fa-3x fa-fw'></i></td></tr></tbody>
<tbody id="disk_attributes"><tr><td colspan='10'><div class="spinner"></div></td></tr></tbody>
</table>
<input type="button" value="Done" onclick="done()">
+1 -1
View File
@@ -24,7 +24,7 @@ $(function() {
</script>
<table class='share_status small'>
<thead><td style="width:33%">Feature</td><td>Value</td><td>Information</td></thead>
<tbody id="disk_capabilities"><tr><td colspan='3' style='text-align:center;padding:24px'><i class='fa fa-circle-o-notch fa-spin fa-3x fa-fw'></i></td></tr></tbody>
<tbody id="disk_capabilities"><tr><td colspan='3'><div class="spinner"></div></td></tr></tbody>
</table>
<input type="button" value="Done" onclick="done()">
+1 -1
View File
@@ -32,7 +32,7 @@ $(function() {
<table class='share_status small'>
<thead><td style="width:33%">Title</td><td>Information</td></thead>
<tbody id="disk_identify"><tr><td colspan='2' style='text-align:center;padding:24px'><i class='fa fa-circle-o-notch fa-spin fa-3x fa-fw'></i></td></tr></tbody>
<tbody id="disk_identify"><tr><td colspan='2'><div class="spinner"></div></td></tr></tbody>
</table>
<input type="button" value="Done" onclick="done()">
+1 -1
View File
@@ -19,7 +19,7 @@ Cond="$var['fsState']!='Stopped' && $var['shareDisk']!='no'"
function displayDisks(all) {
if (all == 'yes') {
$.cookie('ssz','ssz',{path:'/'});
$('#disk_list').html("<tr><td colspan='8' style='text-align:center;padding:24px'><i class='fa fa-circle-o-notch fa-spin fa-3x fa-fw'></i></td></tr>");
$('#disk_list').html("<tr><td colspan='8'><div class='spinner'></div></td></tr>");
}
$.get('/webGui/include/DiskList.php',{compute:all,path:'<?=$path?>',scale:'<?=$display['scale']?>',number:'<?=$display['number']?>',fill:$.cookie('ssz')},function(data){
$.removeCookie('ssz',{path:'/'})
+1 -1
View File
@@ -81,6 +81,6 @@ $(function(){
</script>
<table class="tablesorter left shift" id="archive_table">
<thead><tr><th>Time</th><th>Event</th><th>Subject</th><th>Description</th><th>Importance</th><th><?if ($files):?><a href="#" onclick="askConfirmation();return false" title="Delete all notifications"><i class="fa fa-trash"></i></a><?endif;?></th></tr></thead>
<tbody id="archive_list"><tr><td></td><td colspan="4" style="text-align:center;padding:24px"><i class='fa fa-circle-o-notch fa-spin fa-3x fa-fw'></i></td><td></td></tr></tbody>
<tbody id="archive_list"><tr><td></td><td colspan="4"><div class="spinner"></div></td><td></td></tr></tbody>
</table>
<input type="button" value="Done" onclick="done()">
+4 -4
View File
@@ -3,8 +3,8 @@ Title="Management Access"
Tag="expeditedssl"
---
<?PHP
/* Copyright 2005-2017, Lime Technology
* Copyright 2012-2017, Bergware International.
/* Copyright 2005-2018, Lime Technology
* Copyright 2012-2018, Bergware International.
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License version 2,
@@ -52,7 +52,7 @@ $tasks = find_tasks();
<script>
function provisionSSL(button) {
var oldlabel = $.trim($(button).text());
$(button).prop("disabled", true).html("<i class=\"fa fa-circle-o-notch fa-spin\" aria-hidden=\"true\"></i> "+oldlabel+"ing");
$(button).prop("disabled", true).html("<i class='fa fa-circle-o-notch fa-spin fa-fw'></i> "+oldlabel+"ing");
var msg = "Your Let's Encrypt SSL Certificate has been provisioned and a DNS record for local IP address <?=$internalip?> has been created on unraid.net.";
var failure = function(data) {
var status = data.status;
@@ -86,7 +86,7 @@ function provisionSSL(button) {
$.post("/webGui/include/ProvisionCert.php",success_provision).fail(failure);
}
function updateDNS(button) {
$(button).prop("disabled", true).html("<i class=\"fa fa-circle-o-notch fa-spin\" aria-hidden=\"true\"></i> Updating DNS");
$(button).prop("disabled", true).html("<i class='fa fa-circle-o-notch fa-spin fa-fw'></i> Updating DNS");
var failure = function(data) {
var status = data.status;
var obj = data.responseJSON;
+1 -1
View File
@@ -72,7 +72,7 @@ SMART extended self-test:
> This feature is only available when the disk is in active mode.
Last SMART test result:
: <span id="test_result"><i class='fa fa-circle-o-notch fa-spin fa-3x fa-fw'></i></span>
: <span id="test_result"><i class='fa fa-circle-o-notch fa-spin fa-fw'></i></span>
> When no test is running it will show here the latest obtained self-test result (if available).
> Otherwise a progress indicator (percentage value) is shown for a running test.
+4 -4
View File
@@ -37,19 +37,19 @@ $(function(){
<p class="notice">Warning: Your system has booted with the PCIe ACS Override setting enabled. The below list doesn't not reflect the way IOMMU would naturally group devices. To see natural IOMMU groups for your hardware, go to the <b><a href="/Settings/VMSettings">VM Settings</a></b> page and set the <b>PCIe ACS Override</b> setting to <b>No</b>.</p>
<?endif;?>
<pre><table id='t1' class='pre'><tr><td><i class='fa fa-circle-o-notch fa-spin fa-3x fa-fw'></i></td></tr></table></pre><br>
<pre><table id='t1' class='pre'><tr><td><div class="spinner"></div></td></tr></table></pre><br>
**CPU Thread Pairings**
> This displays a list of CPU thread pairings.
<pre><table id='t2' class='pre'><tr><td><i class='fa fa-circle-o-notch fa-spin fa-3x fa-fw'></i></td></tr></table></pre><br>
<pre><table id='t2' class='pre'><tr><td><div class="spinner"></div></td></tr></table></pre><br>
**USB Devices**
> This displays the output of the `lsusb` command. The numeric identifiers are used to configure PCI pass-through.
<pre><table id='t3' class='pre'><tr><td><i class='fa fa-circle-o-notch fa-spin fa-3x fa-fw'></i></td></tr></table></pre><br>
<pre><table id='t3' class='pre'><tr><td><div class="spinner"></div></td></tr></table></pre><br>
**SCSI Devices**
@@ -57,5 +57,5 @@ $(function(){
>
> Note that linux groups ATA, SATA and SAS devices with true SCSI devices.
<pre><table id='t4' class='pre'><tr><td><i class='fa fa-circle-o-notch fa-spin fa-3x fa-fw'></i></td></tr></table></pre>
<pre><table id='t4' class='pre'><tr><td><div class="spinner"></div></td></tr></table></pre>
<input type="button" value="Done" onclick="done()">
+12
View File
@@ -240,6 +240,18 @@ div.vmtemplate:hover{background-color:#EDEAEF}
div.vmtemplate{height:120px;width:120px;border:1px solid #F3F0F4}
div.vmtemplate img{margin-top:20px}
div.up{margin-top:-20px;border:1px solid #F3F0F4;padding:4px 6px;overflow:auto}
div.spinner{height:32px;width:32px;margin:24px auto;
-webkit-animation: rotation .6s infinite linear;
-moz-animation: rotation .6s infinite linear;
-o-animation: rotation .6s infinite linear;
animation: rotation .6s infinite linear;
border-left:6px solid rgba(0,174,239,.15);
border-right:6px solid rgba(0,174,239,.15);
border-bottom:6px solid rgba(0,174,239,.15);
border-top:6px solid rgba(0,174,239,.8);
border-radius:100%;}
div.spinner.fixed{position:absolute;left:47%;top:40px}
div.spinner.hide{display:none}
pre.up{margin-top:0}
pre{border:1px solid #F3F0F4;font-family:bitstream;font-size:12px;padding:0;overflow:auto;margin-bottom:10px;padding:10px}
iframe#progressFrame{position:fixed;bottom:32px;left:60px;margin:0;padding:8px 8px 0 8px;width:100%;height:12px;line-height:12px;border-style:none;overflow:hidden;font-family:bitstream;font-size:11px;color:#808080;white-space:nowrap;z-index:-2}
+12
View File
@@ -224,6 +224,18 @@ div.Panel i.PanelIcon{font-size:48px}
div.user-list{float:left;padding:10px;margin-right:10px;margin-bottom:24px;border:1px solid #202020;border-radius:5px;line-height:20px;height:100px;width:100px;background:-webkit-radial-gradient(#303030,#101010);background:linear-gradient(#303030,#101010)}
div.user-list img{width:auto;max-width:48px;height:48px;margin-bottom:16px}
div.up{margin-top:-20px;border:1px solid #202020;padding:4px 6px;overflow:auto}
div.spinner{height:32px;width:32px;margin:24px auto;
-webkit-animation: rotation .6s infinite linear;
-moz-animation: rotation .6s infinite linear;
-o-animation: rotation .6s infinite linear;
animation: rotation .6s infinite linear;
border-left:6px solid rgba(0,174,239,.15);
border-right:6px solid rgba(0,174,239,.15);
border-bottom:6px solid rgba(0,174,239,.15);
border-top:6px solid rgba(0,174,239,.8);
border-radius:100%;}
div.spinner.fixed{position:absolute;left:47%;top:12px}
div.spinner.hide{display:none}
pre.up{margin-top:-20px}
pre{border:1px solid #202020;font-family:bitstream;padding:4px 6px;overflow:auto}
iframe#progressFrame{position:fixed;bottom:32px;left:0;margin:0;padding:8px 8px 0 8px;width:100%;height:12px;line-height:12px;border-style:none;overflow:hidden;font-family:bitstream;font-size:11px;color:#808080;white-space:nowrap;z-index:-10}
+5 -1
View File
@@ -11,4 +11,8 @@ src:url('bitstream.eot');src:url('bitstream.eot?#iefix') format('embedded-openty
@font-face{font-family:docker-icon;font-weight:normal;font-style:normal;
src:url('docker-icon.eot');src:url('docker-icon.eot?#iefix') format('embedded-opentype'),url('docker-icon.woff') format('woff'),url('docker-icon.ttf') format('truetype'),url('docker-icon.svg#docker-icon') format('svg')}
[data-icon]:before{content:attr(data-icon)}
[data-icon]:before,.fa-docker:before{font-family:docker-icon;content:'\f100'}
[data-icon]:before,.fa-docker:before{font-family:docker-icon;content:'\f100'}
@-webkit-keyframes rotation{from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);}}
@-moz-keyframes rotation{from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(359deg);}}
@-o-keyframes rotation{from {-o-transform: rotate(0deg);} to {-o-transform: rotate(359deg);}}
@keyframes rotation{from {transform: rotate(0deg);} to {transform: rotate(359deg);}}
+12
View File
@@ -240,6 +240,18 @@ div.vmtemplate:hover{background-color:#121510}
div.vmtemplate{height:120px;width:120px;border:1px solid #0C0F0B}
div.vmtemplate img{margin-top:20px}
div.up{margin-top:-20px;border:1px solid #0C0F0B;padding:4px 6px;overflow:auto}
div.spinner{height:32px;width:32px;margin:24px auto;
-webkit-animation: rotation .6s infinite linear;
-moz-animation: rotation .6s infinite linear;
-o-animation: rotation .6s infinite linear;
animation: rotation .6s infinite linear;
border-left:6px solid rgba(0,174,239,.15);
border-right:6px solid rgba(0,174,239,.15);
border-bottom:6px solid rgba(0,174,239,.15);
border-top:6px solid rgba(0,174,239,.8);
border-radius:100%;}
div.spinner.fixed{position:absolute;left:47%;top:40px}
div.spinner.hide{display:none}
pre.up{margin-top:0}
pre{border:1px solid #0C0F0B;font-family:bitstream;font-size:12px;padding:0;overflow:auto;margin-bottom:10px;padding:10px}
iframe#progressFrame{position:fixed;bottom:32px;left:60px;margin:0;padding:8px 8px 0 8px;width:100%;height:12px;line-height:12px;border-style:none;overflow:hidden;font-family:bitstream;font-size:11px;color:#808080;white-space:nowrap;z-index:-2}
+12
View File
@@ -224,6 +224,18 @@ div.Panel i.PanelIcon{font-size:48px}
div.user-list{float:left;padding:10px;margin-right:10px;margin-bottom:24px;border:1px solid #D0D0D0;border-radius:5px;line-height:20px;height:100px;width:100px;background:-webkit-radial-gradient(#B0B0B0,#F0F0F0);background:linear-gradient(#B0B0B0,#F0F0F0)}
div.user-list img{width:auto;max-width:48px;height:48px;margin-bottom:16px}
div.up{margin-top:-20px;border:1px solid #D0D0D0;padding:4px 6px;overflow:auto}
div.spinner{height:32px;width:32px;margin:24px auto;
-webkit-animation: rotation .6s infinite linear;
-moz-animation: rotation .6s infinite linear;
-o-animation: rotation .6s infinite linear;
animation: rotation .6s infinite linear;
border-left:6px solid rgba(0,174,239,.15);
border-right:6px solid rgba(0,174,239,.15);
border-bottom:6px solid rgba(0,174,239,.15);
border-top:6px solid rgba(0,174,239,.8);
border-radius:100%;}
div.spinner.fixed{position:absolute;left:47%;top:12px}
div.spinner.hide{display:none}
pre.up{margin-top:-20px}
pre{border:1px solid #D0D0D0;font-family:bitstream;padding:4px 6px;overflow:auto}
iframe#progressFrame{position:fixed;bottom:32px;left:0;margin:0;padding:8px 8px 0 8px;width:100%;height:12px;line-height:12px;border-style:none;overflow:hidden;font-family:bitstream;font-size:11px;color:#808080;white-space:nowrap;z-index:-10}