CimeyClust/HabitTracker
1
1
Fork 0
Code Issues Pull Requests Packages Projects 2 Releases Wiki Activity

spacing udn cards

Browse Source
This commit is contained in:
nikolaswollenberg 2024-02-13 11:15:19 +01:00
parent e2dd7c5fdf
commit 3a86eb3802
1 changed files with 257 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
templates/index.html
View File

@ -1,11 +1,11 @@
{% extends 'layouts/main.html' %} {% extends 'layouts/main.html' %}
{% block content %} {% block content %}
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
<h3>{{ utc_dt }}</h3> <h3>{{ utc_dt }}</h3>
<style> <style>
#heatmap { #heatmap {
display: grid; display: grid;
grid-template-columns: repeat(7, 0fr); /* 7 Tage in einer Woche */ grid-template-columns: repeat(7, 0fr); /* 7 Tage in einer Woche */
@ -20,13 +20,15 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
</style> </style>
<div class="row">
<div class="row"> <div class="col-md-4 col-12 card bg-light mb-6">
<div class="card-body">
<div class="col-md-5 col-12"> <h5 class="card-title">Heatmap</h5>
<div id="heatmap"></div> <div id="heatmap"></div>
</div> </div>
</div>
<script> <script>
// Funktion zur Rückgabe des Montagsdatums // Funktion zur Rückgabe des Montagsdatums
@ -78,20 +80,21 @@
// Erstelle die Heatmap mit den simulierten Daten // Erstelle die Heatmap mit den simulierten Daten
createHeatmap(activityData); createHeatmap(activityData);
</script> </script>
<div class="col-md-7 col-12">
<div class="row mb-3"> <div class="col-md-7 col-12 card gap-3 bg-light p-6 offset-md-1 mb-6">
<div class="row mb-3 ">
<h2 class="col-9">Gewohnheiten</h2> <h2 class="col-9">Gewohnheiten</h2>
<a class="col-3 btn btn-primary" role="button" href="/habit-list">Neue Liste erstellen</a> <a class="col-3 btn btn-primary p" role="button" href="/habit-list">Neue Liste erstellen</a>
</div> </div>
{% for habit_list in habit_lists %} {% for habit_list in habit_lists %}
<div class="row mb-3"> <div class="row mb-3">
<h2 class="col-9">{{ habit_list.name }}</h2> <h2 class="col-9">{{ habit_list.name }}</h2>
<a class="col-3 btn btn-primary" role="button" href="/habit?list={{ habit_list.id }}">Gewohnheit erstellen</a> <a class="col-3 btn btn-primary" role="button" href="/habit?list={{ habit_list.id }}">Gewohnheit
erstellen</a>
</div> </div>
<ul class="task-list row"> <ul class="task-list row">
@ -110,12 +113,16 @@
{{ habit.name }} {{ habit.name }}
</div> </div>
<div class="col-6" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"> <div class="col-5 text-black text-opacity-50" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
{{ habit.note }} {{ habit.note }}
</div> </div>
<div class="col-2" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"> <div class="col-2" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
{% if habit %} {% if habit %}
{% else %}
5 🔥 5 🔥
{% endif %} {% endif %}
@ -236,9 +243,9 @@
}); });
} }
</script> </script>
</div> </div>
<script> <script>
document.addEventListener('DOMContentLoaded', (event) => { document.addEventListener('DOMContentLoaded', (event) => {
var el = document.querySelector('.task-list'); var el = document.querySelector('.task-list');
Sortable.create(el, { Sortable.create(el, {
@ -262,5 +269,5 @@
} }
}); });
}); });
</script> </script>
{% endblock %} {% endblock %}