Skip to content

Commit bc78b7d

Browse files
WoosterInitiativeWoosterInitiative
authored
Merge pull request #66 from WoosterTech/feat/markdown_notes
Use markdown editor/renderer for notes on Mood Entry; improve layout of cards on Entry list view
2 parents 1d63d39 + 652f3d2 commit bc78b7d

File tree

8 files changed

+503
-36
lines changed

8 files changed

+503
-36
lines changed

‎.djlintrc‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"blank_line_after_tag": "load,extends,include",
3+
"close_void_tags": true,
4+
"format_css": true,
5+
"format_js": true,
6+
"ignore": "H006,H030,H031",
7+
"indent": 2,
8+
"max_line_length": 120,
9+
"preserve_blank_lines": true,
10+
"preserve_leading_space": true,
11+
"format_attribute_template_tags": false
12+
}

‎incredible_data/build_info.py‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
BUILD_NUMBER = 226
2-
COMMIT_HASH = "b949012"
1+
BUILD_NUMBER = 228
2+
COMMIT_HASH = "e826c52"

‎incredible_data/mood/templates/mood/mood_entry.html‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
{% extends "base.html" %}
22

33
{% block content %}
4+
<link rel="stylesheet"
5+
href="https://cdn.jsdelivr.net/npm/easymde@2.18.0/dist/easymde.min.css" />
46
<div class="mood-entry-container container">
57
<h2 class="text-center mb-4">Log Your Mood</h2>
68
<form method="post" novalidate class="mood-entry-form">
79
{% csrf_token %}
810
<div class="mb-3">{{ form.effective_date.label_tag }} {{ form.effective_date }}</div>
911
<div class="mb-3">{{ form.time_of_day.label_tag }} {{ form.time_of_day }}</div>
10-
<div class="mb-3">{{ form.notes.label_tag }} {{ form.notes }}</div>
12+
<div class="mb-3">
13+
{{ form.notes.label_tag }}
14+
{{ form.notes }}
15+
</div>
1116
<h4 class="mt-4 mb-3">Your Metrics</h4>
1217
{{ formset.management_form }}
1318
{% for form in formset %}
@@ -45,6 +50,20 @@ <h4 class="mt-4 mb-3">Your Metrics</h4>
4550
font-size: 1.2rem;
4651
}
4752

53+
.EasyMDEContainer .CodeMirror {
54+
min-height: 120px;
55+
font-size: 1rem;
56+
}
57+
58+
.EasyMDEContainer .editor-toolbar {
59+
background: #f8f9fa;
60+
border-radius: 8px 8px 0 0;
61+
}
62+
63+
.EasyMDEContainer .CodeMirror {
64+
border-radius: 0 0 8px 8px;
65+
}
66+
4867
textarea.form-control {
4968
font-size: 1.1rem;
5069
border-radius: 8px;
@@ -89,4 +108,25 @@ <h4 class="mt-4 mb-3">Your Metrics</h4>
89108
}
90109
}
91110
</style>
111+
<script src="https://cdn.jsdelivr.net/npm/easymde@2.18.0/dist/easymde.min.js"></script>
112+
<script>
113+
document.addEventListener('DOMContentLoaded', function() {
114+
const textarea = document.querySelector('textarea[name="notes"]');
115+
if (textarea) {
116+
new EasyMDE({
117+
element: textarea,
118+
spellChecker: false,
119+
status: false,
120+
toolbar: [
121+
'bold', 'italic', '|',
122+
'unordered-list', 'ordered-list', '|',
123+
'link', '|',
124+
'preview', 'guide'
125+
],
126+
minHeight: '120px',
127+
placeholder: 'How are you feeling today?'
128+
});
129+
}
130+
});
131+
</script>
92132
{% endblock content %}

‎incredible_data/mood/templates/mood/mood_entry_detail.html‎

Lines changed: 67 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
11
{% extends "base.html" %}
22

