kumi/kumify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: Refines HTML structure in dashboard template

Browse source 
Improves readability by adjusting whitespace and formatting.
Enhances visual consistency in card components by updating
CSS classes and HTML structure for better alignment and spacing.
This commit is contained in:
Kumi 2024-11-17 16:40:14 +01:00
parent 25e78d424e
commit dcb0f66478
1 changed files with 135 additions and 178 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

313
frontend/templates/frontend/dashboard.html
View file

@ -1,221 +1,178 @@
{% extends "frontend/base.html" %} {% load mood_stats %} {% load dream_stats %}
{% extends "frontend/base.html" %}
{% load mood_stats %}
{% load dream_stats %}
{% block "content" %}
<!-- Mood stats -->
<h2>Moods</h2>
<!-- Mood calendar heatmap -->
<div class="row">
<div class="col-xl-12">
<div class="card">
<div class="card-header">
<h6 class="m-0 font-weight-bold text-primary">Mood Calendar</h6>
</div>
<div class="card-body">
<div id="mood-count-heatmap"></div>
</div>
</div>
</div>
</div>
<!-- Mood cards -->
<div class="row">
<!-- Status count -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div
class="text-xs font-weight-bold text-primary text-uppercase mb-1"
>
Status count (total)
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">
{% total_moods %}
</div>
</div>
<div class="col-auto">
<i class="fas fa-book fa-2x text-gray-300"></i>
</div>
<h2>Moods</h2>
<!-- Mood calendar heatmap -->
<div class="row">
<div class="col-xl-12 mb-4">
<div class="card shadow">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Mood Calendar</h6>
</div>
<div class="card-body">
<div id="mood-count-heatmap"></div>
</div>
</div>
</div>
</div>
<!-- Current Streak Length -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-success shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div
class="text-xs font-weight-bold text-success text-uppercase mb-1"
>
Current Streak Length
<!-- Mood cards -->
<div class="row">
<!-- Status count -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Status count (total)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{% total_moods %}</div>
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">
{% current_streak %} <sub>days</sub>
<div class="col-auto">
<i class="fas fa-book fa-2x text-gray-300"></i>
</div>
</div>
<div class="col-auto">
<i class="fas fa-calendar fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Average mood -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-info shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Average mood (weekly)
<!-- Current Streak Length -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-success shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">Current Streak Length</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">
{% current_streak %} <sub>days</sub>
</div>
</div>
<div class="row no-gutters align-items-center">
<div class="col-auto">
{% average_mood_weekly as mood %} {% closest_mood mood as moodobj %}
<div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">
{{ moodobj }} <sub><i>({{ mood|floatformat:2 }})</i></sub>
<div class="col-auto">
<i class="fas fa-calendar fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Average mood -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-info shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">Average mood (weekly)</div>
<div class="row no-gutters align-items-center">
<div class="col-auto">
{% average_mood_weekly as mood %} {% closest_mood mood as moodobj %}
<div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">
{{ moodobj }} <sub><i>({{ mood|floatformat:2 }})</i></sub>
</div>
</div>
</div>
</div>
<div class="col-auto">
<i class="{{ moodobj.icon }} fa-2x text-gray-300"></i>
</div>
</div>
<div class="col-auto">
<i class="{{ moodobj.icon }} fa-2x text-gray-300"></i>
</div>
</div>
</div>
<!-- Most common activity -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-warning shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Most Common Activity (weekly)</div>
{% most_common_activity_weekly as activity %}
<div class="h5 mb-0 font-weight-bold text-gray-800">
{{ activity.0 }}<sub><i>({{ activity.1 }})</i></sub>
</div>
</div>
<div class="col-auto">
<i class="{{ activity.0.icon }} fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Most common activity -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-warning shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div
class="text-xs font-weight-bold text-warning text-uppercase mb-1"
>
Most Common Activity (weekly)
</section>
<section>
<h2>Dreams</h2>
<!-- Dream Stats -->
<div class="row">
<!-- Total Dreams -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Dream count (total)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{% total_dreams %}</div>
</div>
{% most_common_activity_weekly as activity %}
<div class="h5 mb-0 font-weight-bold text-gray-800">
{{ activity.0 }} <sub><i>({{ activity.1 }})</i></sub>
<div class="col-auto">
<i class="fas fa-book fa-2x text-gray-300"></i>
</div>
</div>
<div class="col-auto">
<i class="{{ activity.0.icon }} fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<h2>Dreams</h2>
<!-- Dream Stats -->
<div class="row">
<!-- Total Dreams -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div
class="text-xs font-weight-bold text-primary text-uppercase mb-1"
>
Dream count (total)
<!-- Weekly Dreams -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-success shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">Dreams (weekly)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{% weekly_dreams %}</div>
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">
{% total_dreams %}
<div class="col-auto">
<i class="fas fa-calendar fa-2x text-gray-300"></i>
</div>
</div>
<div class="col-auto">
<i class="fas fa-book fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Weekly Dreams -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-success shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div
class="text-xs font-weight-bold text-success text-uppercase mb-1"
>
Dreams (weekly)
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">
{% weekly_dreams %}
</div>
</div>
<div class="col-auto">
<i class="fas fa-calendar fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Special Dreams -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-info shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Special Dreams (lucid / wet)
</div>
<div class="row no-gutters align-items-center">
<div class="col-auto">
{% special_dreams_weekly as weekly %}
<div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">
{{ weekly.0 }} / {{ weekly.1 }} <sub><i>(weekly)</i></sub>
<!-- Special Dreams -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-info shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">Special Dreams (lucid / wet)</div>
<div class="row no-gutters align-items-center">
<div class="col-auto">
{% special_dreams_weekly as weekly %}
<div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">
{{ weekly.0 }} / {{ weekly.1 }} <sub><i>(weekly)</i></sub>
</div>
</div>
</div>
</div>
<div class="col-auto">
<i class="{{ moodobj.icon }} fa-2x text-gray-300"></i>
</div>
</div>
<div class="col-auto">
<i class="{{ moodobj.icon }} fa-2x text-gray-300"></i>
</div>
</div>
</div>
<!-- Most common theme -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-warning shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Most Common Theme (weekly)</div>
{% most_common_theme_weekly as theme %}
<div class="h5 mb-0 font-weight-bold text-gray-800">
{{ theme.0 }} <sub><i>({{ theme.1 }})</i></sub>
</div>
</div>
<div class="col-auto">
<i class="fas fa-bed fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Most common theme -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-warning shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div
class="text-xs font-weight-bold text-warning text-uppercase mb-1"
>
Most Common Theme (weekly)
</div>
{% most_common_theme_weekly as theme %}
<div class="h5 mb-0 font-weight-bold text-gray-800">
{{ theme.0 }} <sub><i>({{ theme.1 }})</i></sub>
</div>
</div>
<div class="col-auto">
<i class="fas fa-bed fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}