Rewrite bits of the program scheduling to work better on mobile.

2017-02-17 17:17:21 +01:00 · 2017-02-17 17:17:21 +01:00 · 59bb0f8e3a
parent 924141d922
commit 59bb0f8e3a
13 changed files with 168 additions and 170 deletions
--- a/src/bornhack/urls.py
+++ b/src/bornhack/urls.py
@ -90,15 +90,15 @@ urlpatterns = [
            ),

            url(
-                r'^schedule/', include([
+                r'^program/', include([
                    url(
                        r'^(?P<year>\d{4})-(?P<month>\d{2})-(?P<day>\d{2})/$',
-                        ProgramDayView.as_view(),
+                        ScheduleView.as_view(),
                        name='schedule_day'
                    ),
                    url(
                        r'^$',
-                        ProgramOverviewView.as_view(),
+                        ScheduleView.as_view(),
                        name='schedule_index'
                    ),
                    url(
--- a/src/program/templates/bornhack-2016_call_for_speakers.html
+++ b/src/program/templates/bornhack-2016_call_for_speakers.html
@ -1,10 +1,10 @@
-{% extends 'schedule_base.html' %}
+{% extends 'program_base.html' %}

 {% block title %}
 Call for Speakers | {{ block.super }}
 {% endblock %}

-{% block schedule_content %}
+{% block program_content %}

 {% if not camp.call_for_speakers_open %}
 <div class="alert alert-danger">
--- a/src/program/templates/bornhack-2017_call_for_speakers.html
+++ b/src/program/templates/bornhack-2017_call_for_speakers.html
@ -1,10 +1,10 @@
-{% extends 'schedule_base.html' %}
+{% extends 'program_base.html' %}

 {% block title %}
 Call for Speakers | {{ block.super }}
 {% endblock %}

-{% block schedule_content %}
+{% block program_content %}

 {% if not camp.call_for_speakers_open %}
 <div class="alert alert-danger">
--- a/src/program/templates/event_list.html
+++ b/src/program/templates/event_list.html
@ -1,6 +1,6 @@
-{% extends 'schedule_base.html' %}
+{% extends 'program_base.html' %}

-{% block schedule_content %}
+{% block program_content %}
 <p class="lead">
  An alphabetical list of all talks, workshops, keynotes and other events
  at {{ camp.title }}.
@ -21,4 +21,4 @@
  {% endif %}
  {% endfor %}
 </div>
-{% endblock schedule_content %}
+{% endblock program_content %}
--- a/src/program/templates/program_base.html
+++ b/src/program/templates/program_base.html
@ -1,75 +1,23 @@
-{% extends 'schedule_base.html' %}
-{% load dateutils %}
+{% extends 'base.html' %}

-{% block schedule_content %}
-  <div class="btn-group">
-    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    Day: {% if urlyear %}{% get_weekday urlyear urlmonth urlday %}{% else %}All{% endif %} <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu list-group">
-        <a href="{% url 'schedule_index' camp_slug=camp.slug %}{% if location and eventtype %}?location={{ location.slug }}&type={{ eventtype.slug }}{% elif location and not eventtype %}?location={{ location.slug }}{% elif eventtype and not location %}?type={{ eventtype.slug }}{% endif %}" class="list-group-item{% if not urlyear %} active{% endif %}">
-          All
-      </a>
-     {% for day in camp.camp_days %}
-      {% with month_padded=day.lower.date|date:"m" day_padded=day.lower.date|date:"d" %}
-        {% url 'schedule_day' camp_slug=camp.slug year=day.lower.date.year month=month_padded day=day_padded as baseurl %}
-        <a href="{{ baseurl }}{% if location and eventtype %}?location={{ location.slug }}&type={{ eventtype.slug }}{% elif location and not eventtype %}?location={{ location.slug }}{% elif eventtype and not location %}?type={{ eventtype.slug }}{% endif %}" class="list-group-item{% if urlyear and urlyear|add:"0" == day.lower.date.year and urlmonth == month_padded and urlday == day_padded %} active{% endif %}">
-          {{ day.lower.date|date:"l" }}
-        </a>
-      {% endwith %}
-    {% endfor %}
-    </ul>
+{% block content %}
+
+<div class="row">
+  <div class="btn-group btn-group-justified hidden-xs">
+    <a href="{% url 'schedule_index' camp_slug=camp.slug %}" class="btn {% if request.resolver_match.url_name == "schedule_index" or urlyear %}btn-primary{% else %}btn-default{% endif %}">Schedule</a>
+    <a href="{% url 'event_index' camp_slug=camp.slug %}" class="btn {% if request.resolver_match.url_name == "event_index" %}btn-primary{% else %}btn-default{% endif %}">Events</a>
+    <a href="{% url 'speaker_index' camp_slug=camp.slug %}" class="btn {% if request.resolver_match.url_name == "speaker_index" %}btn-primary{% else %}btn-default{% endif %}">Speakers</a>
+    <a href="{% url 'call_for_speakers' camp_slug=camp.slug %}" class="btn {% if request.resolver_match.url_name == "call_for_speakers" %}btn-primary{% else %}btn-default{% endif %}"><span {% if not camp.call_for_speakers_open %}style="text-decoration: line-through;"{% endif %}>Call for Speakers</span></a>
  </div>
-
-   <div class="btn-group">
-    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        Type: {% if eventtype %}<span style="color: {{ eventtype.color }};" class="glyphicon glyphicon-filter" aria-hidden="true"></span> {% endif %}{% if eventtype %}{{ eventtype.name }}{% else %}All{% endif %} <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu list-group">
-      {% if not urlyear %}
-        {% url 'schedule_index' camp_slug=camp.slug as baseurl %}
-      {% else %}
-        {% url 'schedule_day' camp_slug=camp.slug year=urlyear month=urlmonth day=urlday as baseurl %}
-      {% endif %}
-      <a href="{{ baseurl }}{% if location %}?location={{ location.slug }}{% endif %}" class="list-group-item{% if not eventtype %} active{% endif %}">
-        <span style="color: {{ event_type.color }}" class="glyphicon glyphicon-filter" aria-hidden="true"></span> All
-      </a>
-      {% for event_type in camp.event_types %}
-        {% if not urlyear %}
-          {% url 'schedule_index' camp_slug=camp.slug as baseurl %}
-        {% else %}
-          {% url 'schedule_day' camp_slug=camp.slug year=urlyear month=urlmonth day=urlday as baseurl %}
-        {% endif %}
-        <a href="{{ baseurl }}?type={{ event_type.slug }}{% if location %}&location={{ location.slug }}{% endif %}" class="list-group-item{% if eventtype and eventtype == event_type %} active{% endif %}">
-            <span style="color: {{ event_type.color }}" class="glyphicon glyphicon-filter" aria-hidden="true"></span> {{ event_type.name }}
-        </a>
-      {% endfor %}
-    </ul>
+  <div class="btn-group-vertical visible-xs">
+    <a href="{% url 'schedule_index' camp_slug=camp.slug %}" class="btn {% if request.resolver_match.url_name == "schedule_index" or urlyear %}btn-primary{% else %}btn-default{% endif %}">Schedule</a>
+    <a href="{% url 'event_index' camp_slug=camp.slug %}" class="btn {% if request.resolver_match.url_name == "event_index" %}btn-primary{% else %}btn-default{% endif %}">Events</a>
+    <a href="{% url 'speaker_index' camp_slug=camp.slug %}" class="btn {% if request.resolver_match.url_name == "speaker_index" %}btn-primary{% else %}btn-default{% endif %}">Speakers</a>
+    <a href="{% url 'call_for_speakers' camp_slug=camp.slug %}" class="btn {% if request.resolver_match.url_name == "call_for_speakers" %}btn-primary{% else %}btn-default{% endif %}"><span {% if not camp.call_for_speakers_open %}style="text-decoration: line-through;"{% endif %}>Call for Speakers</span></a>
  </div>
-
-  <div class="btn-group">
-    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-      Location: {% if location %}{{ location.name }}{% else %}All{% endif %} <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu list-group">
-      {% if not urlyear %}
-      <a href="{% url 'schedule_index' camp_slug=camp.slug %}{% if eventtype %}?type={{ eventtype.slug }}{% endif %}" class="list-group-item{% if not location %} active{% endif %}">All</a>
-      {% else %}
-        <a href="{% url 'schedule_day' camp_slug=camp.slug year=urlyear month=urlmonth day=urlday %}{% if eventtype %}?type={{ eventtype.slug }}{% endif %}" class="list-group-item{% if not location %} active{% endif %}">All</a>
-      {% endif %}
-      {% for loc in camp.event_locations %}
-        {% if not urlyear %}
-          <a href="{% url 'schedule_index' camp_slug=camp.slug %}?location={{ loc.slug }}{% if eventtype %}&type={{ eventtype.slug }}{% endif %}" class="list-group-item{% if location and location == loc%} active{% endif %}">{{ loc.name }}</a>
-        {% else %}
-          <a href="{% url 'schedule_day' camp_slug=camp.slug year=urlyear month=urlmonth day=urlday %}?location={{ loc.slug }}{% if eventtype %}&type={{ eventtype.slug }}{% endif %}" class="list-group-item{% if location and location == loc%} active{% endif %}">{{ loc.name }}</a>
-        {% endif %}
-      {% endfor %}
-    </ul>
-  </div>
-
-<hr />
-
+</div>
+<p>
 {% block program_content %}
 {% endblock program_content %}

-{% endblock schedule_content %}
+{% endblock content %}
--- a/src/program/templates/schedule_base.html
+++ b/src/program/templates/schedule_base.html
@ -1,17 +1,76 @@
-{% extends 'base.html' %}
+{% extends 'program_base.html' %}
+{% load dateutils %}

-{% block content %}
+{% block program_content %}

-<div class="row">
-  <div class="btn-group btn-group-justified">
-  <a href="{% url 'schedule_index' camp_slug=camp.slug %}" class="btn {% if request.resolver_match.url_name == "schedule_index" or urlyear %}btn-primary{% else %}btn-default{% endif %}">Schedule</a>
-  <a href="{% url 'event_index' camp_slug=camp.slug %}" class="btn {% if request.resolver_match.url_name == "event_index" %}btn-primary{% else %}btn-default{% endif %}">Events</a>
-  <a href="{% url 'speaker_index' camp_slug=camp.slug %}" class="btn {% if request.resolver_match.url_name == "speaker_index" %}btn-primary{% else %}btn-default{% endif %}">Speakers</a>
-  <a href="{% url 'call_for_speakers' camp_slug=camp.slug %}" class="btn {% if request.resolver_match.url_name == "call_for_speakers" %}btn-primary{% else %}btn-default{% endif %}"><span {% if not camp.call_for_speakers_open %}style="text-decoration: line-through;"{% endif %}>Call for Speakers</span></a>
+<div class="btn-group btn-group-justified">
+
+<form method="get" id="filter" class="form-inline">
+
+  <div class="form-group">
+    <select id="day" name="day" class="form-control filter-control">
+      <option value="">All Days</option>
+      {% for day in camp.camp_days %}
+        {% with month_padded=day.lower.date|date:"m" day_padded=day.lower.date|date:"d" %}
+        <option
+          value="{{ day.lower.date|date:"Y-m-d" }}"
+          {% if urlyear and urlyear|add:"0" == day.lower.date.year and urlmonth == month_padded and urlday == day_padded %}
+          selected
+          {% endif %}>
+              {{ day.lower.date|date:"l" }}
+        </option>
+        {% endwith %}
+      {% endfor %}
+    </select>
+
+    <select id="event_type" name="event_type" class="form-control filter-control">
+      <option value="">All Types</option>
+      {% for type in camp.event_types %}
+      <option value="{{ type.slug }}"{% if eventtype and eventtype == type %}selected{% endif %}>{{ type.name }}</option>
+      {% endfor %}
+    </select>
+
+    <select id="location" name="location" class="form-control filter-control">
+      <option value="">All Locations</option>
+      {% for loc in camp.event_locations %}
+      <option value="{{ loc.slug }}" {% if location and location == loc %}selected{% endif %}>{{ loc.name }}</option>
+      {% endfor %}
+    </select>
  </div>
+</form>
 </div>
-<p>
+
+<hr />
+
 {% block schedule_content %}
 {% endblock schedule_content %}

-{% endblock content %}
+{% url 'schedule_index' camp_slug=camp.slug as baseurl %}
+
+<script>
+    $('.filter-control').on('change', function() {
+        var day = $('#day').val();
+        var type = $('#event_type').val();
+        var loc = $('#location').val();
+        var url = "{{baseurl}}";
+
+        if(day) {
+          url = url + day + '/';
+        }
+
+        if(type != '' || loc != '') {
+          url = url + '?';
+          if(type != '') {
+              url = url + 'type=' + type;
+              if(loc != '') { url = url + '&'; }
+          }
+          if(loc != '') {
+              url = url + 'location=' + loc;
+          }
+        }
+
+        window.location.href = url;
+    });
+</script>
+
+{% endblock program_content %}
--- a/src/program/templates/schedule_day.html
+++ b/src/program/templates/schedule_day.html
@ -1,6 +1,6 @@
-{% extends 'program_base.html' %}
+{% extends 'schedule_base.html' %}

-{% block program_content %}
+{% block schedule_content %}
 <table>
    <tbody>
        <table>
@ -22,4 +22,4 @@
        </table>
    </tbody>
 </table>
-{% endblock program_content %}
+{% endblock %}
--- a/src/program/templates/schedule_event_detail.html
+++ b/src/program/templates/schedule_event_detail.html
@ -1,7 +1,7 @@
-{% extends 'schedule_base.html' %}
+{% extends 'program_base.html' %}
 {% load commonmark %}

-{% block schedule_content %}
+{% block program_content %}
 <div class="panel panel-default">
    <div class="panel-heading" ><span style="font-size: x-large"><span style="background-color: {{ event.event_type.color }}; border: 0; color: {% if event.event_type.light_text %}white{% else %}black{% endif %}; display: inline-block; padding: 5px;">{{ event.event_type.name }}</span> {{ event.title }}</span></div>
  <div class="panel-body">
@ -29,5 +29,5 @@
    </h4>
  </div>
 </div>
-{% endblock schedule_content %}
+{% endblock program_content %}

--- a/src/program/templates/schedule_overview.html
+++ b/src/program/templates/schedule_overview.html
@ -1,6 +1,6 @@
-{% extends 'program_base.html' %}
+{% extends 'schedule_base.html' %}

-{% block program_content %}
+{% block schedule_content %}
 {% for day in camp.camp_days %}
  {{ day.lower.date|date:"D d/m" }} <br />
  <div style="display: flex; flex-wrap: wrap;">
@ -20,4 +20,4 @@
 <hr />
 {% endfor %}

-{% endblock program_content %}
+{% endblock schedule_content %}
--- a/src/program/templates/speaker_detail.html
+++ b/src/program/templates/speaker_detail.html
@ -1,7 +1,7 @@
-{% extends 'schedule_base.html' %}
+{% extends 'program_base.html' %}
 {% load commonmark %}

-{% block schedule_content %}
+{% block program_content %}

 <h3>{{ speaker.name }}</h3>

@ -32,4 +32,4 @@
      No events registered for this speaker yet
    {% endfor %}
 {% endif %}
-{% endblock schedule_content %}
+{% endblock program_content %}
--- a/src/program/templates/speaker_list.html
+++ b/src/program/templates/speaker_list.html
@ -1,6 +1,6 @@
-{% extends 'schedule_base.html' %}
+{% extends 'program_base.html' %}

-{% block schedule_content %}
+{% block program_content %}
 <p class="lead">
  An alphabetical list of all speakers, workshop hosts and other
  event anchors at BornHack 2016.
@ -13,4 +13,4 @@
  </a>
  {% endfor %}
 </div>
-{% endblock schedule_content %}
+{% endblock program_content %}
--- a/src/program/views.py
+++ b/src/program/views.py
@ -26,9 +26,11 @@ class EventListView(CampViewMixin, ListView):
    template_name = 'event_list.html'


-class ProgramOverviewView(CampViewMixin, ListView):
-    model = models.Event
-    template_name = 'program_overview.html'
+class ScheduleView(CampViewMixin, TemplateView):
+    def get_template_names(self):
+        if 'day' in self.kwargs:
+            return 'schedule_day.html'
+        return 'schedule_overview.html'

    def get_context_data(self, *args, **kwargs):
        if 'type' in self.request.GET:
@ -48,7 +50,7 @@ class ProgramOverviewView(CampViewMixin, ListView):
            except models.EventLocation.DoesNotExist:
                raise Http404

-        context = super(ProgramOverviewView, self).get_context_data(**kwargs)
+        context = super(ScheduleView, self).get_context_data(**kwargs)
        eventinstances = models.EventInstance.objects.filter(event__in=self.camp.events.all())

        if 'type' in self.request.GET:
@ -59,24 +61,9 @@ class ProgramOverviewView(CampViewMixin, ListView):
            context['location'] = eventlocation
            eventinstances = eventinstances.filter(location=eventlocation)
        context['eventinstances'] = eventinstances
-        return context

-
-class ProgramDayView(CampViewMixin, TemplateView):
-    template_name = 'program_day.html'
-    def dispatch(self, *args, **kwargs):
-        """ If an event type has been supplied check if it is valid """
-        if 'type' in self.request.GET:
-            try:
-                eventtype = models.EventType.objects.get(
-                    slug=self.request.GET['type']
-                )
-            except models.EventType.DoesNotExist:
-                raise Http404
-        return super(ProgramDayView, self).dispatch(*args, **kwargs)
-
-    def get_context_data(self, *args, **kwargs):
-        context = super(ProgramDayView, self).get_context_data(**kwargs)
+        # Do stuff if we are dealing with a day schedule
+        if 'day' in kwargs:
            when = datetime.datetime(year=int(self.kwargs['year']), month=int(self.kwargs['month']), day=int(self.kwargs['day']))
            eventinstances = models.EventInstance.objects.filter(event__in=self.camp.events.all())
            skip = []
@ -114,17 +101,12 @@ class ProgramDayView(CampViewMixin, TemplateView):
            context['urlmonth'] = self.kwargs['month']
            context['urlday'] = self.kwargs['day']

-        if 'type' in self.request.GET:
-            context['eventtype'] = models.EventType.objects.get(slug=self.request.GET['type'])
-        if 'location' in self.request.GET:
-            context['location'] = models.EventLocation.objects.get(camp=self.camp, slug=self.request.GET['location'])
-
        return context


 class EventDetailView(CampViewMixin, DetailView):
    model = models.Event
-    template_name = 'program_event_detail.html'
+    template_name = 'schedule_event_detail.html'


 class CallForSpeakersView(CampViewMixin, TemplateView):
--- a/src/templates/base.html
+++ b/src/templates/base.html
@ -69,11 +69,20 @@
    <div id="main" class="container container-fluid">
      {% if camp %}
        <div class="row">
-          <div class="btn-group btn-group-justified">
+          <div class="btn-group btn-group-justified hidden-xs">
            <a class="btn {% menubuttonclass 'camps' %}" href="{% url 'camp_detail' camp_slug=camp.slug %}">{{ camp.title }}</a>
            <a class="btn {% menubuttonclass 'info' %}" href="{% url 'info' camp_slug=camp.slug %}">Info</a></li>
            <a class="btn {% menubuttonclass 'villages' %}" href="{% url 'village_list' camp_slug=camp.slug %}">Villages</a>
-            <a class="btn {% menubuttonclass 'program' %}" href="{% url 'schedule_index' camp_slug=camp.slug %}">Schedule</a>
+            <a class="btn {% menubuttonclass 'program' %}" href="{% url
+                'schedule_index' camp_slug=camp.slug %}">Program</a>
+            <a class="btn {% menubuttonclass 'sponsors' %}" href="{% url 'sponsors' camp_slug=camp.slug %}">Sponsors</a>
+          </div>
+          <div class="btn-group-vertical visible-xs">
+            <a class="btn {% menubuttonclass 'camps' %}" href="{% url 'camp_detail' camp_slug=camp.slug %}">{{ camp.title }}</a>
+            <a class="btn {% menubuttonclass 'info' %}" href="{% url 'info' camp_slug=camp.slug %}">Info</a></li>
+            <a class="btn {% menubuttonclass 'villages' %}" href="{% url 'village_list' camp_slug=camp.slug %}">Villages</a>
+            <a class="btn {% menubuttonclass 'program' %}" href="{% url
+                'schedule_index' camp_slug=camp.slug %}">Program</a>
            <a class="btn {% menubuttonclass 'sponsors' %}" href="{% url 'sponsors' camp_slug=camp.slug %}">Sponsors</a>
          </div>
        <p>