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 */
#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
@media only screen and (max-width: 768px) {
@media only screen and (max-width: $breakpoint-mobile) {
#body-public {
.header-right {
#header-primary-action {

16
core/css/apps.scss
View File

@ -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 {

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 */
#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 */

3
core/css/variables.scss
View File

@ -87,3 +87,6 @@ $header-height: 50px;
$navigation-width: 300px;
$sidebar-min-width: 300px;
$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 {
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");
}
// 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(