Commit 0d335163 authored by Robert Ricci's avatar Robert Ricci
Browse files

Refactor user extend modal into rows

I think this will make it easier to make some of the changes I'm working
on
parent 32d9051a
<!-- This is the extend modal -->
<style>
#extend_usage {
text-align: center;
display: table;
}
#extend_usage a {
position: relative;
vertical-align: middle;
display: table-cell;
}
#extend_usage div {
vertical-align: middle;
display: table-cell;
}
</style>
<div id='extend_modal' class='modal fade'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-body'>
<button type='button' class='close' data-dismiss='modal'
aria-hidden='true'>&times;</button>
<div class='clearfix'></div>
<div class='row'>
<div class='col-sm-12'>
<form id='extend_request_form' role='form'>
<center>
<h4>Please select your extension duration:
<span id='extend_value'>1 day</span></h4>
</center>
<div id='extend_slider'></div>
<div class='row'>
<div class='col-lg-10 col-lg-offset-1
col-md-10 col-md-offset-1
col-sm-12 col-sm-offset-0
col-xs-12 col-xs-offset-0'>
<div id='extend_usage' class='hidden center-block'>
<a href='#' class='btn btn-xs' data-toggle='modal'
data-target='#myusage_modal'>
<span class='glyphicon glyphicon-question-sign'></span>
</a>
<div>
<span>Current Usage:</span>
<span id='current_usage' class='text-info'></span>
<span class='text-info'>Node Hours</span>
<br>
<span>Requesting:</span>
<span id='future_usage' class='text-info'></span>
<span class='text-info'>more Node Hours</span>
</div>
</div><br>
<div id='label0_request' data-minchars='120'>
<p>
Please provide a short explanation (a few sentences)
explaining why you need more time. Then click on the
request button.
</p>
</div>
<div id='label1_request' class='hidden' data-minchars='240'>
<p>
Please provide a short explanation (a few sentences)
explaining why you need more time. Then click on the
request button. The more <em>node hours</em> you
want, the more rationale we want to see. Small
experiments and/or small extension requests, are
typically approved very quickly, but if you want a
lot more node hours, then be sure to tell us a good
story.
</p>
</div>
<div id='label2_request' class='hidden' data-minchars='512'>
<p>
Please select a date and be sure to tell us in detail
why you need such a long extension; such long
extensions are rare and require approval from
the <em>resource management committee</em>. Be sure
to include a phone number where we can contact you to
discuss your extension. Then click on the request
button. You will receive email when your extension is
granted, but if you do not hear back in a day or two,
please contact us.
</p>
<center><input type='text' id='datepicker'
name='datepicker'
size=11
placeholder='MM/DD/YYYY'>
</center>
<br>
</div>
<div id='why_extend_div'>
<textarea id='why_extend'
class='form-control align-center-inline'
rows=5></textarea>
<span style="font:normal 11px sans-serif;color:#B00400;">
<span id='extend_counter_msg'>&nbsp</span>
</span>
</div>
</div>
</div>
<br>
<button class='btn btn-primary btn-sm align-center' disabled
id='request-extension'
type='submit' name='request'>Request Extension</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<form id='extend_request_form' role='form'>
<button type='button' class='close' data-dismiss='modal'
aria-hidden='true'>&times;</button>
<div class='clearfix'></div>
<div class='row'>
<div class='col-xs-12'>
<center>
<h4>Please select your extension duration:
<span id='extend_value'>1 day</span></h4>
</center>
</div> <!-- /col -->
</div> <!-- /row -->
<div class='row'>
<div class='col-xs-12'>
<div id='extend_slider'></div>
</div> <!-- /col -->
</div> <!-- /row -->
<div class='row'>
<div class='col-lg-10 col-lg-offset-1
col-md-10 col-md-offset-1
col-sm-12 col-sm-offset-0
col-xs-12 col-xs-offset-0'>
<a href='#' class='btn btn-xs' data-toggle='modal'
data-target='#myusage_modal'>
<span class='glyphicon glyphicon-question-sign'></span>
</a>
<div>
<span>Current Usage:</span>
<span id='current_usage' class='text-info'></span>
<span class='text-info'>Node Hours</span>
<br>
<span>Requesting:</span>
<span id='future_usage' class='text-info'></span>
<span class='text-info'>more Node Hours</span>
</div>
</div> <!-- /col -->
</div> <!-- /row -->
<div class='row'>
<div class='col-lg-10 col-lg-offset-1
col-md-10 col-md-offset-1
col-sm-12 col-sm-offset-0
col-xs-12 col-xs-offset-0'>
<div id='label0_request' data-minchars='120'>
<p>
Please provide a short explanation (a few sentences)
explaining why you need more time. Then click on the
request button.
</p>
</div> <!-- /#label0_request -->
<div id='label1_request' class='hidden' data-minchars='240'>
<p>
Please provide a short explanation (a few sentences)
explaining why you need more time. Then click on the
request button. The more <em>node hours</em> you
want, the more rationale we want to see. Small
experiments and/or small extension requests, are
typically approved very quickly, but if you want a
lot more node hours, then be sure to tell us a good
story.
</p>
</div> <!-- /#label1_request -->
<div id='label2_request' class='hidden' data-minchars='512'>
<p>
Please select a date and be sure to tell us in detail
why you need such a long extension; such long
extensions are rare and require approval from
the <em>resource management committee</em>. Be sure
to include a phone number where we can contact you to
discuss your extension. Then click on the request
button. You will receive email when your extension is
granted, but if you do not hear back in a day or two,
please contact us.
</p>
<center><input type='text' id='datepicker'
name='datepicker'
size=11
placeholder='MM/DD/YYYY'>
</center>
</div> <!-- /#label2_request -->
<div id='why_extend_div'>
<textarea id='why_extend'
class='form-control align-center-inline'
rows=5></textarea>
<span style="font:normal 11px sans-serif;color:#B00400;">
<span id='extend_counter_msg'>&nbsp</span>
</span>
</div> <!-- #why_extend_div -->
</div> <!-- /col -->
</div> <!-- /row -->
<div class='row'>
<div class='col-xs-6 col-xs-offset-3'>
<button class='btn btn-primary btn-sm align-center' disabled
id='request-extension'
type='submit' name='request'>Request Extension</button>
</div> <!-- /col -->
</div> <!-- /row -->
</form> <!-- #extend_request_form -->
</div> <!-- /modal-body -->
</div> <!-- /modal-content -->
</div> <!-- /modal-dialog -->
</div> <!-- /modal -->
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