Commit 9d0467b1 authored by Leigh Stoller's avatar Leigh Stoller Committed by Gary Wong

Convert to bootstrap V3.0, remove all UIKIT code.

parent c84848db
/* For the footer */
html, body, #bodycontainer { height: 100%; }
body > #bodycontainer { height: auto; min-height: 100%; }
#bodycontent { padding-bottom: 2.5em; }
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
#footer {
clear: both;
position: relative;
z-index: 10;
height: 2.5em;
margin-top: -2.5em;
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -2.5em;
/* Pad bottom by footer height */
padding: 0 0 2.5em;
}
#footer div {
font-size: 1.0em;
color: #ddd;
padding: 0.5em;
/* Set the fixed height of the footer here */
#footer {
clear: both;
font-size: 1.0em;
height: 2.5em;
padding: 0.5em;
color: #ddd;
background-color: #ff6600;
}
#footer #elabpower {
height: 1.0em;
}
/* Extra wide modal /*/
.uk-modal-dialog-wide {
/* So that containers have some top room */
.container {
margin-top: 15px; !important;
}
.modal-dialog {
width: 800px;
/* 3 */
}
.panel-body {
background-color: #f5f5f5;
}
margin-left: -200px;
/* 4 */
/* Helper */
.align-center {
display: block;
margin-left: auto;
margin-right: auto;
}
/* Styles for svg diagrams */
......
......@@ -25,7 +25,7 @@ chdir("..");
include("defs.php3");
include_once("osinfo_defs.php");
include_once("geni_defs.php");
chdir("apt");
chdir("aptb");
include("quickvm_sup.php");
#
......@@ -100,48 +100,46 @@ function SPITFORM($username, $email, $sshkey, $imageid, $newuser, $errors)
echo "<center><h2>$internal_error</h2></center><br>\n";
}
echo "<form id='quickvm_form' class='uk-form uk-form-stacked'
echo "<div class='row'>
<div class='col-lg-6 col-md-offset-3
col-md-6 col-md-offset-3
col-sm-8 col-md-offset-2
col-xs-10 col-md-offset-1'>\n";
echo "<form id='quickvm_form' role='form'
method='post' action='quickvm.php'>\n";
echo "<div class='uk-panel uk-panel-box uk-panel-header
uk-container-center uk-margin-bottom uk-width-1-3'>
<h3 class='uk-panel-title'><i class='uk-icon-laptop'></i>
Create an Experiment</h3>
<div class='uk-form-row'>
<div class='uk-form-controls'>
echo "<div class='panel panel-default'>
<div class='panel-heading'>
<h3 class='panel-title'>
Create an Experiment</h3></div>
<div class='panel-body'>
<div class='form-group'>
<input name='username' id='username'
value='$username_value'
class='uk-width-100'
class='form-control'
placeholder='$username_default' autofocus type='text'>
</div>
<label class='uk-form-label uk-text-small'
style='color: red'
<label style='color: red'
for='username'>$username_error</label>
</div>
<div class='uk-form-row'>
<div class='uk-form-controls'>
<input name='email' id='email'
<div class='form-group'>
<input name='email' id='email' type='text'
value='$email_value'
class='uk-width-100'
class='form-control'
placeholder='$email_default' type='text' />
</div>
<label class='uk-form-label uk-text-small'
<label
style='color: red'
for='email'>$email_error</label>
</div>
<div class='uk-form-row'>
<div class='uk-form-controls'>
<div class='form-group'>
<textarea id='sshkey' name='sshkey'
placeholder='$sshkey_default'
class='uk-width-100'
class='form-control'
rows=5 cols=45>$sshkey_value</textarea>
</div>
<label class='uk-form-label uk-text-small'
<label
style='color: red'
for='sshkey'>$sshkey_error</label>
</div>
<div class='uk-form-row'>
<div class='uk-form-controls'>
<select class='uk-align-left' name='imageid'>
<div class='form-group'>
<select class='pull-left' name='imageid'>
<option value=''>Select Profile</option>\n";
while (list ($id, $title) = each ($imageid_array)) {
$selected = "";
......@@ -152,41 +150,43 @@ function SPITFORM($username, $email, $sshkey, $imageid, $newuser, $errors)
echo "<option $selected value='$id'>$title </option>\n";
}
echo " </select>
</div>
<label class='uk-form-label uk-text-small'
<label
style='color: red'
for='imageid'>$imageid_error</label>
</div>
<div class='uk-form-row'>
<button class='uk-button uk-button-primary uk-button-mini
uk-align-left'
<button class='btn btn-primary pull-right'
type='submit' name='create'>Create!
</button>
<br>
<button class='btn btn-primary btn-xs pull-left'
type='button' name='reset'
onclick='formReset(); return false;'>
Reset Form</button>
<button class='uk-button uk-button-primary uk-align-right'
type='submit' name='create'>Create!
<i class='uk-icon-chevron-sign-right'></i></button>
</div>
</div>
</div>
</div>
</div>\n";
echo "<!-- This is the modal -->
<div id='working' class='uk-modal'>
<div class='uk-modal-dialog'>
<a class='uk-modal-close uk-close'></a>
<div class='uk-panel uk-panel-box'>
<h3 class='uk-panel-title'><span class='uk-text-warning'>
<i class='uk-icon-warning-sign'></i> Important</a></h3>
<div id='working' class='modal fade'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'
aria-hidden='true'>&times;</button>
<h3>Important</h3>
</div>
<div class='modal-body'>
<p>Check your email for a verification code, and
enter it here:</p>
<input name='verify'
class='uk-form-width-medium'
placeholder='Verification code'
autofocus type='text' />
<button class='uk-button uk-button-primary'
<button class='btn btn-primary'
type='submit' name='create'>
Create<i class='uk-icon-check-sign'>
</i></button>
</div>
Create</button>
</div>
</div>
</div>
</div>\n";
......
This diff is collapsed.
function ShowModal(which)
{
modal = new $.UIkit.modal.Modal(which);
modal.show();
console.log('Showing modal ' + which);
$( which ).modal('show');
}
function HideModal(which)
{
$( which ).hide();
console.log('Hide modal ' + which);
$( which ).modal('hide');
}
function CallMethod(method, callback, uuid, arg)
......@@ -71,9 +70,9 @@ function StatusWatchCallBack(uuid, json)
else if (status == 'ready') {
status_html = "<font color=green>ready</font>";
if ($("#quickvm_progress").length) {
$("#quickvm_progress").removeClass("uk-progress-striped");
$("#quickvm_progress").removeClass("uk-active");
$("#quickvm_progress").addClass("uk-progress-success");
$("#quickvm_progress").removeClass("progress-striped");
$("#quickvm_progress").removeClass("active");
$("#quickvm_progress").addClass("progress-bar-success");
$("#quickvm_progress_bar").width("100%");
}
$("#terminate_button").prop("disabled", false);
......@@ -84,9 +83,9 @@ function StatusWatchCallBack(uuid, json)
else if (status == 'failed') {
status_html = "<font color=red>failed</font>";
if ($("#quickvm_progress").length) {
$("#quickvm_progress").removeClass("uk-progress-striped");
$("#quickvm_progress").removeClass("uk-active");
$("#quickvm_progress").addClass("uk-progress-danger");
$("#quickvm_progress").removeClass("progress-striped");
$("#quickvm_progress").removeClass("active");
$("#quickvm_progress").addClass("progress-bar-danger");
$("#quickvm_progress_bar").width("100%");
}
}
......@@ -111,7 +110,7 @@ function Terminate(uuid, url)
}
$("#terminate_button").prop("disabled", true);
$("#extend_button").prop("disabled", true);
$('#terminate_modal').hide();
HideModal('#terminate_modal');
var $xmlthing = CallMethod("terminate", null, uuid, null);
$xmlthing.done(callback);
......@@ -142,8 +141,10 @@ function ShowTopoNew(uuid)
var topo = ConvertManifestToJSON(xml);
console.log(topo);
$("#showtopo_container").removeClass("uk-hidden");
maketopmap("#showtopo_div", 700, 400, topo);
$("#showtopo_container").removeClass("invisible");
maketopmap("#showtopo_div",
$("#showtopo_div").width() - 30,
300, topo);
}
console.log(uuid);
......@@ -199,7 +200,7 @@ function RequestExtension(uuid)
StartCountdownClock.reset = json.value;
}
var $xmlthing = CallMethod("request_extension", null, uuid, reason);
$('#extend_modal').hide();
HideModal('#extend_modal');
$xmlthing.done(callback);
}
......@@ -214,7 +215,7 @@ function Extend(uuid)
console.log(json.value);
}
var $xmlthing = CallMethod("extend", null, uuid, code);
$('#extend_modal').hide();
HideModal('#extend_modal');
$xmlthing.done(callback);
}
......@@ -223,7 +224,7 @@ function Extend(uuid)
//
function RegisterAccount(uid, email)
{
$('#register_modal').hide();
HideModal('#register_modal');
var url = "../newproject.php3?uid=" + uid + "&email=" + email + "";
var win = window.open(url, '_blank');
win.focus();
......@@ -234,6 +235,11 @@ var gateone_location = null;
function InitQuickVM(uuid, location, auth_object)
{
// This activates the popover subsystem.
$('[data-toggle="popover"]').popover({
trigger: 'hover',
'placement': 'top'
});
gateone_authobject = auth_object;
gateone_location = location;
GetStatus(uuid);
......@@ -391,14 +397,15 @@ function maketopmap(divname, width, height, json)
function dragmove(d, i) {
d.px += d3.event.dx;
d.py += d3.event.dy;
d.x += d3.event.dx;
d.y += d3.event.dy;
d.x += d3.event.dx;
d.y += d3.event.dy;
// this is the key to make it work together with updating
// both px,py,x,y on d !
tick();
}
function dragend(d, i) {
console.log(d);
// of course set the node to fixed so the force doesn't
// include the node in its auto positioning stuff
d.fixed = true;
......@@ -415,12 +422,12 @@ function maketopmap(divname, width, height, json)
var node = nodea.append("svg:rect")
.attr("class", "nodebox")
.attr("x", "-8px")
.attr("y", "-8px")
.attr("x", "-10px")
.attr("y", "-10px")
.attr("width", "20px")
.attr("height", "20px");
nodeg.append("svg:text")
var nodelabel = nodeg.append("svg:text")
.attr("class", "nodetext")
.attr("dx", 16)
.attr("dy", ".35em")
......@@ -444,8 +451,8 @@ function maketopmap(divname, width, height, json)
}
else {
nodeg.attr("transform", function(d) {
d.x = Math.max(10, Math.min(width - 10, d.x));
d.y = Math.max(10, Math.min(height - 10, d.y));
d.px = d.x = Math.max(12, Math.min(width - 12, d.x));
d.py = d.y = Math.max(12, Math.min(height - 12, d.y));
return "translate(" + d.x + "," + d.y + ")"; });
}
link.attr("x1", function(d) { return d.source.x; })
......
......@@ -28,24 +28,22 @@ function SPITHEADER($thinheader = 0)
echo "<html>
<head>
<title>AptLab</title>
<!-- UIKit -->
<link rel='stylesheet' href='uikit/css/uikit.almost-flat.css'>
<link rel='stylesheet' href='bootstrap/css/bootstrap.css'>
<link rel='stylesheet' href='quickvm.css'>
<script src='quickvm_sup.js'></script>
<script src='/emulab_sup.js'></script>
<script src='https://code.jquery.com/jquery.js'></script>
<script src='uikit/js/uikit.js'></script>
<script src='d3.v3.js'></script>
<script src='bootstrap/js/bootstrap.js'></script>
</head>
<body>
<!-- Container for body, needed for sticky footer -->
<div id='bodycontainer'>
<div id='bodycontent'>
<div class='uk-width-100 uk-container-center'
style='background-color: #ff6600'>
<img class='uk-align-center' style='width: ${height}px'
src='aptlogo.png'/>
</div>\n";
<div id='wrap'>
<div style='background-color: #ff6600'>
<img class='align-center' style='width: ${height}px'
src='aptlogo.png'/>
</div>
<!-- Page content -->
<div class='container'>\n";
}
......@@ -54,12 +52,14 @@ function SPITFOOTER()
echo "</div>
</div>
<!--- Footer -->
<div id='footer' class='uk-width-100' style='background-color: #ff6600;'>
<div class='uk-align-left'>Powered by
<div>
<div id='footer'>
<div class='pull-left'>Powered by
<img src='emulab-whiteout.png' id='elabpower'></div>
<div class='uk-align-right'>&copy; 2013 The University of Utah</div>
</div>
<div class='pull-right'>&copy; 2013 The University of Utah</div>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
</body></html>\n";
}
......@@ -89,8 +89,10 @@ function SPITAJAX_ERROR($code, $msg)
#
function SpitToolTip($info)
{
echo "<span data-uk-tooltip class='uk-icon-info-sign' ".
"title='$info'></span>";
echo "<a href='#' class='btn btn-xs' data-toggle='popover' ".
"data-content='$info'> ".
"<span class='glyphicon glyphicon-question-sign'></span> ".
"</a>\n";
}
function GateOneAuthObject($uid)
......
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