Skip to content

GitLab

Commit 10081ebd authored by Jen Zajac's avatar Jen Zajac
Browse files

Iframe progress bars - styling 

  behatnotneeded

  Bug #1465107

Change-Id: I0e9cb0cb012360b9560810ac8ec7776d22637239
parent d8f6bed8
Hide whitespace changes
Inline Side-by-side
htdocs/lib/htmloutput.php
View file @ 10081ebd
......@@ -29,8 +29,8 @@ function print_export_head($stylesheets) {
</style>
</head>
<body>
<div style="width: 100%; background-color: #d4d4d4;" class="progress-bar"></div>
<p class="progress-text" style="color: #000000;"><?php echo get_string('Starting', 'export'); ?></p>
<div style="width: 100%; background-color: #d4d4d4; position: absolute; text-align: center; height: 40px; left: 0; top: 0;" class="progress-bar"></div>
<p class="progress-text" style="color: #000000; position: absolute; text-align: center; height: 40px; left: 0; top: 0; width:100%; margin-top:8px;"><?php echo get_string('Starting', 'export'); ?></p>
<?php
}
......@@ -44,17 +44,17 @@ function print_export_iframe_die($message, $link=null) {
function print_iframe_progress_handler($percent, $status) {
// "Erase" the current output with a new background div
echo '<div style="width: 100%; background-color: #d4d4d4;" class="progress-bar"></div>';
echo '<div style="width: 100%; background-color: #d4d4d4; position: absolute; text-align: center; height: 40px; left: 0; top: 0;" class="progress-bar"></div>';
// The progress bar itself
echo '<div class="progress-bar-progress" style="width: ' . intval($percent) . '%; background-color: #cff253;"></div>' . "\n";
echo '<div class="progress-bar-progress" style="width: ' . intval($percent) . '%; background-color: #cff253; position: absolute; text-align: center; height: 40px; left: 0; top: 0;"></div>' . "\n";
// The status text
echo '<p class="progress-text" style="color: #000000;">' . hsc($status) . "</p>\n";
echo '<p class="progress-text" style="color: #000000; position: absolute; text-align: center; height: 40px; left: 0; top: 0; width:100%; margin-top:8px;">' . hsc($status) . "</p>\n";
}
function print_export_footer($strexportgenerated, $continueurl, $continueurljs, $jsmessages=array(), $newlocation) {
?>
<script type="application/javascript">
document.write('<div class="progress-bar" style="width: 100%;"><p><?php echo $strexportgenerated . ' <a href="' . $continueurljs . '" target="_top">' . get_string('continue', 'export') . '</a>'; ?></p></div>');
document.write('<div class="progress-bar" style="width: 100%; background-color: #d4d4d4; color: #000; position: absolute; text-align: center; height: 40px; left: 0; top: 0;"><p style="margin-top:8px;"><?php echo $strexportgenerated . ' <a style="color:#111; text-decoration: underline;" href="' . $continueurljs . '" target="_top">' . get_string('continue', 'export') . '</a>'; ?></p></div>');
if (!window.opera) {
// Opera can't handle this for some reason - it vomits out the
// download inline in the iframe
......@@ -67,8 +67,8 @@ function print_export_footer($strexportgenerated, $continueurl, $continueurljs,
}
}
</script>
<div class="progress-bar" style="width: 100%;">
<p><?php echo $strexportgenerated . ' <a href="' . $continueurl . '" target="_top">' . get_string('clickheretodownload', 'export') . '</a>'; ?></p>
<div class="progress-bar" style="width: 100%; background-color: #d4d4d4; color: #000; position: absolute; text-align: center; height: 40px; left: 0; top: 0;">
<p style="margin-top:8px;"><?php echo $strexportgenerated . ' <a style="color:#111; text-decoration: underline;" href="' . $continueurl . '" target="_top">' . get_string('clickheretodownload', 'export') . '</a>'; ?></p>
</div>
</body>
</html>
......@@ -92,8 +92,8 @@ function print_extractprogress_head($stylesheets, $artefacts) {
</style>
</head>
<body>
<div style="width: 100%; background-color: #d4d4d4;" class="progress-bar"></div>
<p class="progress-text" style="color: #000000;"><?php echo get_string('unzipprogress', 'artefact.file', '0/' . $artefacts); ?></p>
<div style="width: 100%; background-color: #d4d4d4; position: absolute; text-align: center; height: 40px; left: 0; top: 0;" class="progress-bar"></div>
<p class="progress-text" style="color: #000000; left: 0; top: 0; position: absolute; text-align: center; width: 100%; margin-top:8px;"><?php echo get_string('unzipprogress', 'artefact.file', '0/' . $artefacts); ?></p>
<?php
}
......
htdocs/theme/raw/plugintype/artefact/file/templates/extract-progress.tpl
View file @ 10081ebd
{include file="header.tpl"}
<div id="extract">
<h3>{str tag=pleasewaitwhileyourfilesarebeingunzipped section=artefact.file}</h3>
<iframe src="{$WWWROOT}artefact/file/extract-progress.php" id="progress" scrolling="no" frameborder="none"></iframe>
<iframe src="{$WWWROOT}artefact/file/extract-progress.php" id="progress-iframe" scrolling="no" frameborder="none"></iframe>
</div>
{include file="footer.tpl"}
htdocs/theme/raw/sass/_custom.scss
View file @ 10081ebd
// Generic custom css (anything longer than a screen view should have its own component file)
#exportgeneration {
text-align: center;
}
#progress-iframe { // old style progress bars, e.g. portfolio export
border: 1px solid $gray;
height: 40px;
width: 100%;
max-width: 650px;
margin: 20px 0;
}
.task-item .link-block .icon {
margin-left: -8px; //correct alignment
}
......
htdocs/theme/raw/templates/admin/users/bulkdownload.tpl
View file @ 10081ebd
{include file="header.tpl"}
<div id="exportgeneration">
<h3>{str tag=pleasewaitwhileyourexportisbeinggenerated section=export}</h3>
<iframe src="{$WWWROOT}admin/users/bulkdownload.php" id="progress" scrolling="no" frameborder="none"></iframe>
<iframe src="{$WWWROOT}admin/users/bulkdownload.php" id="progress-iframe" scrolling="no" frameborder="none"></iframe>
</div>
{include file="footer.tpl"}
htdocs/theme/raw/templates/export/export.tpl
View file @ 10081ebd
{include file="header.tpl"}
<div id="exportgeneration">
<h3>{str tag=pleasewaitwhileyourexportisbeinggenerated section=export}</h3>
<iframe src="{$WWWROOT}export/download.php" id="progress" scrolling="no" frameborder="none"></iframe>
<iframe src="{$WWWROOT}export/download.php" id="progress-iframe" scrolling="no" frameborder="none"></iframe>
</div>
{include file="footer.tpl"}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment