Skip to content

Commit

Permalink
Arcordeon with one little bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@maximilianKalff
maximilianKalff committed Dec 12, 2024
1 parent 397d70d commit 1aab2bd
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 26 deletions.
45 changes: 44 additions & 1 deletion ui/runs/static/runs/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ ul {
padding: 0;
}

ul li {
ul li div {
display: flex;
justify-content: space-between;
align-items: center;
Expand All @@ -19,11 +19,54 @@ ul li {

.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;
}
19 changes: 19 additions & 0 deletions ui/runs/static/runs/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,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";
}
}
58 changes: 33 additions & 25 deletions ui/runs/templates/runs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
{% csrf_token %}
<div class="mb-2">
<h3>Continue an existing run:
<span id="selectedRun">{{ all_available_runs.0.run_name }}</span>
<span id="selectedRun" style="display: none;">{{ all_available_runs.0.run_name }}</span>
</h3>

<!-- Header Section -->
Expand Down Expand Up @@ -76,34 +76,42 @@ <h3>Continue an existing run:
{% else %}
<hr style="margin: 5px 0px;">
{% endif %}
<li class="d-flex justify-content-between" id="run-{{ forloop.counter }}" onclick="selectRun('{{run.run_name}}', '{{ forloop.counter }}', '{{ all_available_runs|length }}')">
<button type="button" class="btn" onclick="toggleFavouriteRun('{{run.run_name}}', '{{run.favourite_status}}')">
{% if run.favourite_status == False %}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
<path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/>
</svg>
{% else %}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#ded704" class="bi bi-star-fill" viewBox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73-3.522-3.356c-.33-.314-.16-.888.282-.95l4.898-.696 2.197-4.482c.197-.4.73-.4.927 0l2.197 4.482 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.444-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
{% endif %}
</button>
<span style="width: 30%"><b>{{ run.run_name }}</b></span>
<span style="width: 15%">{{ run.creation_date }}</span>
<span style="width: 15%">{{ run.modification_date }}</span>
<span style="width: 15%">{{ run.memory_mode }}</span>
<button type="button" class="delete-btn btn btn-grey" onclick="deleteRun('{{run.run_name}}')">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="grey" class="bi bi-trash3-fill" viewBox="0 0 16 16">
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5M8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5m3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0"/>
</svg>
</button>
<li class="d-flex justify-content-between list-item" id="run-{{ forloop.counter }}" onclick="selectRun('{{run.run_name}}', '{{ forloop.counter }}', '{{ all_available_runs|length }}'); toggleDetails(this)">
<div id="main-content" class="justify-content-between d-flex">
<button type="button" class="btn" onclick="toggleFavouriteRun('{{run.run_name}}', '{{run.favourite_status}}')">
{% if run.favourite_status == False %}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
<path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/>
</svg>
{% else %}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#ded704" class="bi bi-star-fill" viewBox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73-3.522-3.356c-.33-.314-.16-.888.282-.95l4.898-.696 2.197-4.482c.197-.4.73-.4.927 0l2.197 4.482 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.444-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
{% endif %}
</button>
<span style="width: 30%"><b>{{ run.run_name }}</b></span>
<span style="width: 15%">{{ run.creation_date }}</span>
<span style="width: 15%">{{ run.modification_date }}</span>
<span style="width: 15%">{{ run.memory_mode }}</span>
<button type="button" class="delete-btn btn btn-grey" onclick="deleteRun('{{run.run_name}}')">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="grey" class="bi bi-trash3-fill" viewBox="0 0 16 16">
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5M8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5m3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0"/>
</svg>
</button>
</div>
<div class="details">
<!-- Zusätzliche Informationen -->
<span>Tags: {{run.tags}}</span>
<p style="margin: 5px 0;">Description: </p>
<input type="submit" value="Continue" class="btn btn-red">
</div>

</li>
{% endfor %}
</ul>

</div>
<input type="hidden" name="run_name" id="run_name_id" value="{{available_runs.0.run_name}}">
<input type="submit" value="Continue" class="btn btn-red">
</form>
<form id="delete_run" class="mb-5" action="{% url 'runs:delete' %}" method="post">
{% csrf_token %}
Expand Down Expand Up @@ -158,7 +166,7 @@ <h3>Select filters:</h3>
</div>

</div>
<form>
<!-- <form>
<label for="fruits">Fruits</label>
<select id="fruits" name="fruits" data-placeholder="Select fruits" multiple data-multi-select>
<option value="Apple">Apple</option>
Expand All @@ -178,7 +186,7 @@ <h3>Select filters:</h3>
<option value="Strawberry">Strawberry</option>
<option value="Watermelon">Watermelon</option>
</select>
</form>
</form> -->
<script type="text/javascript" src="{% static 'runs/MultiSelect.js' %}"></script>
<script>
// Initialize the Multi Selects
Expand Down

0 comments on commit 1aab2bd

Please sign in to comment.