card Tabs
This commit is contained in:
parent
2e790d9cf8
commit
5c0a2b5886
@ -10,6 +10,8 @@
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 0fr); /* 7 Tage in einer Woche */
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.day {
|
||||
@ -19,12 +21,13 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
table-layout: fixed;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="d-flex flex-column gap-5">
|
||||
<div class="d-flex gap-3">
|
||||
<div class="flex-fill col-5 card bg-light mb-6">
|
||||
<div class="flex-md-fill col-md-4 col-12 card bg-light mb-6">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Heatmap</h5>
|
||||
<div id="heatmap"></div>
|
||||
@ -34,7 +37,7 @@
|
||||
<script>
|
||||
|
||||
// Simulierte Aktivitätsdaten (ersetze dies durch deine echten Daten)
|
||||
const activityData = {{heatmap_values}};
|
||||
const activityData = {{ heatmap_values }};
|
||||
|
||||
// Funktion zum Erstellen der Heatmap
|
||||
function createHeatmap(data) {
|
||||
@ -80,12 +83,38 @@
|
||||
</script>
|
||||
|
||||
|
||||
<div class="flex-fill col-7 card bg-light p-6 mb-6">
|
||||
<div class="row mb-3 ">
|
||||
<div class="flex-fill col-md-8 col-12 card bg-light p-6 mb-6">
|
||||
<div class="row mb-3">
|
||||
<h2 class="col-9">Gewohnheiten</h2>
|
||||
<a class="col-3 btn btn-primary p" role="button" href="/habit-list">Neue Liste erstellen</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-tabs card-header-tabs">
|
||||
|
||||
{% for habit_list in habit_lists %}
|
||||
<li class="nav-item">
|
||||
{% if habit_list == habit_lists[0] %}
|
||||
<a class="nav-link active" aria-current="true">{{ habit_list.name }}</a>
|
||||
{% else %}
|
||||
<a class="nav-link">{{ habit_list.name }}</a>
|
||||
{% endif %}
|
||||
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">
|
||||
With supporting text below as a natural lead-in to additional content.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
{% for habit_list in habit_lists %}
|
||||
|
||||
<div class="row mb-3">
|
||||
@ -268,4 +297,6 @@
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
Loading…
x
Reference in New Issue
Block a user