style the back component

learningequality · Nov 26, 2024 · 9c2b48d · 9c2b48d
1 parent b7665ec
commit 9c2b48d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/...s/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue b/...s/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
@@ -8,9 +8,17 @@
     @shouldFocusFirstEl="() => null"
   >
     <template #header>
-      <h1 class="side-panel-title">
-        {{ !showSearch ? searchLabel$() : $tr('manageLessonResourcesTitle') }}
-      </h1>
+      <div :class="{ 'back-button-class': !showSearch }">
+        <KIconButton
+          v-if="!showSearch"
+          icon="back"
+          class="back-button-style"
+          @click="showSearch = true"
+        />
+        <h1 class="side-panel-title">
+          {{ !showSearch ? searchLabel$() : $tr('manageLessonResourcesTitle') }}
+        </h1>
+      </div>
     </template>
 
     <div v-if="!showSearch">
@@ -179,11 +187,7 @@
     },
     methods: {
       closeSidePanel() {
-        if (this.showSearch == true) {
-          this.$router.go(-1);
-        } else {
-          this.showSearch = true;
-        }
+        this.$router.go(-1);
       },
     },
     $trs: {
@@ -223,4 +227,16 @@
     width: 100%;
   }
 
+  .back-button-class {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 6.5rem;
+  }
+
+  .back-button-style {
+    position: relative;
+    top: 3.8px;
+  }
+
 </style>
diff --git a/packages/kolibri-common/components/SidePanelModal/index.vue b/packages/kolibri-common/components/SidePanelModal/index.vue
@@ -294,3 +294,4 @@
   }
 
 </style>
+section