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

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

@ -1,14 +1,13 @@
{% extends "frontend/base.html" %} {% load mood_stats %} {% load dream_stats %} {% extends "frontend/base.html" %}
{% load mood_stats %}
{% load dream_stats %}
{% block "content" %} {% block "content" %}
<!-- Mood stats -->
<h2>Moods</h2> <h2>Moods</h2>
<!-- Mood calendar heatmap --> <!-- Mood calendar heatmap -->
<div class="row"> <div class="row">
<div class="col-xl-12"> <div class="col-xl-12 mb-4">
<div class="card"> <div class="card shadow">
<div class="card-header"> <div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Mood Calendar</h6> <h6 class="m-0 font-weight-bold text-primary">Mood Calendar</h6>
</div> </div>
<div class="card-body"> <div class="card-body">
@ -17,7 +16,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Mood cards --> <!-- Mood cards -->
<div class="row"> <div class="row">
<!-- Status count --> <!-- Status count -->
@ -26,14 +24,8 @@
<div class="card-body"> <div class="card-body">
<div class="row no-gutters align-items-center"> <div class="row no-gutters align-items-center">
<div class="col mr-2"> <div class="col mr-2">
<div <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Status count (total)</div>
class="text-xs font-weight-bold text-primary text-uppercase mb-1" <div class="h5 mb-0 font-weight-bold text-gray-800">{% total_moods %}</div>
>
Status count (total)
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">
{% total_moods %}
</div>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<i class="fas fa-book fa-2x text-gray-300"></i> <i class="fas fa-book fa-2x text-gray-300"></i>
@ -42,18 +34,13 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Current Streak Length --> <!-- Current Streak Length -->
<div class="col-xl-3 col-md-6 mb-4"> <div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-success shadow h-100 py-2"> <div class="card border-left-success shadow h-100 py-2">
<div class="card-body"> <div class="card-body">
<div class="row no-gutters align-items-center"> <div class="row no-gutters align-items-center">
<div class="col mr-2"> <div class="col mr-2">
<div <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Current Streak Length</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"> <div class="h5 mb-0 font-weight-bold text-gray-800">
{% current_streak %} <sub>days</sub> {% current_streak %} <sub>days</sub>
</div> </div>
@ -65,16 +52,13 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Average mood --> <!-- Average mood -->
<div class="col-xl-3 col-md-6 mb-4"> <div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-info shadow h-100 py-2"> <div class="card border-left-info shadow h-100 py-2">
<div class="card-body"> <div class="card-body">
<div class="row no-gutters align-items-center"> <div class="row no-gutters align-items-center">
<div class="col mr-2"> <div class="col mr-2">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1"> <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Average mood (weekly)</div>
Average mood (weekly)
</div>
<div class="row no-gutters align-items-center"> <div class="row no-gutters align-items-center">
<div class="col-auto"> <div class="col-auto">
{% average_mood_weekly as mood %} {% closest_mood mood as moodobj %} {% average_mood_weekly as mood %} {% closest_mood mood as moodobj %}
@ -91,18 +75,13 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Most common activity --> <!-- Most common activity -->
<div class="col-xl-3 col-md-6 mb-4"> <div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-warning shadow h-100 py-2"> <div class="card border-left-warning shadow h-100 py-2">
<div class="card-body"> <div class="card-body">
<div class="row no-gutters align-items-center"> <div class="row no-gutters align-items-center">
<div class="col mr-2"> <div class="col mr-2">
<div <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Most Common Activity (weekly)</div>
class="text-xs font-weight-bold text-warning text-uppercase mb-1"
>
Most Common Activity (weekly)
</div>
{% most_common_activity_weekly as activity %} {% most_common_activity_weekly as activity %}
<div class="h5 mb-0 font-weight-bold text-gray-800"> <div class="h5 mb-0 font-weight-bold text-gray-800">
{{ activity.0 }}<sub><i>({{ activity.1 }})</i></sub> {{ activity.0 }}<sub><i>({{ activity.1 }})</i></sub>
@ -116,9 +95,9 @@
</div> </div>
</div> </div>
</div> </div>
</section>
<section>
<h2>Dreams</h2> <h2>Dreams</h2>
<!-- Dream Stats --> <!-- Dream Stats -->
<div class="row"> <div class="row">
<!-- Total Dreams --> <!-- Total Dreams -->
@ -127,14 +106,8 @@
<div class="card-body"> <div class="card-body">
<div class="row no-gutters align-items-center"> <div class="row no-gutters align-items-center">
<div class="col mr-2"> <div class="col mr-2">
<div <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Dream count (total)</div>
class="text-xs font-weight-bold text-primary text-uppercase mb-1" <div class="h5 mb-0 font-weight-bold text-gray-800">{% total_dreams %}</div>
>
Dream count (total)
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">
{% total_dreams %}
</div>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<i class="fas fa-book fa-2x text-gray-300"></i> <i class="fas fa-book fa-2x text-gray-300"></i>
@ -143,21 +116,14 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Weekly Dreams --> <!-- Weekly Dreams -->
<div class="col-xl-3 col-md-6 mb-4"> <div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-success shadow h-100 py-2"> <div class="card border-left-success shadow h-100 py-2">
<div class="card-body"> <div class="card-body">
<div class="row no-gutters align-items-center"> <div class="row no-gutters align-items-center">
<div class="col mr-2"> <div class="col mr-2">
<div <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Dreams (weekly)</div>
class="text-xs font-weight-bold text-success text-uppercase mb-1" <div class="h5 mb-0 font-weight-bold text-gray-800">{% weekly_dreams %}</div>
>
Dreams (weekly)
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">
{% weekly_dreams %}
</div>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<i class="fas fa-calendar fa-2x text-gray-300"></i> <i class="fas fa-calendar fa-2x text-gray-300"></i>
@ -166,16 +132,13 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Special Dreams --> <!-- Special Dreams -->
<div class="col-xl-3 col-md-6 mb-4"> <div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-info shadow h-100 py-2"> <div class="card border-left-info shadow h-100 py-2">
<div class="card-body"> <div class="card-body">
<div class="row no-gutters align-items-center"> <div class="row no-gutters align-items-center">
<div class="col mr-2"> <div class="col mr-2">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1"> <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Special Dreams (lucid / wet)</div>
Special Dreams (lucid / wet)
</div>
<div class="row no-gutters align-items-center"> <div class="row no-gutters align-items-center">
<div class="col-auto"> <div class="col-auto">
{% special_dreams_weekly as weekly %} {% special_dreams_weekly as weekly %}
@ -192,18 +155,13 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Most common theme --> <!-- Most common theme -->
<div class="col-xl-3 col-md-6 mb-4"> <div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-warning shadow h-100 py-2"> <div class="card border-left-warning shadow h-100 py-2">
<div class="card-body"> <div class="card-body">
<div class="row no-gutters align-items-center"> <div class="row no-gutters align-items-center">
<div class="col mr-2"> <div class="col mr-2">
<div <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Most Common Theme (weekly)</div>
class="text-xs font-weight-bold text-warning text-uppercase mb-1"
>
Most Common Theme (weekly)
</div>
{% most_common_theme_weekly as theme %} {% most_common_theme_weekly as theme %}
<div class="h5 mb-0 font-weight-bold text-gray-800"> <div class="h5 mb-0 font-weight-bold text-gray-800">
{{ theme.0 }} <sub><i>({{ theme.1 }})</i></sub> {{ theme.0 }} <sub><i>({{ theme.1 }})</i></sub>
@ -217,5 +175,4 @@
</div> </div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}