Semantic UI version

calsocial/templates/event-details.html

@@ -2,15 +2,23 @@
 {% from '_macros.html' import field %}
 
 {% block content %}
-<h1>
-    {{ event.title }}<br>
-    <small>
-        {{ event.start_time_for_user(current_user) }}–{{ event.end_time_for_user(current_user) }}
-    {% if current_user.timezone | string != event.time_zone %}
-        ({{ event.start_time_tz }}–{{ event.end_time_tz }} {{ event.time_zone }})
+<h2 class="ui header">
+    <div class="content">
+        {{ event.title }}<br>
+        <div class="sub header">
+    {%- if current_user.timezone | string != event.time_zone -%}
+            <span title="{{ _('This event is organised in the %(timezone)s time zone, in which it happens between %(start_time)s and %(end_time)s', timezone=event.time_zone, start_time=event.start_time_tz|datetimeformat(rebase=false), end_time=event.end_time_tz|datetimeformat(rebase=false)) }}">
+                <i class="fa fa-exclamation-triangle timezone-warning"></i>
+                <span class="sr-only">
+                    {{ _('This event is organised in the %(timezone)s time zone, in which it happens between %(start_time)s and %(end_time)s', timezone=event.time_zone, start_time=event.start_time_tz, end_time=event.end_time_tz) }}
+                </span>
+            </span>
     {% endif %}
-    </small>
-</h1>
+            {{ event.start_time_for_user(current_user) | datetimeformat(rebase=false) }}
+            –
+            {{ event.end_time_for_user(current_user) | datetimeformat(rebase=false) }}
+        </div>
+</h2>
 {{ event.description }}
 <hr>
 <h2>{% trans %}Invited users{% endtrans %}</h2>
@@ -26,11 +34,12 @@
 </ul>
 <hr>
 <h2>{% trans %}Invite{% endtrans %}</h2>
-<form method="post">
+<form method="post" class="ui form">
     {{ form.hidden_tag() }}
+    <div class="inline fields">
+        {{ field(form.invitee, inline=true) }}
 
-    {{ field(form.invitee, inline=true) }}
-
-    <button type="submit">{% trans %}Invite{% endtrans %}</button>
+        <button type="submit" class="ui button">{% trans %}Invite{% endtrans %}</button>
+    </div>
 </form>
 {% endblock %}