diff options
| -rw-r--r-- | css/merged-share-auth.scss | 1 | ||||
| -rw-r--r-- | css/publicshareauth.scss | 26 | ||||
| -rw-r--r-- | src/mainPublicShareAuthSidebar.js | 28 |
3 files changed, 52 insertions, 3 deletions
diff --git a/css/merged-share-auth.scss b/css/merged-share-auth.scss index 5b7b1151e..dd134c5ec 100644 --- a/css/merged-share-auth.scss +++ b/css/merged-share-auth.scss @@ -1,2 +1,3 @@ +@import 'At.scss'; @import 'icons.scss'; @import 'publicshareauth.scss' diff --git a/css/publicshareauth.scss b/css/publicshareauth.scss index f685c9824..685c81776 100644 --- a/css/publicshareauth.scss +++ b/css/publicshareauth.scss @@ -5,9 +5,29 @@ * the style for the adjusted layout, which is not the proper one for them, and * this would cause the elements to "jump" to their final position once the * layout was adjusted. */ -#body-login.talk-sidebar-enabled { - flex-direction: row; - align-items: stretch; +body.talk-sidebar-enabled { + /* Move rules set for body by guest.scss to the wrapped body. */ + display: unset; + flex-direction: unset; + justify-content: unset; + align-items: unset; + + #body-login { + display: flex; + justify-content: center; + + background-position: 50% 50%; + background-repeat: repeat; + background-size: 275px, contain; + background-attachment: fixed; + + width: 100%; + height: 100%; + + /* Changed from guest.scss. */ + flex-direction: row; + align-items: stretch; + } } /* #body-login should be used to override the #content rules set in server. */ diff --git a/src/mainPublicShareAuthSidebar.js b/src/mainPublicShareAuthSidebar.js index 5af8a3e1b..1367b6432 100644 --- a/src/mainPublicShareAuthSidebar.js +++ b/src/mainPublicShareAuthSidebar.js @@ -51,6 +51,32 @@ Vue.prototype.OCA = OCA Vue.use(Vuex) +/** + * Wraps all the body contents in its own container. + * + * The root element of the layout needs to be flex, but the body element can not + * be in order to properly place the autocompletion panel using an absolute + * position. + */ +function wrapBody() { + const bodyElement = document.querySelector('body') + const bodyWrapperElement = document.createElement('div') + + while (bodyElement.childNodes.length) { + bodyWrapperElement.append(bodyElement.childNodes[0]) + } + + while (bodyElement.classList.length) { + bodyWrapperElement.classList.add(bodyElement.classList.item(0)) + bodyElement.classList.remove(bodyElement.classList.item(0)) + } + + bodyWrapperElement.setAttribute('id', bodyElement.getAttribute('id')) + bodyElement.removeAttribute('id') + + bodyElement.append(bodyWrapperElement) +} + function adjustLayout() { const contentElement = document.createElement('div') contentElement.setAttribute('id', 'content') @@ -67,6 +93,8 @@ function adjustLayout() { talkSidebarElement.setAttribute('id', 'talk-sidebar') document.querySelector('body').append(talkSidebarElement) + wrapBody() + document.querySelector('body').classList.add('talk-sidebar-enabled') } |