diff --git a/chrono/manager/static/css/style.scss b/chrono/manager/static/css/style.scss
index c37f2163..501790ac 100644
--- a/chrono/manager/static/css/style.scss
+++ b/chrono/manager/static/css/style.scss
@@ -86,27 +86,13 @@ a.timeperiod-list-all {
content: "\f0ad"; /* wrench */
}
-.dayview h2 a,
-.monthview h2 a {
- padding: 0 1ex;
-}
-
-.dayview h2 > span {
- display: inline-block;
- min-width: 24ex;
-}
-
-.monthview h2 > span {
- display: inline-block;
- min-width: 16ex;
-}
-
.openevents .section h4:first-child {
margin-top: 0;
}
table.agenda-table {
+ margin-top: 1em;
border-spacing: 0.5vw 0;
table-layout: fixed;
background-color: white;
@@ -328,20 +314,42 @@ span.start-time {
.date-title {
cursor: pointer;
- &::after {
- content: "\f073"; /* calendar */
- font-family: FontAwesome;
- padding-left: 1ex;
- padding-right: 0ex;
- opacity: 0.3;
- font-size: 80%;
- transition: opacity 200ms linear;
- }
- &:hover::after {
- opacity: 0.8;
+}
+
+span.buttons-group {
+ display: inline-flex;
+ .date-prev {
+ margin-left: 0;
}
}
+div#appbar > h2.date-nav {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ font-size: 100%;
+ position: static;
+ .date-title {
+ font-size: 200%;
+ position: relative;
+ top: 4px;
+ margin-left: 0.5em;
+ margin-right: 0.5em;
+ }
+}
+
+.date-prev, .date-next, .date-picker-opener {
+ &::after {
+ font-weight: normal;
+ font-size: 1rem;
+ font-family: FontAwesome;
+ }
+}
+
+.date-prev::after { content: "\f053"; } /* chevron-left */
+.date-next::after { content: "\f054"; } /* chevron-right */
+.date-picker-opener::after { content: "\f073"; } /* calendar */
+
.date-picker {
button, select {
font-size: 1rem;
@@ -355,7 +363,7 @@ span.start-time {
border: 1px solid #d0d0d0;
border-width: 1px 0 0 1px;
top: -0.6ex;
- left: 5rem;
+ left: 9rem;
background: #FAFAFA;
transform: rotate(45deg);
}
@@ -365,7 +373,7 @@ span.start-time {
box-shadow: 0px 1px 1px 2px rgba(0, 0, 0, 0.04);
padding: 1ex 4ex;
left: 0;
- top: 3ex;
+ top: 6ex;
z-index: 100;
}
diff --git a/chrono/manager/static/js/chrono.manager.js b/chrono/manager/static/js/chrono.manager.js
index 5b324886..e6aa2e40 100644
--- a/chrono/manager/static/js/chrono.manager.js
+++ b/chrono/manager/static/js/chrono.manager.js
@@ -7,6 +7,7 @@ $(function() {
$('.date-title').on('click', function() {
$(this).parent().find('.date-picker').toggle();
});
+ $('.date-picker-opener').on('click', function() { $('.date-title').trigger('click'); });
$('.date-picker button').on('click', function() {
if ($('[name=day]').val()) {
window.location = '../../../' + $('[name=year]').val() + '/' + $('[name=month]').val() + '/' + $('[name=day]').val() + '/';
diff --git a/chrono/manager/templates/chrono/manager_agenda_day_view.html b/chrono/manager/templates/chrono/manager_agenda_day_view.html
index 4b1b1caf..4ec3cced 100644
--- a/chrono/manager/templates/chrono/manager_agenda_day_view.html
+++ b/chrono/manager/templates/chrono/manager_agenda_day_view.html
@@ -9,9 +9,13 @@
{% endblock %}
{% block appbar %}
-
- ←
+
+ {% trans "Previous day" %}
+ {% trans "Next day" %}
+
+
{{ view.date|date:"l j F Y" }}
+
{% with selected_day=view.date|date:"j" selected_month=view.date|date:"n" selected_year=view.date|date:"Y" %}
@@ -20,7 +24,6 @@
{% endwith %}
- →
{% block actions %}
diff --git a/chrono/manager/templates/chrono/manager_agenda_month_view.html b/chrono/manager/templates/chrono/manager_agenda_month_view.html
index 0b05a9cb..c3186bdc 100644
--- a/chrono/manager/templates/chrono/manager_agenda_month_view.html
+++ b/chrono/manager/templates/chrono/manager_agenda_month_view.html
@@ -9,9 +9,13 @@
{% endblock %}
{% block appbar %}
-
- ←
+
+ {% trans "Previous month" %}
+ {% trans "Next month" %}
+
+
{{ view.date|date:"F Y" }}
+
{% with selected_month=view.date|date:"n" selected_year=view.date|date:"Y" %}
@@ -19,7 +23,6 @@
{% endwith %}
- →
{% block actions %}
diff --git a/chrono/manager/templates/chrono/manager_agenda_week_view.html b/chrono/manager/templates/chrono/manager_agenda_week_view.html
index 029a2b6f..dc6f3346 100644
--- a/chrono/manager/templates/chrono/manager_agenda_week_view.html
+++ b/chrono/manager/templates/chrono/manager_agenda_week_view.html
@@ -34,9 +34,13 @@
{% endblock %}
{% block appbar %}
-
- ←
+
+ {% trans "Previous week" %}
+ {% trans "Next week" %}
+
+
{{ view.date|date:_("Y \w\e\e\k W") }}
+
{% with selected_week=view.date|date:"W" selected_year=view.date|date:"Y" %}
@@ -44,7 +48,6 @@
{% endwith %}
- →
{% block actions %}
diff --git a/chrono/manager/templates/chrono/manager_resource_day_view.html b/chrono/manager/templates/chrono/manager_resource_day_view.html
index 336180ce..47d86126 100644
--- a/chrono/manager/templates/chrono/manager_resource_day_view.html
+++ b/chrono/manager/templates/chrono/manager_resource_day_view.html
@@ -7,9 +7,13 @@
{% endblock %}
{% block appbar-title %}
-
- ←
+
+ {% trans "Previous day" %}
+ {% trans "Next day" %}
+
+
{{ view.date|date:"l j F Y" }}
+
{% with selected_day=view.date|date:"j" selected_month=view.date|date:"n" selected_year=view.date|date:"Y" %}
@@ -18,7 +22,6 @@
{% endwith %}
- →
{% endblock %}
{% block appbar-extras %}
diff --git a/chrono/manager/templates/chrono/manager_resource_month_view.html b/chrono/manager/templates/chrono/manager_resource_month_view.html
index e5f1ce60..20c8aa50 100644
--- a/chrono/manager/templates/chrono/manager_resource_month_view.html
+++ b/chrono/manager/templates/chrono/manager_resource_month_view.html
@@ -9,9 +9,13 @@
{% endblock %}
{% block appbar-title %}
-
- ←
+
+ {% trans "Previous month" %}
+ {% trans "Next month" %}
+
+
{{ view.date|date:"F Y" }}
+
{% with selected_month=view.date|date:"n" selected_year=view.date|date:"Y" %}
@@ -19,7 +23,6 @@
{% endwith %}
- →
{% endblock %}
{% block appbar-extras %}
diff --git a/chrono/manager/templates/chrono/manager_resource_week_view.html b/chrono/manager/templates/chrono/manager_resource_week_view.html
index 682fefed..70b8a2df 100644
--- a/chrono/manager/templates/chrono/manager_resource_week_view.html
+++ b/chrono/manager/templates/chrono/manager_resource_week_view.html
@@ -34,9 +34,13 @@
{% endblock %}
{% block appbar-title %}
-
- ←
+
+ {% trans "Previous week" %}
+ {% trans "Next week" %}
+
+
{{ view.date|date:_("Y \w\e\e\k W") }}
+
{% with selected_week=view.date|date:"W" selected_year=view.date|date:"Y" %}
@@ -44,7 +48,6 @@
{% endwith %}
- →
{% endblock %}
{% block appbar-extras %}
diff --git a/tests/manager/test_shared_custody_agenda.py b/tests/manager/test_shared_custody_agenda.py
index e55fb1a0..f2d4b0e5 100644
--- a/tests/manager/test_shared_custody_agenda.py
+++ b/tests/manager/test_shared_custody_agenda.py
@@ -199,7 +199,7 @@ def test_shared_custody_agenda_month_view(app, admin_user):
assert tds[:7] == ['Jane Doe', 'John Doe', 'John Doe', 'Jane Doe', 'Jane Doe', 'Jane Doe', 'Jane Doe']
old_resp = resp
- resp = resp.click('→')
+ resp = resp.click('Next month')
assert 'March 2022' in resp.text
assert 'today' not in resp.text
assert all('Week %s' % i in resp.text for i in range(9, 14))
@@ -209,7 +209,7 @@ def test_shared_custody_agenda_month_view(app, admin_user):
assert days[:3] == ['Monday 28', 'Tuesday 1', 'Wednesday 2']
assert days[-3:] == ['Friday 1', 'Saturday 2', 'Sunday 3']
- resp = resp.click('←')
+ resp = resp.click('Previous month')
assert resp.text == old_resp.text
app.get('/manage/shared-custody/%s/42/42/' % agenda.pk, status=404)
@@ -260,13 +260,13 @@ def test_shared_custody_agenda_month_view_dates(app, admin_user):
assert 'This agenda applies from Feb. 14, 2022 to Feb. 14, 2022.' in resp.text
# month before date_start
- resp = resp.click('←')
+ resp = resp.click('Previous month')
assert resp.text.count(' | ') == 42
assert len([x.text for x in resp.pyquery('tbody tr td.guardian')]) == 0
# month after date_end
resp = app.get('/manage/shared-custody/%s/' % agenda.pk).follow()
- resp = resp.click('→')
+ resp = resp.click('Next month')
assert resp.text.count(' | ') == 35
assert len([x.text for x in resp.pyquery('tbody tr td.guardian')]) == 0