From 2b7832d0c92c34ff5fa52300ed849524a247405b Mon Sep 17 00:00:00 2001 From: "John Molakvoæ (skjnldsv)" Date: Wed, 14 Nov 2018 17:19:35 +0100 Subject: Fix breakpoint and shrinking of the content + list MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files_sharing/css/mobile.scss | 2 +- apps/files_sharing/css/public.scss | 2 +- core/css/apps.scss | 16 +++++++++++++--- core/css/mobile.scss | 4 ++-- core/css/variables.scss | 3 +++ settings/css/settings.scss | 2 +- .../features/bootstrap/FilesSharingAppContext.php | 2 +- 7 files changed, 22 insertions(+), 9 deletions(-) diff --git a/apps/files_sharing/css/mobile.scss b/apps/files_sharing/css/mobile.scss index 3aaa5718cab..0202fdd08d1 100644 --- a/apps/files_sharing/css/mobile.scss +++ b/apps/files_sharing/css/mobile.scss @@ -1,4 +1,4 @@ -@media only screen and (max-width: 768px) { +@media only screen and (max-width: $breakpoint-mobile) { /* make header scroll up for single shares, more view of content on small screens */ #header.share-file { diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss index c31b4f82bed..9d752115c59 100644 --- a/apps/files_sharing/css/public.scss +++ b/apps/files_sharing/css/public.scss @@ -207,7 +207,7 @@ thead { } // hide the primary on public share on mobile -@media only screen and (max-width: 768px) { +@media only screen and (max-width: $breakpoint-mobile) { #body-public { .header-right { #header-primary-action { diff --git a/core/css/apps.scss b/core/css/apps.scss index b7afc19705d..4991908e2de 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -599,6 +599,15 @@ kbd { /* APP-CONTENT AND WRAPPER ------------------------------------------ */ /* Part where the content will be loaded into */ + +/** + * !Important. We are defining the minimum requirement we want for flex + * Just before the mobile breakpoint we have $breakpoint-mobile (768px) - $navigation-width + * -> 468px. In that case we want 200px for the list and 268px for the content + */ +$min-list-width: 200px; +$min-content-width: $breakpoint-mobile - $navigation-width - $min-list-width; + #app-content { z-index: 1000; background-color: var(--color-main-background); @@ -626,7 +635,7 @@ kbd { /* CONTENT DETAILS AFTER LIST*/ .app-content-details { /* grow full width */ - flex-grow: 1; + flex: 1 1 $min-content-width; #app-navigation-toggle-back { display: none; } @@ -1100,7 +1109,6 @@ $popovericon-size: 16px; /* CONTENT LIST ------------------------------------------------------------ */ .app-content-list { - max-width: 300px; @include position('sticky'); top: $header-height; border-right: 1px solid var(--color-border); @@ -1111,7 +1119,9 @@ $popovericon-size: 16px; max-height: calc(100vh - #{$header-height}); overflow-y: auto; overflow-x: hidden; - flex: 0 1 300px; + flex: 1 1 $min-list-width; + min-width: $min-list-width; + max-width: $min-list-width + 100px; /* Default item */ .app-content-list-item { diff --git a/core/css/mobile.scss b/core/css/mobile.scss index f7f3827eba5..3e21672df82 100644 --- a/core/css/mobile.scss +++ b/core/css/mobile.scss @@ -1,4 +1,4 @@ -@media only screen and (max-width: 768px) { +@media only screen and (max-width: $breakpoint-mobile) { /* position share dropdown */ #dropdown { @@ -114,7 +114,7 @@ display: none; } #body-settings #controls { - min-width: 768px !important; + min-width: $breakpoint-mobile !important; } /* do not show dates in filepicker */ diff --git a/core/css/variables.scss b/core/css/variables.scss index a827629479c..d7419f0d744 100644 --- a/core/css/variables.scss +++ b/core/css/variables.scss @@ -87,3 +87,6 @@ $header-height: 50px; $navigation-width: 300px; $sidebar-min-width: 300px; $sidebar-max-width: 500px; + +// mobile +$breakpoint-mobile: 768px; diff --git a/settings/css/settings.scss b/settings/css/settings.scss index a7dbe0e7d8f..be1c6a08b68 100644 --- a/settings/css/settings.scss +++ b/settings/css/settings.scss @@ -905,7 +905,7 @@ span.version { } } -@media only screen and (max-width: 768px) { +@media only screen and (max-width: $breakpoint-mobile) { .store .section { width: 50%; } diff --git a/tests/acceptance/features/bootstrap/FilesSharingAppContext.php b/tests/acceptance/features/bootstrap/FilesSharingAppContext.php index fc589a84ac6..4be1ddf22c1 100644 --- a/tests/acceptance/features/bootstrap/FilesSharingAppContext.php +++ b/tests/acceptance/features/bootstrap/FilesSharingAppContext.php @@ -198,7 +198,7 @@ class FilesSharingAppContext implements Context, ActorAwareInterface { PHPUnit_Framework_Assert::fail("The Share menu is not visible yet after $timeout seconds"); } - // The acceptance tests are run in a window wider than 768px, so the + // The acceptance tests are run in a window wider than the mobile breakpoint, so the // download item should not be shown in the menu (although it will be in // the DOM). PHPUnit_Framework_Assert::assertFalse( -- cgit v1.2.3 From f8bed7d58577685234a100cdb5f55d4cca94096f Mon Sep 17 00:00:00 2001 From: "John Molakvoæ (skjnldsv)" Date: Wed, 14 Nov 2018 18:34:26 +0100 Subject: Allow apps to use the variables too MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/apps.scss | 9 ++++----- core/css/variables.scss | 2 ++ 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 4991908e2de..039374bf726 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -605,8 +605,7 @@ kbd { * Just before the mobile breakpoint we have $breakpoint-mobile (768px) - $navigation-width * -> 468px. In that case we want 200px for the list and 268px for the content */ -$min-list-width: 200px; -$min-content-width: $breakpoint-mobile - $navigation-width - $min-list-width; +$min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width; #app-content { z-index: 1000; @@ -1119,9 +1118,9 @@ $popovericon-size: 16px; max-height: calc(100vh - #{$header-height}); overflow-y: auto; overflow-x: hidden; - flex: 1 1 $min-list-width; - min-width: $min-list-width; - max-width: $min-list-width + 100px; + flex: 1 1 $list-min-width; + min-width: $list-min-width; + max-width: $list-max-width; /* Default item */ .app-content-list-item { diff --git a/core/css/variables.scss b/core/css/variables.scss index d7419f0d744..2ec9ba333b4 100644 --- a/core/css/variables.scss +++ b/core/css/variables.scss @@ -87,6 +87,8 @@ $header-height: 50px; $navigation-width: 300px; $sidebar-min-width: 300px; $sidebar-max-width: 500px; +$list-min-width: 200px; +$list-max-width: 300px; // mobile $breakpoint-mobile: 768px; -- cgit v1.2.3