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

heatmap.css

Browse Source
This commit is contained in:
Yapollon 2024-03-08 14:05:22 +01:00
parent 1d88041023
commit 0d2baf6325
4 changed files with 77 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.py
View File

@ -822,6 +822,7 @@ def save_profile_image(image_file):
current_user.update()
@app.route('/upload', methods=['POST'])
@login_required
def upload_profile_image():
if 'file' not in request.files:
return 'No file part'
@ -833,6 +834,7 @@ def upload_profile_image():
return redirect(url_for('profile'))
@app.route('/save_color', methods=['POST'])
@login_required
def save_heatmap_color():
# Get the color value from the form
new_color = request.form['color']

73
static/css/heatmap.css Normal file
View File

@ -0,0 +1,73 @@
#heatmap {
display: grid;
grid-template-columns: repeat(7, 0fr); /* 7 Tage in einer Woche */
gap: 5px;
width: 100%;
table-layout: fixed;
}
.day {
width: 50px;
height: 50px;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
table-layout: fixed;
}
@media (max-width: 1400px) {
.day {
width: 40px;
height: 40px;
}
}
@media (max-width: 1200px) {
.day {
width: 35px;
height: 35px;
}
}
@media (max-width: 992px) {
.day {
width: 30px;
height: 30px;
}
}
@media (max-width: 767px) {
.day {
width: 50px;
height: 50px;
}
}
@media (max-width: 450px) {
.day {
width: 40px;
height: 40px;
}
}
@media (max-width: 400px) {
.day {
width: 35px;
height: 35px;
}
}
@media (max-width: 350px) {
.day {
width: 30px;
height: 30px;
}
}
@media (max-width: 300px) {
.day {
width: 25px;
height: 25px;
}
}

80
templates/index.html
View File

@ -4,7 +4,7 @@
<div class = "row">
<div class="col">
<h1>
{% if (current_user.is_authenticated) %}<img class="avatar avatar-xl" src="{{user.profile_image}}"/>{% endif %}
{% if (current_user.is_authenticated) %}<img class="avatar avatar-xl" src="{{user.profile_image}}" alt="failed to load image"/>{% endif %}
{{ title }}
</h1>
<h3>{{ utc_dt }}</h3>
@ -14,83 +14,6 @@
</div>
</div>
<style>
#heatmap {
display: grid;
grid-template-columns: repeat(7, 0fr); /* 7 Tage in einer Woche */
gap: 5px;
width: 100%;
table-layout: fixed;
}
.day {
width: 50px;
height: 50px;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
table-layout: fixed;
}
@media (max-width: 1400px) {
.day {
width: 40px;
height: 40px;
}
}
@media (max-width: 1200px) {
.day {
width: 35px;
height: 35px;
}
}
@media (max-width: 992px) {
.day {
width: 30px;
height: 30px;
}
}
@media (max-width: 767px) {
.day {
width: 50px;
height: 50px;
}
}
@media (max-width: 450px) {
.day {
width: 40px;
height: 40px;
}
}
@media (max-width: 400px) {
.day {
width: 35px;
height: 35px;
}
}
@media (max-width: 350px) {
.day {
width: 30px;
height: 30px;
}
}
@media (max-width: 300px) {
.day {
width: 25px;
height: 25px;
}
}
</style>
<div class="d-md-flex gap-3">
{% if current_user.is_authenticated %}
@ -109,7 +32,6 @@
{% include 'components/delete_list.html' %}
{% endif %}
</div>
<script src="../static/script/script-index.js"></script>

1
templates/layouts/main.html
View File

@ -9,6 +9,7 @@
<!-- CSS -->
<link href="../../static/css/background.css" rel="stylesheet" type="text/css">
<link href="../../static/css/profile.css" rel="stylesheet" type="text/css">
<link href="../../static/css/heatmap.css" rel="stylesheet" type="text/css">
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/fastbootstrap@2.2.0/dist/css/fastbootstrap.min.css"
integrity="sha256-V6lu+OdYNKTKTsVFBuQsyIlDiRWiOmtC8VQ8Lzdm2i4=" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">