33
{% block content %}
4+
<script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
45
<div class="mood-detail-container container">
56
<div class="mood-detail-card">
67
<div class="d-flex justify-content-between align-items-center mb-4">
78
<h2 class="mb-0">Mood Entry</h2>
8-
<a href="{% url 'mood:entry-create' %}"
9-
class="btn btn-sm btn-outline-primary">New Entry</a>
9+
<div class="button-group">
10+
<a href="{% url 'mood:entry-list' %}"
11+
class="btn btn-sm btn-outline-secondary"
12+
title="View all entries">📋</a>
13+
<a href="{% url 'mood:user_metric_chart' %}"
14+
class="btn btn-sm btn-outline-secondary"
15+
title="View metrics chart">📊</a>
16+
<a href="{% url 'mood:entry-edit' entry.pk %}"
17+
class="btn btn-sm btn-outline-secondary">Edit</a>
18+
<a href="{% url 'mood:entry-create' %}"
19+
class="btn btn-sm btn-outline-primary">New Entry</a>
20+
</div>
1021
</div>
1122
<div class="entry-info mb-4">
1223
<div class="info-row">
@@ -27,7 +38,7 @@ <h2 class="mb-0">Mood Entry</h2>
2738
{% if entry.notes %}
2839
<div class="notes-section mb-4">
2940
<h4 class="section-title">Notes</h4>
30-
<div class="notes-content">{{ entry.notes }}</div>
41+
<div class="notes-content" id="notes-rendered"></div>
3142
</div>
3243
{% endif %}
3344
<div class="metrics-section">
@@ -76,6 +87,11 @@ <h4 class="section-title">Metrics</h4>
7687
padding: 1.5rem;
7788
}
7889

90+
.button-group {
91+
display: flex;
92+
gap: 0.5rem;
93+
}
94+
7995
.entry-info {
8096
border-bottom: 1px solid #e9ecef;
8197
padding-bottom: 1rem;
@@ -112,11 +128,46 @@ <h4 class="section-title">Metrics</h4>
112128
background: #f8f9fa;
113129
border-radius: 8px;
114130
padding: 1rem;
115-
white-space: pre-wrap;
116-
word-wrap: break-word;
117131
line-height: 1.6;
118132
}
119133

134+
.notes-content p {
135+
margin-bottom: 0.5rem;
136+
}
137+
138+
.notes-content p:last-child {
139+
margin-bottom: 0;
140+
}
141+
142+
.notes-content ul,
143+
.notes-content ol {
144+
margin-bottom: 0.5rem;
145+
padding-left: 1.5rem;
146+
}
147+
148+
.notes-content li {
149+
margin-bottom: 0.25rem;
150+
}
151+
152+
.notes-content h1,
153+
.notes-content h2,
154+
.notes-content h3,
155+
.notes-content h4,
156+
.notes-content h5,
157+
.notes-content h6 {
158+
margin-top: 1rem;
159+
margin-bottom: 0.5rem;
160+
}
161+
162+
.notes-content h1:first-child,
163+
.notes-content h2:first-child,
164+
.notes-content h3:first-child,
165+
.notes-content h4:first-child,
166+
.notes-content h5:first-child,
167+
.notes-content h6:first-child {
168+
margin-top: 0;
169+
}
170+
120171
.metrics-grid {
121172
display: grid;
122173
gap: 1rem;
@@ -205,4 +256,15 @@ <h4 class="section-title">Metrics</h4>
205256
}
206257
}
207258
</style>
259+
{% if entry.notes %}
260+
<script>
261+
document.addEventListener('DOMContentLoaded', function() {
262+
const notesMarkdown = `{{ entry.notes|escapejs }}`;
263+
const notesRendered = document.getElementById('notes-rendered');
264+
if (notesRendered && notesMarkdown) {
265+
notesRendered.innerHTML = marked.parse(notesMarkdown);
266+
}
267+
});
268+
</script>
269+
{% endif %}
208270
{% endblock content %}

