From 4f6d0b43fb7b4b8604a55f63da9e4f72717c28c8 Mon Sep 17 00:00:00 2001
From: iskipu <rvamsi599+github@gmail.com>
Date: Fri, 26 Jan 2024 18:02:55 +0530
Subject: [PATCH 1/5] checking current url contains device route

---
 kolibri/core/assets/src/views/StorageNotification.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/kolibri/core/assets/src/views/StorageNotification.vue b/kolibri/core/assets/src/views/StorageNotification.vue
index 4697c25b52f..b4b58abdbb1 100644
--- a/kolibri/core/assets/src/views/StorageNotification.vue
+++ b/kolibri/core/assets/src/views/StorageNotification.vue
@@ -1,6 +1,10 @@
 <template>
 
-  <div v-if="bannerOpened" class="banner" :style="{ background: $themeTokens.surface }">
+  <div
+    v-if="bannerOpened && !isDeviceRoute"
+    class="banner"
+    :style="{ background: $themeTokens.surface }"
+  >
     <div class="banner-inner">
       <h1 style="display: none">
         {{ $tr('bannerHeading') }}
@@ -99,6 +103,7 @@
     data() {
       return {
         bannerOpened: false,
+        isDeviceRoute: window.location.pathname.includes('device'),
       };
     },
     computed: {

From f277f68cfee85476b4d3b101c968a45708842fec Mon Sep 17 00:00:00 2001
From: iskipu <rvamsi599+github@gmail.com>
Date: Sat, 27 Jan 2024 12:54:40 +0530
Subject: [PATCH 2/5] Moved StorageNotification component to Learn plugin from
 core

---
 .../core/assets/src/views/CorePage/AppBarPage.vue | 12 ++----------
 .../learn/assets/src/views/LearnAppBarPage.vue    | 15 +++++++++++++++
 .../assets/src/views/StorageNotification.vue      |  9 ++-------
 3 files changed, 19 insertions(+), 17 deletions(-)
 rename kolibri/{core => plugins/learn}/assets/src/views/StorageNotification.vue (96%)

diff --git a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
index 4f3cb2508c9..01dcc4a5530 100644
--- a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
+++ b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
@@ -22,9 +22,7 @@
         type="indeterminate"
         :delay="false"
       />
-      <div aria-live="polite">
-        <StorageNotification :showBanner="showStorageNotification" />
-      </div>
+      <slot name="storageNotif"></slot>
     </ScrollingHeader>
 
     <div
@@ -56,12 +54,10 @@
   import ScrollingHeader from 'kolibri.coreVue.components.ScrollingHeader';
   import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
   import SideNav from 'kolibri.coreVue.components.SideNav';
-  import { LearnerDeviceStatus } from 'kolibri.coreVue.vuex.constants';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { isTouchDevice } from 'kolibri.utils.browserInfo';
+  import useUserSyncStatus from 'kolibri.coreVue.composables.useUserSyncStatus';
   import AppBar from '../AppBar';
-  import StorageNotification from '../StorageNotification';
-  import useUserSyncStatus from '../../composables/useUserSyncStatus';
 
   export default {
     name: 'AppBarPage',
@@ -69,7 +65,6 @@
       AppBar,
       ScrollingHeader,
       SideNav,
-      StorageNotification,
     },
     mixins: [commonCoreStrings],
     setup() {
@@ -136,9 +131,6 @@
       paddingLeftRight() {
         return this.isAppContext || this.windowIsSmall ? '8px' : '32px';
       },
-      showStorageNotification() {
-        return this.userDeviceStatus === LearnerDeviceStatus.INSUFFICIENT_STORAGE;
-      },
       showAppBarsOnScroll() {
         let show = true;
         if (this.isAppContextAndTouchDevice) {
diff --git a/kolibri/plugins/learn/assets/src/views/LearnAppBarPage.vue b/kolibri/plugins/learn/assets/src/views/LearnAppBarPage.vue
index 4a4d374f843..76055e752c9 100644
--- a/kolibri/plugins/learn/assets/src/views/LearnAppBarPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/LearnAppBarPage.vue
@@ -24,6 +24,15 @@
       <LearnTopNav ref="topNav" />
     </template>
 
+    <template #storageNotif>
+      <div
+        v-if="page === 'AppBarPage'"
+        aria-live="polite"
+      >
+        <StorageNotification :showBanner="showStorageNotification" />
+      </div>
+    </template>
+
     <slot></slot>
 
   </component>
@@ -36,8 +45,10 @@
   import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import { LearnerDeviceStatus } from 'kolibri.coreVue.vuex.constants';
   import LearnTopNav from './LearnTopNav';
   import DeviceConnectionStatus from './DeviceConnectionStatus.vue';
+  import StorageNotification from './StorageNotification';
 
   export default {
     name: 'LearnAppBarPage',
@@ -46,6 +57,7 @@
       ImmersivePage,
       LearnTopNav,
       DeviceConnectionStatus,
+      StorageNotification,
     },
     mixins: [commonCoreStrings],
 
@@ -78,6 +90,9 @@
       page() {
         return this.deviceId ? 'ImmersivePage' : 'AppBarPage';
       },
+      showStorageNotification() {
+        return this.userDeviceStatus === LearnerDeviceStatus.INSUFFICIENT_STORAGE;
+      },
     },
   };
 
diff --git a/kolibri/core/assets/src/views/StorageNotification.vue b/kolibri/plugins/learn/assets/src/views/StorageNotification.vue
similarity index 96%
rename from kolibri/core/assets/src/views/StorageNotification.vue
rename to kolibri/plugins/learn/assets/src/views/StorageNotification.vue
index b4b58abdbb1..7263e73696b 100644
--- a/kolibri/core/assets/src/views/StorageNotification.vue
+++ b/kolibri/plugins/learn/assets/src/views/StorageNotification.vue
@@ -1,10 +1,6 @@
 <template>
 
-  <div
-    v-if="bannerOpened && !isDeviceRoute"
-    class="banner"
-    :style="{ background: $themeTokens.surface }"
-  >
+  <div v-if="bannerOpened" class="banner" :style="{ background: $themeTokens.surface }">
     <div class="banner-inner">
       <h1 style="display: none">
         {{ $tr('bannerHeading') }}
@@ -57,7 +53,7 @@
   import { LearnerDeviceStatus } from 'kolibri.coreVue.vuex.constants';
   import urls from 'kolibri.urls';
   import redirectBrowser from 'kolibri.utils.redirectBrowser';
-  import useUserSyncStatus from '../composables/useUserSyncStatus';
+  import useUserSyncStatus from 'kolibri.coreVue.composables.useUserSyncStatus';
 
   export default {
     name: 'StorageNotification',
@@ -103,7 +99,6 @@
     data() {
       return {
         bannerOpened: false,
-        isDeviceRoute: window.location.pathname.includes('device'),
       };
     },
     computed: {

From 373d01d004bb35f868bdb8b07c2ee86f309e896e Mon Sep 17 00:00:00 2001
From: iskipu <rvamsi599+github@gmail.com>
Date: Tue, 20 Feb 2024 12:20:24 +0530
Subject: [PATCH 3/5] fix issues mentined in #11866

---
 .../plugins/learn/assets/src/views/StorageNotification.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/views/StorageNotification.vue b/kolibri/plugins/learn/assets/src/views/StorageNotification.vue
index 7263e73696b..0f29454887a 100644
--- a/kolibri/plugins/learn/assets/src/views/StorageNotification.vue
+++ b/kolibri/plugins/learn/assets/src/views/StorageNotification.vue
@@ -25,9 +25,10 @@
           <KButton
             v-if="hasDownloads"
             :text="$tr('goToDownloads')"
+            style="margin-right: 10px"
             appearance="raised-button"
             :secondary="true"
-            @click="closeBanner"
+            @click="openDownloads"
           />
           <KButton
             v-if="isAdmin"
@@ -164,6 +165,10 @@
           this.previouslyFocusedElement.focus();
         }
       },
+      openDownloads() {
+        const downloadsUrl = urls['kolibri:kolibri.plugins.learn:my_downloads']();
+        redirectBrowser(downloadsUrl);
+      },
       manageChannel() {
         const deviceManagementUrl = urls['kolibri:kolibri.plugins.device:device_management']();
         if (this.canManageContent && deviceManagementUrl) {

From 2ac4ea33d16c79560c1075894de02885da1eb7ad Mon Sep 17 00:00:00 2001
From: iskipu <rvamsi599+github@gmail.com>
Date: Thu, 29 Feb 2024 19:45:44 +0530
Subject: [PATCH 4/5] responsive button layout

---
 .../assets/src/views/StorageNotification.vue  | 71 ++++++++++++-------
 1 file changed, 45 insertions(+), 26 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/StorageNotification.vue b/kolibri/plugins/learn/assets/src/views/StorageNotification.vue
index 0f29454887a..359d804cdea 100644
--- a/kolibri/plugins/learn/assets/src/views/StorageNotification.vue
+++ b/kolibri/plugins/learn/assets/src/views/StorageNotification.vue
@@ -15,28 +15,31 @@
 
         <!-- Grid Buttons -->
         <KGridItem class="button-grid-item" :layout12="{ span: 12 }">
-          <KButton
-            :text="coreString('closeAction')"
-            style="margin-right: 10px"
-            appearance="flat-button"
-            :secondary="true"
-            @click="closeBanner"
-          />
-          <KButton
-            v-if="hasDownloads"
-            :text="$tr('goToDownloads')"
-            style="margin-right: 10px"
-            appearance="raised-button"
-            :secondary="true"
-            @click="openDownloads"
-          />
-          <KButton
-            v-if="isAdmin"
-            :text="$tr('manageChannels')"
-            appearance="raised-button"
-            :secondary="true"
-            @click="manageChannel"
-          />
+          <div class="button-layout">
+            <KButton
+              :text="coreString('closeAction')"
+              class="button-style"
+              appearance="flat-button"
+              :secondary="true"
+              @click="closeBanner"
+            />
+            <KButton
+              v-if="hasDownloads"
+              :text="$tr('goToDownloads')"
+              class="button-style"
+              appearance="raised-button"
+              :secondary="true"
+              @click="openDownloads"
+            />
+            <KButton
+              v-if="isAdmin"
+              :text="$tr('manageChannels')"
+              class="button-style"
+              appearance="raised-button"
+              :secondary="true"
+              @click="manageChannel"
+            />
+          </div>
         </KGridItem>
       </KGrid>
     </div>
@@ -251,10 +254,26 @@
     margin: 0 auto;
   }
 
-  .button-grid-item {
-    display: flex;
-    justify-content: flex-end;
-    min-height: 60px;
+  @media (min-width: 426px) {
+    .button-style {
+      margin-right: 10px;
+    }
+
+    .button-grid-item {
+      display: flex;
+      justify-content: flex-end;
+      min-height: 60px;
+    }
+  }
+  @media (max-width: 426px) {
+    .button-style {
+      margin-bottom: 5px;
+    }
+
+    .button-layout {
+      display: flex;
+      flex-direction: column;
+    }
   }
 
 </style>

From 6e3091b0d3fcccc5b64c082e9d4227f50d9ab8df Mon Sep 17 00:00:00 2001
From: iskipu <rvamsi599+github@gmail.com>
Date: Tue, 5 Mar 2024 21:28:47 +0530
Subject: [PATCH 5/5] making more responsive :)

---
 .../plugins/learn/assets/src/views/StorageNotification.vue  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/StorageNotification.vue b/kolibri/plugins/learn/assets/src/views/StorageNotification.vue
index 359d804cdea..3f1892d4f54 100644
--- a/kolibri/plugins/learn/assets/src/views/StorageNotification.vue
+++ b/kolibri/plugins/learn/assets/src/views/StorageNotification.vue
@@ -254,7 +254,7 @@
     margin: 0 auto;
   }
 
-  @media (min-width: 426px) {
+  @media (min-width: 509px) {
     .button-style {
       margin-right: 10px;
     }
@@ -265,9 +265,9 @@
       min-height: 60px;
     }
   }
-  @media (max-width: 426px) {
+  @media (max-width: 509px) {
     .button-style {
-      margin-bottom: 5px;
+      margin-bottom: 10px;
     }
 
     .button-layout {