mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix breakpoint and shrinking of the content + list 

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2018-11-14 17:19:35 +01:00
parent fef51895c2
commit 2b7832d0c9
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
7 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/files_sharing/css/mobile.scss
View File

@ -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 */ /* make header scroll up for single shares, more view of content on small screens */
#header.share-file { #header.share-file {

2
apps/files_sharing/css/public.scss
View File

@ -207,7 +207,7 @@ thead {
} }
// hide the primary on public share on mobile // 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 { #body-public {
.header-right { .header-right {
#header-primary-action { #header-primary-action {

16
core/css/apps.scss
View File

@ -599,6 +599,15 @@ kbd {
/* APP-CONTENT AND WRAPPER ------------------------------------------ */ /* APP-CONTENT AND WRAPPER ------------------------------------------ */
/* Part where the content will be loaded into */ /* 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 { #app-content {
z-index: 1000; z-index: 1000;
background-color: var(--color-main-background); background-color: var(--color-main-background);
@ -626,7 +635,7 @@ kbd {
/* CONTENT DETAILS AFTER LIST*/ /* CONTENT DETAILS AFTER LIST*/
.app-content-details { .app-content-details {
/* grow full width */ /* grow full width */
flex-grow: 1; flex: 1 1 $min-content-width;
#app-navigation-toggle-back { #app-navigation-toggle-back {
display: none; display: none;
} }
@ -1100,7 +1109,6 @@ $popovericon-size: 16px;
/* CONTENT LIST ------------------------------------------------------------ */ /* CONTENT LIST ------------------------------------------------------------ */
.app-content-list { .app-content-list {
max-width: 300px;
@include position('sticky'); @include position('sticky');
top: $header-height; top: $header-height;
border-right: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
@ -1111,7 +1119,9 @@ $popovericon-size: 16px;
max-height: calc(100vh - #{$header-height}); max-height: calc(100vh - #{$header-height});
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; 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 */ /* Default item */
.app-content-list-item { .app-content-list-item {

4
core/css/mobile.scss
View File

@ -1,4 +1,4 @@
@media only screen and (max-width: 768px) { @media only screen and (max-width: $breakpoint-mobile) {
/* position share dropdown */ /* position share dropdown */
#dropdown { #dropdown {
@ -114,7 +114,7 @@
display: none; display: none;
} }
#body-settings #controls { #body-settings #controls {
min-width: 768px !important; min-width: $breakpoint-mobile !important;
} }
/* do not show dates in filepicker */ /* do not show dates in filepicker */

3
core/css/variables.scss
View File

@ -87,3 +87,6 @@ $header-height: 50px;
$navigation-width: 300px; $navigation-width: 300px;
$sidebar-min-width: 300px; $sidebar-min-width: 300px;
$sidebar-max-width: 500px; $sidebar-max-width: 500px;
// mobile
$breakpoint-mobile: 768px;

2
settings/css/settings.scss
View File

@ -905,7 +905,7 @@ span.version {
} }
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: $breakpoint-mobile) {
.store .section { .store .section {
width: 50%; width: 50%;
} }

2
tests/acceptance/features/bootstrap/FilesSharingAppContext.php
View File

@ -198,7 +198,7 @@ class FilesSharingAppContext implements Context, ActorAwareInterface {
PHPUnit_Framework_Assert::fail("The Share menu is not visible yet after $timeout seconds"); 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 // download item should not be shown in the menu (although it will be in
// the DOM). // the DOM).
PHPUnit_Framework_Assert::assertFalse( PHPUnit_Framework_Assert::assertFalse(