Skip to content

Commit

Permalink
Merge pull request #11383 from rtibbles/all_renderers_great_and_small
Browse files Browse the repository at this point in the history
Clean up renderer height styling behaviour
  • Loading branch information
rtibbles authored Oct 12, 2023
2 parents 34027f2 + 5404810 commit 0fbcc1a
Show file tree
Hide file tree
Showing 6 changed files with 36 additions and 80 deletions.
9 changes: 0 additions & 9 deletions kolibri/plugins/coach/assets/src/views/CoachImmersivePage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -120,12 +120,3 @@
};
</script>


<style lang="scss" scoped>
.coach-main {
margin: 85px auto 0;
}
</style>
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<template>

<section :style="{ backgroundColor: isExercise ? $themeTokens.surface : '' }">
<section>
<h2 v-if="isExercise" class="header">
{{ header }}
</h2>
<KContentRenderer
v-if="content.available"
:class="{ hof: isExercise }"
class="content-renderer"
:showCorrectAnswer="true"
:itemId="selectedQuestion"
:allowHints="false"
Expand Down Expand Up @@ -59,12 +59,8 @@

<style lang="scss" scoped>
.content-area-exercise {
padding: 16px;
}
.hof {
overflow-x: hidden; // .solutionarea's negative margin oversteps
.content-renderer {
height: 100vh;
}
.header {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,6 @@
@import '~kolibri-design-system/lib/styles/definitions';
$frame-topbar-height: 37px;
$ui-toolbar-height: 56px;
.fullscreen-header {
text-align: right;
Expand All @@ -261,7 +260,7 @@
@extend %momentum-scroll;
width: 100%;
height: calc(100vh - #{$frame-topbar-height} - #{$ui-toolbar-height});
height: calc(100% - #{$frame-topbar-height});
margin-bottom: -8px;
overflow: hidden;
}
Expand Down
8 changes: 5 additions & 3 deletions kolibri/plugins/learn/assets/src/views/ContentPage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -352,9 +352,11 @@

<style lang="scss" scoped>
.content {
z-index: 0;
max-height: 100vh;
.content-renderer {
// 61 pixels is the height of the Learning Activity Bar + 5px.
// This seems to be the largest height that the content renderer can be
// without causing the page to scroll.
height: calc(100vh - 61px);
}
</style>
77 changes: 24 additions & 53 deletions kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
Original file line number Diff line number Diff line change
Expand Up @@ -62,32 +62,35 @@
</div>
</div>
</transition>
<KGrid gutter="0">
<KGrid class="full-height-container" gutter="0">
<KGridItem
v-if="showSideBar"
class="full-height-container"
:layout8="{ span: 2 }"
:layout12="{ span: 3 }"
class="sidebar-container"
:class="{ 'mt-40': showControls }"
>
<SideBar
id="sidebar-container"
class="scroller-height"
:style="{ position: 'sticky', top: 0 }"
:outline="outline || []"
:goToDestination="goToDestination"
:focusDestPage="focusDestPage"
/>
</KGridItem>
<KGridItem
ref="pdfContainer"
class="full-height-container"
:layout8="{ span: showSideBar ? 6 : 8 }"
:layout12="{ span: showSideBar ? 9 : 12 }"
>
<RecycleList
id="pdf-container"
ref="recycleList"
:items="pdfPages"
:itemHeight="itemHeight"
:emitUpdate="true"
:style="{ height: `${elementHeight - 40}px` }"
class="pdf-container"
class="pdf-container scroller-height"
keyField="index"
@update="handleUpdate"
>
Expand Down Expand Up @@ -124,7 +127,6 @@
// polyfill necessary for recycle list
import 'intersection-observer';
import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
import responsiveElementMixin from 'kolibri.coreVue.mixins.responsiveElementMixin';
import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
import CoreFullscreen from 'kolibri.coreVue.components.CoreFullscreen';
import '../utils/domPolyfills';
Expand All @@ -144,7 +146,7 @@
RecycleList,
CoreFullscreen,
},
mixins: [responsiveWindowMixin, responsiveElementMixin, commonCoreStrings],
mixins: [responsiveWindowMixin, commonCoreStrings],
data: () => ({
progress: null,
scale: null,
Expand Down Expand Up @@ -252,11 +254,6 @@
});
}
},
elementHeight() {
if (this.recycleListIsMounted) {
this.debounceForceUpdateRecycleList();
}
},
showSideBar() {
this.$nextTick(() => {
if (!this.$refs.pdfContainer || !this.$refs.pdfContainer.$el) {
Expand All @@ -271,15 +268,7 @@
PDFJSLib.GlobalWorkerOptions.workerSrc =
__webpack_public_path__ + `pdfJSWorker-${__version}.js`;
},
destroyed() {
// Reset the overflow on the HTML tag that we set to hidden in created()
window.document.getElementsByTagName('html')[0].style.overflow = 'auto';
},
created() {
// Override, only on this component, the overflow style of the HTML tag
// so that PDFRenderer can scroll itself.
window.document.getElementsByTagName('html')[0].style.overflow = 'hidden';
this.worker = new PDFJSLib.PDFWorker();
this.worker.promise.catch(error => {
Expand Down Expand Up @@ -315,7 +304,7 @@
const viewPort = firstPage.getViewport({ scale: 1 });
this.firstPageHeight = viewPort.height;
this.firstPageWidth = viewPort.width;
this.scale = this.elementWidth / (this.firstPageWidth * this.screenSizeMultiplier);
this.scale = this.$el.clientWidth / (this.firstPageWidth * this.screenSizeMultiplier);
// Set the firstPageToRender into the pdfPages object so that we do not refetch the page
// from PDFJS when we do our initial render
Expand All @@ -328,6 +317,9 @@
pdfDocument.getOutline().then(outline => {
this.outline = outline;
this.showSideBar = outline && outline.length > 0 && this.windowIsLarge; // Remove if other tabs are already implemented
// Reduce the scale slightly if we are showing the sidebar
// at first load.
this.scale = this.showSideBar ? 0.75 * this.scale : this.scale;
});
});
})
Expand Down Expand Up @@ -473,11 +465,10 @@
calculateRecycleListHeight() {
return this.$refs.recycleList.$el.scrollHeight;
},
debounceForceUpdateRecycleList: debounce(function() {
this.forceUpdateRecycleList();
}, renderDebounceTime),
forceUpdateRecycleList() {
this.$refs.recycleList.updateVisibleItems(false);
if (this.$refs.recycleList) {
this.$refs.recycleList.updateVisibleItems(false);
}
},
updateProgress() {
if (this.forceDurationBasedProgress) {
Expand Down Expand Up @@ -660,21 +651,22 @@
@import '~kolibri-design-system/lib/styles/definitions';
$controls-height: 40px;
$top-bar-height: 32px;
$tool-bar-height: 56px;
.pdf-renderer {
@extend %momentum-scroll;
@extend %dropshadow-2dp;
position: relative;
height: calc(100vh - #{$top-bar-height} - #{$controls-height} + 16px);
overflow-y: hidden;
}
.pdf-container {
position: relative;
top: $controls-height;
overflow-y: auto;
}
.scroller-height {
height: calc(100% - #{$controls-height});
}
.controls {
Expand Down Expand Up @@ -712,11 +704,6 @@
}
.fullscreen-header {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 7;
display: flex;
height: $controls-height;
}
Expand All @@ -738,27 +725,11 @@
transform: translateY(-40px);
}
.mt-40 {
margin-top: 40px;
}
.sidebar-container {
height: calc(100vh - #{$tool-bar-height});
}
.pdf-renderer.pdf-controls-open .sidebar-container {
height: calc(100vh - #{$tool-bar-height} - #{$controls-height});
}
.pdf-renderer.pdf-full-screen .sidebar-container {
height: 100vh;
}
.pdf-renderer.pdf-full-screen.pdf-controls-open .sidebar-container {
height: calc(100vh - #{$controls-height});
.full-height-container {
height: 100%;
}
/deep/ .sidebar-container > div {
/deep/ .full-height-container > div {
height: 100%;
}
Expand Down
7 changes: 2 additions & 5 deletions kolibri/plugins/pdf_viewer/assets/src/views/SideBar/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
background: $themeTokens.surface,
}"
>
<nav :style="{ height: '100%' }">
<nav>
<div v-if="tabs.filter(t => !t.disabled).length > 1" :style="{ display: 'flex' }">
<div
v-for="tab in tabs"
Expand Down Expand Up @@ -144,10 +144,8 @@

<style scoped lang="scss">
$sidebar-nav-height: 48px;
.pdf-sidebar {
height: 100%;
overflow-y: auto;
box-shadow: inset -1px 2px 8px rgba(0, 0, 0, 0.16);
}
Expand All @@ -159,7 +157,6 @@
}
.sidebar-content {
height: calc(100% - #{$sidebar-nav-height});
overflow-y: auto;
}
Expand Down

0 comments on commit 0fbcc1a

Please sign in to comment.