makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-08 04:18:52 +00:00
Code Issues Projects Releases Packages Wiki Activity

[ticket/14438] Allign progressbar text to center

Browse source 
PHPBB3-14438
This commit is contained in:
Mate Bartus 2016-01-29 17:06:23 +01:00
parent 3a4dae369d
commit 43cdb35b84
2 changed files with 26 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
phpBB/adm/style/admin.css
View file

@ -2554,6 +2554,7 @@ fieldset.permissions .padding {
#progress-bar { #progress-bar {
position: relative; position: relative;
width: 90%; width: 90%;
text-align: center;
height: 25px; height: 25px;
margin: 20px auto; margin: 20px auto;
border: 1px solid #cecece; border: 1px solid #cecece;
@ -2563,10 +2564,7 @@ fieldset.permissions .padding {
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
text-align: center; color: #000;
line-height: 25px;
font-weight: bold;
color: #fff;
} }
#progress-bar #progress-bar-filler { #progress-bar #progress-bar-filler {
@ -2577,4 +2575,11 @@ fieldset.permissions .padding {
background-color: #3c84ad; background-color: #3c84ad;
width: 0; width: 0;
height: 25px; height: 25px;
overflow: hidden;
color: #fff;
}
#progress-bar p {
line-height: 25px;
font-weight: bold;
} }

22
phpBB/assets/javascript/installer.js
View file

@ -177,7 +177,7 @@
* @param progressObject * @param progressObject
*/ */
function setProgress(progressObject) { function setProgress(progressObject) {
var $statusText, $progressBar, $progressText, $progressFiller; var $statusText, $progressBar, $progressText, $progressFiller, $progressFillerText;
if (progressObject.task_name.length) { if (progressObject.task_name.length) {
if (!progressBarTriggered) { if (!progressBarTriggered) {
@ -189,18 +189,23 @@
$progressBar.attr('id', 'progress-bar'); $progressBar.attr('id', 'progress-bar');
$progressText = $('<p />'); $progressText = $('<p />');
$progressText.attr('id', 'progress-bar-text'); $progressText.attr('id', 'progress-bar-text');
$progressFiller = $('<span />'); $progressFiller = $('<div />');
$progressFiller.attr('id', 'progress-bar-filler'); $progressFiller.attr('id', 'progress-bar-filler');
$progressFiller.html($progressText); $progressFillerText = $('<p />');
$progressFillerText.attr('id', 'progress-bar-filler-text');
$statusText = $('<p />'); $statusText = $('<p />');
$statusText.attr('id', 'progress-status-text'); $statusText.attr('id', 'progress-status-text');
$progressFiller.append($progressFillerText);
$progressBar.append($progressText);
$progressBar.append($progressFiller); $progressBar.append($progressFiller);
$progressBarWrapper.append($statusText); $progressBarWrapper.append($statusText);
$progressBarWrapper.append($progressBar); $progressBarWrapper.append($progressBar);
$progressFillerText.css('width', $progressBar.width());
progressBarTriggered = true; progressBarTriggered = true;
} else if (progressObject.hasOwnProperty('restart')) { } else if (progressObject.hasOwnProperty('restart')) {
clearInterval(progressTimer); clearInterval(progressTimer);
@ -210,6 +215,7 @@
$statusText = $('#progress-status-text'); $statusText = $('#progress-status-text');
$progressText.text('0%'); $progressText.text('0%');
$progressFillerText.text('0%');
$progressFiller.css('width', '0%'); $progressFiller.css('width', '0%');
currentProgress = 0; currentProgress = 0;
@ -342,15 +348,20 @@
* *
* @param $progressText * @param $progressText
* @param $progressFiller * @param $progressFiller
* @param $progressFillerText
* @param progressLimit * @param progressLimit
*/ */
function incrementFiller($progressText, $progressFiller, progressLimit) { function incrementFiller($progressText, $progressFiller, $progressFillerText, progressLimit) {
if (currentProgress >= progressLimit || currentProgress >= 100) { if (currentProgress >= progressLimit || currentProgress >= 100) {
clearInterval(progressTimer); clearInterval(progressTimer);
return; return;
} }
var $progressBar = $('#progress-bar');
currentProgress++; currentProgress++;
$progressFillerText.css('width', $progressBar.width());
$progressFillerText.text(currentProgress + '%');
$progressText.text(currentProgress + '%'); $progressText.text(currentProgress + '%');
$progressFiller.css('width', currentProgress + '%'); $progressFiller.css('width', currentProgress + '%');
} }
@ -362,13 +373,14 @@
*/ */
function incrementProgressBar(progressLimit) { function incrementProgressBar(progressLimit) {
var $progressFiller = $('#progress-bar-filler'); var $progressFiller = $('#progress-bar-filler');
var $progressFillerText = $('#progress-bar-filler-text');
var $progressText = $('#progress-bar-text'); var $progressText = $('#progress-bar-text');
var progressStart = $progressFiller.width() / $progressFiller.offsetParent().width() * 100; var progressStart = $progressFiller.width() / $progressFiller.offsetParent().width() * 100;
currentProgress = Math.floor(progressStart); currentProgress = Math.floor(progressStart);
clearInterval(progressTimer); clearInterval(progressTimer);
progressTimer = setInterval(function() { progressTimer = setInterval(function() {
incrementFiller($progressText, $progressFiller, progressLimit); incrementFiller($progressText, $progressFiller, $progressFillerText, progressLimit);
}, 10); }, 10);
} }