Match styles to specs

learningequality · Dec 19, 2024 · bb801dd · bb801dd
1 parent d45c26b
commit bb801dd
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 6 deletions.
diff --git a/...src/views/common/assignments/IndividualLearnerSelector/IndividualLearnerSelectorTable.vue b/...src/views/common/assignments/IndividualLearnerSelector/IndividualLearnerSelectorTable.vue
@@ -4,6 +4,7 @@
     :items="allLearners"
     :filterPlaceholder="$tr('searchPlaceholder')"
     :itemsPerPage="itemsPerPage"
+    :searchFieldBlock="searchFieldBlock"
     @pageChanged="currentPageLearners = $event.items"
   >
     <template #default="{ items }">
@@ -112,6 +113,10 @@
         required: false,
         default: null,
       },
+      searchFieldBlock: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {

diff --git a/...ts/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue b/...ts/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
@@ -8,7 +8,7 @@
     @shouldFocusFirstEl="focusFirstEl"
   >
     <template #header>
-      <h1>
+      <h1 class="side-panel-title">
         {{ $tr('selectGroupsAndIndividualLearnersTitle') }}
       </h1>
     </template>
@@ -26,21 +26,28 @@
           <KLabeledIcon
             :label="group.name"
             icon="group"
+            class="font-size-14"
           />
         </KCheckbox>
         <KCheckbox
-          :label="$tr('allUngroupedLearnres')"
           :checked="allUngroupedLearnresIsSelected"
           :disabled="disabled"
           @change="selectAllUngroupedLearners($event)"
-        />
+        >
+          <KLabeledIcon
+            :label="$tr('allUngroupedLearnres')"
+            icon="people"
+            class="font-size-14"
+          />
+        </KCheckbox>
       </section>
       <section>
         <h2>{{ coachString('individualLearnersLabel') }}</h2>
-        <div>
+        <div class="font-size-14">
           {{ coachString('onlyShowingEnrolledLabel') }}
         </div>
         <IndividualLearnerSelectorTable
+          searchFieldBlock
           :selectedGroupIds="workingSelectedGroupIds"
           :selectedLearnerIds.sync="workingAdHocLearners"
           :disabled="disabled"
@@ -189,4 +196,19 @@
     margin-bottom: 16px;
   }
 
+  .side-panel-title {
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  section h2 {
+    margin-top: 24px;
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  .font-size-14 {
+    font-size: 14px;
+  }
+
 </style>
diff --git a/packages/kolibri-common/components/PaginatedListContainer.vue b/packages/kolibri-common/components/PaginatedListContainer.vue
@@ -2,16 +2,17 @@
 
   <div>
     <KGrid>
-      <KGridItem :layout12="{ span: 7 }">
+      <KGridItem :layout12="{ span: searchFieldBlock ? 12 : 7 }">
         <slot name="otherFilter"></slot>
       </KGridItem>
       <KGridItem
-        :layout12="{ span: 5, alignment: 'right' }"
+        :layout12="{ span: searchFieldBlock ? 12 : 5, alignment: 'right' }"
         class="text-filter"
       >
         <FilterTextbox
           v-model="filterInput"
           :placeholder="filterPlaceholder"
+          :style="{ width: searchFieldBlock ? '100%' : null }"
         />
       </KGridItem>
     </KGrid>
@@ -75,6 +76,10 @@
         required: false,
         default: 30,
       },
+      searchFieldBlock: {
+        type: Boolean,
+        required: false,
+      },
     },
     data() {
       return {