Skip to content

Commit

Permalink
Merge pull request #5131 from owncloud/scroll-issue
Browse files Browse the repository at this point in the history 
fix layout scrolling issue
  • Loading branch information
@kulmann
kulmann authored May 21, 2021
2 parents 6f6e8e8 + c4174fa commit 2604d61
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 116 deletions.
8 changes: 8 additions & 0 deletions changelog/unreleased/bugfix-scrolling-overflow
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
Bugfix: Prevent scrolling issues

In cases where the browser-window space was not enough to render all views
the ui ended up with weird scrolling behavior.

This has been fixed by restructuring the dom elements and giving them proper styles.

https://github.com/owncloud/web/pull/5131
22 changes: 14 additions & 8 deletions packages/web-app-files/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
:class="{ 'uk-visible@m': _sidebarOpen }"
@dragover="$_ocApp_dragOver"
>
<app-bar id="files-app-bar" :style="{ top: $_topBarVisible ? '60px' : '0' }" />
<app-bar id="files-app-bar" />
<upload-progress v-show="$_uploadProgressVisible" id="files-upload-progress" class="oc-p-s" />
<router-view id="files-view" />
</div>
Expand Down Expand Up @@ -57,10 +57,6 @@ export default {
return this.highlightedFile !== null
},
$_topBarVisible() {
return !this.publicPage() && !this.$route.meta.verbose
},
$_uploadProgressVisible() {
return this.inProgress.length > 0
}
Expand Down Expand Up @@ -115,7 +111,16 @@ export default {
</script>

<style lang="scss" scoped>
main {
height: 100%;
max-height: 100%;
overflow-y: hidden;
}
.files-list-wrapper {
height: 100%;
max-height: 100%;
overflow-y: auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: max-content max-content 1fr;
Expand All @@ -131,16 +136,17 @@ export default {
}
#files-sidebar {
position: sticky;
top: 60px;
max-height: calc(100vh - 60px);
height: 100%;
max-height: 100%;
overflow-y: auto;
}
#files-app-bar {
position: sticky;
height: auto;
z-index: 1;
grid-area: header;
top: 0;
}
#files-view {
Expand Down
2 changes: 1 addition & 1 deletion packages/web-app-files/src/mixins/filesListPositioning.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export default {
adjustTableHeaderPosition() {
this.$nextTick(() => {
const appBar = document.querySelector('#files-app-bar')
this.headerPosition = appBar.getBoundingClientRect().bottom
this.headerPosition = appBar.getBoundingClientRect().height
})
}
}
Expand Down
13 changes: 11 additions & 2 deletions packages/web-app-files/src/views/LocationPicker.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div id="files-location-picker" class="uk-flex uk-height-1-1">
<main id="files-location-picker" class="uk-flex uk-height-1-1">
<div tabindex="-1" class="files-list-wrapper uk-width-expand">
<div id="files-app-bar" class="oc-p-s">
<h1 class="location-picker-selection-info oc-mb" v-text="title" />
Expand Down Expand Up @@ -74,7 +74,7 @@
</template>
</div>
</div>
</div>
</main>
</template>

