Merge pull request #4268 from manuelmeister/feature/fix-layout-of-con…

…tent-nodes Fix error messages not visible in activity view
ecamp · Dec 22, 2023 · 2203a85 · 2203a85
2 parents a23bb85 + de8c0a0
commit 2203a85
Show file tree

Hide file tree

Showing 10 changed files with 25 additions and 9 deletions.
diff --git a/frontend/src/components/activity/CardContentNode.vue b/frontend/src/components/activity/CardContentNode.vue
@@ -61,7 +61,7 @@
       </v-toolbar>
     </v-card-title>
     <slot name="outer">
-      <v-card-text class="flex-grow-1">
+      <v-card-text class="flex-grow-1" :class="{ 'pointer-events-none': layoutMode }">
         <slot />
       </v-card-text>
     </slot>
@@ -139,5 +139,13 @@ export default {
   .v-input__control {
     height: 100%;
   }
+
+  .v-text-field__details {
+    flex-grow: 0;
+  }
+
+  .grow-v-slot .v-input__slot {
+    flex-grow: 1;
+  }
 }
 </style>
diff --git a/frontend/src/components/activity/content/LAThematicArea.vue b/frontend/src/components/activity/content/LAThematicArea.vue
@@ -1,6 +1,6 @@
 <template>
   <card-content-node v-bind="$props">
-    <v-list three-line class="mx-n4">
+    <v-list three-line class="mx-n4" color="transparent">
       <v-list-item-group>
         <v-list-item
           v-for="(option, key) in contentNode.data.options"

diff --git a/frontend/src/components/activity/content/Notes.vue b/frontend/src/components/activity/content/Notes.vue
@@ -8,7 +8,7 @@
       auto-grow
       :disabled="layoutMode || disabled"
       :filled="layoutMode"
-      height="100%"
+      class="grow-v-slot"
     />
   </card-content-node>
 </template>

diff --git a/frontend/src/components/activity/content/SafetyConcept.vue b/frontend/src/components/activity/content/SafetyConcept.vue
@@ -7,7 +7,7 @@
       rows="2"
       :disabled="layoutMode || disabled"
       :filled="layoutMode"
-      height="100%"
+      class="grow-v-slot"
     />
   </card-content-node>
 </template>

diff --git a/frontend/src/components/activity/content/Storyboard.vue b/frontend/src/components/activity/content/Storyboard.vue
@@ -4,11 +4,14 @@
       <component
         :is="isDefaultVariant ? 'table' : 'div'"
         class="w-full"
-        :class="{ 'flex-grow-1': !isDefaultVariant }"
+        :class="{
+          'flex-grow-1': !isDefaultVariant,
+          'pointer-events-none px-3 pb-3': layoutMode,
+        }"
       >
         <thead v-if="isDefaultVariant">
           <tr>
-            <th>
+            <th v-if="!layoutMode">
               <span class="d-sr-only">
                 {{ $tc('components.activity.content.storyboard.reorder') }}
               </span>

diff --git a/frontend/src/components/activity/content/Storycontext.vue b/frontend/src/components/activity/content/Storycontext.vue
@@ -8,7 +8,7 @@
       auto-grow
       :disabled="layoutMode || disabled"
       :filled="layoutMode"
-      height="100%"
+      class="grow-v-slot"
     />
   </card-content-node>
 </template>

diff --git a/frontend/src/components/activity/content/storyboard/StoryboardRowDefault.vue b/frontend/src/components/activity/content/storyboard/StoryboardRowDefault.vue
@@ -1,6 +1,6 @@
 <template>
   <tr class="e-storyboard-row e-storyboard-row--default">
-    <td class="e-storyboard-row__handle">
+    <td v-if="!layoutMode" class="e-storyboard-row__handle">
       <v-btn
         icon
         small

diff --git a/frontend/src/components/activity/content/storyboard/StoryboardRowDense.vue b/frontend/src/components/activity/content/storyboard/StoryboardRowDense.vue
@@ -1,6 +1,6 @@
 <template>
   <div role="row" class="e-storyboard-row e-storyboard-row--dense">
-    <div role="cell" class="e-storyboard-row__handle">
+    <div v-if="!layoutMode" role="cell" class="e-storyboard-row__handle">
       <v-btn
         icon
         small

diff --git a/frontend/src/components/material/MaterialTable.vue b/frontend/src/components/material/MaterialTable.vue
@@ -6,6 +6,7 @@
     :disable-pagination="true"
     mobile-breakpoint="0"
     item-class="rowClass"
+    class="transparent"
     :class="{
       'ec-material-table--dense': !isDefaultVariant,
       'ec-material-table--default': isDefaultVariant,

diff --git a/frontend/src/scss/global.scss b/frontend/src/scss/global.scss
@@ -163,6 +163,10 @@ body {
   display: inline-grid;
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .opacity-60 {
   opacity: 0.6;
 }