summaryrefslogtreecommitdiffstats
path: root/core
diff options
context:
space:
mode:
Diffstat (limited to 'core')
-rw-r--r--core/css/apps.scss193
-rw-r--r--core/css/header.scss35
-rw-r--r--core/css/mobile.scss227
-rw-r--r--core/css/styles.scss21
-rw-r--r--core/css/variables.scss7
-rw-r--r--core/js/apps.js12
-rw-r--r--core/js/tests/specs/appsSpec.js4
-rw-r--r--core/templates/layout.public.php8
-rw-r--r--core/templates/layout.user.php12
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">