Major overhaul:

* Switched to semantic ui.
* Add searching by location or tag
* Reworked the forms

src/Hackspace/Bundle/CalciferBundle/Resources/assets/css/events.scss

@@ -0,0 +1,31 @@
+.event.box {
+  h2 {
+    padding: 0.5rem;
+    a,a:hover,a:visited {
+      color: #ffffff;
+    }
+  }
+
+  .startdate,.location,.url,.edit {
+    /*float: left;*/
+    display: inline;
+    margin: 0;
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  ul.tags {
+    padding-left: 0;
+    /*float: left;*/
+    margin: 0;
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
+    display: inline;
+    li {
+      list-style-type: none;
+      /*float: left;*/
+      display: inline;
+      margin-right: 0.5rem;
+    }
+  }
+}

src/Hackspace/Bundle/CalciferBundle/Resources/assets/css/jquery.datetimepicker.scss

@@ -0,0 +1,366 @@
+.xdsoft_datetimepicker {
+    box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.506);
+    background: #FFFFFF;
+    border-bottom: 1px solid #BBBBBB;
+    border-left: 1px solid #CCCCCC;
+    border-right: 1px solid #CCCCCC;
+    border-top: 1px solid #CCCCCC;
+    color: #333333;
+    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+    padding: 8px;
+    padding-left: 0px;
+    padding-top: 2px;
+    position: absolute;
+    z-index: 9999;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    display: none;
+}
+
+.xdsoft_datetimepicker iframe {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 75px;
+    height: 210px;
+    background: transparent;
+    border: none;
+}
+
+/*For IE8 or lower*/
+.xdsoft_datetimepicker button {
+    border: none !important;
+}
+
+.xdsoft_noselect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+}
+
+.xdsoft_noselect::selection {
+    background: transparent;
+}
+
+.xdsoft_noselect::-moz-selection {
+    background: transparent;
+}
+
+.xdsoft_datetimepicker.xdsoft_inline {
+    display: inline-block;
+    position: static;
+    box-shadow: none;
+}
+
+.xdsoft_datetimepicker * {
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0px;
+    margin: 0px;
+}
+
+.xdsoft_datetimepicker .xdsoft_datepicker, .xdsoft_datetimepicker .xdsoft_timepicker {
+    display: none;
+}
+
+.xdsoft_datetimepicker .xdsoft_datepicker.active, .xdsoft_datetimepicker .xdsoft_timepicker.active {
+    display: block;
+}
+
+.xdsoft_datetimepicker .xdsoft_datepicker {
+    width: 224px;
+    float: left;
+    margin-left: 8px;
+}
+
+.xdsoft_datetimepicker .xdsoft_timepicker {
+    width: 58px;
+    float: left;
+    text-align: center;
+    margin-left: 8px;
+    margin-top: 0px;
+}
+
+.xdsoft_datetimepicker .xdsoft_datepicker.active + .xdsoft_timepicker {
+    margin-top: 8px;
+    margin-bottom: 3px
+}
+
+.xdsoft_datetimepicker .xdsoft_mounthpicker {
+    position: relative;
+    text-align: center;
+}
+
+.xdsoft_datetimepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_next, .xdsoft_datetimepicker .xdsoft_today_button {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAAeCAYAAACsYQl4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozQjRCQjRGREU4MkNFMzExQjRDQkIyRDJDOTdBRUI1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCQjg0OUYyNTZDODAxMUUzQjMwM0IwMERBNUU0ODQ5NSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCQjg0OUYyNDZDODAxMUUzQjMwM0IwMERBNUU0ODQ5NSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkI5NzE3MjFBN0E2Q0UzMTFBQjJEQjgzMDk5RTNBNTdBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCNEJCNEZERTgyQ0UzMTFCNENCQjJEMkM5N0FFQjUwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+aQvATgAAAfVJREFUeNrsmr1OwzAQxzGtkPjYEAuvVGAvfQIGRKADE49gdLwDDwBiZ2RhQUKwICQkWLsgFiRQuIBTucFJ/XFp4+hO+quqnZ4uvzj2nV2RpukCW/22yAgYNINmc7du7DcghCjrkqgOKjF1znpt6rZ0AGWQj7TvCU8d9UM+QAGDrhdyc2Bnc1WVVPBev9V8lBnY+rDwncWZThG4xk4lmxtJy2AHgoY/FySgbSBPwPZ8mEXbQx3aDERb0EbYAYFC7pcAtAvkMWwC0D3NX58S9D/YnoGC7nPWr3Dg9JTbtuHhDShBT8D2CBSK/iIEvVXxpuxSgh7DdgwUTL4iA92zmJb6lKB/YTsECmV+IgK947AGDIqgQ/LojsO135Hn51l2cWlov0JdGNrPUceueXRwilSVgkUyom9Rd6gbLfYTDeO+1v6orn0InTogYDGUkYLO3/wc9BdqqTCKP1Tfi+oTIaCBIL2TES+GTyruT9S61p6BHam+99DFEAgLFklYsIBHwSI9QY80H5ta+1rB/6ovaKihBJeEJbgLbBlQgl+j3lDPqA2tfQV1j3pVn8s+oKHGTSVJ+FqDLeR5bCqJ2E/BCycsoLZETXaKGs7rhKVt+9HZScrZNMi88V8P7LlDbvOZYaJVpMMmBCT4n0o8dTBoNgbdWPsRYACs3r7XyNfbnAAAAABJRU5ErkJggg==');
+}
+
+.xdsoft_datetimepicker .xdsoft_prev {
+    float: left;
+    background-position: -20px 0px;
+}
+
+.xdsoft_datetimepicker .xdsoft_today_button {
+    float: left;
+    background-position: -70px 0px;
+    margin-left: 5px;
+}
+
+.xdsoft_datetimepicker .xdsoft_next {
+    float: right;
+    background-position: 0px 0px;
+}
+
+.xdsoft_datetimepicker .xdsoft_next:active, .xdsoft_datetimepicker .xdsoft_prev:active {
+}
+
+.xdsoft_datetimepicker .xdsoft_next, .xdsoft_datetimepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_today_button {
+    background-color: transparent;
+    background-repeat: no-repeat;
+    border: 0px none currentColor;
+    cursor: pointer;
+    display: block;
+    height: 30px;
+    opacity: 0.5;
+    outline: medium none currentColor;
+    overflow: hidden;
+    padding: 0px;
+    position: relative;
+    text-indent: 100%;
+    white-space: nowrap;
+    width: 20px;
+}
+
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev,
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next {
+    float: none;
+    background-position: -40px -15px;
+    height: 15px;
+    width: 30px;
+    display: block;
+    margin-left: 14px;
+    margin-top: 7px;
+}
+
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev {
+    background-position: -40px 0px;
+    margin-bottom: 7px;
+    margin-top: 0px;
+}
+
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
+    height: 151px;
+    overflow: hidden;
+    border-bottom: 1px solid #DDDDDD;
+}
+
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
+    background: #F5F5F5;
+    border-top: 1px solid #DDDDDD;
+    color: #666666;
+    font-size: 12px;
+    text-align: center;
+    border-collapse: collapse;
+    cursor: pointer;
+    border-bottom-width: 0px;
+    height: 25px;
+    line-height: 25px;
+}
+
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:first-child {
+    border-top-width: 0px;
+}
+
+.xdsoft_datetimepicker .xdsoft_today_button:hover,
+.xdsoft_datetimepicker .xdsoft_next:hover,
+.xdsoft_datetimepicker .xdsoft_prev:hover {
+    opacity: 1;
+}
+
+.xdsoft_datetimepicker .xdsoft_label {
+    display: inline;
+    position: relative;
+    z-index: 9999;
+    margin: 0;
+    padding: 5px 3px;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: bold;
+    background-color: #fff;
+    float: left;
+    width: 182px;
+    text-align: center;
+    cursor: pointer;
+}
+
+.xdsoft_datetimepicker .xdsoft_label:hover {
+    text-decoration: underline;
+}
+
+.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
+    border: 1px solid #ccc;
+    position: absolute;
+    right: 0px;
+    top: 30px;
+    z-index: 101;
+    display: none;
+    background: #fff;
+    max-height: 160px;
+    overflow-y: hidden;
+}
+
+.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_monthselect {
+    right: -7px;
+}
+
+.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_yearselect {
+    right: 2px;
+}
+
+.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
+    color: #fff;
+    background: #ff8000;
+}
+
+.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option {
+    padding: 2px 10px 2px 5px;
+}
+
+.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
+    background: #33AAFF;
+    box-shadow: #178FE5 0px 1px 3px 0px inset;
+    color: #fff;
+    font-weight: 700;
+}
+
+.xdsoft_datetimepicker .xdsoft_month {
+    width: 90px;
+    text-align: right;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar {
+    clear: both;
+}
+
+.xdsoft_datetimepicker .xdsoft_year {
+    width: 56px;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar table {
+    border-collapse: collapse;
+    width: 100%;
+
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar td > div {
+    padding-right: 5px;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar th {
+    height: 25px;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th {
+    width: 14.2857142%;
+    background: #F5F5F5;
+    border: 1px solid #DDDDDD;
+    color: #666666;
+    font-size: 12px;
+    text-align: right;
+    padding: 0px;
+    border-collapse: collapse;
+    cursor: pointer;
+    height: 25px;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar th {
+    background: #F1F1F1;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
+    color: #33AAFF;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
+.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
+    background: #33AAFF;
+    box-shadow: #178FE5 0px 1px 3px 0px inset;
+    color: #fff;
+    font-weight: 700;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month,
+.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled,
+.xdsoft_datetimepicker .xdsoft_time_box > div > div.xdsoft_disabled {
+    opacity: 0.5;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled {
+    opacity: 0.2;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar td:hover,
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
+    color: #fff !important;
+    background: #ff8000 !important;
+    box-shadow: none !important;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover,
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_disabled:hover {
+    color: inherit !important;
+    background: inherit !important;
+    /*box-shadow: inherit !important;*/
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar th {
+    font-weight: 700;
+    text-align: center;
+    color: #999;
+    cursor: default;
+}
+
+.xdsoft_datetimepicker .xdsoft_copyright {
+    color: #ccc !important;
+    font-size: 10px;
+    clear: both;
+    float: none;
+    margin-left: 8px;
+}
+
+.xdsoft_datetimepicker .xdsoft_copyright a {
+    color: #eee !important;
+}
+
+.xdsoft_datetimepicker .xdsoft_copyright a:hover {
+    color: #aaa !important;
+}
+
+.xdsoft_time_box {
+    position: relative;
+    border: 1px solid #ccc;
+}
+
+.xdsoft_scrollbar > .xdsoft_scroller {
+    background: #ccc !important;
+    height: 20px;
+    border-radius: 3px;
+}
+
+.xdsoft_scrollbar {
+    position: absolute;
+    width: 7px;
+    right: 0px;
+    top: 0px;
+    bottom: 0px;
+    cursor: pointer;
+}
+
+.xdsoft_scroller_box {
+    position: relative;
+}

src/Hackspace/Bundle/CalciferBundle/Resources/assets/js/events.js

@@ -0,0 +1,10 @@
+/**
+ * Created by tim on 06.07.14.
+ */
+
+// initializing with settings
+
+$(document).ready(function () {
+    $('.icon.link').popup();
+    jQuery('input[type=datetime]').datetimepicker({lang: 'de',format:'Y-m-d H:i'});
+});

src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/edit.html.twig

@@ -1,16 +1,31 @@
 {% extends 'CalciferBundle::layout.html.twig' %}
 
-{% block body -%}
-    <h1>Event edit</h1>
-
-    {{ form(edit_form) }}
-
-        <ul class="record_actions">
-    <li>
-        <a href="{{ path('') }}">
-            Back to the list
-        </a>
-    </li>
-    <li>{{ form(delete_form) }}</li>
-</ul>
+{% block css %}
+    {% stylesheets filter="compass"
+    "@CalciferBundle/Resources/assets/css/jquery.datetimepicker.scss" %}
+    <link rel="stylesheet" href="{{ asset_url }}"/>
+    {% endstylesheets %}
+{% endblock %}
+
+{% block javascripts %}
+    {% javascripts
+    "@CalciferBundle/Resources/assets/js/jquery.datetimepicker.js"
+    "@CalciferBundle/Resources/assets/js/events.js" %}
+    <script src="{{ asset_url }}"></script>
+    {% endjavascripts %}
+{% endblock %}
+
+{% block body -%}
+    <div class="ui one column page grid">
+        <div class="ui column">
+            <h1>Termin bearbeiten</h1>
+        </div>
+    </div>
+
+    <div class="ui one column page grid">
+        <div class="ui column">
+            {{ include('CalciferBundle:Event:event_form.html.twig',{'entity':entity}) }}
+        </div>
+    </div>
+
 {% endblock %}

src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/event_box.html.twig

@@ -0,0 +1,42 @@
+<div class="ui column">
+    <div class="ui segment event box">
+        <h2 class="ui dividing header segment green inverted"><a href="{{ path('_show', { 'id': entity.id }) }}">{{ entity.summary }}</a>
+        </h2>
+
+        <p class="edit">
+            <a href="{{ path('_edit', {'id' : entity.id}) }}"><i class="ui icon edit circular green inverted"></i>Bearbeiten</a>
+        </p>
+
+        <p class="startdate ">
+            <i class="ui icon calendar circular green inverted link" title="Wann?" data-content="Wann?"></i>{{ entity.startdate.format('Y-m-d H:i') }}
+        </p>
+
+        {% if entity.location is not null %}
+            <p class="location">
+                <a href="{{ path('location_show', {'id' : entity.location.id}) }}"><i class="ui icon map marker circular green inverted link" title="Wo?" data-content="Wo?"></i>{{ entity.location.name }}</a>
+            </p>
+        {% endif %}
+        {% if entity.tags|length > 0 %}
+            <ul class="tags">
+                {% for tag in entity.tags %}
+                    <li class="tag"><a href="{{ path('tag_show',{'id' : tag.id}) }}"><i class="circular icon tag green inverted"></i>{{ tag.name }}</a></li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+
+        {% if entity.url|length > 0 %}
+            <p class="url">
+                <a href="{{ entity.url }}"><i class="ui icon globe green circular inverted"></i>{{ entity.url }}</a>
+            </p>
+        {% endif %}
+
+        <div class="ui clearing divider"></div>
+
+        {% if truncate_summary|default(false) %}
+            <p>{{ entity.description|truncate(255)|markdown }}</p>
+        {% else %}
+            <p>{{ entity.description|markdown }}</p>
+        {% endif %}
+
+    </div>
+</div>

src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/event_form.html.twig

@@ -0,0 +1,107 @@
+<form method="post" action="{% if entity.id > 0 %}{{ path('_update',{'id':entity.id}) }}{% else %}{{ path('_create') }}{% endif %}">
+    <div class="ui form segment">
+        <div class="field">
+            <label class="control-label required" for="event_startdate">Startdatum</label>
+
+            <div class="ui left labeled icon input">
+                <input type="datetime"
+                       id="event_startdate"
+                       name="startdate"
+                       required="required"
+                       value="{{ entity.startdate.format('Y-m-d H:i')|default('') }}"
+                       placeholder="{{ "now"|date('d.m.Y H:i') }}"
+                       class="form-control">
+
+                <i class="icon calendar"></i>
+
+                <div class="ui corner label">
+                    <i class="icon asterisk"></i>
+                </div>
+            </div>
+        </div>
+        <div class="field">
+            <label class="control-label required" for="event_enddate">Enddatum</label>
+
+            <div class="ui left labeled icon input">
+                <input type="datetime"
+                       id="event_enddate"
+                       name="enddate"
+                       value="{{ entity.enddate.format('Y-m-d H:i')|default('') }}"
+                       placeholder="{{ "now"|date('d.m.Y H:i') }}"
+                       class="form-control">
+
+                <i class="icon calendar"></i>
+            </div>
+        </div>
+        <div class="field">
+            <label class="" for="event_summary">Zusammenfassung</label>
+
+            <div class="ui left labeled input">
+                <input type="text"
+                       id="event_summary"
+                       name="summary"
+                       value="{{ entity.summary|default('') }}"
+                       required="required"
+                       maxlength="255"
+                       class="form-control">
+
+                <div class="ui corner label">
+                    <i class="icon asterisk"></i>
+                </div>
+            </div>
+        </div>
+
+        <div class="field">
+            <label class="control-label required" for="event_summary">Beschreibung</label>
+
+            <div class="ui left labeled icon input">
+                <textarea name="description">{{ entity.description|default('') }}</textarea>
+            </div>
+        </div>
+
+        <div class="field">
+            <label class="control-label required" for="event_url">URL</label>
+
+            <div class="ui left labeled icon input">
+                <input type="text"
+                       id="event_url"
+                       name="url"
+                       maxlength="255"
+                       value="{{ entity.url|default('') }}"
+                       class="form-control">
+                <i class="icon globe"></i>
+            </div>
+        </div>
+
+        <div class="field">
+            <label class="control-label required" for="event_location">Ort</label>
+
+            <div class="ui left labeled icon input">
+                <input type="text"
+                       id="event_location"
+                       name="location"
+                       maxlength="255"
+                       value="{{ entity.location.name|default('') }}"
+                       class="form-control">
+                <i class="icon map marker"></i>
+
+            </div>
+        </div>
+
+        <div class="field">
+            <label class="" for="event_tags">Tags</label>
+
+            <div class="ui left labeled icon input">
+                <input type="text"
+                       id="event_tags"
+                       name="tags"
+                       value="{{ entity.getTagsAsText() }}"
+                       class="form-control">
+                <i class="icon tag"></i>
+            </div>
+        </div>
+
+        <input type="submit" class="ui button blue" value="Speichern"/>
+    </div>
+
+</form>

src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/index.html.twig

@@ -1,49 +1,36 @@
 {% extends 'CalciferBundle::layout.html.twig' %}
 
+{% block css %}
+    {% stylesheets filter="compass"
+        "@CalciferBundle/Resources/assets/css/events.scss"
+    %}
+        <link rel="stylesheet" href="{{ asset_url }}" />
+    {% endstylesheets %}
+{% endblock %}
+
+{% block javascripts %}
+    {% javascripts
+    "@CalciferBundle/Resources/assets/js/events.js"
+    %}
+    <script src="{{ asset_url }}"></script>
+    {% endjavascripts %}
+{% endblock %}
+
 {% block body -%}
-    <h1>Event list</h1>
+    <div class="ui one column page grid title">
+        <div class="ui column">
+            <h1>
+                Termine
+                {% if tag|default(false) %} für Tag „{{ tag.name }}“{% endif %}
+                {% if location|default(false) %} für Ort „{{ location.name }}{% endif %}
+            </h1>
+        </div>
+    </div>
 
-    <table class="records_list table">
-        <thead>
-            <tr>
-                <th>Id</th>
-                <th>Startdate</th>
-                <th>Enddate</th>
-                <th>Summary</th>
-                <th>Description</th>
-                <th>Url</th>
-                <th>Actions</th>
-            </tr>
-        </thead>
-        <tbody>
+    <div class="ui three column page grid">
         {% for entity in entities %}
-            <tr>
-                <td><a href="{{ path('_show', { 'id': entity.id }) }}">{{ entity.id }}</a></td>
-                <td>{{ entity.startdate }}</td>
-                <td>{{ entity.enddate }}</td>
-                <td>{{ entity.summary }}</td>
-                <td>{{ entity.description }}</td>
-                <td>{{ entity.url }}</td>
-                <td>
-                <ul>
-                    <li>
-                        <a href="{{ path('_show', { 'id': entity.id }) }}">show</a>
-                    </li>
-                    <li>
-                        <a href="{{ path('_edit', { 'id': entity.id }) }}">edit</a>
-                    </li>
-                </ul>
-                </td>
-            </tr>
+            {{ include('CalciferBundle:Event:event_box.html.twig',{'truncate_summary':true}) }}
         {% endfor %}
-        </tbody>
-    </table>
+    </div>
 
-        <ul>
-        <li>
-            <a href="{{ path('_new') }}">
-                Create a new entry
-            </a>
-        </li>
-    </ul>
-    {% endblock %}
+{% endblock %}

src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/new.html.twig

@@ -1,410 +1,31 @@
 {% extends 'CalciferBundle::layout.html.twig' %}
 
-{% form_theme form _self %}
+{% block css %}
+    {% stylesheets filter="compass"
+    "@CalciferBundle/Resources/assets/css/jquery.datetimepicker.scss" %}
+    <link rel="stylesheet" href="{{ asset_url }}"/>
+    {% endstylesheets %}
+{% endblock %}
+
+{% block javascripts %}
+    {% javascripts
+    "@CalciferBundle/Resources/assets/js/jquery.datetimepicker.js"
+    "@CalciferBundle/Resources/assets/js/events.js" %}
+    <script src="{{ asset_url }}"></script>
+    {% endjavascripts %}
+{% endblock %}
 
 {% block body -%}
-    <h1>Event creation</h1>
-
-    <form name="hackspace_bundle_calciferbundle_event" method="post" action="/" role="form">
-    <div id="hackspace_bundle_calciferbundle_event">
-    <div class="form-group">
-        <label class="control-label required">Startdate</label>
-
-        <div id="hackspace_bundle_calciferbundle_event_startdate" class="bootstrap-datetime">
-            <div id="hackspace_bundle_calciferbundle_event_startdate_date" class="bootstrap-date">
-                <select id="hackspace_bundle_calciferbundle_event_startdate_date_day"
-                        name="startdate[day]"
-                        required="required"
-                        class="form-control">
-                    <option value="1">01</option>
-                    <option value="2">02</option>
-                    <option value="3">03</option>
-                    <option value="4">04</option>
-                    <option value="5">05</option>
-                    <option value="6">06</option>
-                    <option value="7">07</option>
-                    <option value="8">08</option>
-                    <option value="9">09</option>
-                    <option value="10">10</option>
-                    <option value="11">11</option>
-                    <option value="12">12</option>
-                    <option value="13">13</option>
-                    <option value="14">14</option>
-                    <option value="15">15</option>
-                    <option value="16">16</option>
-                    <option value="17">17</option>
-                    <option value="18">18</option>
-                    <option value="19">19</option>
-                    <option value="20">20</option>
-                    <option value="21">21</option>
-                    <option value="22">22</option>
-                    <option value="23">23</option>
-                    <option value="24">24</option>
-                    <option value="25">25</option>
-                    <option value="26">26</option>
-                    <option value="27">27</option>
-                    <option value="28">28</option>
-                    <option value="29">29</option>
-                    <option value="30">30</option>
-                    <option value="31">31</option>
-                </select>
-                <select id="hackspace_bundle_calciferbundle_event_startdate_date_month"
-                        name="startdate[month]"
-                        required="required"
-                        class="form-control">
-                    <option value="1">01</option>
-                    <option value="2">02</option>
-                    <option value="3">03</option>
-                    <option value="4">04</option>
-                    <option value="5">05</option>
-                    <option value="6">06</option>
-                    <option value="7">07</option>
-                    <option value="8">08</option>
-                    <option value="9">09</option>
-                    <option value="10">10</option>
-                    <option value="11">11</option>
-                    <option value="12">12</option>
-                </select>
-                <select id="hackspace_bundle_calciferbundle_event_startdate_date_year"
-                        name="startdate[year]"
-                        required="required"
-                        class="form-control">
-                    <option value="2009">2009</option>
-                    <option value="2010">2010</option>
-                    <option value="2011">2011</option>
-                    <option value="2012">2012</option>
-                    <option value="2013">2013</option>
-                    <option value="2014">2014</option>
-                    <option value="2015">2015</option>
-                    <option value="2016">2016</option>
-                    <option value="2017">2017</option>
-                    <option value="2018">2018</option>
-                    <option value="2019">2019</option>
-                </select>
-            </div>
-            <div id="hackspace_bundle_calciferbundle_event_startdate_time" class="bootstrap-time">
-                <select id="hackspace_bundle_calciferbundle_event_startdate_time_hour"
-                        name="startdate[hour]"
-                        required="required"
-                        class="form-control">
-                    <option value="0">00</option>
-                    <option value="1">01</option>
-                    <option value="2">02</option>
-                    <option value="3">03</option>
-                    <option value="4">04</option>
-                    <option value="5">05</option>
-                    <option value="6">06</option>
-                    <option value="7">07</option>
-                    <option value="8">08</option>
-                    <option value="9">09</option>
-                    <option value="10">10</option>
-                    <option value="11">11</option>
-                    <option value="12">12</option>
-                    <option value="13">13</option>
-                    <option value="14">14</option>
-                    <option value="15">15</option>
-                    <option value="16">16</option>
-                    <option value="17">17</option>
-                    <option value="18">18</option>
-                    <option value="19">19</option>
-                    <option value="20">20</option>
-                    <option value="21">21</option>
-                    <option value="22">22</option>
-                    <option value="23">23</option>
-                </select>
-                :<select id="hackspace_bundle_calciferbundle_event_startdate_time_minute"
-                         name="startdate[minute]"
-                         required="required"
-                         class="form-control">
-                    <option value="0">00</option>
-                    <option value="1">01</option>
-                    <option value="2">02</option>
-                    <option value="3">03</option>
-                    <option value="4">04</option>
-                    <option value="5">05</option>
-                    <option value="6">06</option>
-                    <option value="7">07</option>
-                    <option value="8">08</option>
-                    <option value="9">09</option>
-                    <option value="10">10</option>
-                    <option value="11">11</option>
-                    <option value="12">12</option>
-                    <option value="13">13</option>
-                    <option value="14">14</option>
-                    <option value="15">15</option>
-                    <option value="16">16</option>
-                    <option value="17">17</option>
-                    <option value="18">18</option>
-                    <option value="19">19</option>
-                    <option value="20">20</option>
-                    <option value="21">21</option>
-                    <option value="22">22</option>
-                    <option value="23">23</option>
-                    <option value="24">24</option>
-                    <option value="25">25</option>
-                    <option value="26">26</option>
-                    <option value="27">27</option>
-                    <option value="28">28</option>
-                    <option value="29">29</option>
-                    <option value="30">30</option>
-                    <option value="31">31</option>
-                    <option value="32">32</option>
-                    <option value="33">33</option>
-                    <option value="34">34</option>
-                    <option value="35">35</option>
-                    <option value="36">36</option>
-                    <option value="37">37</option>
-                    <option value="38">38</option>
-                    <option value="39">39</option>
-                    <option value="40">40</option>
-                    <option value="41">41</option>
-                    <option value="42">42</option>
-                    <option value="43">43</option>
-                    <option value="44">44</option>
-                    <option value="45">45</option>
-                    <option value="46">46</option>
-                    <option value="47">47</option>
-                    <option value="48">48</option>
-                    <option value="49">49</option>
-                    <option value="50">50</option>
-                    <option value="51">51</option>
-                    <option value="52">52</option>
-                    <option value="53">53</option>
-                    <option value="54">54</option>
-                    <option value="55">55</option>
-                    <option value="56">56</option>
-                    <option value="57">57</option>
-                    <option value="58">58</option>
-                    <option value="59">59</option>
-                </select></div>
+    <div class="ui one column page grid">
+        <div class="ui column">
+            <h1>Termin bearbeiten</h1>
         </div>
     </div>
-    <div class="form-group"><label class="control-label">Enddate</label>
 
-        <div id="hackspace_bundle_calciferbundle_event_enddate" class="bootstrap-datetime">
-            <div id="hackspace_bundle_calciferbundle_event_enddate_date" class="bootstrap-date">
-                <select id="hackspace_bundle_calciferbundle_event_enddate_date_day"
-                        name="enddate[day]"
-                        class="form-control">
-                    <option value=""></option>
-                    <option value="1">01</option>
-                    <option value="2">02</option>
-                    <option value="3">03</option>
-                    <option value="4">04</option>
-                    <option value="5">05</option>
-                    <option value="6">06</option>
-                    <option value="7">07</option>
-                    <option value="8">08</option>
-                    <option value="9">09</option>
-                    <option value="10">10</option>
-                    <option value="11">11</option>
-                    <option value="12">12</option>
-                    <option value="13">13</option>
-                    <option value="14">14</option>
-                    <option value="15">15</option>
-                    <option value="16">16</option>
-                    <option value="17">17</option>
-                    <option value="18">18</option>
-                    <option value="19">19</option>
-                    <option value="20">20</option>
-                    <option value="21">21</option>
-                    <option value="22">22</option>
-                    <option value="23">23</option>
-                    <option value="24">24</option>
-                    <option value="25">25</option>
-                    <option value="26">26</option>
-                    <option value="27">27</option>
-                    <option value="28">28</option>
-                    <option value="29">29</option>
-                    <option value="30">30</option>
-                    <option value="31">31</option>
-                </select>
-                <select id="hackspace_bundle_calciferbundle_event_enddate_date_month"
-                        name="enddate[month]"
-                        class="form-control">
-                    <option value=""></option>
-                    <option value="1">01</option>
-                    <option value="2">02</option>
-                    <option value="3">03</option>
-                    <option value="4">04</option>
-                    <option value="5">05</option>
-                    <option value="6">06</option>
-                    <option value="7">07</option>
-                    <option value="8">08</option>
-                    <option value="9">09</option>
-                    <option value="10">10</option>
-                    <option value="11">11</option>
-                    <option value="12">12</option>
-                </select>
-                <select id="hackspace_bundle_calciferbundle_event_enddate_date_year"
-                        name="enddate[year]"
-                        class="form-control">
-                    <option value=""></option>
-                    <option value="2009">2009</option>
-                    <option value="2010">2010</option>
-                    <option value="2011">2011</option>
-                    <option value="2012">2012</option>
-                    <option value="2013">2013</option>
-                    <option value="2014">2014</option>
-                    <option value="2015">2015</option>
-                    <option value="2016">2016</option>
-                    <option value="2017">2017</option>
-                    <option value="2018">2018</option>
-                    <option value="2019">2019</option>
-                </select>
-            </div>
-            <div id="hackspace_bundle_calciferbundle_event_enddate_time" class="bootstrap-time">
-                <select id="hackspace_bundle_calciferbundle_event_enddate_time_hour"
-                        name="enddate[hour]"
-                        class="form-control">
-                    <option value=""></option>
-                    <option value="0">00</option>
-                    <option value="1">01</option>
-                    <option value="2">02</option>
-                    <option value="3">03</option>
-                    <option value="4">04</option>
-                    <option value="5">05</option>
-                    <option value="6">06</option>
-                    <option value="7">07</option>
-                    <option value="8">08</option>
-                    <option value="9">09</option>
-                    <option value="10">10</option>
-                    <option value="11">11</option>
-                    <option value="12">12</option>
-                    <option value="13">13</option>
-                    <option value="14">14</option>
-                    <option value="15">15</option>
-                    <option value="16">16</option>
-                    <option value="17">17</option>
-                    <option value="18">18</option>
-                    <option value="19">19</option>
-                    <option value="20">20</option>
-                    <option value="21">21</option>
-                    <option value="22">22</option>
-                    <option value="23">23</option>
-                </select>
-                :<select id="hackspace_bundle_calciferbundle_event_enddate_time_minute"
-                         name="enddate[minute]"
-                         class="form-control">
-                    <option value=""></option>
-                    <option value="0">00</option>
-                    <option value="1">01</option>
-                    <option value="2">02</option>
-                    <option value="3">03</option>
-                    <option value="4">04</option>
-                    <option value="5">05</option>
-                    <option value="6">06</option>
-                    <option value="7">07</option>
-                    <option value="8">08</option>
-                    <option value="9">09</option>
-                    <option value="10">10</option>
-                    <option value="11">11</option>
-                    <option value="12">12</option>
-                    <option value="13">13</option>
-                    <option value="14">14</option>
-                    <option value="15">15</option>
-                    <option value="16">16</option>
-                    <option value="17">17</option>
-                    <option value="18">18</option>
-                    <option value="19">19</option>
-                    <option value="20">20</option>
-                    <option value="21">21</option>
-                    <option value="22">22</option>
-                    <option value="23">23</option>
-                    <option value="24">24</option>
-                    <option value="25">25</option>
-                    <option value="26">26</option>
-                    <option value="27">27</option>
-                    <option value="28">28</option>
-                    <option value="29">29</option>
-                    <option value="30">30</option>
-                    <option value="31">31</option>
-                    <option value="32">32</option>
-                    <option value="33">33</option>
-                    <option value="34">34</option>
-                    <option value="35">35</option>
-                    <option value="36">36</option>
-                    <option value="37">37</option>
-                    <option value="38">38</option>
-                    <option value="39">39</option>
-                    <option value="40">40</option>
-                    <option value="41">41</option>
-                    <option value="42">42</option>
-                    <option value="43">43</option>
-                    <option value="44">44</option>
-                    <option value="45">45</option>
-                    <option value="46">46</option>
-                    <option value="47">47</option>
-                    <option value="48">48</option>
-                    <option value="49">49</option>
-                    <option value="50">50</option>
-                    <option value="51">51</option>
-                    <option value="52">52</option>
-                    <option value="53">53</option>
-                    <option value="54">54</option>
-                    <option value="55">55</option>
-                    <option value="56">56</option>
-                    <option value="57">57</option>
-                    <option value="58">58</option>
-                    <option value="59">59</option>
-                </select>
-            </div>
+    <div class="ui one column page grid">
+        <div class="ui column">
+            {{ include('CalciferBundle:Event:event_form.html.twig',{'entity':entity}) }}
         </div>
     </div>
-    <div class="form-group">
-        <label class="control-label required" for="hackspace_bundle_calciferbundle_event_summary">Summary</label>
-        <input type="text"
-               id="hackspace_bundle_calciferbundle_event_summary"
-               name="hackspace_bundle_calciferbundle_event[summary]"
-               required="required"
-               maxlength="255"
-               class="form-control">
-    </div>
-    <div class="form-group">
-        <label class="control-label" for="hackspace_bundle_calciferbundle_event_description">Description</label>
-        <input type="text"
-               id="hackspace_bundle_calciferbundle_event_description"
-               name="hackspace_bundle_calciferbundle_event[description]"
-               maxlength="255"
-               class="form-control">
-    </div>
-    <div class="form-group">
-        <label class="control-label" for="hackspace_bundle_calciferbundle_event_url">Url</label>
-        <input id="hackspace_bundle_calciferbundle_event_url"
-               name="hackspace_bundle_calciferbundle_event[url]"
-               maxlength="255"
-               type="url"
-               class="form-control">
-    </div>
-    <div class="form-group">
-        <label class="control-label" for="hackspace_bundle_calciferbundle_event_location">Location</label>
-        <input id="hackspace_bundle_calciferbundle_event_location"
-               name="hackspace_bundle_calciferbundle_event[location]"
-               type="text"
-               class="form-control">
-    </div>
-    <div class="form-group">
-        <label class="control-label required" for="hackspace_bundle_calciferbundle_event_tags">Tags</label>
-        <input
-                id="hackspace_bundle_calciferbundle_event_tags"
-                name="hackspace_bundle_calciferbundle_event[tags][]" class="form-control"
-                type="text">
-    </div>
-    <button type="submit" id="hackspace_bundle_calciferbundle_event_submit"
-            name="hackspace_bundle_calciferbundle_event[submit]" class="btn btn-primary">Create
-    </button>
-    <input type="hidden" id="hackspace_bundle_calciferbundle_event__token"
-           name="hackspace_bundle_calciferbundle_event[_token]" class="form-control"
-           value="fArTmEGgXbPkuP4rwDtYX2qH6Mm5jmsAsToEzn5NQpY">
-    </div>
-    </form>
 
-
-    <ul class="record_actions">
-        <li>
-            <a href="{{ path('') }}">
-                Back to the list
-            </a>
-        </li>
-    </ul>
 {% endblock %}

src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/show.html.twig

@@ -1,52 +1,23 @@
 {% extends 'CalciferBundle::layout.html.twig' %}
 
-{% block body -%}
-    <h1>Event</h1>
-
-    <table class="record_properties">
-        <tbody>
-            <tr>
-                <th>Id</th>
-                <td>{{ entity.id }}</td>
-            </tr>
-            <tr>
-                <th>Startdate</th>
-                <td>{{ entity.startdate }}</td>
-            </tr>
-            <tr>
-                <th>Enddate</th>
-                <td>{{ entity.enddate }}</td>
-            </tr>
-            <tr>
-                <th>Summary</th>
-                <td>{{ entity.summary }}</td>
-            </tr>
-            <tr>
-                <th>Description</th>
-                <td>{{ entity.description }}</td>
-            </tr>
-            <tr>
-                <th>Locations_id</th>
-                <td>{{ entity.locationsid }}</td>
-            </tr>
-            <tr>
-                <th>Url</th>
-                <td>{{ entity.url }}</td>
-            </tr>
-        </tbody>
-    </table>
-
-        <ul class="record_actions">
-    <li>
-        <a href="{{ path('') }}">
-            Back to the list
-        </a>
-    </li>
-    <li>
-        <a href="{{ path('_edit', { 'id': entity.id }) }}">
-            Edit
-        </a>
-    </li>
-    <li>{{ form(delete_form) }}</li>
-</ul>
+{% block css %}
+    {% stylesheets filter="compass"
+    "@CalciferBundle/Resources/assets/css/events.scss"
+    %}
+    <link rel="stylesheet" href="{{ asset_url }}" />
+    {% endstylesheets %}
+{% endblock %}
+
+{% block javascripts %}
+    {% javascripts
+    "@CalciferBundle/Resources/assets/js/events.js"
+    %}
+    <script src="{{ asset_url }}"></script>
+    {% endjavascripts %}
+{% endblock %}
+
+{% block body -%}
+    <div class="ui one column page grid">
+        {{ include('CalciferBundle:Event:event_box.html.twig') }}
+    </div>
 {% endblock %}

src/Hackspace/Bundle/CalciferBundle/Resources/views/layout.html.twig

@@ -5,23 +5,25 @@
     <title>{% block title %}Terminverwaltung Calcifer{% endblock %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Bootstrap -->
-    <link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet" media="screen">
+    <link href="{{ asset('css/semantic.css') }}" rel="stylesheet" media="screen">
+    <link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
+    <link href="{{ asset('css/custom.css') }}" rel="stylesheet" media="screen">
+    {% block css %}
 
-    <!-- HTML5 Shim and Respond.js add IE8 support of HTML5 elements and media queries -->
-    {% include 'BraincraftedBootstrapBundle::ie8-support.html.twig' %}
+    {% endblock %}
 
 </head>
 
 <body>
 {% include "CalciferBundle::navigation.html.twig" %}
 
-<div class="container">
+<div id="main" class="segment">
     {% block body %}{% endblock %}
 </div>
-{% block javascripts %}{% endblock %}
 <!-- jQuery (necessary for Bootstraps JavaScript plugins) -->
 <script src="{{ asset('js/jquery.js') }}"></script>
 <!-- Include all JavaScripts, compiled by Assetic -->
-<script src="{{ asset('js/bootstrap.js') }}"></script>
+<script src="{{ asset('js/semantic.js') }}"></script>
+{% block javascripts %}{% endblock %}
 </body>
 </html>

src/Hackspace/Bundle/CalciferBundle/Resources/views/navigation.html.twig

@@ -1,21 +1,7 @@
-
-<div class="navbar navbar-default navbar-static-top" role="navigation">
-    <div class="container">
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand" href="{{ path('') }}">Calcifer</a>
+<header class="ui fixed main menu inverted transparent ">
+    <div class="ui one column page grid">
+        <div class="ui column">
+            <div class="title item"><a href="{{ path('') }}">Calcifer</a></div>
         </div>
-        <div class="navbar-collapse collapse">
-            <ul class="nav navbar-nav">
-                <li class="active"><a href="#">Home</a></li>
-                <li><a href="#about">About</a></li>
-                <li><a href="#contact">Contact</a></li>
-            </ul>
-        </div><!--/.nav-collapse -->
     </div>
-</div>
+</header>