diff --git a/apps/files_sharing/js/public.js b/apps/files_sharing/js/public.js index a2884468a6..06dc6a07d4 100644 --- a/apps/files_sharing/js/public.js +++ b/apps/files_sharing/js/public.js @@ -67,7 +67,7 @@ OCA.Sharing.PublicApp = { $el, { id: 'files.public', - scrollContainer: $('#content-wrapper'), + scrollContainer: $('#app-content'), dragOptions: dragOptions, folderDropOptions: folderDropOptions, fileActions: fileActions, diff --git a/core/css/apps.scss b/core/css/apps.scss index a7898948f7..411e2623c9 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -80,8 +80,9 @@ kbd { #app-navigation { width: 250px; - height: 100%; - float: left; + /* header height */ + height: calc(100vh - 50px); + position: fixed; box-sizing: border-box; background-color: var(--color-main-background); -webkit-user-select: none; @@ -583,9 +584,11 @@ kbd { /* APP-CONTENT ---------------------------------------------------------------*/ /* Part where the content will be loaded into */ #app-content { + margin-left: 250px; + z-index: 1000; + background-color: var(--color-main-background); position: relative; - height: 100%; - overflow-y: auto; + min-height: calc(100vh - 50px); /* no top border for first settings item */ > .section:first-child { border-top: none; @@ -595,11 +598,6 @@ kbd { } } -#app-content-wrapper { - min-width: 100%; - min-height: 100%; -} - /* APP-SIDEBAR ----------------------------------------------------------------*/ /* @@ -1008,21 +1006,26 @@ $popovericon-size: 16px; } /* CONTENT WRAPPER --------------------------------------------------------- */ +#content { + /* header height */ + padding-top: 50px; + box-sizing: border-box; + position: relative; +} +/* if app-content-list is present */ #app-content-wrapper { display: flex; position: relative; align-items: start; - height: 100%; - width: 100%; .app-content-list, .app-content-detail { - min-height: 100%; - max-height: 100%; + min-height: calc(100vh - 50px); + max-height: calc(100vh - 50px); overflow-x: hidden; overflow-y: auto; } } - + /* CONTENT LIST ------------------------------------------------------------- */ .app-content-list { width: 300px; @@ -1186,51 +1189,3 @@ $popovericon-size: 16px; } } -/* MOBILE ------------------------------------------------------------------- */ -/* Mobile width < 768px */ -@media only screen and (max-width: 768px) { - - /* full width for message list on mobile */ - .app-content-list { - width: 100%; - background: var(--color-main-background); - position: relative; - z-index: 100; - } - - /* overlay message detail on top of message list */ - .app-content-detail { - background: var(--color-main-background); - width: 100%; - left: 0; - height: 100%; - top: 0; - box-shadow: 0 0 100px rgba(100, 100, 100, .9); - position: absolute; - } - - /* Show app details page */ - #app-content.showdetails { - #app-navigation-toggle { - transform: translateX(-44px); - } - #app-navigation-toggle-back { - position: fixed; - display: inline-block !important; - top: 45px; - left: 0; - width: 44px; - height: 44px; - z-index: 149; - background-color: rgba(255, 255, 255, .7); - cursor: pointer; - opacity: .6; - transform: rotate(90deg); - } - .app-content-list { - transform: translateX(-100%); - } - } - - /* end of media query */ -} diff --git a/core/css/mobile.scss b/core/css/mobile.scss index 116d174989..646fb65474 100644 --- a/core/css/mobile.scss +++ b/core/css/mobile.scss @@ -1,124 +1,147 @@ @media only screen and (max-width: 768px) { -/* do not show update notification on mobile */ -#update-notification { - display: none !important; + /* position share dropdown */ + #dropdown { + margin-right: 10% !important; + width: 80% !important; + } + + /* fix name autocomplete not showing on mobile */ + .ui-autocomplete { + z-index: 1000 !important; + } + + /* fix error display on smaller screens */ + .error-wide { + width: 100%; + margin-left: 0 !important; + box-sizing: border-box; + } + + /* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/ + #app-navigation { + transform: translateX(-250px); + } + .snapjs-left { + #app-navigation { + transform: translateX(0); + } + } + + #app-content { + margin-left: 0; + } + + + /* full width for message list on mobile */ + .app-content-list { + width: 100%; + background: var(--color-main-background); + position: relative; + z-index: 100; + } + + /* since list and content are only displayed full window size + * we don't ant inner scrolling + */ + #app-content-wrapper { + .app-content-list, + .app-content-detail { + max-height: unset; + } + } + + /* Show app details page */ + #app-content.showdetails { + #app-navigation-toggle { + transform: translateX(-44px); + } + #app-navigation-toggle-back { + position: fixed; + display: inline-block !important; + top: 45px; + left: 0; + width: 44px; + height: 44px; + z-index: 149; + background-color: rgba(255, 255, 255, .7); + cursor: pointer; + opacity: .6; + transform: rotate(90deg); + } + .app-content-list { + transform: translateX(-100%); + } + + /* end of media query */ } - -/* position share dropdown */ -#dropdown { - margin-right: 10% !important; - width: 80% !important; -} - -/* fix name autocomplete not showing on mobile */ -.ui-autocomplete { - z-index: 1000 !important; -} - -/* fix error display on smaller screens */ -.error-wide { - width: 100%; - margin-left: 0 !important; - box-sizing: border-box; -} - - -/* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/ - -#app-navigation, -#app-content { - position: absolute !important; - top: 0; - left: 0; - right: 0; - bottom: 0; -} - -#app-navigation { - width: 250px !important; -} - -#app-content { - width: 100% !important; - left: 0 !important; - background-color: var(--color-main-background); - overflow-x: hidden !important; - z-index: 1000; -} - -/* allow horizontal scrollbar in settings + /* allow horizontal scrollbar in settings otherwise user management is not usable on mobile */ -#body-settings #app-content { - overflow-x: auto !important; -} + #body-settings #app-content { + overflow-x: auto !important; + } -#app-navigation-toggle { - position: fixed; - display: inline-block !important; - top: 50px; - left: 0; - width: 44px; - height: 44px; - z-index: 149; - background-color: var(--color-main-background-darker); - cursor: pointer; - opacity: .6; -} -#app-navigation-toggle:hover, -#app-navigation-toggle:focus { - opacity: 1; -} + #app-navigation-toggle { + position: fixed; + display: inline-block !important; + top: 50px; + left: 0; + width: 44px; + height: 44px; + z-index: 149; + background-color: var(--color-main-background-darker); + cursor: pointer; + opacity: 0.6; + } + #app-navigation-toggle:hover, + #app-navigation-toggle:focus { + opacity: 1; + } -/* position controls for apps with app-navigation */ -#app-navigation+#app-content #controls { - padding-left: 44px; -} + /* position controls for apps with app-navigation */ + #app-navigation + #app-content #controls { + padding-left: 44px; + } -/* .viewer-mode is when text editor, PDF viewer, etc is open */ -#body-user .app-files.viewer-mode #controls { - padding-left: 0 !important; -} -.app-files.viewer-mode #app-navigation-toggle { - display: none !important; -} + /* .viewer-mode is when text editor, PDF viewer, etc is open */ + #body-user .app-files.viewer-mode #controls { + padding-left: 0 !important; + } + .app-files.viewer-mode #app-navigation-toggle { + display: none !important; + } -table.multiselect thead { - left: 0 !important; -} + table.multiselect thead { + left: 0 !important; + } + /* prevent overflow in user management controls bar */ + #usersearchform { + display: none; + } + #body-settings #controls { + min-width: 768px !important; + } -/* prevent overflow in user management controls bar */ -#usersearchform { - display: none; -} -#body-settings #controls { - min-width: 768px !important; -} + /* do not show dates in filepicker */ + #oc-dialog-filepicker-content .filelist .filesize, + #oc-dialog-filepicker-content .filelist .date { + display: none; + } + #oc-dialog-filepicker-content .filelist .filename { + max-width: 80%; + } + /* fix controls bar jumping when navigation is slid out */ + .snapjs-left #app-navigation-toggle, + .snapjs-left #controls { + top: 0; + } + .snapjs-left table.multiselect thead { + top: 44px; + } -/* do not show dates in filepicker */ -#oc-dialog-filepicker-content .filelist .filesize, -#oc-dialog-filepicker-content .filelist .date { - display: none; -} -#oc-dialog-filepicker-content .filelist .filename { - max-width: 80%; -} - - -/* fix controls bar jumping when navigation is slid out */ -.snapjs-left #app-navigation-toggle, -.snapjs-left #controls { - top: 0; -} -.snapjs-left table.multiselect thead { - top: 44px; -} - - - -/* end of media query */ + /* end of media query */ } @media only screen and (max-width: 480px) { @@ -131,7 +154,7 @@ table.multiselect thead { } /* Arrow directly child of menutoggle */ #header .header-right > div { - &.openedMenu{ + &.openedMenu { &::after { display: block; } diff --git a/core/css/styles.scss b/core/css/styles.scss index eac6af307a..a4e8f62e9a 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -207,25 +207,6 @@ body { } } -#content { - position: relative; - height: 100%; - width: 100%; - .hascontrols { - margin-top: 45px; - } -} - -#content-wrapper { - position: absolute; - height: 100%; - width: 100%; - overflow-x: hidden; - /* prevent horizontal scrollbar */ - padding-top: 50px; - box-sizing: border-box; -} - /* allow horizontal scrollbar for personal and admin settings */ #body-settings:not(.snapjs-left) .app-settings { diff --git a/core/templates/layout.public.php b/core/templates/layout.public.php index 78f46f48a5..07aff03127 100644 --- a/core/templates/layout.public.php +++ b/core/templates/layout.public.php @@ -27,8 +27,7 @@
-getLongFooter()); ?>
-