diff --git a/ui/runs/static/runs/index.css b/ui/runs/static/runs/index.css index 8d568163..7b9d81e7 100644 --- a/ui/runs/static/runs/index.css +++ b/ui/runs/static/runs/index.css @@ -2,3 +2,71 @@ height:-100vh; } + +/* === RUN SELECTION === */ +ul { + margin: 0; + padding: 0; +} + +ul li div { + display: flex; + justify-content: space-between; + align-items: center; + height: 40px; + padding: 0 10px; +} + +.header-list li{ + margin-top: 20px; + display: flex; + justify-content: space-between; + align-items: center; + height: 40px; + padding: 0 10px; +} + + + +/* Continue btn postioning */ + +input[value="Continue"] { + margin-top: 20px; + float: right; +} + +/* Arkordeon */ + +/* Details-Container */ +.details { + display: none; + background-color: #f9f9f9; + padding: 10px; + border: 1px solid #ddd; + border-radius: 5px; + height: 200px; + margin: 10px; + position: relative; +} + +.list-item { + display: flex; + flex-direction: column; + justify-content: center; + align-items: stretch; +} + +/* Hauptzeile in der Liste */ +.list-item > .main-content { + display: inline; + justify-content: space-between; + align-items: stretch; + width: 100%; +} + +.list-item.expanded { + background-color: #f5f5f5; + border-left: 4px solid #bc3838; + margin-bottom: 10px; + padding-bottom: 10px; +} \ No newline at end of file diff --git a/ui/runs/static/runs/index.js b/ui/runs/static/runs/index.js index f7c4bd8e..3a8450bf 100644 --- a/ui/runs/static/runs/index.js +++ b/ui/runs/static/runs/index.js @@ -1,9 +1,40 @@ +// === EVENT LISTENER === + +document.addEventListener('DOMContentLoaded', () => { + // Delete Btns + const delete_btns = document.querySelectorAll('.delete-btn'); + + delete_btns.forEach(button => { + const svg = button.querySelector('svg'); + + button.addEventListener('mouseover', () => { + button.classList.add('btn-red'); + button.classList.remove('btn-grey'); + if (svg) svg.setAttribute('fill', 'white'); + }); + + button.addEventListener('mouseout', () => { + button.classList.add('btn-grey'); + button.classList.remove('btn-red'); + if (svg) svg.setAttribute('fill', 'grey'); + }); + }); + + // mark first run as selected + let first_run = document.getElementById('run-1'); + first_run.style.backgroundColor = '#e8edf3'; + first_run.style.borderRadius = '10px'; + +}); + + +// === FUNCTIONS === function selectRun(runName, runId, numberOfRuns){ for (let i = 1; i <= numberOfRuns; i++) { let run = document.getElementById('run-' + i); if (i == runId) { - run.style.backgroundColor = '#e8edf3'; - run.style.borderRadius = '10px'; + run.style.backgroundColor = 'rgb(232, 237, 243)'; + run.style.borderRadius = '10px'; } else { run.style.backgroundColor = 'white'; @@ -26,3 +57,22 @@ function toggleFavouriteRun(runName, favouriteStatus){ document.getElementById('change_favourite').submit(); }; +function toggleDetails(element) { + document.querySelectorAll('.list-item.expanded').forEach(item => { + if (item !== element) { + item.classList.remove('expanded'); + item.querySelector('.details').style.display = 'none'; + } + }); + + const details = element.querySelector('.details'); + if (element.classList.contains('expanded')) { + element.classList.remove('expanded'); + details.style.display = 'none'; + element.style.height = "40px"; + } else { + element.classList.add('expanded'); + details.style.display = 'block'; + element.style.height = "250px"; + } +} diff --git a/ui/runs/templates/runs/index.html b/ui/runs/templates/runs/index.html index 6f5d3f93..72b851ce 100644 --- a/ui/runs/templates/runs/index.html +++ b/ui/runs/templates/runs/index.html @@ -9,7 +9,6 @@ {% block js %} - {% endblock %} {% block content %} @@ -43,52 +42,76 @@ {% csrf_token %}

Continue an existing run: - {{ all_available_runs.0.run_name }} +

- +
-
{% csrf_token %} @@ -138,7 +161,7 @@

Select filters:

- +
@@ -147,7 +170,7 @@

Select filters:

-
+ + {% endblock %}