feat: Mobile agenda improvements (ietf-tools#3655)

* fix: Improve agenda page for mobile (narrow) screens

* Remove unrelated change

* Remove FIXME

Author: larseggert

ietf/meeting/tests_views.py

@@ -162,7 +162,7 @@ def test_meeting_agenda(self):
         registration_text = "Registration"
 
         # utc
-        time_interval = "%s-%s" % (slot.utc_start_time().strftime("%H:%M").lstrip("0"), (slot.utc_start_time() + slot.duration).strftime("%H:%M").lstrip("0"))
+        time_interval = r"%s<span.*/span>-%s" % (slot.utc_start_time().strftime("%H:%M").lstrip("0"), (slot.utc_start_time() + slot.duration).strftime("%H:%M").lstrip("0"))
 
         r = self.client.get(urlreverse("ietf.meeting.views.agenda", kwargs=dict(num=meeting.number,utc='-utc')))
         self.assertEqual(r.status_code, 200)
@@ -172,14 +172,14 @@ def test_meeting_agenda(self):
         self.assertIn(session.group.name, agenda_content)
         self.assertIn(session.group.parent.acronym.upper(), agenda_content)
         self.assertIn(slot.location.name, agenda_content)
-        self.assertIn(time_interval, agenda_content)
+        self.assertRegex(agenda_content, time_interval)
         self.assertIsNotNone(q(':input[value="%s"]' % meeting.time_zone),
                              'Time zone selector should show meeting timezone')
         self.assertIsNotNone(q('.nav *:contains("%s")' % meeting.time_zone),
                              'Time zone indicator should be in nav sidebar')
 
         # plain
-        time_interval = "%s-%s" % (slot.time.strftime("%H:%M").lstrip("0"), (slot.time + slot.duration).strftime("%H:%M").lstrip("0"))
+        time_interval = r"%s<span.*/span>-%s" % (slot.time.strftime("%H:%M").lstrip("0"), (slot.time + slot.duration).strftime("%H:%M").lstrip("0"))
 
         r = self.client.get(urlreverse("ietf.meeting.views.agenda", kwargs=dict(num=meeting.number)))
         self.assertEqual(r.status_code, 200)
@@ -189,7 +189,7 @@ def test_meeting_agenda(self):
         self.assertIn(session.group.name, agenda_content)
         self.assertIn(session.group.parent.acronym.upper(), agenda_content)
         self.assertIn(slot.location.name, agenda_content)
-        self.assertIn(time_interval, agenda_content)
+        self.assertRegex(agenda_content, time_interval)
         self.assertIn(registration_text, agenda_content)
 
         # Make sure there's a frame for the session agenda and it points to the right place
@@ -208,7 +208,7 @@ def test_meeting_agenda(self):
 
         # text
         # the rest of the results don't have as nicely formatted times
-        time_interval = time_interval.replace(":", "")
+        time_interval = "%s-%s" % (slot.time.strftime("%H%M").lstrip("0"), (slot.time + slot.duration).strftime("%H%M").lstrip("0"))
 
         r = self.client.get(urlreverse("ietf.meeting.views.agenda", kwargs=dict(num=meeting.number, ext=".txt")))
         self.assertContains(r, session.group.acronym)

ietf/static/js/agenda_timezone.js

@@ -191,16 +191,16 @@ window.update_times = function (newtz) {
                     .dayOfYear()) {
                     $(this)
                         .html(format_time(this.start_ts, newtz, this.format) +
-                            '-' + format_time(this.end_ts, newtz, 5) + tz);
+                            '<span class="d-lg-none"><br></span>-' + format_time(this.end_ts, newtz, 5) + tz);
                 } else {
                     $(this)
                         .html(format_time(this.start_ts, newtz, this.format) +
-                            '-' +
+                            '<span class="d-lg-none"><br></span>-' +
                             format_time(this.end_ts, newtz, this.format) + tz);
                 }
             } else {
                 $(this)
-                    .html(format_time(this.start_ts, newtz, this.format) + '-' +
+                    .html(format_time(this.start_ts, newtz, this.format) + '<span class="d-lg-none"><br></span>-' +
                         format_time(this.end_ts, newtz, this.format));
             }
         });

ietf/static/js/ietf.js

@@ -138,7 +138,7 @@ $(function () {
                 .attr("data-bs-offset", 0)
                 .attr("tabindex", 0)
                 .after($(`
-                 <div class="col-xl-2 small">
+                 <div class="col-xl-2 ps-0 small">
                      <nav id="righthand-nav" class="position-fixed navbar navbar-light bg-light overflow-auto flex-fill" style="height: 70vh; width: inherit;">
                      </nav>
                  </div>

ietf/templates/base.html

@@ -84,7 +84,7 @@
                         </ul>
                     </div>
                 {% endif %}
-                <div class="col overflow-hidden mx-3 ietf-auto-nav" id="content">
+                <div class="col overflow-hidden mx-lg-3 ietf-auto-nav" id="content">
                     <noscript>
                         <div class="alert alert-danger alert-ignore my-3">
                             <b>Javascript disabled?</b> Like other modern websites, the IETF Datatracker relies on Javascript.

ietf/templates/meeting/agenda.html

@@ -143,11 +143,11 @@ <h2 class="mt-3">
                         {% if item.timeslot.show_location and item.timeslot.get_html_location %}
                             {% with item.timeslot.location.floorplan as floor %}
                                 {% if item.timeslot.location.floorplan %}
-                                    <div class="d-none d-sm-block">
+                                    <div class="d-none d-sm-block float-end">
                                         <a href="{% url 'ietf.meeting.views.floor_plan' num=schedule.meeting.number %}#floor-{{ floor.name|xslugify }}"
                                            class="float-end"
                                            title="{{ floor.name }}">
-                                            <span class="badge bg-secondary label-wide">{{ floor.short }}</span>
+                                            <span class="badge bg-secondary">{{ floor.short }}</span>
                                         </a>
                                     </div>
                                 {% endif %}
@@ -161,7 +161,7 @@ <h2 class="mt-3">
                     {% if item.session.current_status == 'canceled' %}
                         <span class="badge bg-danger float-end">CANCELLED</span>
                     {% else %}
-                        <div class="float-end ps-3">
+                        <div class="float-end ps-2">
                             {% if item.slot_type.slug == 'other' %}
                                 {% if item.session.agenda or item.session.remote_instructions or item.session.agenda_note %}
                                     {% include "meeting/session_buttons_include.html" with show_agenda=True item=item schedule=schedule %}
@@ -260,7 +260,7 @@ <h2 class="mt-3">
             {% if item.session.current_status == 'canceled' %}
                 <span class="badge bg-danger float-end">Cancelled</span>
             {% else %}
-                <div class="float-end ps-3">
+                <div class="float-end ps-2">
                     {% include "meeting/session_buttons_include.html" with show_agenda=True session=item.session meeting=schedule.meeting %}
                 </div>
             {% endif %}