update timeline layout (#1720, #1721)

bihealth · Sep 8, 2023 · 792a099 · 792a099
1 parent 43263b2
commit 792a099
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 30 deletions.
diff --git a/CHANGELOG.rst b/CHANGELOG.rst
@@ -14,6 +14,12 @@ Added
 - **Projectroles**
     - ``queryset_project_field`` override in ``APIProjectContextMixin`` (#1273)
 
+Changed
+-------
+
+- **Timeline**
+    - Update column width and responsiveness handling (#1721)
+    - View icon display for site views (#1720)
 
 Fixed
 -----

diff --git a/timeline/plugins.py b/timeline/plugins.py
@@ -154,7 +154,7 @@ class SiteAppPlugin(SiteAppPluginPoint):
     urls = urlpatterns
 
     #: Iconify icon
-    icon = 'mdi:clock-time-eight'
+    icon = 'mdi:clock-time-eight-outline'
 
     #: Description string
     description = 'Timeline of Site-Wide Events'
@@ -179,10 +179,11 @@ class AdminSiteAppPlugin(SiteAppPluginPoint):
     urls = urlpatterns
 
     #: Iconify icon
-    icon = 'mdi:cog-counterclockwise'
+    # icon = 'mdi:clock-star-four-points-outline'
+    icon = 'mdi:web-clock'
 
     #: Description string
-    description = 'Admin view for all site events'
+    description = 'Admin view for all timeline events on the site'
 
     #: Entry point URL ID
     entry_point_url_id = 'timeline:timeline_site_admin'

diff --git a/timeline/static/timeline/css/timeline.css b/timeline/static/timeline/css/timeline.css
@@ -1,10 +1,20 @@
 /* Main table */
+table#sodar-tl-table {
+  display: inline-table;
+}
 table#sodar-tl-table tbody tr td:nth-child(1),
 table#sodar-tl-table tbody tr td:nth-child(2),
 table#sodar-tl-table tbody tr td:nth-child(3) {
   white-space: nowrap;
 }
-
+table#sodar-tl-table tbody tr td:nth-child(2) {
+  width: 200px;
+  max-width: 200px;
+}
+table#sodar-tl-table tbody tr td:nth-child(3) {
+  width: 220px;
+  max-width: 220px;
+}
 table#sodar-tl-table tbody tr td:nth-child(4) {
   width: 100%;
 }
@@ -14,11 +24,9 @@ table#sodar-tl-table-detail tbody tr td:nth-child(1),
 table#sodar-tl-table-detail tbody tr td:nth-child(3) {
   white-space: nowrap;
 }
-
 table#sodar-tl-table-detail tbody tr td:nth-child(2) {
   width: 100%;
 }
-
 table#sodar-tl-table-extra-data tbody tr td:nth-child(1) {
   white-space: nowrap;
   width: 100%;
@@ -27,44 +35,37 @@ table#sodar-tl-table-extra-data tbody tr td:nth-child(1) {
 a.sodar-tl-link-detail:hover {
   text-decoration: underline;
 }
-
 a.sodar-tl-link-extra-data:hover {
   text-decoration: underline;
   cursor: pointer;
 }
-
 a.sodar-tl-link-extra {
   cursor: pointer;
 }
-
 a.sodar-tl-link-status-extra-data:hover {
   cursor: pointer;
 }
-
 .popover {
   font-size: 100%; /* Fix for Bootstrap 4.4 */
 }
 
 /* Responsive modifications */
-@media screen and (max-width: 1100px) {
+@media screen and (max-width: 1300px) {
   .table#sodar-tl-table thead tr th:nth-child(2),
   .table#sodar-tl-table tbody tr td:nth-child(2) {
     display: none;
   }
 }
-
-@media screen and (max-width: 900px) {
+@media screen and (max-width: 1100px) {
   .table#sodar-tl-table tbody tr td:nth-child(1) {
     white-space: normal;
   }
-
   .table#sodar-tl-table thead tr th:nth-child(3),
   .table#sodar-tl-table tbody tr td:nth-child(3) {
     display: none;
   }
 }
-
-@media screen and (max-width: 500px) {
+@media screen and (max-width: 700px) {
   .table#sodar-tl-table thead tr th:nth-child(5),
   .table#sodar-tl-table tbody tr td:nth-child(5) {
       display: none;
@@ -75,24 +76,19 @@ a.sodar-tl-link-status-extra-data:hover {
   max-width: 75% !important;
   font-family: monospace;
 }
-
 pre.sodar-tl-json {
   font-family: monospace;
   font-size: 85%;
 }
-
 .json-open-bracket, .json-close-bracket {
   color: #CC0011;
 }
-
 .json-property {
   color: #1A5988;
 }
-
 .json-semi-colon {
   color: #14171A;
 }
-
 .json-value {
   color: #222222;
 }
@@ -104,7 +100,6 @@ pre.sodar-tl-json {
   flex-wrap: wrap;
   border-bottom: 1px solid #dee2e6;
 }
-
 .sodar-tl-copy-btn {
   position: absolute;
   top: 10px;

diff --git a/timeline/templates/timeline/_list_item.html b/timeline/templates/timeline/_list_item.html
@@ -21,14 +21,18 @@
     {% endif %}
   </td>
   <td class="sodar-tl-item-name">
-    {% get_app_icon_html event plugin_lookup as event_icon %}
-    {{ event_icon|safe }}
-    {{ event.event_name }}
+    <div class="sodar-overflow-container">
+      {% get_app_icon_html event plugin_lookup as event_icon %}
+      {{ event_icon|safe }}
+      {{ event.event_name }}
+    </div>
   </td>
   <td class="sodar-tl-item-user {% if not event.user %}text-muted{% endif %}">
     {% if event.user %}
-      {% get_user_html event.user as user_html %}
-      {{ user_html|safe }}
+      <div class="sodar-overflow-container">
+        {% get_user_html event.user as user_html %}
+        {{ user_html|safe }}
+      </div>
     {% else %}
       N/A
     {% endif %}

diff --git a/timeline/templates/timeline/timeline_site.html b/timeline/templates/timeline/timeline_site.html
@@ -26,10 +26,10 @@
 
 <div class="row sodar-subtitle-container bg-white sticky-top">
   <h2>
-    {% if timeline_mode == 'site' %}
-      <i class="iconify" data-icon="mdi:clock-time-eight"></i>
+    {% if timeline_mode == 'site' or timeline_mode == 'object' %}
+      <i class="iconify" data-icon="mdi:clock-time-eight-outline"></i>
     {% else %}
-      <i class="iconify" data-icon="mdi:cog-counterclockwise"></i>
+      <i class="iconify" data-icon="mdi:web-clock"></i>
     {% endif %}
     {{ timeline_title }}
   </h2>