diff --git a/ldvspec/lofardata/static/lofardata/styling/dias.css b/ldvspec/lofardata/static/lofardata/styling/dias.css
index 85987a13fd531e78542bffa48561e895fb031043..372b8d4dca7e7ddb8c71bd1bddf24642ff37ef6e 100644
--- a/ldvspec/lofardata/static/lofardata/styling/dias.css
+++ b/ldvspec/lofardata/static/lofardata/styling/dias.css
@@ -83,8 +83,8 @@ td, th {
--grey: #8c8c8c;
--light-grey: #BDBDBDFF;
--input: #585858;
- --input-bg: #dae3e3;
- --input-bg--darken: #dce0e0;
+ --input-bg: rgba(223, 239, 244, 0.3);
+ --input-bg--darken: rgb(233, 239, 244, 0.05);
--border: #00adee;
--border--light: #ebedf2;
--background--main: white;
@@ -3652,77 +3652,60 @@ input.section-toggle-invert:checked ~ .section-wrapper {
background-color: inherit;
}
-.navbar-custom {
- padding-left: 1.25rem;
- padding-right: 1.25rem;
- margin-top: 1.25rem;
+.custom--navbar {
+ margin: 1.25rem;
height: 3rem;
}
-.custom-title-h1 {
- margin-top: 1.5rem;
-}
-
-.custom-badge-margin {
- margin-top: 0.25rem;
-}
-
-.custom-button-no-padding {
- padding: 0;
-}
-
-.custom-spinner-size {
- width: 1.25rem;
- height: 1.25rem;
+.custom---checkbox[type=checkbox]:checked {
+ width: auto;
+ position: relative;
+ display: inline-block;
+ left: 0;
}
-.custom-column-list {
- -moz-column-count: 2;
- -moz-column-gap: 2rem;
- -webkit-column-count: 2;
- -webkit-column-gap: 2rem;
- column-count: 2;
- column-gap: 2rem;
+.custom--checkbox[type=checkbox]:not(:checked) {
+ width: auto;
+ position: relative;
+ display: inline-block;
+ left: 0;
}
-.custom-atdb-task-modal {
+.custom--modal-size {
min-height: 15rem;
min-width: 50rem;
}
-.custom-div-margin {
+.custom--div-margin {
margin: 1rem;
}
-.custom-tooltip {
+.custom--tooltip {
font-size: 0.75rem;
margin-top: calc(var(--spacing) * 0.125);
}
-/*We reset the dias checkbox style because the checkbox label limits inheritance*/
-.custom-checkbox[type="checkbox"]:checked {
- width: auto;
- position: relative;
- display: inline-block;
- left: 0;
+.custom--chart-styling {
+ height: 35rem;
+ width: 50rem;
}
-.custom-checkbox[type="checkbox"]:not(:checked) {
- width: auto;
- position: relative;
- display: inline-block;
- left: 0;
+.custom--badge-margin {
+ margin-top: 0.25rem;
}
-.custom-chart-styling {
- height: 35rem;
- width: 50rem;
+.custom--title-h1 {
+ margin-top: 1.5rem;
}
-.custom-input-selection {
+.custom--button-no-padding {
+ padding: 0;
+}
+
+.custom__input--fixed-min-width {
min-width: 9rem;
}
-.custom-input-filters {
- min-width: 4rem;
-}
\ No newline at end of file
+.custom__input--fixed-width {
+ width: 12rem;
+}
diff --git a/ldvspec/lofardata/templates/lofardata/base.html b/ldvspec/lofardata/templates/lofardata/base.html
index 1bfaf1a3a42a9aef2e89d76785f943a6e2f043b1..85dbf1ad40b13b1b6eb32c2dc96d6d74a7037989 100644
--- a/ldvspec/lofardata/templates/lofardata/base.html
+++ b/ldvspec/lofardata/templates/lofardata/base.html
@@ -24,7 +24,7 @@
</head>
<body>
<div class="page">
- <nav class="h-navbar navbar-custom">
+ <nav class="h-navbar custom--navbar">
<ol class="h-navbar-list">
<li class="h-navbar-list__item">
<a href="{% url 'index' %}">
diff --git a/ldvspec/lofardata/templates/lofardata/index.html b/ldvspec/lofardata/templates/lofardata/index.html
index 95d1532297120e94eedb929b0590e9a574b12e0c..1c43ea836066391530d4f38c287befbdda2610c8 100644
--- a/ldvspec/lofardata/templates/lofardata/index.html
+++ b/ldvspec/lofardata/templates/lofardata/index.html
@@ -8,7 +8,7 @@
{% if user.is_authenticated %}
<div class="flex-wrapper flex-wrapper--centered flex-wrapper--row">
- <h1 class="custom-title-h1">Work Specifications</h1>
+ <h1 class="custom--title-h1">Work Specifications</h1>
<a class="button button--secondary button--icon-button margin-left"
title="Create a new work specification"
href="{% url 'specification-create' %}">
diff --git a/ldvspec/lofardata/templates/lofardata/workspecification/create_update.html b/ldvspec/lofardata/templates/lofardata/workspecification/create_update.html
index c578f642e856a29a0cfdb8bbf60d77670286290d..4eb6bb9e117d5af056fa8fb525694acbd8df0368 100644
--- a/ldvspec/lofardata/templates/lofardata/workspecification/create_update.html
+++ b/ldvspec/lofardata/templates/lofardata/workspecification/create_update.html
@@ -22,16 +22,17 @@
{% csrf_token %}
<div class="flex-wrapper flex-wrapper--row flex-wrapper--start">
<!-- Standard input fields -->
- <div class="custom-div-margin">
+ <div class="custom--div-margin">
<h3 class="text text--primary text--title">Selection</h3>
<div class="flex-wrapper flex-wrapper--row" id="div_id_processing_site">
- <div class="flex-wrapper flex-wrapper--row custom-input-selection">
+ <div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
<label class="input__label">{{ form.processing_site.label }}</label>
- <a class="tooltip-dias tooltip-dias-right custom-tooltip"
+ <a class="tooltip-dias tooltip-dias-right custom--tooltip"
data-tooltip="{{ form.processing_site.help_text }}">m</a>
</div>
<div class="input-select-wrapper icon--inline icon-after icon-after--angle-down">
- <select class="input input--select margin-left margin-bottom" name="processing_site"
+ <select class="input input--select custom__input--fixed-width margin-left margin-bottom"
+ name="processing_site"
data-bind="options:processingSites,
optionsCaption: '---------',
optionsText: function(item) { return item.name + ' - ' + item.url},
@@ -42,33 +43,36 @@
<div class="flex-wrapper flex-wrapper--row" id="div_id_selected_workflow_tag">
- <div class="flex-wrapper flex-wrapper--row custom-input-selection">
+ <div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
<label class="input__label"
for="id_selected_workflow_tag">{{ form.selected_workflow_tag.label_tag }}*</label>
- <a class="tooltip-dias tooltip-dias-right custom-tooltip"
+ <a class="tooltip-dias tooltip-dias-right custom--tooltip"
data-tooltip="{{ form.selected_workflow_tag.help_text }}">m</a>
</div>
- <div class="input-select-wrapper icon--inline icon-after icon-after--angle-down">
- <select class="input input--select margin-bottom margin-left" id="id_selected_workflow_tag" name="selected_workflow_tag" style="width: 12rem"
+ <div class="input-select-wrapper icon--inline icon-after icon-after--angle-down">
+ <select class="input input--select custom__input--fixed-width margin-bottom margin-left"
+ id="id_selected_workflow_tag" name="selected_workflow_tag"
+ style="width: 12rem"
data-bind="options:tags,
optionsCaption: caption,
value: selectedTag,
disable: isLoading">
- </select>
- </div>
+ </select>
+ </div>
</div>
<div class="flex-wrapper flex-wrapper--row" id="div_id_selected_workflow">
- <div class="flex-wrapper flex-wrapper--row custom-input-selection">
+ <div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
<label class="input__label"
for="id_selected_workflow">{{ form.selected_workflow.label }}*</label>
- <a class="tooltip-dias tooltip-dias-right custom-tooltip"
+ <a class="tooltip-dias tooltip-dias-right custom--tooltip"
data-tooltip="{{ form.selected_workflow.help_text }}">m</a>
</div>
<div class="input-select-wrapper icon--inline icon-after icon-after--angle-down">
- <select class="input input--select margin-bottom margin-left" id="id_selected_workflow" name="selected_workflow" style="width: 12rem"
- data-bind="options:workflowsByTag,
+ <select class="input input--select custom__input--fixed-width margin-bottom margin-left"
+ id="id_selected_workflow" name="selected_workflow" style="width: 12rem"
+ data-bind="options:workflowsByTag,
optionsCaption: caption,
optionsValue: 'workflow_uri',
optionsText: 'workflow_uri',
@@ -80,46 +84,46 @@
<div class="flex-wrapper flex-wrapper--row" id="div_id_predecessor">
- <div class="flex-wrapper flex-wrapper--row custom-input-selection">
+ <div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
<label class="input__label"
for="id_predecessor">{{ form.predecessor_specification.label }}</label>
- <a class="tooltip-dias tooltip-dias-right custom-tooltip"
+ <a class="tooltip-dias tooltip-dias-right custom--tooltip"
data-tooltip="{{ form.predecessor_specification.help_text }}">m</a>
</div>
<div class="input-select-wrapper icon--inline icon-after icon-after--angle-down margin-left margin-bottom">
- {% render_field form.predecessor_specification class="input input--select" %}
+ {% render_field form.predecessor_specification class="input input--select custom__input--fixed-width" %}
</div>
</div>
<div class="flex-wrapper flex-wrapper--row" id="div_id_batch_size">
- <div class="flex-wrapper flex-wrapper--row custom-input-selection">
+ <div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
<label class="input__label"
for="id_batch_size">{{ form.batch_size.label_tag }}</label>
- <a class="tooltip-dias tooltip-dias-right custom-tooltip"
+ <a class="tooltip-dias tooltip-dias-right custom--tooltip"
data-tooltip="{{ form.batch_size.help_text }}">m</a>
</div>
- {% render_field form.batch_size class="input input--select margin-left margin-bottom" type="number" %}
+ {% render_field form.batch_size class="input input--select custom__input--fixed-width margin-left margin-bottom" type="number" %}
</div>
<div class="flex-wrapper flex-wrapper--row" id="div_id_auto_submit">
- {% render_field form.is_auto_submit class="input custom-checkbox margin-top" type="checkbox" %}
+ {% render_field form.is_auto_submit class="input custom--checkbox margin-top" type="checkbox" %}
<label class="input__label">{{ form.is_auto_submit.label }}</label>
- <a class="tooltip-dias tooltip-dias-right custom-tooltip"
+ <a class="tooltip-dias tooltip-dias-right custom--tooltip"
data-tooltip="{{ form.is_auto_submit.help_text }}">m</a>
</div>
</div>
<!-- Filter fields -->
- <div class="custom-div-margin">
+ <div class="custom--div-margin">
<h3 class="text text--primary text--title">Filters*</h3>
{% for filter in filters %}
{% if filter.filter_type == 'Free' %}
<div class="flex-wrapper">
- <div class="flex-wrapper flex-wrapper--row custom-input-filters">
+ <div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
<label class="input__label"
for="id_{{ filter.field }}">{{ filter.name }}</label>
{% if filter.help_text %}
- <a class="tooltip-dias tooltip-dias-right custom-tooltip"
+ <a class="tooltip-dias tooltip-dias-right custom--tooltip"
data-tooltip="{{ filter.help_text }}">m</a>
{% endif %}
</div>
@@ -132,25 +136,25 @@
{% elif filter.filter_type == 'Dropdown' %}
<div class="flex-wrapper flex-wrapper--row"
id="div_id_filter_{{ filter.name }}">
- <div class="flex-wrapper flex-wrapper--row custom-input-filters">
+ <div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
<label class="input__label"
for="id_{{ filter.field }}">{{ filter.name }}</label>
{% if filter.help_text %}
- <a class="tooltip-dias tooltip-dias-right custom-tooltip"
+ <a class="tooltip-dias tooltip-dias-right custom--tooltip"
data-tooltip="{{ filter.help_text }}">m</a>
{% endif %}
</div>
<div class="input-select-wrapper icon--inline icon-after icon-after--angle-down margin-left margin-bottom">
- <select class="input input--select"
+ <select class="input input--select custom__input--fixed-width"
id="id_{{ filter.field }}"
name="{{ filter.field }}"
data-filter="{{ filter.lookup_type }}"
style="width: 12rem">
{#for some reason, styling is not applied otherwise#}
+ <option selected value="">All</option>
{% for option in filter.choices %}
{% if filter.default == option.0 %}
- <option selected
- value="{{ option.0 }}">{{ option.0 }}</option>
+ <option value="{{ option.0 }}">{{ option.0 }}</option>
{% else %}
<option value="{{ option.0 }}">{{ option.0 }}</option>
{% endif %}
diff --git a/ldvspec/lofardata/templates/lofardata/workspecification/dataproducts.html b/ldvspec/lofardata/templates/lofardata/workspecification/dataproducts.html
index e10def25bc83ef2039b859cb0d1dcac7b42322db..845f2e5bfb1d1369cb2a0d246701a0232bb4df9c 100644
--- a/ldvspec/lofardata/templates/lofardata/workspecification/dataproducts.html
+++ b/ldvspec/lofardata/templates/lofardata/workspecification/dataproducts.html
@@ -7,7 +7,7 @@
{% block myBlock %}
<div class="overlay">
<div class="modal-dias-wrapper">
- <div class="modal-dias modal-dias--fit-content custom-atdb-task-modal">
+ <div class="modal-dias modal-dias--fit-content custom--modal-size">
<a class="icon icon--times button--close" href="{% url 'specification-detail' pk %}"></a>
{% if dataproduct_info %}
<header class="flex-wrapper flex-wrapper--centered flex-wrapper--column">
diff --git a/ldvspec/lofardata/templates/lofardata/workspecification/dataset_size_info.html b/ldvspec/lofardata/templates/lofardata/workspecification/dataset_size_info.html
index f8ac2d6777befe21dea2a06bf8dd53dbce9f1788..059f3a583a70aa7d7d87a84d470b5347bc8aa54c 100644
--- a/ldvspec/lofardata/templates/lofardata/workspecification/dataset_size_info.html
+++ b/ldvspec/lofardata/templates/lofardata/workspecification/dataset_size_info.html
@@ -7,7 +7,7 @@
{% block myBlock %}
<div class="overlay">
<div class="modal-dias-wrapper">
- <div class="modal-dias modal-dias--fit-content custom-atdb-task-modal">
+ <div class="modal-dias modal-dias--fit-content custom--modal-size">
<a class="icon icon--times button--close" href="{% url 'specification-detail' object.pk %}"></a>
<header class="flex-wrapper flex-wrapper--centered flex-wrapper--column">
<h2 class="title">Size distributions
@@ -15,7 +15,7 @@
data-tooltip="The size distribution of the input files of this work specification">m</a>
</h2>
</header>
- <div class="custom-chart-styling" id="chartdiv"></div>
+ <div class="custom--chart-styling" id="chartdiv"></div>
<div class="flex-wrapper flex-wrapper--row flex-wrapper--space-between">
<p>Minimum: {{ min_size }}</p>
<p>Maximum: {{ max_size }}</p>
diff --git a/ldvspec/lofardata/templates/lofardata/workspecification/detail.html b/ldvspec/lofardata/templates/lofardata/workspecification/detail.html
index b2d7784dc3b48cddba0d992b310e5296a86a1b0e..e048a19d9f8d871c07fc2783f1a65cc2c6d24490 100644
--- a/ldvspec/lofardata/templates/lofardata/workspecification/detail.html
+++ b/ldvspec/lofardata/templates/lofardata/workspecification/detail.html
@@ -152,7 +152,7 @@
<div class="table__row table__row--dark table__row--padding">
<div class="table__cell table__cell--title">Data Product Information</div>
<div class="table__cell">
- <a class="button button--icon-button custom-button-no-padding"
+ <a class="button button--icon-button custom--button-no-padding"
href="{% url 'specification-dataproducts' object.pk %}">
<span class="icon icon--file-alt"></span>
</a>
@@ -195,7 +195,7 @@
<div class="table__row table__row--dark table__row--padding">
<div class="table__cell table__cell--title">Dataset size distribution</div>
<div class="table__cell">
- <a class="button button--icon-button custom-button-no-padding"
+ <a class="button button--icon-button custom--button-no-padding"
href="{% url 'dataset-size-info' object.pk %}">
<span class="icon icon--chart-bar"></span>
</a>
@@ -205,7 +205,7 @@
<div class="table__row table__row--dark table__row--padding">
<div class="table__cell table__cell--title">Inputs</div>
<div class="table__cell">
- <a class="button button--icon-button custom-button-no-padding"
+ <a class="button button--icon-button custom--button-no-padding"
href="{% url 'specification-inputs' object.pk %}">
<span class="icon icon--bars"></span>
</a>
@@ -216,7 +216,7 @@
<div class="table__cell table__cell--title">ATDB Tasks</div>
<div class="table__cell">
{% if object.related_tasks %}
- <a class="button button--icon-button custom-button-no-padding"
+ <a class="button button--icon-button custom--button-no-padding"
href="{% url 'specification-tasks' object.pk %}">
<span class="icon icon--list-ul"></span>
</a>
diff --git a/ldvspec/lofardata/templates/lofardata/workspecification/tasks.html b/ldvspec/lofardata/templates/lofardata/workspecification/tasks.html
index 9ae4b4468f8466c1643cc28dd392ab5b1e0f2bda..c679e7c9afd1b49331584d2b3568738982024a67 100644
--- a/ldvspec/lofardata/templates/lofardata/workspecification/tasks.html
+++ b/ldvspec/lofardata/templates/lofardata/workspecification/tasks.html
@@ -7,7 +7,7 @@
{% block myBlock %}
<div class="overlay">
<div class="modal-dias-wrapper">
- <div class="modal-dias modal-dias--fit-content custom-atdb-task-modal">
+ <div class="modal-dias modal-dias--fit-content custom--modal-size">
<a class="icon icon--times button--close" href="{% url 'specification-detail' object.pk %}"></a>
<header class="flex-wrapper flex-wrapper--centered flex-wrapper--column">
<h2 class="title">Linked ATDB tasks