diff --git a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue index 1cea45d6330..bf1e9e53d98 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 -->
- - - + + + + +
- + + + 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'; 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,10 +116,16 @@ appBarHeight: 0, languageModalShown: false, navShown: false, + lastScrollTop: 0, + hideAppBars: true, + throttledHandleScroll: null, }; }, computed: { ...mapGetters(['isAppContext', 'isPageLoading']), + isAppContextAndTouchDevice() { + return this.isAppContext && isTouchDevice; + }, isLoading() { return this.isPageLoading || this.loading; }, @@ -139,6 +153,13 @@ showStorageNotification() { return this.userDeviceStatus === LearnerDeviceStatus.INSUFFICIENT_STORAGE; }, + showAppBarsOnScroll() { + let show = true; + if (this.isAppContextAndTouchDevice) { + show = this.hideAppBars; + } + return show; + }, }, watch: { windowBreakpoint() { @@ -150,13 +171,40 @@ this.$nextTick(() => { this.appBarHeight = this.$refs.appBar.$el.scrollHeight || 0; }); + this.addScrollListener(); + }, + beforeUnmount() { + this.removeScrollListener(); }, methods: { + addScrollListener() { + if (this.isAppContextAndTouchDevice) { + this.throttledHandleScroll = throttle(this.handleScroll); + window.addEventListener('scroll', this.throttledHandleScroll); + } + }, findFirstEl() { this.$nextTick(() => { this.$refs.sideNav.focusFirstEl(); }); }, + handleScroll() { + const scrollTop = window.scrollY; + //Is user scrolling up? + if (scrollTop > this.lastScrollTop) { + this.hideAppBars = false; + } else { + this.hideAppBars = true; + } + this.lastScrollTop = scrollTop; + }, + removeScrollListener() { + if (this.isAppContextAndTouchDevice) { + window.removeEventListener('scroll', this.throttledHandleScroll); + this.throttledHandleScroll.cancel(); + this.throttledHandleScroll = null; + } + }, }, }; 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 @@ />
-
+
+

+ 0 +

-
-

- 0 -

-

- {{ toGigabytes(freeSpace) }} -

-
+

+ {{ toGigabytes(freeSpace) }} +

@@ -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;