Redesign definition lists for view data (use in task, vvt_datenkatego…

…rie)

assets/styles/data_tables.css

@@ -91,4 +91,8 @@ table.dataTable > tbody > tr > td:last-child {
 
 table.dataTable > tbody > tr[data-href] > td {
     @apply cursor-pointer;
+}
+
+table.dataTable > tbody > tr > td > a {
+    @apply text-primary-600 hover:underline;
 }

assets/styles/tailmater.css

@@ -942,4 +942,40 @@ input[type='text'], input[type='password'], input[type='email'], input[type='num
 
 .success, .success > * {
     @apply !bg-green-50 !text-green-700;
+}
+
+.dl-wrapper {
+    @apply card-outlined w-auto p-0;
+}
+
+.dl-wrapper > .dl-head {
+    @apply border-b border-gray-100 mb-1 pb-5 mt-5 px-5;
+}
+
+.dl-wrapper > .dl-head > h* {
+    @apply text-base font-semibold leading-7;
+}
+
+.dl-head > p {
+    @apply mt-1 max-w-2xl text-sm leading-6 text-muted;
+}
+
+.dl-content {
+
+}
+
+.dl-content > dl {
+    @apply divide-y divide-gray-100;
+}
+
+.dl-content > dl > div {
+    @apply py-6 sm:grid lg:grid-cols-4 xl:grid-cols-7 sm:gap-4;
+}
+
+.dl-content > dl > div > dt {
+    @apply text-sm font-medium leading-6 text-gray-900 pl-5;
+}
+
+.dl-content > dl > div > dd {
+    @apply mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0 pl-5;
 }

templates/task/__show.html.twig

@@ -1,64 +1,42 @@
 {% trans_default_domain 'task' %}
-<div>
-    <div>
-        <div>
-            <div>
-                {% trans from 'general' %}regard{% endtrans %}:
-            </div>
-            <div>
-                {{ task.title }}
-            </div>
-            <div>
-                {% trans %}priority{% endtrans %}:
-            </div>
+
+<div class="dl-wrapper">
+    <div class="dl-head">
+        <h3>{% trans %}task.word{% endtrans %}</h3>
+        <p>{{ task.task|raw }}</p>
+    </div>
+    <div class="dl-content">
+        <dl>
             <div>
-                {{ task.prioString }}
+                <dt>{% trans from 'general' %}regard{% endtrans %}</dt>
+                <dd>{{ task.title }}</dd>
             </div>
             <div>
-                {% trans from 'general' %}createdBy{% endtrans %}:
+                <dt>{% trans %}priority{% endtrans %}</dt>
+                <dd>{{ task.prioString }}</dd>
             </div>
             <div>
-                {{ task.user.email }}
+                <dt>{% trans from 'general' %}createdBy{% endtrans %}</dt>
+                <dd>{{ task.user.email }}</dd>
             </div>
             {% if task.updatedBy %}
                 <div>
-                    {% trans from 'general' %}editedBy{% endtrans %}:
-                </div>
-                <div>
-                    {{ task.updatedBy.email }}
+                    <dt>{% trans from 'general' %}editedBy{% endtrans %}</dt>
+                    <dd>{{ task.updatedBy.email }}</dd>
                 </div>
             {% endif %}
-        </div>
-        <div>
             <div>
-                {% trans from 'general' %}createdAt{% endtrans %}:
+                <dt>{% trans from 'general' %}createdAt{% endtrans %}</dt>
+                <dd>{{ task.createdAt|date('d.m.Y') }}</dd>
             </div>
             <div>
-                {{ task.createdAt|date('d.m.Y') }}
-            </div>
-
-            <div>
-                {% trans %}deadlineDue{% endtrans %}:
+                <dt>{% trans %}deadlineDue{% endtrans %}</dt>
+                <dd>{{ task.endDate ? task.endDate|date('d.m.Y') }}</dd>
             </div>
             <div>
-                {% if task.endDate %}
-                    {{ task.endDate|date('d.m.Y') }}
-                {% endif %}
+                <dt>{% trans %}finishedAt{% endtrans %}</dt>
+                <dd>{{ task.doneDate ? task.doneDate|date('d.m.Y') }}</dd>
             </div>
-
-            <div>
-                {% trans %}finishedAt{% endtrans %}:
-            </div>
-            <div>
-                {% if task.doneDate %}
-                    {{ task.doneDate|date('d.m.Y') }}
-                {% endif %}
-            </div>
-        </div>
-    </div>
-    <div
-         style="border-left-color: #3f4e5e; border-left-width: 1px; border-left-style: dashed">
-        <p>{% trans %}task.word{% endtrans %}:</p>
-        {{ task.task|raw }}
+        </dl>
     </div>
-</div>
+</div>

templates/vvt_datenkategorie/show.html.twig

@@ -6,30 +6,29 @@
 {% endblock %}
 
  {% block CTA %}
-    <a href="{{ path('app_vvtdatenkategorie_index') }}" class="btn">
-        <span>{% trans from 'general' %}back{% endtrans %}</span>
-    </a>
     <a href="{{ path('app_vvtdatenkategorie_edit',{'id': vvtdatenkategorie.id}) }}" class="btn">
         <span>{% trans from 'general' %}edit{% endtrans %}</span>
     </a>
     {{ include('vvt_datenkategorie/_delete_form.html.twig') }}
 {% endblock %}
 
 {% block body %}
-    <table>
-        <tbody>
-            <tr>
-                <th>{% trans from 'general' %}name{% endtrans %}</th>
-                <td>{{ vvtdatenkategorie.name }}</td>
-            </tr>
-            <tr>
-                <th>{% trans %}dataType{% endtrans %}</th>
-                <td>{{ vvtdatenkategorie.datenarten }}</td>
-            </tr>
-            <tr>
-                <th>{% trans %}deletion.deadline{% endtrans %}</th>
-                <td>{{ vvtdatenkategorie.loeschkonzept|last }}</td>
-            </tr>
-        </tbody>
-    </table>
+    <div class="dl-wrapper">
+        <div class="dl-content">
+            <dl>
+                <div>
+                    <dt>{% trans from 'general' %}name{% endtrans %}</dt>
+                    <dd>{{ vvtdatenkategorie.name }}</dd>
+                </div>
+                <div>
+                    <dt>{% trans %}dataType{% endtrans %}</dt>
+                    <dd>{{ vvtdatenkategorie.datenarten }}</dd>
+                </div>
+                <div>
+                    <dt>{% trans %}deletion.deadline{% endtrans %}</dt>
+                    <dd>{{ vvtdatenkategorie.loeschkonzept|last }}</dd>
+                </div>
+            </dl>
+        </div>
+    </div>
 {% endblock %}