‎incredible_data/mood/templates/mood/mood_entry_edit.html‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
{% extends "base.html" %}
2+
3+
{% block content %}
4+
<link rel="stylesheet"
5+
href="https://cdn.jsdelivr.net/npm/easymde@2.18.0/dist/easymde.min.css" />
6+
<div class="mood-entry-container container">
7+
<div class="d-flex justify-content-between align-items-center mb-4">
8+
<h2 class="mb-0">Edit Mood Entry</h2>
9+
<a href="{% url 'mood:entry-detail' entry.pk %}"
10+
class="btn btn-sm btn-outline-secondary">Cancel</a>
11+
</div>
12+
<form method="post" novalidate class="mood-entry-form">
13+
{% csrf_token %}
14+
<div class="mb-3">{{ form.effective_date.label_tag }} {{ form.effective_date }}</div>
15+
<div class="mb-3">{{ form.time_of_day.label_tag }} {{ form.time_of_day }}</div>
16+
<div class="mb-3">
17+
{{ form.notes.label_tag }}
18+
{{ form.notes }}
19+
</div>
20+
<h4 class="mt-4 mb-3">Your Metrics</h4>
21+
{{ formset.management_form }}
22+
{% for form in formset %}
23+
<div class="metric-item mb-3 p-3">
24+
{{ form.id }}
25+
{{ form.metric_type }}
26+
<label class="form-label fw-bold">{{ form.instance.metric_type.name }}</label>
27+
{% if form.instance.metric_type.help_text %}
28+
<small class="d-block text-muted mb-2">{{ form.instance.metric_type.help_text }}</small>
29+
{% endif %}
30+
{{ form.score_value }}
31+
{% if form.score_value.errors %}<div class="text-danger small">{{ form.score_value.errors }}</div>{% endif %}
32+
</div>
33+
{% endfor %}
34+
<div class="d-flex gap-2">
35+
<button type="submit" class="btn btn-primary flex-grow-1 mood-submit-btn">Save Changes</button>
36+
<a href="{% url 'mood:entry-detail' entry.pk %}"
37+
class="btn btn-outline-secondary">Cancel</a>
38+
</div>
39+
</form>
40+
</div>
41+
<style>
42+
.mood-entry-container {
43+
max-width: 480px;
44+
margin: auto;
45+
padding: 1rem;
46+
}
47+
48+
.mood-entry-form {
49+
background: #fff;
50+
border-radius: 12px;
51+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
52+
padding: 1.5rem;
53+
}
54+
55+
.metric-item {
56+
background: #f8f9fa;
57+
border-radius: 8px;
58+
}
59+
60+
.mood-submit-btn {
61+
font-size: 1.2rem;
62+
}
63+
64+
.EasyMDEContainer .CodeMirror {
65+
min-height: 120px;
66+
font-size: 1rem;
67+
}
68+
69+
.EasyMDEContainer .editor-toolbar {
70+
background: #f8f9fa;
71+
border-radius: 8px 8px 0 0;
72+
}
73+
74+
.EasyMDEContainer .CodeMirror {
75+
border-radius: 0 0 8px 8px;
76+
}
77+
78+
textarea.form-control {
79+
font-size: 1.1rem;
80+
border-radius: 8px;
81+
border: 1px solid #ddd;
82+
padding: 0.75rem;
83+
box-sizing: border-box;
84+
width: 100%;
85+
min-height: 120px;
86+
}
87+
88+
input[type="date"],
89+
input[type="number"],
90+
select.form-select {
91+
font-size: 1.1rem;
92+
border-radius: 8px;
93+
border: 1px solid #ddd;
94+
padding: 0.75rem;
95+
width: 100%;
96+
}
97+
98+
.metric-item input[type="number"] {
99+
max-width: 120px;
100+
font-size: 1.2rem;
101+
text-align: center;
102+
}
103+
104+
@media (max-width: 600px) {
105+
.container {
106+
padding: 0.5rem;
107+
}
108+
109+
form {
110+
padding: 1rem;
111+
}
112+
113+
h2 {
114+
font-size: 1.3rem;
115+
}
116+
117+
h4 {
118+
font-size: 1.1rem;
119+
}
120+
}
121+
</style>
122+
<script src="https://cdn.jsdelivr.net/npm/easymde@2.18.0/dist/easymde.min.js"></script>
123+
<script>
124+
document.addEventListener('DOMContentLoaded', function() {
125+
const textarea = document.querySelector('textarea[name="notes"]');
126+
if (textarea) {
127+
new EasyMDE({
128+
element: textarea,
129+
spellChecker: false,
130+
status: false,
131+
toolbar: [
132+
'bold', 'italic', '|',
133+
'unordered-list', 'ordered-list', '|',
134+
'link', '|',
135+
'preview', 'guide'
136+
],
137+
minHeight: '120px',
138+
placeholder: 'How are you feeling today?'
139+
});
140+
}
141+
});
142+
</script>
143+
{% endblock content %}

0 commit comments

Comments
 (0)