Update the layout of coach > manage resource section to prevent text …

…overlap
thesujai · Apr 1, 2023 · 35581b5 · 35581b5
1 parent 8ca52ab
commit 35581b5
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 14 deletions.
diff --git a/.npmrc b/.npmrc
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonSummaryPage/ResourceListTable.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonSummaryPage/ResourceListTable.vue
@@ -10,13 +10,17 @@
         :key="resource.contentnode_id"
       >
         <DragHandle>
-          <KFixedGrid
-            class="row"
+
+          <!-- replaced KFixedGrid with normal div to prevent text overlap error  -->
+          <div
+          class="row"
             :style="{ backgroundColor: $themeTokens.surface }"
-            numCols="9"
+
           >
-            <KFixedGridItem span="1" class="relative">
-              <div class="move-handle">
+          <!-- replaced KFixedGridItem with normal div to prevent text overlap error  -->
+
+          <div class="relative">
+            <div class="move-handle">
                 <DragSortWidget
                   :moveUpText="$tr('moveResourceUpButtonDescription')"
                   :moveDownText="$tr('moveResourceDownButtonDescription')"
@@ -26,9 +30,9 @@
                   @moveDown="moveDownOne(index)"
                 />
               </div>
-            </KFixedGridItem>
-            <KFixedGridItem class="parent" span="4">
-              <div v-if="getCachedResource(resource.contentnode_id)" class="child">
+          </div>
+            <div class="relative">
+              <div v-if="getCachedResource(resource.contentnode_id)">
                 <div class="resource-title">
                   <div class="content-icon">
                     <ContentIcon :kind="resourceKind(resource.contentnode_id)" />
@@ -60,23 +64,26 @@
               <div v-else class="child">
                 {{ resourceMissingText }}
               </div>
-            </KFixedGridItem>
-            <KFixedGridItem span="1" :style="{ 'padding-top': '16px' }" alignment="right">
+
+            </div>
+
+            <div class="relative">
               <KIcon
                 v-if="!getCachedResource(resource.contentnode_id) ||
                   !getCachedResource(resource.contentnode_id).available"
                 icon="warning"
                 :style=" { fill: $themePalette.orange.v_400 }"
               />
-            </KFixedGridItem>
-            <KFixedGridItem :style="{ 'padding-top': '16px' }" span="3" alignment="right">
+            </div>
+
+            <div class="relative">
               <KButton
                 :text="coreString('removeAction')"
                 appearance="flat-button"
                 @click="removeResource(resource)"
               />
-            </KFixedGridItem>
-          </KFixedGrid>
+            </div>
+          </div>
         </DragHandle>
       </Draggable>
     </transition-group>
@@ -260,10 +267,33 @@
     margin-left: 8px;
   }
 
+  // updated the styles of resources row to prevent the overlap issue 
+  // using flex we are able to rectify the issue
   .row {
     padding: 8px;
     cursor: grab;
     user-select: none;
+    
+    display: flex;
+    flex-direction: row;
+
+    .relative:nth-child(1) {
+      width: 3rem;
+      flex-shrink: 0;
+    }
+    .relative:nth-child(2) {
+      flex-grow: 1;
+      flex-shrink: 1;
+      padding-right: 2rem;
+    }
+
+    .relative:nth-child(3) {
+      flex-shrink: 1;
+    }
+
+    .relative:last-child {
+      flex-shrink: 0;
+    }
   }
 
   .headers {
@@ -278,9 +308,12 @@
     margin-right: 8px;
   }
 
+  // updated the class coach-content-label 
   .coach-content-label {
+    position: absolute;
     display: inline-block;
     vertical-align: top;
+    width: fit-content;
   }
 
   .move-button {
@@ -295,6 +328,7 @@
     position: absolute;
     top: 16px;
     left: 18px;
+    left: 16px;
   }
 
   .move-button.down {