jupyter/spawner
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update interactive form buttons style

Browse source
This commit is contained in:
Benoît Seignovert 2024-01-31 11:20:56 +01:00
parent 7520831c25
commit 1d1db793b9
Signed by: Benoît Seignovert
GPG key ID: F5D8895227D18A0B
1 changed files with 36 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
src/glicid_spawner/templates/interactive.html
View file

@ -19,13 +19,13 @@
<label for="cpu" class="col-sm-3 control-label">CPU:</label> <label for="cpu" class="col-sm-3 control-label">CPU:</label>
<div class="col-sm-9"> <div class="col-sm-9">
{%- for cpu in cpu_available -%} {%- for cpu in cpu_available -%}
<label class="radio-inline"> <div class="col-sm-2">
<input type="radio" name="cpu" <input type="radio" name="cpu" id="cpu_{{loop.index0}}" value="{{loop.index0}}"
value="{{loop.index0}}" data-max-duration="{{cpu.max_duration}}" {%- if loop.first -%}checked{%- endif -%}>
data-max-duration="{{cpu.max_duration}}" <label for="cpu_{{loop.index0}}" class="btn btn-default btn-block">
{%- if loop.first -%}checked{%- endif -%} {{ cpu.description }}
> {{ cpu.description }} </label>
</label> </div>
{% endfor -%} {% endfor -%}
</div> </div>
</div> </div>
@ -33,13 +33,13 @@
<label for="ram" class="col-sm-3 control-label">Memory:</label> <label for="ram" class="col-sm-3 control-label">Memory:</label>
<div class="col-sm-9"> <div class="col-sm-9">
{%- for ram in ram_available -%} {%- for ram in ram_available -%}
<label class="radio-inline"> <div class="col-sm-2">
<input type="radio" name="ram" <input type="radio" name="ram" id="ram_{{loop.index0}}" value="{{loop.index0}}"
value="{{loop.index0}}" data-max-duration="{{ram.max_duration}}" {%- if loop.first -%}checked{%- endif -%}>
data-max-duration="{{ram.max_duration}}" <label for="ram_{{loop.index0}}" class="btn btn-default btn-block">
{%- if loop.first -%}checked{%- endif -%} {{ ram.description }} GB
> {{ ram.description }} GB </label>
</label> </div>
{% endfor -%} {% endfor -%}
</div> </div>
</div> </div>
@ -47,13 +47,13 @@
<label for="gpu" class="col-sm-3 control-label">GPU:</label> <label for="gpu" class="col-sm-3 control-label">GPU:</label>
<div class="col-sm-9"> <div class="col-sm-9">
{%- for gpu in gpu_available -%} {%- for gpu in gpu_available -%}
<label class="radio-inline"> <div class="col-sm-2">
<input type="radio" name="gpu" <input type="radio" name="gpu" id="gpu_{{loop.index0}}" value="{{loop.index0}}"
value="{{loop.index0}}" data-max-duration="{{gpu.max_duration}}" {%- if loop.first -%}checked{%- endif -%}>
data-max-duration="{{gpu.max_duration}}" <label for="gpu_{{loop.index0}}" class="btn btn-default btn-block">
{%- if loop.first -%}checked{%- endif -%} {{ gpu.description | capitalize }}
> {{ gpu.description }} </label>
</label> </div>
{% endfor -%} {% endfor -%}
</div> </div>
</div> </div>
@ -66,9 +66,23 @@
</div> </div>
<script> <script>
// Append button style
var $style = $(`<style>
input[type=radio] {
display: none;
}
input[type=radio]:checked + label {
background-color: #f37524;
border-color: #e34f21;
color: #fff;
}
</style>`)
$('html > head').append($style);
// Adjust time duration
var $reservations_dropdown = $("#time-max-duration"); var $reservations_dropdown = $("#time-max-duration");
$('input[type=radio]').change(function() { $('input[type=radio]').change(function () {
var cpu = $('input[name=cpu]:checked').data('max-duration'); var cpu = $('input[name=cpu]:checked').data('max-duration');
var ram = $('input[name=ram]:checked').data('max-duration'); var ram = $('input[name=ram]:checked').data('max-duration');
var gpu = $('input[name=gpu]:checked').data('max-duration'); var gpu = $('input[name=gpu]:checked').data('max-duration');