<script>
Expand Down Expand Up @@ -435,7 +435,16 @@ export default {
</script>

<style lang="scss" scoped>
#files-location-picker {
height: 100%;
max-height: 100%;
overflow-y: hidden;
}
.files-list-wrapper {
height: 100%;
max-height: 100%;
overflow-y: auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: max-content 1fr;
Expand Down
209 changes: 104 additions & 105 deletions packages/web-runtime/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,112 +4,110 @@
<skip-to target="main">
<translate>Skip to main</translate>
</skip-to>
<div id="web-container">
<div
v-if="user.isAuthenticated && !user.userReady"
class="loading-overlay"
:style="{
backgroundImage: 'url(' + configuration.theme.loginPage.backgroundImg + ')'
}"
>
<oc-spinner size="xlarge" :aria-label="$gettext('Loading')" class="uk-position-center" />
</div>
<template v-else-if="!showHeader">
<router-view name="fullscreen" />
</template>
<div v-else id="web-content" key="core-content" class="uk-flex uk-flex-stretch">
<transition :name="appNavigationAnimation">
<focus-trap v-if="isSidebarVisible" :active="isSidebarFixed && appNavigationVisible">
<oc-sidebar-nav
v-show="isSidebarVisible"
id="web-nav-sidebar"
v-touch:swipe.left="handleNavSwipe"
class="oc-app-navigation"
:accessible-label="$gettext('Navigation menu')"
:class="sidebarClasses"
>
<template #header>
<div class="uk-text-center">
<oc-button
v-if="isSidebarFixed"
variation="inverse"
appearance="raw"
class="web-sidebar-btn-close"
:aria-label="$gettext('Close navigation menu')"
@click="toggleAppNavigationVisibility"
>
<oc-icon name="close" />
</oc-button>
<router-link ref="navigationSidebarLogo" to="/">
<oc-logo :src="logoImage" :alt="sidebarLogoAlt" />
</router-link>
</div>
</template>
<template #nav>
<oc-list>
<oc-sidebar-nav-item
v-for="link in sidebarNavItems"
:key="link.route.path"
:active="link.active"
:target="link.route.path"
:icon="link.icon || link.iconMaterial"
>
{{ link.name }}
</oc-sidebar-nav-item>
</oc-list>
</template>
<template v-if="sidebar.sidebarFooterContentComponent" #footer>
<component :is="sidebar.sidebarFooterContentComponent" />
</template>
</oc-sidebar-nav>
</focus-trap>
</transition>
<div class="uk-width-expand web-content-container">
<top-bar
v-if="!publicPage() && !$route.meta.verbose"
id="oc-topbar"
class="uk-width-expand"
:applications-list="applicationsList"
:active-notifications="activeNotifications"
:user-id="user.username || user.id"
:user-display-name="user.displayname"
@toggleAppNavigationVisibility="toggleAppNavigationVisibility"
/>
<div id="main">
<message-bar :active-messages="activeMessages" @deleteMessage="$_deleteMessage" />
<router-view class="oc-app-container" name="app" />
</div>
<div
v-if="user.isAuthenticated && !user.userReady"
class="loading-overlay"
:style="{
backgroundImage: 'url(' + configuration.theme.loginPage.backgroundImg + ')'
}"
>
<oc-spinner size="xlarge" :aria-label="$gettext('Loading')" class="uk-position-center" />
</div>
<template v-else-if="!showHeader">
<router-view name="fullscreen" />
</template>
<div v-else id="web-content" key="core-content" class="uk-flex uk-flex-stretch">
<transition :name="appNavigationAnimation">
<focus-trap v-if="isSidebarVisible" :active="isSidebarFixed && appNavigationVisible">
<oc-sidebar-nav
v-show="isSidebarVisible"
id="web-nav-sidebar"
v-touch:swipe.left="handleNavSwipe"
class="oc-app-navigation"
:accessible-label="$gettext('Navigation menu')"
:class="sidebarClasses"
>
<template #header>
<div class="uk-text-center">
<oc-button
v-if="isSidebarFixed"
variation="inverse"
appearance="raw"
class="web-sidebar-btn-close"
:aria-label="$gettext('Close navigation menu')"
@click="toggleAppNavigationVisibility"
>
<oc-icon name="close" />
</oc-button>
<router-link ref="navigationSidebarLogo" to="/">
<oc-logo :src="logoImage" :alt="sidebarLogoAlt" />
</router-link>
</div>
</template>
<template #nav>
<oc-list>
<oc-sidebar-nav-item
v-for="link in sidebarNavItems"
:key="link.route.path"
:active="link.active"
:target="link.route.path"
:icon="link.icon || link.iconMaterial"
>
{{ link.name }}
</oc-sidebar-nav-item>
</oc-list>
</template>
<template v-if="sidebar.sidebarFooterContentComponent" #footer>
<component :is="sidebar.sidebarFooterContentComponent" />
</template>
</oc-sidebar-nav>
</focus-trap>
</transition>
<div class="uk-width-expand web-content-container">
<top-bar
v-if="!publicPage() && !$route.meta.verbose"
id="oc-topbar"
class="uk-width-expand"
:applications-list="applicationsList"
:active-notifications="activeNotifications"
:user-id="user.username || user.id"
:user-display-name="user.displayname"
@toggleAppNavigationVisibility="toggleAppNavigationVisibility"
/>
<div id="main">
<message-bar :active-messages="activeMessages" @deleteMessage="$_deleteMessage" />
<router-view class="oc-app-container" name="app" />
</div>
</div>
<transition
enter-active-class="uk-animation-fade uk-animation-fast"
leave-active-class="uk-animation-fade uk-animation-reverse uk-animation-fast"
name="custom-classes-transition"
>
<oc-modal
v-if="modal.displayed"
:variation="modal.variation"
:icon="modal.icon"
:title="modal.title"
:message="modal.message"
:has-input="modal.hasInput"
:focus-trap-active="true"
:input-label="modal.inputLabel"
:input-disabled="modal.inputDisabled"
:input-value="modal.inputValue"
:input-description="modal.inputDescription"
:input-error="modal.inputError"
:button-cancel-text="modal.cancelText"
:button-confirm-text="modal.confirmText"
:button-confirm-disabled="modal.confirmDisabled || !!modal.inputError"
@cancel="modal.onCancel"
@confirm="modal.onConfirm"
@input="modal.onInput"
@mounted="focusModal"
@beforeDestroy="focusModal"
/>
</transition>
</div>
<transition
enter-active-class="uk-animation-fade uk-animation-fast"
leave-active-class="uk-animation-fade uk-animation-reverse uk-animation-fast"
name="custom-classes-transition"
>
<oc-modal
v-if="modal.displayed"
:variation="modal.variation"
:icon="modal.icon"
:title="modal.title"
:message="modal.message"
:has-input="modal.hasInput"
:focus-trap-active="true"
:input-label="modal.inputLabel"
:input-disabled="modal.inputDisabled"
:input-value="modal.inputValue"
:input-description="modal.inputDescription"
:input-error="modal.inputError"
:button-cancel-text="modal.cancelText"
:button-confirm-text="modal.confirmText"
:button-confirm-disabled="modal.confirmDisabled || !!modal.inputError"
@cancel="modal.onCancel"
@confirm="modal.onConfirm"
@input="modal.onInput"
@mounted="focusModal"
@beforeDestroy="focusModal"
/>
</transition>
</div>
</template>
<script>
Expand Down Expand Up @@ -408,12 +406,12 @@ export default {
html,
body,
#web,
#web-container,
#web-content {
height: 100%;
overflow-y: hidden;
}
#web-container {
#web {
background-color: var(--oc-color-background-default);
}
Expand All @@ -438,6 +436,7 @@ body,
#main {
position: relative;
grid-area: main;
overflow-y: auto;
}
#oc-header {
Expand Down

0 comments on commit 2604d61

Please sign in to comment.