Skip to content
Snippets Groups Projects
Commit 80d56112 authored by Daniel Manja's avatar Daniel Manja
Browse files

Change style

parent 2255208e
No related branches found
No related tags found
2 merge requests!673Automated merge from preview to main,!662Add slurm job generator
# Slurm Job Generator # Slurm Job Generator
<!DOCTYPE html>
<html lang="en-us"> <html lang="en-us">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
...@@ -16,36 +15,34 @@ ...@@ -16,36 +15,34 @@
</div> </div>
<button type="button" class="collapsible">General</button> <button type="button" class="collapsible">General</button>
<div class="content"> <div class="content">
<div class="input"> <div class="row">
<div class="row"> <label class="cell-name">Job name</label>
<label class="cell-name">Job name</label> <div class="cell-tooltip">
<div class="cell-tooltip"> <img class="info-img" src="../misc/info.png" title="help">
<img class="info-img" src="../misc/info.png" title="help">
</div>
<input id="job-name" class="cell-input" type="text">
</div> </div>
<div class="row"> <input id="job-name" class="cell-input" type="text">
<label class="cell-name">Account</label> </div>
<div class="cell-tooltip"> <div class="row">
<img class="info-img" src="../misc/info.png" title="help"> <label class="cell-name">Account</label>
</div> <div class="cell-tooltip">
<input id="account" class="cell-input" type="text"> <img class="info-img" src="../misc/info.png" title="help">
</div> </div>
<div class="row"> <input id="account" class="cell-input" type="text">
<label class="cell-name">Email</label> </div>
<div class="cell-tooltip"> <div class="row">
<img class="info-img" src="../misc/info.png" title="help"> <label class="cell-name">Email</label>
</div> <div class="cell-tooltip">
<div class="cell-input"> <img class="info-img" src="../misc/info.png" title="help">
<input id="mail" type="mail"> </div>
<div class="cell-input">
<input id="mail" class="mail" type="mail">
<input id="begin" type="checkbox"> <input id="begin" type="checkbox">
<lable for="begin">Begin</lable> <lable for="begin">Begin</lable>
<input id="end" type="checkbox"> <input id="end" type="checkbox">
<lable for="end">End</lable> <lable for="end">End</lable>
<input id="fail" type="checkbox"> <input id="fail" type="checkbox">
<lable for="fail">Fail</lable> <lable for="fail">Fail</lable>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -164,7 +161,7 @@ ...@@ -164,7 +161,7 @@
<div class="cell-tooltip"> <div class="cell-tooltip">
<img class="info-img" src="../misc/info.png" title="help"> <img class="info-img" src="../misc/info.png" title="help">
</div> </div>
<input id="executable" class="cell-input" type="text"> <input id="executable" class="cell-input executable" type="text">
</div> </div>
<div class="row"> <div class="row">
<span class="cell-name"></span> <span class="cell-name"></span>
...@@ -845,7 +842,7 @@ ...@@ -845,7 +842,7 @@
// walltime // walltime
let reArray = /^(([0-9]{1,3})-)?([0-9]{2}):[0-9]{2}:[0-9]{2}$/; let reArray = /^(([0-9]{1,3})-)?([0-9]{2}):[0-9]{2}:[0-9]{2}$/;
if (!reArray.test(document.getElementById('time').value) && document.getElementById('time').value) { if (!reArray.test(document.getElementById('time').value) && document.getElementById('time').value) {
document.getElementById('time').style.backgroundColor = 'red'; document.getElementById('time').style.backgroundColor = 'rgb(255, 121, 121)';
boolValues = false; boolValues = false;
} else { } else {
document.getElementById('time').style.backgroundColor = ''; document.getElementById('time').style.backgroundColor = '';
...@@ -856,6 +853,9 @@ ...@@ -856,6 +853,9 @@
fields.push('duration'); fields.push('duration');
} }
[].forEach.call(fields, function(field) { [].forEach.call(fields, function(field) {
// remove all leading zeros
document.getElementById(field).value = document.getElementById(field).value.replace(/^0+/, '');
let element = document.getElementById(field); let element = document.getElementById(field);
let elementText = document.getElementById(field + '-text'); let elementText = document.getElementById(field + '-text');
let value = Number(document.getElementById(field).value); let value = Number(document.getElementById(field).value);
...@@ -942,7 +942,7 @@ ...@@ -942,7 +942,7 @@
document.getElementById('array').addEventListener('change', function () { document.getElementById('array').addEventListener('change', function () {
let reArray = /^[0-9]+(-[0-9]+)?(,[0-9]+(-[0-9]+)?)*(:[0-9]+)?(%[0-9]+)?$/; let reArray = /^[0-9]+(-[0-9]+)?(,[0-9]+(-[0-9]+)?)*(:[0-9]+)?(%[0-9]+)?$/;
if (!reArray.test(document.getElementById('array').value) && document.getElementById('array').value) { if (!reArray.test(document.getElementById('array').value) && document.getElementById('array').value) {
document.getElementById('array').style.backgroundColor = 'red'; document.getElementById('array').style.backgroundColor = 'rgb(255, 121, 121)';
} else { } else {
document.getElementById('array').style.backgroundColor = ''; document.getElementById('array').style.backgroundColor = '';
} }
...@@ -951,7 +951,7 @@ ...@@ -951,7 +951,7 @@
document.getElementById('time').addEventListener('change', function () { document.getElementById('time').addEventListener('change', function () {
let reArray = /^([0-9]{1,3}-)?[0-9]{2}:[0-9]{2}:[0-9]{2}$/; let reArray = /^([0-9]{1,3}-)?[0-9]{2}:[0-9]{2}:[0-9]{2}$/;
if (!reArray.test(document.getElementById('time').value) && document.getElementById('time').value) { if (!reArray.test(document.getElementById('time').value) && document.getElementById('time').value) {
document.getElementById('time').style.backgroundColor = 'red'; document.getElementById('time').style.backgroundColor = 'rgb(255, 121, 121)';
} else { } else {
document.getElementById('time').style.backgroundColor = ''; document.getElementById('time').style.backgroundColor = '';
setMinDuration() setMinDuration()
...@@ -1031,7 +1031,7 @@ ...@@ -1031,7 +1031,7 @@
var setMaxTasks = function() { var setMaxTasks = function() {
// get partition limits from dictionary // get partition limits from dictionary
let partitionLimits = limits[document.getElementById('partition').value]; let partitionLimits = limits[document.getElementById('partition').value];
let nodes = 0; let nodes = 0;
// set number of nodes // set number of nodes
if (document.getElementById('nodes').value !== '') { if (document.getElementById('nodes').value !== '') {
......
...@@ -286,7 +286,7 @@ body { ...@@ -286,7 +286,7 @@ body {
padding: 5px; padding: 5px;
} }
.limits { .limits {
color: red; color: rgb(255, 121, 121);
display: none; display: none;
margin-left: 10px; margin-left: 10px;
} }
...@@ -316,7 +316,6 @@ body { ...@@ -316,7 +316,6 @@ body {
.cell-name { .cell-name {
display: flex; display: flex;
height: 25px; height: 25px;
justify-content: center;
align-items: center; align-items: center;
width: 125px; width: 125px;
} }
...@@ -331,6 +330,12 @@ body { ...@@ -331,6 +330,12 @@ body {
display: flexbox; display: flexbox;
vertical-align: middle; vertical-align: middle;
} }
.executable {
width: 500px;
}
.mail {
width: 350px;
}
.partition-input { .partition-input {
float: left; float: left;
width: 650px; width: 650px;
...@@ -355,7 +360,7 @@ body { ...@@ -355,7 +360,7 @@ body {
cursor: pointer; cursor: pointer;
font-size: 20px; font-size: 20px;
outline: none; outline: none;
padding: 18px; padding: 10px 18px;
text-align: left; text-align: left;
width: 100%; width: 100%;
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment