From fe1099b06a865cdd60ce1b5e09ff1dea26ed1489 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Tue, 21 Nov 2023 16:35:26 +0300
Subject: [PATCH 1/5] Hides app bars on scroll down and show on scroll up

---
 .../assets/src/views/CorePage/AppBarPage.vue  | 91 +++++++++++++++----
 1 file changed, 74 insertions(+), 17 deletions(-)

diff --git a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
index 1cea45d6330..704fece352f 100644
--- a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
+++ b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
@@ -4,17 +4,20 @@
     here or in router, but somewhere -->
   <div class="main">
     <ScrollingHeader :scrollPosition="0">
-      <AppBar
-        ref="appBar"
-        class="app-bar"
-        :title="title"
-        @toggleSideNav="navShown = !navShown"
-        @showLanguageModal="languageModalShown = true"
-      >
-        <template #sub-nav>
-          <slot name="subNav"></slot>
-        </template>
-      </AppBar>
+      <transition mode="out-in">
+        <AppBar
+          v-if="showAppBarsOnScroll"
+          ref="appBar"
+          class="app-bar"
+          :title="title"
+          @toggleSideNav="navShown = !navShown"
+          @showLanguageModal="languageModalShown = true"
+        >
+          <template #sub-nav>
+            <slot name="subNav"></slot>
+          </template>
+        </AppBar>
+      </transition>
       <KLinearLoader
         v-if="isLoading"
         type="indeterminate"
@@ -32,12 +35,15 @@
       <slot></slot>
     </div>
 
-    <SideNav
-      ref="sideNav"
-      :navShown="navShown"
-      @toggleSideNav="navShown = !navShown"
-      @shouldFocusFirstEl="findFirstEl()"
-    />
+    <transition mode="out-in">
+      <SideNav
+        v-if="showAppBarsOnScroll"
+        ref="sideNav"
+        :navShown="navShown"
+        @toggleSideNav="navShown = !navShown"
+        @shouldFocusFirstEl="findFirstEl()"
+      />
+    </transition>
     <LanguageSwitcherModal
       v-if="languageModalShown"
       ref="languageSwitcherModal"
@@ -61,6 +67,7 @@
   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 MeteredConnectionNotificationModal from 'kolibri-common/components/MeteredConnectionNotificationModal';
   import AppBar from '../AppBar';
   import StorageNotification from '../StorageNotification';
@@ -108,6 +115,8 @@
         appBarHeight: 0,
         languageModalShown: false,
         navShown: false,
+        lastScrollTop: 0,
+        hideAppBars: true,
       };
     },
     computed: {
@@ -139,6 +148,13 @@
       showStorageNotification() {
         return this.userDeviceStatus === LearnerDeviceStatus.INSUFFICIENT_STORAGE;
       },
+      showAppBarsOnScroll() {
+        let show = true;
+        if (this.isAppContext && isTouchDevice) {
+          show = this.hideAppBars;
+        }
+        return show;
+      },
     },
     watch: {
       windowBreakpoint() {
@@ -150,6 +166,10 @@
       this.$nextTick(() => {
         this.appBarHeight = this.$refs.appBar.$el.scrollHeight || 0;
       });
+      window.addEventListener('scroll', this.handleScroll);
+    },
+    beforeUnmount() {
+      window.removeEventListener('scroll', this.handleScroll);
     },
     methods: {
       findFirstEl() {
@@ -157,6 +177,19 @@
           this.$refs.sideNav.focusFirstEl();
         });
       },
+      handleScroll() {
+        const scrollTop = window.scrollY;
+        //Is user scrolling up?
+        if (scrollTop > this.lastScrollTop) {
+          this.hideAppBars = false;
+        } else {
+          this.hideAppBars = true;
+        }
+
+        setTimeout(() => {
+          this.lastScrollTop = scrollTop;
+        }, 100);
+      },
     },
   };
 
@@ -167,6 +200,30 @@
 
   @import '~kolibri-design-system/lib/styles/definitions';
 
+  .v-leave {
+    opacity: 1;
+  }
+
+  .v-leave-active {
+    transition: opacity 0.5s;
+  }
+
+  .v-leave-to {
+    opacity: 0;
+  }
+
+  .v-enter {
+    opacity: 0;
+  }
+
+  .v-enter-active {
+    transition: opacity 0.5s;
+  }
+
+  .v-enter-to {
+    opacity: 1;
+  }
+
   .app-bar {
     @extend %dropshadow-8dp;
 

From 934d067968d080a37cc6657d12e090ca2246cb60 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Wed, 29 Nov 2023 18:45:09 +0300
Subject: [PATCH 2/5] adds throttling to the listener. Refactors code

---
 .../assets/src/views/CorePage/AppBarPage.vue  | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
index 704fece352f..2c4c8efdb86 100644
--- a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
+++ b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
@@ -61,6 +61,7 @@
 <script>
 
   import { mapGetters } from 'vuex';
+  import { throttle } from 'frame-throttle';
   import LanguageSwitcherModal from 'kolibri.coreVue.components.LanguageSwitcherModal';
   import ScrollingHeader from 'kolibri.coreVue.components.ScrollingHeader';
   import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
@@ -117,10 +118,14 @@
         navShown: false,
         lastScrollTop: 0,
         hideAppBars: true,
+        throttledHandleScroll: null,
       };
     },
     computed: {
       ...mapGetters(['isAppContext', 'isPageLoading']),
+      isAppContextAndTouchDevice() {
+        return this.isAppContext && isTouchDevice;
+      },
       isLoading() {
         return this.isPageLoading || this.loading;
       },
@@ -150,7 +155,7 @@
       },
       showAppBarsOnScroll() {
         let show = true;
-        if (this.isAppContext && isTouchDevice) {
+        if (this.isAppContextAndTouchDevice) {
           show = this.hideAppBars;
         }
         return show;
@@ -166,12 +171,25 @@
       this.$nextTick(() => {
         this.appBarHeight = this.$refs.appBar.$el.scrollHeight || 0;
       });
-      window.addEventListener('scroll', this.handleScroll);
+      this.addScrollListener();
     },
     beforeUnmount() {
-      window.removeEventListener('scroll', this.handleScroll);
+      this.removeScrollListener();
     },
     methods: {
+      addScrollListener() {
+        if (this.isAppContextAndTouchDevice) {
+          this.throttledHandleScroll = throttle(this.handleScroll);
+          window.addEventListener('scroll', this.throttledHandleScroll);
+        }
+      },
+      removeScrollListener() {
+        if (this.isAppContextAndTouchDevice) {
+          window.removeEventListener('scroll', this.throttledHandleScroll);
+          this.throttledHandleScroll.cancel();
+          this.throttledHandleScroll = null;
+        }
+      },
       findFirstEl() {
         this.$nextTick(() => {
           this.$refs.sideNav.focusFirstEl();
@@ -185,10 +203,7 @@
         } else {
           this.hideAppBars = true;
         }
-
-        setTimeout(() => {
-          this.lastScrollTop = scrollTop;
-        }, 100);
+        this.lastScrollTop = scrollTop;
       },
     },
   };

From 559c73be2da73007d1d8a4453474ace3fa2d8773 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Wed, 29 Nov 2023 18:49:51 +0300
Subject: [PATCH 3/5] adds throttling to the listener. Refactors code

---
 .../core/assets/src/views/CorePage/AppBarPage.vue  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
index 2c4c8efdb86..a8406b4f781 100644
--- a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
+++ b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
@@ -183,13 +183,6 @@
           window.addEventListener('scroll', this.throttledHandleScroll);
         }
       },
-      removeScrollListener() {
-        if (this.isAppContextAndTouchDevice) {
-          window.removeEventListener('scroll', this.throttledHandleScroll);
-          this.throttledHandleScroll.cancel();
-          this.throttledHandleScroll = null;
-        }
-      },
       findFirstEl() {
         this.$nextTick(() => {
           this.$refs.sideNav.focusFirstEl();
@@ -205,6 +198,13 @@
         }
         this.lastScrollTop = scrollTop;
       },
+      removeScrollListener() {
+        if (this.isAppContextAndTouchDevice) {
+          window.removeEventListener('scroll', this.throttledHandleScroll);
+          this.throttledHandleScroll.cancel();
+          this.throttledHandleScroll = null;
+        }
+      },
     },
   };
 

From ae72750c59adad009e1e6269ee63b3a6f54cda99 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Tue, 12 Dec 2023 23:07:28 +0300
Subject: [PATCH 4/5] fixes glitchy scroll bottm nav bar behavior

---
 .../src/views/DeviceSettingsPage/index.vue    | 58 ++++++++++++-------
 1 file changed, 38 insertions(+), 20 deletions(-)

diff --git a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue
index b71e2b29baf..da70f98a33b 100644
--- a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue
+++ b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue
@@ -210,7 +210,8 @@
             />
             <div
               v-show="setLimitForAutodownload"
-              class="left-margin"
+              class="left-margin limit-for-autodownload"
+              :class="$computedClass(limitForAutodownloadStyle)"
               :disabled="isRemoteContent"
             >
               <KTextbox
@@ -227,7 +228,10 @@
                 :floatingLabel="false"
                 @input="updateLimitForAutodownload"
               />
-              <div class="slider-section">
+              <div class="slider-section" :class="$computedClass(sliderSectionStyle)">
+                <p class="slider-min-max">
+                  0
+                </p>
                 <input
                   id="slider"
                   v-model="limitForAutodownload"
@@ -239,14 +243,9 @@
                   step="1"
                   @input="updateLimitForAutodownloadInput"
                 >
-                <div class="slider-constraints">
-                  <p class="slider-min-max">
-                    0
-                  </p>
-                  <p class="slider-min-max">
-                    {{ toGigabytes(freeSpace) }}
-                  </p>
-                </div>
+                <p class="slider-min-max">
+                  {{ toGigabytes(freeSpace) }}
+                </p>
               </div>
             </div>
           </div>
@@ -361,6 +360,7 @@
   import { availableLanguages, currentLanguage } from 'kolibri.utils.i18n';
   import sortLanguages from 'kolibri.utils.sortLanguages';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
+  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
   import { checkCapability } from 'kolibri.utils.appCapabilities';
   import commonDeviceStrings from '../commonDeviceStrings';
   import DeviceAppBarPage from '../DeviceAppBarPage';
@@ -400,6 +400,7 @@
     setup() {
       const { canRestart, restart, restarting } = useDeviceRestart();
       const { plugins, fetchPlugins, togglePlugin } = usePlugins();
+      const { windowIsSmall } = useKResponsiveWindow();
       const dataPlugins = ref(null);
 
       fetchPlugins.then(() => {
@@ -433,6 +434,7 @@
         dataPlugins,
         checkPluginChanges,
         checkAndTogglePlugins,
+        windowIsSmall,
       };
     },
     data() {
@@ -517,7 +519,22 @@
         });
         return this.readOnlyPaths >= 1;
       },
+      limitForAutodownloadStyle() {
+        const alignItems = this.windowIsSmall ? 'start' : 'center';
+        const flexDirection = this.windowIsSmall ? 'column' : 'row';
+        return {
+          alignItems,
+          flexDirection,
+        };
+      },
+      sliderSectionStyle() {
+        const paddingLeft = this.windowIsSmall ? '0px' : '20px';
+        return {
+          paddingLeft,
+        };
+      },
       sliderStyle() {
+        const width = this.windowIsSmall ? '35vw' : '12vw';
         if (this.notEnoughFreeSpace) {
           return {
             background: `linear-gradient(to right, ${this.$themeTokens.primary} 0%, ${
@@ -528,6 +545,7 @@
             '::-webkit-slider-thumb': {
               background: this.$themeTokens.fineLine,
             },
+            width,
           };
         } else {
           return {
@@ -541,6 +559,7 @@
             '::-webkit-slider-thumb': {
               background: this.$themeTokens.primary,
             },
+            width,
           };
         }
       },
@@ -1169,12 +1188,18 @@
     margin-left: 32px;
   }
 
+  .limit-for-autodownload {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
   .info-description {
     color: #616161;
   }
 
   input[type='range'] {
-    width: 264px;
+    width: 12vw;
     height: 2px;
     margin-left: 10px;
     appearance: none;
@@ -1190,24 +1215,17 @@
   }
 
   .download-limit-textbox {
-    display: inline-block;
     width: 70px;
   }
 
   .slider-section {
-    position: absolute;
-    display: inline-block;
-    padding-top: 10px;
-  }
-
-  .slider-constraints {
     display: flex;
+    flex-direction: row;
     justify-content: space-between;
-    margin-left: 10px;
+    padding-left: 20px;
   }
 
   .slider-min-max {
-    display: inline-block;
     margin-top: 5px;
     font-size: 14px;
     font-weight: 400;

From 2fa55a7aa90cf7429898824b2ed846072867f292 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Tue, 19 Dec 2023 09:46:13 +0300
Subject: [PATCH 5/5] removes css causing glitches during fast scroll in
 library page

---
 .../assets/src/views/CorePage/AppBarPage.vue  | 24 -------------------
 1 file changed, 24 deletions(-)

diff --git a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
index a8406b4f781..bf1e9e53d98 100644
--- a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
+++ b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
@@ -215,30 +215,6 @@
 
   @import '~kolibri-design-system/lib/styles/definitions';
 
-  .v-leave {
-    opacity: 1;
-  }
-
-  .v-leave-active {
-    transition: opacity 0.5s;
-  }
-
-  .v-leave-to {
-    opacity: 0;
-  }
-
-  .v-enter {
-    opacity: 0;
-  }
-
-  .v-enter-active {
-    transition: opacity 0.5s;
-  }
-
-  .v-enter-to {
-    opacity: 1;
-  }
-
   .app-bar {
     @extend %dropshadow-8dp;