diff options
Diffstat (limited to 'core')
-rw-r--r-- | core/css/apps.scss | 193 | ||||
-rw-r--r-- | core/css/header.scss | 35 | ||||
-rw-r--r-- | core/css/mobile.scss | 227 | ||||
-rw-r--r-- | core/css/styles.scss | 21 | ||||
-rw-r--r-- | core/css/variables.scss | 7 | ||||
-rw-r--r-- | core/js/apps.js | 12 | ||||
-rw-r--r-- | core/js/tests/specs/appsSpec.js | 4 | ||||
-rw-r--r-- | core/templates/layout.public.php | 8 | ||||
-rw-r--r-- | core/templates/layout.user.php | 12 |
9 files changed, 229 insertions, 290 deletions
diff --git a/core/css/apps.scss b/core/css/apps.scss index a7898948f74..d524dd94bb7 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -16,7 +16,7 @@ * */ -/* BASE STYLING ---------------------------------------------------------- */ +/* BASE STYLING ------------------------------------------------------------ */ h2 { font-size: 20px; @@ -64,24 +64,16 @@ kbd { } -/* APP STYLING -------------------------------------------------------------- */ +/* APP STYLING ------------------------------------------------------------ */ -#app { - height: 100%; - width: 100%; - * { - box-sizing: border-box; - } +#content[class*='app-'] * { + box-sizing: border-box; } -/* APP-NAVIGATION ------------------------------------------------------------*/ - +/* APP-NAVIGATION ------------------------------------------------------------ */ /* Navigation: folder like structure */ - #app-navigation { - width: 250px; - height: 100%; - float: left; + width: $navigation-width; box-sizing: border-box; background-color: var(--color-main-background); -webkit-user-select: none; @@ -91,6 +83,8 @@ kbd { border-right: 1px solid var(--color-border); display: flex; flex-direction: column; + flex-grow: 0; + flex-shrink: 0; /* 'New' button */ .app-navigation-new { @@ -580,57 +574,85 @@ kbd { } } -/* APP-CONTENT ---------------------------------------------------------------*/ + +/* CONTENT --------------------------------------------------------- */ +#content { + /* header height */ + padding-top: $header-height; + box-sizing: border-box; + position: relative; + overflow-x: hidden; + display: flex; + /* trick: scroll #app-content and not the body + * to avoid double scrollbar with sidebar + */ + max-height: 100vh; +} + +/* APP-CONTENT AND WRAPPER ------------------------------------------ */ /* Part where the content will be loaded into */ #app-content { + z-index: 1000; + background-color: var(--color-main-background); position: relative; - height: 100%; - overflow-y: auto; + min-height: calc(100vh - #{$header-height}); + flex-basis: 100vw; + overflow: auto; /* no top border for first settings item */ > .section:first-child { border-top: none; } - &.with-app-sidebar { - margin-right: 27%; - } -} -#app-content-wrapper { - min-width: 100%; - min-height: 100%; -} + /* if app-content-list is present */ + #app-content-wrapper { + display: flex; + position: relative; + align-items: start; + .app-content-list, + .app-content-detail { + min-height: calc(100vh - #{$header-height}); + max-height: calc(100vh - #{$header-height}); + overflow-x: hidden; + overflow-y: auto; + } -/* APP-SIDEBAR ----------------------------------------------------------------*/ + /* CONTENT DETAILS AFTER LIST*/ + .app-content-detail { + /* grow full width */ + flex-grow: 1; + #app-navigation-toggle-back { + display: none; + } + } + } +} +/* APP-SIDEBAR ------------------------------------------------------------ */ /* - Sidebar: a sidebar to be used within #app-content - have it as first element within app-content in order to shrink other - sibling containers properly. Compare Files app for example. + Sidebar: a sidebar to be used within #content + #app-content will be shrinked properly */ #app-sidebar { - position: fixed; - top: 50px; - right: 0; - left: auto; - bottom: 0; - width: 27%; - min-width: 300px; + width: 27vw; + min-width: $sidebar-min-width; + max-width: $sidebar-max-width; display: block; + position: relative; background: var(--color-main-background); border-left: 1px solid var(--color-border); - -webkit-transition: margin-right 300ms; - transition: margin-right 300ms; overflow-x: hidden; overflow-y: auto; - visibility: visible; - z-index: 500; + flex-shrink: 0; + transition: 300ms width ease-in-out, + 300ms min-width ease-in-out; &.disappear { - visibility: hidden; + width: 0; + min-width: 0; } } -/* APP-SETTINGS ---------------------------------------------------------------*/ +/* APP-SETTINGS ------------------------------------------------------------ */ /* settings area */ #app-settings { // To the bottom w/ flex @@ -650,8 +672,6 @@ kbd { /* restrict height of settings and make scrollable */ max-height: 300px; overflow-y: auto; - border-right: 1px solid var(--color-border); - width: 250px; box-sizing: border-box; /* display input fields at full width */ @@ -679,8 +699,6 @@ kbd { } #app-settings-header { - border-right: 1px solid var(--color-border); - width: 250px; box-sizing: border-box; background-color: var(--color-main-background); } @@ -716,7 +734,7 @@ kbd { } } -/* GENERAL SECTION ---------------------------------------------------------- */ +/* GENERAL SECTION ------------------------------------------------------------ */ .section { display: block; padding: 30px; @@ -753,7 +771,7 @@ kbd { } } -/* TABS --------------------------------------------------------------------- */ +/* TABS ------------------------------------------------------------ */ .tabHeaders { display: inline-block; margin: 15px; @@ -786,7 +804,7 @@ kbd { } } -/* POPOVER MENU ------------------------------------------------------------- */ +/* POPOVER MENU ------------------------------------------------------------ */ $popoveritem-height: 38px; $popovericon-size: 16px; @@ -1007,23 +1025,7 @@ $popovericon-size: 16px; } } -/* CONTENT WRAPPER --------------------------------------------------------- */ -#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%; - overflow-x: hidden; - overflow-y: auto; - } -} - -/* CONTENT LIST ------------------------------------------------------------- */ +/* CONTENT LIST ------------------------------------------------------------ */ .app-content-list { width: 300px; border-right: 1px solid var(--color-border); @@ -1175,62 +1177,3 @@ $popovericon-size: 16px; } } } - -/* CONTENT ------------------------------------------------------------------ */ -.app-content-detail { - /* grow full width */ - flex-grow: 1; - - #app-navigation-toggle-back { - display: none; - } -} - -/* 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/header.scss b/core/css/header.scss index a3566f9a21e..7aeaed92265 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -49,7 +49,7 @@ left: 0; right: 0; z-index: 2000; - height: 50px; + height: $header-height; background-color: var(--color-primary); box-sizing: border-box; justify-content: space-between; @@ -81,7 +81,7 @@ max-width: 350px; max-height: 280px; right: 5px; - top: 50px; + top: $header-height; margin: 0; &:not(.popovermenu) { @@ -165,7 +165,7 @@ display: flex; justify-content: center; align-items: center; - width: 50px; + width: $header-height; height: 100%; cursor: pointer; opacity: 0.6; @@ -224,9 +224,9 @@ /* NAVIGATION --------------------------------------------------------------- */ nav[role='navigation'] { display: inline-block; - width: 50px; - height: 50px; - margin-left: -50px; + width: $header-height; + height: $header-height; + margin-left: -$header-height; } .header-left #navigation { @@ -439,28 +439,21 @@ nav[role='navigation'] { /* Apps menu */ #appmenu { - display: inline-block; - width: auto; - min-width: 50px; - height: 100%; - clear: both; + display: inline-flex; + min-width: $header-height; li { - float: left; - display: inline-block; position: relative; - vertical-align: top !important; - height: 100%; cursor: pointer; a { position: relative; - display: inline-block; + display: flex; margin: 0; - padding: 15px 15px; - height: 20px; - text-align: center; - vertical-align: top !important; + height: $header-height; + width: $header-height; + align-items: center; + justify-content: center; opacity: .6; } } @@ -582,7 +575,7 @@ nav[role='navigation'] { &:focus, &:active { - top: 50px; + top: $header-height; } } diff --git a/core/css/mobile.scss b/core/css/mobile.scss index 116d174989c..b0f85250493 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; + } -/* 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 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; + } -/* 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: -$navigation-width; + } -/* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/ -#app-navigation, -#app-content { - position: absolute !important; - top: 0; - left: 0; - right: 0; - bottom: 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; + } + } -#app-navigation { - width: 250px !important; -} + /* 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%); + } -#app-content { - width: 100% !important; - left: 0 !important; - background-color: var(--color-main-background); - overflow-x: hidden !important; - z-index: 1000; + /* end of media query */ } - -/* 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; -} - -#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; -} - -/* 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; -} - -table.multiselect thead { - left: 0 !important; -} - + #body-settings #app-content { + overflow-x: auto !important; + } -/* prevent overflow in user management controls bar */ -#usersearchform { - display: none; -} -#body-settings #controls { - min-width: 768px !important; -} + #app-navigation-toggle { + position: fixed; + display: inline-block !important; + top: $header-height; + 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; + } -/* 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%; -} + /* .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; + } -/* 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; -} + /* 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; + } -/* 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 eac6af307a2..30aa25d183c 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 { @@ -838,7 +819,7 @@ span.ui-icon { } .content { - max-height: calc(100% - 50px); + max-height: calc(100% - $header-height); height: 100%; overflow-y: auto; diff --git a/core/css/variables.scss b/core/css/variables.scss index 3cf77849395..b6bffea9739 100644 --- a/core/css/variables.scss +++ b/core/css/variables.scss @@ -75,3 +75,10 @@ $color-border-dark: nc-darken($color-main-background, 14%) !default; $border-radius: 3px !default; $font-face: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default; + + +// various structure data +$header-height: 50px; +$navigation-width: 300px; +$sidebar-min-width: 300px; +$sidebar-max-width: 500px; diff --git a/core/js/apps.js b/core/js/apps.js index 8aebbbd418c..b40883e88cf 100644 --- a/core/js/apps.js +++ b/core/js/apps.js @@ -27,9 +27,8 @@ */ exports.Apps.showAppSidebar = function($el) { var $appSidebar = $el || $('#app-sidebar'); - $appSidebar.removeClass('disappear') - .show('slide', { direction: 'right' }, 200); - $('#app-content').addClass('with-app-sidebar', 200).trigger(new $.Event('appresized')); + $appSidebar.removeClass('disappear'); + $('#content').addClass('with-app-sidebar').trigger(new $.Event('appresized')); }; /** @@ -40,11 +39,8 @@ */ exports.Apps.hideAppSidebar = function($el) { var $appSidebar = $el || $('#app-sidebar'); - $appSidebar.hide('slide', { direction: 'right' }, 100, - function() { - $appSidebar.addClass('disappear'); - }); - $('#app-content').removeClass('with-app-sidebar', 100).trigger(new $.Event('appresized')); + $appSidebar.addClass('disappear'); + $('#content').removeClass('with-app-sidebar').trigger(new $.Event('appresized')); }; /** diff --git a/core/js/tests/specs/appsSpec.js b/core/js/tests/specs/appsSpec.js index c3352e3e4a9..3a4c413bbd3 100644 --- a/core/js/tests/specs/appsSpec.js +++ b/core/js/tests/specs/appsSpec.js @@ -22,7 +22,7 @@ describe('Apps base tests', function() { describe('Sidebar utility functions', function() { beforeEach(function() { - $('#testArea').append('<div id="app-content">Content</div><div id="app-sidebar">The sidebar</div>'); + $('#testArea').append('<div id="content"><div id="app-content">Content</div><div id="app-sidebar">The sidebar</div></div>'); jQuery.fx.off = true; }); afterEach(function() { @@ -41,7 +41,7 @@ describe('Apps base tests', function() { }); it('triggers appresize event when visibility changed', function() { var eventStub = sinon.stub(); - $('#app-content').on('appresized', eventStub); + $('#content').on('appresized', eventStub); OC.Apps.showAppSidebar(); expect(eventStub.calledOnce).toEqual(true); OC.Apps.hideAppSidebar(); diff --git a/core/templates/layout.public.php b/core/templates/layout.public.php index 78f46f48a5a..07aff03127d 100644 --- a/core/templates/layout.public.php +++ b/core/templates/layout.public.php @@ -27,8 +27,7 @@ </head> <body id="<?php p($_['bodyid']);?>"> <?php include('layout.noscript.warning.php'); ?> -<header> - <div id="header" class="<?php p($_['header-classes']); ?>"> + <header id="header" class="<?php p($_['header-classes']); ?>"> <div class="header-left"> <span id="nextcloud"> <div class="logo logo-icon svg"></div> @@ -70,9 +69,7 @@ <?php } ?> </div> <?php } ?> - </div> -</header> -<div id="content-wrapper"> + </header> <div id="content" class="app-<?php p($_['appid']) ?>" role="main"> <?php print_unescaped($_['content']); ?> </div> @@ -81,7 +78,6 @@ <p class="info"><?php print_unescaped($theme->getLongFooter()); ?></p> </footer> <?php } ?> -</div> </body> </html> diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index b9eab8f4149..fbd71ec825b 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -28,13 +28,13 @@ <body id="<?php p($_['bodyid']);?>"> <?php include 'layout.noscript.warning.php'; ?> - <a href="#app-content" class="button primary skip-navigation skip-content"><?php p($l->t('Skip to main content')); ?></a> - <a href="#app-navigation" class="button primary skip-navigation"><?php p($l->t('Skip to navigation of app')); ?></a> + <a href="#app-content" class="button primary skip-navigation skip-content"><?php p($l->t('Skip to main content')); ?></a> + <a href="#app-navigation" class="button primary skip-navigation"><?php p($l->t('Skip to navigation of app')); ?></a> - <div id="notification-container"> - <div id="notification"></div> - </div> - <header role="banner"><div id="header"> + <div id="notification-container"> + <div id="notification"></div> + </div> + <header role="banner" id="header"> <div class="header-left"> <a href="<?php print_unescaped(link_to('', 'index.php')); ?>" id="nextcloud"> |