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