Adding modal for events for better userinterface.

This commit is contained in:
Víðir Valberg Guðmundsson 2017-04-14 23:29:30 +02:00
parent 0cadabf6b7
commit 4f6e6bcd3f
3 changed files with 32 additions and 3 deletions

View file

@ -1,5 +1,7 @@
{% extends 'schedule_base.html' %} {% extends 'schedule_base.html' %}
{% load commonmark %}
{% block schedule_content %} {% block schedule_content %}
{% if eventinstances %} {% if eventinstances %}
{% for day in camp.camp_days %} {% for day in camp.camp_days %}
@ -9,7 +11,10 @@
{% if eventinstance.schedule_date == day.lower.date %} {% if eventinstance.schedule_date == day.lower.date %}
<a class="event" <a class="event"
href="{% url 'event_detail' camp_slug=camp.slug slug=eventinstance.event.slug %}" href="{% url 'event_detail' camp_slug=camp.slug slug=eventinstance.event.slug %}"
style="background-color: {{ eventinstance.event.event_type.color }}; border: 0; color: {% if eventinstance.event.event_type.light_text %}white{% else %}black{% endif %};"> style="background-color: {{ eventinstance.event.event_type.color }}; color: {% if eventinstance.event.event_type.light_text %}white{% else %}black{% endif %};"
data-toggle="modal"
data-target="#{{ eventinstance.event.slug }}"
data-remote=false>
<small>{{ eventinstance.when.lower|date:"H:i" }} - {{ eventinstance.when.upper|date:"H:i" }}</small> <small>{{ eventinstance.when.lower|date:"H:i" }} - {{ eventinstance.when.upper|date:"H:i" }}</small>
<span class="pull-right" style="font-family: 'FontAwesome';">&#x{{ eventinstance.location.icon }};</span> <span class="pull-right" style="font-family: 'FontAwesome';">&#x{{ eventinstance.location.icon }};</span>
<br /> <br />
@ -17,6 +22,26 @@
<br /> <br />
</a> </a>
{% endif %} {% endif %}
<div class="modal" id="{{ eventinstance.event.slug }}" tabindex="-1" role="dialog" aria-labelledby="{{ eventinstance.event.slug }}-label">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="{{ eventinstance.event.slug }}-label">{{ eventinstance.event.title }}</h4>
</div>
<div class="modal-body">
{{ eventinstance.event.abstract|commonmark}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<a class="btn btn-success"><i class="fa fa-star"></i> Favorite</a>
<a class="btn btn-info" href="{% url 'event_detail' camp_slug=camp.slug slug=eventinstance.event.slug %}"><i class="fa fa-info"></i> More</a>
</div>
</div>
</div>
</div>
{% endfor %} {% endfor %}
</div> </div>
<hr /> <hr />

View file

@ -234,7 +234,7 @@ class ScheduleView(CampViewMixin, TemplateView):
def get_context_data(self, *args, **kwargs): def get_context_data(self, *args, **kwargs):
context = super(ScheduleView, self).get_context_data(**kwargs) context = super(ScheduleView, self).get_context_data(**kwargs)
eventinstances = models.EventInstance.objects.filter(event__in=self.camp.events.all()) eventinstances = models.EventInstance.objects.filter(event__in=self.camp.events.all()).select_related()
type_slug = self.request.GET.get('type', None) type_slug = self.request.GET.get('type', None)
location_slug = self.request.GET.get('location', None) location_slug = self.request.GET.get('location', None)

View file

@ -93,9 +93,13 @@ footer {
} }
.event { .event {
width: 200px;
padding: 5px; padding: 5px;
vertical-align: top; vertical-align: top;
margin: 5px;
max-width: 200px;
min-height: 100px;
flex-grow: 1;
border: 1px solid black;
} }
@media (max-width: 520px) { @media (max-width: 520px) {